/* B’s Portfolio 27 · Field Kit design system
   One shape (two 10 px cut corners), one 2 px stroke, one lime, one set of timings. */
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-latin-100_900.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-latin-ext-100_900.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-latin-400.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-latin-400_800.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-latin-ext-400_800.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
:root {
  color-scheme: dark;
  --ink: #0B0C0C; --ink-2: #121412; --panel: #171A17; --panel-2: #1E221D;
  --line: #3A3F38; --line-2: #262A25;
  --paper: #F3F0E8; --text-2: #D8D6CF; --muted: #A9AEA4;
  --lime: #C8FF32; --lime-hi: #D9FF6E; --lime-dim: #8DB322; --lime-ink: #0B0C0C;
  --silver: #C9CED6; --bronze: #C8905E;
  --display: "Archivo", "Arial Black", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --body: "Manrope", Arial, sans-serif;
  --notch: 10px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1440px;
  --header: 72px;
  --t-fast: 120ms; --t-mid: 240ms; --t-slow: 600ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
html, body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
::selection { background: var(--lime); color: var(--lime-ink); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--lime); color: var(--lime-ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
/* ---------- HUD type ---------- */
.hud { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hud::before { content: "> "; color: var(--lime); }
.h-display { margin: 10px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: clamp(36px, 5.2vw, 76px); line-height: .94; letter-spacing: -.03em; text-wrap: balance; }
.lede { margin-top: 12px; max-width: 680px; font-size: clamp(17px, 1.5vw, 20px); color: var(--text-2); }
/* ---------- buttons (notched, 2 px stroke) ---------- */
.btn { --bd: var(--paper); --fill: var(--ink); --fg: var(--paper);
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px;
  font: 700 15px/1 var(--body); color: var(--fg); text-decoration: none; background: none; border: 0; cursor: pointer; isolation: isolate;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  transition: transform var(--t-fast) var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bd); }
.btn::after { content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--notch) - 1px) 0, 100% 0, 100% calc(100% - var(--notch) + 1px), calc(100% - var(--notch) + 1px) 100%, 0 100%, 0 calc(var(--notch) - 1px));
  transition: background var(--t-fast) var(--ease); }
.btn:hover::after { --fill: var(--panel-2); background: var(--panel-2); }
.btn:active { transform: translateY(2px); }
.btn--primary { --bd: var(--lime); --fill: var(--lime); --fg: var(--lime-ink); }
.btn--primary:hover::after { background: var(--lime-hi); }
.btn--primary:active::after { background: var(--lime-dim); }
.btn--small { min-height: 44px; padding: 0 16px; font-size: 14px; }
.btn--icon { width: 48px; padding: 0; justify-content: center; }
.btn .arrow { font-family: var(--mono); font-weight: 500; }
.btn:focus-visible { outline: none; }
.btn:focus-visible::before { background: var(--lime); }
.btn--primary:focus-visible { box-shadow: none; }
.btn--primary:focus-visible::after { inset: 4px; }
.link { color: var(--paper); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link:hover { color: var(--lime); }
/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; height: var(--header); border-bottom: 1px solid var(--line-2); background: rgba(11,12,12,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.site-header .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; height: 100%; }
.mark { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 30px; line-height: 1; letter-spacing: -.02em; text-decoration: none; }
.mark i { font-style: normal; color: var(--lime); }
.ticks { display: flex; gap: 6px; justify-self: center; }
.tick { display: grid; gap: 7px; width: 112px; padding: 8px 0; color: var(--muted); text-decoration: none; }
.tick span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tick i { position: relative; display: block; height: 4px; overflow: hidden; background: var(--line); }
.tick i b { position: absolute; inset: 0; background: var(--lime); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tick[aria-current="true"] { color: var(--paper); }
.tick:hover { color: var(--paper); }
.actions { display: flex; align-items: center; gap: 10px; }
.motion-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: none; border: 0; cursor: pointer; }
.motion-switch i { position: relative; width: 40px; height: 22px; border: 2px solid var(--paper); }
.motion-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--lime); transition: transform var(--t-fast) var(--ease); }
.motion-switch[aria-pressed="false"] i::after { transform: translateX(18px); background: var(--muted); }
.motion-switch:hover { color: var(--paper); }
/* phone chapter dropdown (disclosure, not an app menu) */
.chapters { display: none; position: relative; }
.chapters-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; font: 500 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); background: var(--ink-2); border: 1px solid var(--line); cursor: pointer; }
.chapters-btn .chev { color: var(--lime); transition: transform var(--t-fast) var(--ease); }
.chapters-btn[aria-expanded="true"] { border-color: var(--lime); }
.chapters-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.chapters-panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 0; list-style: none; background: var(--panel); border: 1px solid var(--line); box-shadow: 8px 8px 0 var(--lime); }
.chapters-panel[hidden] { display: none; }
.chapters-panel a { display: grid; grid-template-columns: 38px 1fr; align-items: center; min-height: 52px; padding: 0 16px; border-top: 1px solid var(--line-2); font-weight: 700; text-decoration: none; }
.chapters-panel li:first-child a { border-top: 0; }
.chapters-panel a span { font: 500 12.5px var(--mono); color: var(--muted); }
.chapters-panel a[aria-current="true"] { background: #1D221A; box-shadow: inset 4px 0 0 var(--lime); }
.chapters-panel a[aria-current="true"] span { color: var(--lime); }
/* ---------- chapters ---------- */
.chapter { position: relative; padding: clamp(40px, 5vw, 72px) 0; border-bottom: 1px solid var(--line-2); }
.chapter-head { display: grid; gap: 0; margin-bottom: clamp(20px, 2.5vw, 32px); }
/* 01 hero */
.hero { padding-top: clamp(28px, 4vw, 56px); display: flex; align-items: center; overflow: hidden; }
.hero .grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 96px 96px; -webkit-mask-image: radial-gradient(ellipse at 72% 40%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse at 72% 40%, #000 25%, transparent 72%); opacity: .55; }
.hero .wrap { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.greeting { margin-top: 12px; font-size: 20px; color: var(--text-2); }
.name { margin: 6px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: clamp(54px, 8.2vw, 128px); line-height: .86; letter-spacing: -.035em; text-transform: uppercase; }
.name .ln { display: block; white-space: nowrap; }
.name .ch { display: inline-block; font-variation-settings: "wdth" var(--w, 125), "wght" var(--g, 900); transition: font-variation-settings 160ms linear; }
.name .ch.sp { width: .28em; }
.hero-lines { margin-top: 18px; max-width: 600px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
.hero-lines p + p { margin-top: 6px; color: var(--text-2); }
.proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 12px; font: 500 12.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; background: var(--panel); border: 1px solid var(--line); }
.chip i { flex: none; width: 8px; height: 8px; background: var(--lime); }
.chip.silver i { background: var(--silver); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-art { position: relative; height: min(66vh, 600px); }
.float { position: absolute; margin: 0; padding: 10px; background: var(--ink-2); border: 1px solid var(--line); text-decoration: none; transition: transform var(--t-mid) var(--ease); }
.float img { width: 100%; height: auto; }
.float figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.float figcaption b { color: var(--lime); font-weight: 500; }
.float::before, .float::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--lime); }
.float::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.float::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.float:hover { z-index: 3; }
.f1 { width: 38%; top: 0; right: 0; --r: 2deg; }
.f2 { width: 46%; top: 50%; left: 0; --r: -3deg; }
.f3 { width: 40%; bottom: 0; right: 6%; --r: 1deg; }
.float { transform: rotate(var(--r)) translate3d(var(--dx, 0), var(--dy, 0), 0); }
.reticle { position: absolute; z-index: 4; top: 30%; right: 48%; width: 30px; height: 30px; border: 2px solid var(--lime); border-radius: 50%; pointer-events: none; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--lime); }
.reticle::before { left: 50%; top: -9px; bottom: -9px; width: 2px; transform: translateX(-50%); }
.reticle::after { top: 50%; left: -9px; right: -9px; height: 2px; transform: translateY(-50%); }
/* 02 journey: a level map */
.levels { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.levels::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.level { position: relative; display: grid; align-content: start; gap: 10px; }
.level .node { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; font: 700 14px var(--mono); color: var(--lime-ink); background: var(--lime); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.level:not(.now) .node { color: var(--paper); background: var(--panel); outline: 2px solid var(--line); outline-offset: -2px; }
.level .yrs { margin-top: 6px; font: 500 13px var(--mono); letter-spacing: .06em; color: var(--lime); }
.level h3 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 21px; line-height: 1.1; }
.level .role { font: 500 12.5px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.level p { font-size: 15.5px; color: var(--text-2); }
.level .logo { height: 32px; width: auto; max-width: 132px; padding: 5px 8px; object-fit: contain; object-position: left; background: var(--paper); filter: grayscale(1); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 9px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line); color: var(--text-2); }
.tag.award { border-color: var(--silver); color: var(--silver); }
.tag.award::before { content: ""; width: 7px; height: 7px; margin-right: 7px; background: var(--silver); }
.tag.draft { border-style: dashed; border-color: var(--muted); color: var(--muted); }
/* 05 contact + quiet ending */
.contact { text-align: left; }
.contact .h-display { font-size: clamp(48px, 9vw, 140px); text-transform: uppercase; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; max-width: 980px; }
.contact-item { display: grid; gap: 6px; min-height: 84px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color var(--t-fast) var(--ease); }
.contact-item:hover { border-color: var(--lime); }
.contact-item.primary { border-color: var(--lime); }
.contact-item .k { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.contact-item .v { font-weight: 700; font-size: 17px; word-break: break-word; }
.contact-item .v .arrow { font-family: var(--mono); color: var(--lime); }
.copy-note { min-height: 1.4em; margin-top: 12px; font: 500 13px var(--mono); color: var(--lime); }
.quiet { padding: 64px 0 40px; text-align: center; font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.quiet .mark { display: inline-block; margin-bottom: 18px; font-size: 44px; color: var(--paper); text-transform: none; letter-spacing: -.02em; }
/* ---------- case page ---------- */
.crumbs { padding: 16px 0 0; font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--lime); }
.case-hero { padding: 18px 0 28px; }
.case-hero .client { margin-top: 14px; font: 500 14px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); }
.case-hero h1 { margin: 8px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: clamp(44px, 7.5vw, 120px); line-height: .9; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.facts { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); justify-content: start; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); }
.facts li { display: grid; gap: 4px; padding: 12px 18px; border-left: 1px solid var(--line); }
.facts li:first-child { border-left: 0; }
.facts dt, .facts .k { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.facts .v { font-weight: 700; }
.facts .award .v { color: var(--silver); }
.case-lead { margin: 0 0 32px; }
.case-lead .stage { position: relative; background: #0f110f; border: 1px solid var(--line); }
.case-lead .stage img, .case-lead .stage video { width: 100%; height: auto; max-height: 82vh; object-fit: contain; margin: 0 auto; }
.case-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); padding-bottom: 36px; border-bottom: 1px solid var(--line-2); }
.case-body h2 { margin: 0 0 14px; font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case-body h2::before { content: "> "; color: var(--lime); }
.case-body .idea { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; }
.did { margin: 0; padding: 0; list-style: none; }
.did li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--line-2); }
.did li::before { content: "→"; position: absolute; left: 0; font-family: var(--mono); color: var(--lime); }
.credits { margin-top: 28px; font: 500 13.5px/1.7 var(--mono); color: var(--text-2); }
.draft-note { margin-top: 24px; padding: 14px 16px; border: 1px dashed var(--muted); font: 500 13px/1.5 var(--mono); color: var(--muted); }
.draft-note b { color: var(--lime); font-weight: 500; }
.case-more { padding: 32px 0 16px; }
.case-more h2 { margin: 0 0 22px; font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: 30px; }
.next-case { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 0 40px; border-top: 1px solid var(--line-2); }
.next-case a { text-decoration: none; }
.next-case .k { font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.next-case .t { display: block; margin-top: 6px; font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: clamp(26px, 3.4vw, 44px); line-height: 1; }
.next-case a:hover .t { color: var(--lime); }
.tile { position: relative; display: block; width: 100%; padding: 0; background: #0f110f; border: 1px solid var(--line-2); cursor: zoom-in; transition: border-color var(--t-fast) var(--ease); }
.tile:hover { border-color: var(--lime); }
.tile img { width: 100%; height: auto; }
.film { position: relative; background: #0f110f; border: 1px solid var(--line-2); }
.film video { width: 100%; height: auto; }
.film figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* ---------- collection page ---------- */
.coll-hero { padding: 18px 0 20px; }
.coll-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.coll-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font: 500 12.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); text-decoration: none; border: 1px solid var(--line); }
.coll-nav a:hover { border-color: var(--lime); color: var(--paper); }
.coll-nav a[aria-current="page"] { color: var(--lime-ink); background: var(--lime); border-color: var(--lime); }
.project { padding: 32px 0; border-top: 1px solid var(--line-2); }
.project-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; margin-bottom: 16px; }
.project-head h2 { margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 116%; font-size: clamp(26px, 3vw, 40px); line-height: 1; letter-spacing: -.02em; }
.project-head .meta { font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: right; }
.project-head .meta b { color: var(--lime); font-weight: 500; }
.project-head p { grid-column: 1 / -1; max-width: 760px; color: var(--text-2); }
.film-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
/* ---------- viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr; background: rgba(8,9,9,.97); }
.viewer[hidden] { display: none; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--gutter); border-bottom: 1px solid var(--line-2); }
.viewer-bar .count { font: 500 14px var(--mono); letter-spacing: .06em; color: var(--lime); }
.viewer-bar .title { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 20px var(--gutter); }
.viewer-stage img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; }
.viewer-nav { display: flex; gap: 8px; }
/* ---------- footer ---------- */
.site-footer { padding: 28px 0 40px; border-top: 1px solid var(--line-2); font: 500 12.5px var(--mono); letter-spacing: .05em; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.site-footer a { color: var(--muted); }
/* ---------- entrance motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
html.no-motion .reveal, html:not(.js) .reveal { opacity: 1; transform: none; }
html.no-motion *, html.no-motion *::before, html.no-motion *::after { transition-duration: 0ms !important; animation: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; }
* { transition-duration: 0ms !important; }

}
/* ---------- responsive ---------- */
@media (max-width: 1180px) {
.tick { width: 84px; }
.tick span { font-size: 11px; }
.actions .btn--work { display: none; }

}
@media (max-width: 980px) {
.site-header .wrap { grid-template-columns: auto 1fr auto; gap: 14px; }
.ticks { display: none; }
.chapters { display: block; }
.actions .btn--cv { display: none; }
.motion-switch span { display: none; }
.hero { min-height: 0; }
.hero .wrap { grid-template-columns: 1fr; }
.hero-art { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.float { position: relative; inset: auto; width: auto; }
.f3 { grid-column: 1 / -1; width: 70%; justify-self: center; }
.reticle { display: none; }
.levels { grid-template-columns: 1fr; gap: 28px; }
.levels::before { left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px); }
.level { grid-template-columns: 48px 1fr; column-gap: 16px; }
.level > :not(.node) { grid-column: 2; }
.level .node { grid-row: 1 / span 6; }
.contact-grid { grid-template-columns: 1fr 1fr; }
.case-body { grid-template-columns: 1fr; }
.facts { grid-template-columns: 1fr 1fr; }
.facts li { border-left: 0; border-top: 1px solid var(--line); }
.facts li:nth-child(-n+2) { border-top: 0; }
.facts li:nth-child(even) { border-left: 1px solid var(--line); }

}
@media (max-width: 640px) {
:root { --header: 64px; }
html, body { font-size: 16px; }
.mark { font-size: 24px; }
.name { font-size: clamp(36px, 11vw, 60px); }
.actions .btn { min-height: 44px; padding: 0 14px; font-size: 14px; }
.contact-grid { grid-template-columns: 1fr; }
.hero-art { grid-template-columns: 1fr 1fr; }
.project-head { grid-template-columns: 1fr; }
.project-head .meta { text-align: left; }
.next-case { flex-direction: column; align-items: flex-start; }

}
/* hero shuffle frames: fixed shapes, complete images */
.float .frame { display: block; aspect-ratio: 4 / 5; background: #0f110f; overflow: hidden; }
.f2 .frame { aspect-ratio: 4 / 3; }
.f3 .frame { aspect-ratio: 1 / 1; }
.float .frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity 420ms var(--ease); }
.float .frame img.out { opacity: 0; }
.float figcaption span, .float figcaption b { transition: opacity 420ms var(--ease); }
.float.swapping figcaption span, .float.swapping figcaption b { opacity: 0; }
/* behind-the-scenes photos: Marathon-style glitch and redaction */
.glitch { position: relative; margin: 0; overflow: hidden; background: #0f110f; border: 1px solid var(--line); max-width: 100%; }
.glitch img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(.92); }
.glitch::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(11,12,12,.32) 0 1px, transparent 1px 3px); }
.glitch .g { position: absolute; inset: 0; z-index: 1; background: var(--img) center / 100% 100% no-repeat; clip-path: inset(100% 0 0 0); pointer-events: none; }
.glitch .g1 { filter: grayscale(1) contrast(1.4); animation: slice-a 6.5s steps(1, end) infinite; }
.glitch .g2 { filter: grayscale(1) sepia(1) hue-rotate(38deg) saturate(7) brightness(1.1); mix-blend-mode: screen; animation: slice-b 6.5s steps(1, end) infinite 1.3s; }
.glitch:hover .g1, .glitch:hover .g2 { animation-duration: .9s; }
@keyframes slice-a { 0%, 90%, 100% { clip-path: inset(100% 0 0 0); transform: none; } 91% { clip-path: inset(18% 0 64% 0); transform: translateX(-7px); } 93% { clip-path: inset(52% 0 31% 0); transform: translateX(9px); } 95% { clip-path: inset(8% 0 84% 0); transform: translateX(-4px); } 97% { clip-path: inset(70% 0 12% 0); transform: translateX(5px); } }
@keyframes slice-b { 0%, 92%, 100% { clip-path: inset(100% 0 0 0); transform: none; } 93% { clip-path: inset(40% 0 44% 0); transform: translateX(6px); } 95% { clip-path: inset(76% 0 8% 0); transform: translateX(-8px); } 97% { clip-path: inset(24% 0 66% 0); transform: translateX(3px); } }
.glitch .redact { position: absolute; z-index: 3; top: var(--t); left: var(--l); width: var(--w); height: var(--h); min-height: 10px; background: var(--ink); transform: rotate(-2deg); }
.glitch .redact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lime); transform: translate(4px, -3px); }
.glitch figcaption { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 6px 10px; font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: rgba(11,12,12,.86); }
.portraits { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; margin: 0 0 clamp(24px, 3vw, 36px); }
html.no-motion .glitch .g { animation: none; }
@media (prefers-reduced-motion: reduce) {
.glitch .g { animation: none; } 
}
@media (max-width: 640px) {
.portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
}
/* One rule for thumbnails and frames: the picture fills its frame, no empty bars.
   Full pieces stay complete in the viewer, walls and case pages. */
.float .frame img, .glitch img { object-fit: cover; object-position: 50% 40%; }
/* glitch fixes: bars sit as ink with a lime offset, service photos run edge to edge at 4:3 */
.glitch .g { background-size: cover; background-position: 50% 40%; }
.glitch .redact { box-shadow: 4px -3px 0 var(--lime); }
.glitch .redact::before { content: none; }
/* ================= Hall of Fame showcase: one composed stage per project ================= */
.showcase { display: grid; gap: clamp(48px, 6vw, 88px); }
.sc { min-width: 0; }
.sc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 10px 24px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.sc-title { display: flex; align-items: end; gap: 16px; min-width: 0; }
.sc-num { flex: none; padding: 5px 9px; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--lime-ink, #0B0C0C); background: var(--lime); }
.sc-head .client { display: block; font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-head h3 { margin: 2px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 122%; font-size: clamp(26px, 3.2vw, 44px); line-height: .96; letter-spacing: -.025em; text-wrap: balance; }
.sc-head .tags { justify-content: flex-end; margin: 0; }
.sc-open { flex: none; justify-self: end; font: 500 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); text-decoration: none; padding: 8px 0; border-bottom: 2px solid var(--lime); white-space: nowrap; }
.sc-open:hover { color: var(--lime); }
.sc-stage { min-width: 0; }
.sc-stage .tile { border: 0; overflow: hidden; }
.sc-stage .tile img { display: block; transition: transform var(--t-slow) var(--ease), filter var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease); }
.sc-stage .tile:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
/* Power Horse: three posters, the hero one forward */
.bold-trio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(10px, 1.6vw, 24px); padding: 0 clamp(0px, 3vw, 48px); }
.bold-trio .tile { background: transparent; aspect-ratio: 2329 / 3326; }
.bold-trio .tile img { width: 100%; height: 100%; object-fit: cover; }
.bold-trio .side img { filter: saturate(.75) brightness(.72); }
.bold-trio .side:hover img, .bold-trio .side:focus-visible img { filter: none; }
.bold-trio .hero-piece { position: relative; z-index: 1; outline: 2px solid var(--lime); outline-offset: 6px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.bold-trio .side:first-child { transform: rotate(-2.5deg) translateX(8%); }
.bold-trio .side:last-child { transform: rotate(2.5deg) translateX(-8%); }
.bold-trio .tile { transition: transform var(--t-slow) var(--ease); }
.bold-trio .side:hover { transform: rotate(0) translateX(0) scale(1.02); z-index: 2; }
/* Brand boards (from B’s Portfolio 26) */
.brand-board { --board-gap: clamp(4px, .5vw, 8px); display: grid; width: 100%; gap: var(--board-gap); }
.brand-board .brand-tile { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 0; }
.brand-board .brand-tile img { width: 100%; height: 100%; object-fit: var(--tile-fit, cover); object-position: var(--tile-position, 50% 50%); }
.brand-board .brand-tile:hover img { transform: scale(1.03); }
.brand-board--nescafe { aspect-ratio: 8 / 5; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); grid-template-areas:
  "city city city city collage collage range range"
  "pack pack lead lead lead lead range range"
  "pack pack lead lead lead lead story story"
  "mug mug editions editions detail detail story story"; }
.brand-board--air-sphinx, .brand-board--we-rebranding { --board-gap: 0px; aspect-ratio: 16 / 9; grid-template-columns: minmax(0, 36.7fr) repeat(3, minmax(0, 21.1fr)); grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); }
.brand-board--air-sphinx { grid-template-areas: "mark poster-a poster-b poster-c" "arabic plane portrait application"; }
.brand-board--we-rebranding { grid-template-areas: "mark facade sign merch" "arabic phone billboard patterns"; }
.brand-board--air-sphinx .brand-tile.bt-mark img, .brand-board--air-sphinx .brand-tile.bt-arabic img, .brand-board--we-rebranding .brand-tile.bt-mark img, .brand-board--we-rebranding .brand-tile.bt-arabic img { object-fit: contain; }
/* Nescafé: tall boards slowly pan through their frame */
.brand-board--nescafe .brand-tile img.pan { animation: nes-pan var(--pan-dur, 16s) ease-in-out var(--pan-delay, 0s) infinite alternate both; }
.brand-board--nescafe .brand-tile:hover img.pan, .brand-board--nescafe .brand-tile:focus-visible img.pan { animation-play-state: paused; }
@keyframes nes-pan { 0%, 8% { object-position: var(--pan-from, 50% 0%); } 92%, 100% { object-position: var(--pan-to, 50% 100%); } }
/* Spotify: three films, the bag that talks, and an endless strip */
.spot-films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); align-items: start; }
.sc-film { margin: 0; background: #0f110f; border: 1px solid var(--line-2); }
.sc-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.sc-film figcaption { padding: 7px 10px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bus-wrap { position: relative; z-index: 2; }
.cameo { position: absolute; right: -9%; top: 52%; width: 46%; pointer-events: none; transform: rotate(4deg); transition: transform 700ms cubic-bezier(.5, -0.4, .3, 1.3), opacity 500ms var(--ease); }
.cameo-pic { display: block; padding: 6px; background: var(--paper); box-shadow: 10px 12px 0 rgba(0,0,0,.55); }
.cameo-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2442 / 1914; object-fit: cover; }
.cameo-say { position: absolute; left: -6%; bottom: -16%; padding: 6px 12px 7px; font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: clamp(16px, 1.7vw, 26px); line-height: 1; letter-spacing: -.02em; color: var(--ink); background: var(--lime); transform: rotate(-6deg); white-space: nowrap; }
.cameo-arrow { position: absolute; left: -18%; top: -6%; width: 22%; color: var(--lime); }
.cameo-arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bus-wrap.playing .cameo { transform: translate(70%, 90%) rotate(24deg) scale(.4); opacity: 0; }
.marquee { position: relative; margin-top: clamp(14px, 1.6vw, 22px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display: flex; gap: 12px; width: max-content; animation: mq 90s linear infinite; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
.mq-item { flex: none; height: clamp(120px, 13vw, 190px); aspect-ratio: 16 / 9; background: #0f110f; }
.mq-item img { width: 100%; height: 100%; object-fit: cover; }
.mq-item:hover img { transform: scale(1.05); }
@keyframes mq { to { transform: translateX(calc(-50% - 6px)); } }
html.no-motion .mq-track { animation: none; }
html.no-motion .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
html.no-motion .mq-item[aria-hidden="true"] { display: none; }
html.no-motion .brand-board--nescafe img.pan { animation: none; }
/* SODIC: justified rows, every piece at its own shape and the same height per row */
.jrows { display: grid; gap: 10px; }
.jrow { display: flex; gap: 10px; }
.jrow .j { flex: var(--ar) 1 0; min-width: 0; }
.jrow .tile, .jrow .sc-film { display: block; width: 100%; aspect-ratio: var(--ar); }
.jrow .tile img { width: 100%; height: 100%; object-fit: cover; }
.jrow .sc-film { position: relative; border: 0; }
.jrow .sc-film video { height: 100%; aspect-ratio: auto; object-fit: cover; }
.jrow .sc-film figcaption { position: absolute; left: 0; top: 0; background: rgba(11,12,12,.8); }
@media (max-width: 980px) {
.sc-head { grid-template-columns: minmax(0, 1fr) auto; }
.sc-head .tags { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
.spot-films { grid-template-columns: 1fr 1fr; }
.bus-wrap { grid-column: 1 / -1; width: 78%; }
.cameo { right: -26%; top: 30%; width: 40%; }

}
@media (max-width: 640px) {
.sc-title { gap: 10px; }
.bold-trio { grid-template-columns: .8fr 1.2fr .8fr; gap: 6px; padding: 0; }
.brand-board--nescafe { aspect-ratio: 4 / 5; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-template-areas:
    "city city collage" "lead lead range" "lead lead pack" "mug editions story" "detail detail story"; }
.brand-board--air-sphinx, .brand-board--we-rebranding { aspect-ratio: 4 / 5; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1.4fr 1fr 1fr 1fr; }
.brand-board--air-sphinx { grid-template-areas: "mark mark" "poster-a poster-b" "poster-c plane" "arabic portrait"; }
.brand-board--air-sphinx .brand-tile.bt-application { display: none; }
/* WE: the Arabic logo moves under the rest of the grid, full width */
.brand-board--we-rebranding { aspect-ratio: 36 / 59; grid-template-rows: 1.4fr 1fr 1fr 1fr 1.4fr; grid-template-areas: "mark mark" "facade sign" "merch phone" "billboard patterns" "arabic arabic"; }
.brand-board--we-rebranding .bt-arabic img { object-fit: cover; }
.spot-films { grid-template-columns: 1fr; }
.bus-wrap { width: 100%; }
.cameo { right: 2%; top: 46%; width: 44%; }
.cameo-arrow { display: none; }
.jrow { flex-wrap: wrap; }
.jrow .j:first-child { flex-basis: 100%; }

}
@media (prefers-reduced-motion: reduce) {
.mq-track, .brand-board--nescafe img.pan { animation: none; }
.marquee { overflow-x: auto; } 
}
/* ================= Hero collage engine: frames take each piece's shape and shove each other ================= */
.hero-art.engine .float { top: 0; left: 0; right: auto; bottom: auto; transition: none; will-change: transform, width; }
.hero-art.engine .float .frame { aspect-ratio: var(--ar, 4 / 5); }
.hero-art.engine .float.hit { box-shadow: 0 0 0 1px var(--lime); }
.float .frame { aspect-ratio: var(--ar, 4 / 5); }
/* showcase fixes */
.mq-item { width: auto; }
.bold-trio { max-width: 1120px; margin: 0 auto; }
.cameo { right: 3%; top: 40%; width: 40%; }
.cameo-arrow { left: -22%; top: -14%; }
@media (max-width: 980px) {
.cameo { right: -30%; top: 30%; width: 40%; } 
}
@media (max-width: 640px) {
.cameo { right: 3%; top: 42%; width: 42%; } 
}
.glitch .g { background-repeat: no-repeat; }
.case-lead .cameo { width: 24%; right: 4%; top: 44%; }
.case-lead .cameo-pic img { max-height: none; }
@media (max-width: 640px) {
.case-lead .cameo { width: 40%; } 
}
.case-lead .stage video { max-height: none; display: block; }
.case-lead .stage:has(video) { border: 0; background: transparent; }
/* showcase pieces are links into their case; the piece you clicked is marked when the case opens */
.sc-stage a.tile { display: block; text-decoration: none; cursor: pointer; }
.case-more .tile { scroll-margin-top: calc(var(--header, 72px) + 24px); }
.case-more .tile:target { outline: 3px solid var(--lime); outline-offset: 4px; animation: target-pulse 1.6s var(--ease) 2; }
@keyframes target-pulse { 50% { outline-offset: 10px; } }
html.no-motion .case-more .tile:target { animation: none; }
/* SODIC: v26 look, film centred then one drifting row of every piece at its own shape */
.sodic-film { width: min(100%, 72rem); margin-inline: auto; }
.sodic-film .sc-film video { aspect-ratio: 2 / 1; }
.marquee--sodic .mq-item { height: clamp(150px, 16vw, 240px); aspect-ratio: var(--ar); }
.marquee--sodic .mq-track { animation-duration: 70s; }
/* case lead films (WE: the new logo and the logo in motion) */
.lead-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.lead-films .lf { margin: 0; background: #0f110f; border: 1px solid var(--line-2); }
.lead-films video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #fff; }
.lead-films figcaption { padding: 7px 10px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) {
.lead-films { grid-template-columns: 1fr; } 
}
/* case pages: a clear way back to the project on the landing page */
.case-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.case-top .crumbs { margin: 0; }
.back-btn { min-height: 40px; }
.sc { scroll-margin-top: calc(var(--header, 72px) + 16px); }
.case-top { padding-top: 16px; }
/* Dubai Lynx trophies laid over award labels */
.has-trophy { position: relative; }
.trophy { position: absolute; right: -6px; bottom: -6px; height: 54px; width: auto; pointer-events: none; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.55)); transform: rotate(4deg); transform-origin: bottom right; transition: transform var(--t-mid) var(--ease); }
.tag.has-trophy, .chip.has-trophy { padding-right: 34px; }
.chip.has-trophy { padding-right: 86px; }
.chip .trophy { height: 58px; bottom: -4px; right: -8px; }
.tag .trophy--set, .chip .trophy--set { }
.tag.has-trophy:has(.trophy--set) { padding-right: 80px; }
.has-trophy:hover .trophy { transform: rotate(0) translateY(-4px); }
.facts .has-trophy { padding-right: 70px; }
.facts .trophy { height: 74px; right: 10px; bottom: 4px; }
.facts .trophy--set { height: 66px; }
.facts .has-trophy:has(.trophy--set) { padding-right: 150px; }
b.has-trophy { display: inline-block; padding-right: 72px; }
b.has-trophy .trophy { height: 44px; right: 0; bottom: -4px; }
/* "Worked on:" chip with a running list of clients */
.chip.clients { flex: 1 1 100%; max-width: 640px; min-width: 0; overflow: hidden; }
.chip.clients .lbl { flex: none; color: var(--paper); }
.ticker { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tk-track { display: flex; width: max-content; animation: tk 48s linear infinite; }
.tk { display: inline-flex; align-items: center; white-space: nowrap; color: var(--text-2); }
.tk::after { content: ""; width: 5px; height: 5px; margin: 0 12px; background: var(--lime); }
.chip.clients:hover .tk-track { animation-play-state: paused; }
@keyframes tk { to { transform: translateX(-50%); } }
html.no-motion .tk-track { animation: none; }
@media (prefers-reduced-motion: reduce) {
.tk-track { animation: none; } 
}
/* hero chips never push the page wider than the screen */
.hero-copy { min-width: 0; }
.chip { max-width: 100%; }
.chip:not(.clients) { white-space: normal; }
/* Newsroom bar: every brand on one running crawl */
.newsroom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; border-block: 1px solid var(--line); background: var(--ink-2, #121412); }
@keyframes nr-pulse { 70% { box-shadow: 0 0 0 8px rgba(224,38,43,0); } 100% { box-shadow: 0 0 0 0 rgba(224,38,43,0); } }
.nr-lane { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.nr-track { display: flex; align-items: center; width: max-content; animation: tk 80s linear infinite; }
.newsroom:hover .nr-track, .newsroom:focus-within .nr-track { animation-play-state: paused; }
.nr-logo { position: relative; display: flex; align-items: center; justify-content: center; height: 72px; width: clamp(110px, 10vw, 150px); padding: 14px 18px; }
.nr-logo::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--lime); }
.nr-logo img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; opacity: .82; filter: brightness(0) invert(1); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.nr-logo--tonal img { filter: grayscale(1); }
.nr-logo--inverse img { filter: grayscale(1) invert(1); }
.nr-logo--paper img { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.nr-logo--colour img { filter: none; }
.nr-logo:hover img, .nr-logo:focus-visible img { opacity: 1; transform: scale(1.08); }
.nr-logo:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; }
html.no-motion .nr-track { animation: none; }
html.no-motion .nr-lane { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
html.no-motion .nr-logo[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
.nr-track { animation: none; }
.nr-lane { overflow-x: auto; } 
}
@media (max-width: 640px) {
.newsroom { grid-template-columns: 1fr; }
.nr-logo { height: 60px; width: 104px; padding: 12px 14px; }
.nr-logo img { max-height: 32px; }

}
/* contact: copy is an icon beside the email, WhatsApp and phone */
.contact-item.has-copy { position: relative; display: block; padding: 0; }
.contact-item.has-copy .ci-link { display: grid; gap: 6px; min-height: 84px; padding: 16px 58px 16px 18px; text-decoration: none; }
.copy-ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--paper); background: transparent; border: 1px solid var(--line); cursor: pointer; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.copy-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copy-ic .ic-done { display: none; }
.copy-ic:hover, .copy-ic:focus-visible { color: var(--lime); border-color: var(--lime); }
.copy-ic.done { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.copy-ic.done .ic-copy { display: none; }
.copy-ic.done .ic-done { display: block; }
/* Everything else: four wide collection bands, each with a running strip and a clear way in */
.else-head { margin: clamp(56px, 7vw, 96px) 0 20px; padding-top: clamp(28px, 4vw, 44px); border-top: 2px solid var(--lime); }
.else-h { margin: 8px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: clamp(32px, 4.4vw, 64px); line-height: .95; letter-spacing: -.03em; }
.else-head .lede { margin-top: 10px; }
.cbands { display: grid; gap: 14px; }
.cband { background: var(--panel); border: 1px solid var(--line); overflow: hidden; transition: border-color var(--t-fast) var(--ease); }
.cband:hover { border-color: var(--lime); }
.cb-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px 24px; padding: 20px clamp(16px, 2vw, 28px); }
.cb-title h3 { margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; letter-spacing: -.02em; }
.cb-title p { margin: 6px 0 0; color: var(--text-2); max-width: 60ch; }
.cb-count { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cb-cta { white-space: nowrap; }
.cb-strip { margin: 0 0 18px; }
.cb-strip .mq-track { gap: 10px; animation-duration: 70s; }
.cband--rev .cb-strip .mq-track { animation-direction: reverse; animation-duration: 80s; }
.cb-item { flex: none; display: block; height: clamp(130px, 13vw, 190px); aspect-ratio: var(--ar); overflow: hidden; background: #0f110f; }
.cb-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.cb-item:hover img { transform: scale(1.05); }
.cb-strip:hover .mq-track { animation-play-state: paused; }
html.no-motion .cb-item[aria-hidden="true"] { display: none; }
@media (max-width: 980px) {
.cb-head { grid-template-columns: auto minmax(0, 1fr); }
.cb-count { grid-column: 2; }
.cb-cta { grid-column: 1 / -1; justify-self: start; }

}
@media (max-width: 640px) {
.cb-item { height: 120px; } 
}
.cb-head { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 980px) {
.cb-head { grid-template-columns: minmax(0, 1fr); }
.cb-count { grid-column: auto; }
.cb-cta { grid-column: auto; } 
}
.lead-films:has(> .lf:only-child) { grid-template-columns: 1fr; }
.newsroom { grid-template-columns: minmax(0, 1fr); }
/* chapter intros run as one line across the width, wrapping only when the screen is narrow */
.chapter-head .lede, .else-head .lede { max-width: none; text-wrap: pretty; }
.chapter-head .lede br { display: none; }
/* ===== Films everywhere: play in the page, with a way out to where the film lives ===== */
.xfilm { margin: 0; background: #0f110f; border: 1px solid var(--line-2); }
.xf-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.xf-play img, .xf-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease), opacity var(--t-mid); }
.xf-play:hover img { transform: scale(1.03); }
.xf-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; font: 700 14px var(--body); color: var(--lime-ink, #0B0C0C); background: var(--lime); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.xf-btn svg { width: 18px; height: 18px; fill: currentColor; }
.xf-play:hover .xf-btn { background: var(--lime-hi, #d8ff66); }
.xf-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.xfilm figcaption { display: flex; justify-content: flex-end; padding: 7px 10px; }
.xf-open { font: 500 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.xf-open:hover { color: var(--lime); }
.film video { display: block; width: 100%; height: auto; }
/* O Factor: the film in the middle, the artworks around it */
.orbit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.orbit > .film, .orbit > .xfilm { grid-column: 2 / 4; grid-row: 1 / 3; border: 0; }
.orbit > .film video { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.orbit .orb { aspect-ratio: 16 / 9; border: 0; }
.orbit .orb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
.orbit { grid-template-columns: 1fr 1fr; }
.orbit > .film, .orbit > .xfilm { grid-column: 1 / -1; grid-row: auto; } 
}
/* ===== Ads I worked on: a grid of projects, each opening in a popup ===== */
.pgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1280px) {
.pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } 
}
@media (max-width: 1024px) {
.pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
}
@media (max-width: 760px) {
.pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } 
}
@media (max-width: 460px) {
.pgrid { grid-template-columns: 1fr; } 
}
.pcard { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--paper); transition: border-color var(--t-fast) var(--ease), transform var(--t-mid) var(--ease); }
.pcard:hover, .pcard:focus-visible { border-color: var(--lime); transform: translateY(-3px); }
.pc-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0f110f; }
.pc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity 700ms var(--ease), transform 4s linear; }
.pc-img.on { opacity: 1; transform: scale(1.04); }
.pc-go { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 42px; height: 42px; font-size: 22px; color: var(--ink); background: var(--lime); }
.pc-films { position: absolute; left: 10px; top: 10px; padding: 3px 8px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); background: rgba(11,12,12,.82); }
.pc-body { display: grid; gap: 6px; align-content: start; padding: 14px 14px 16px; }
.pc-body b { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: 19px; line-height: 1.1; }
.pc-body span { font-size: 14px; color: var(--text-2); }
.pcard--first .pc-body { background: var(--lime); color: var(--ink); }
.pcard--first .pc-body span { color: var(--ink); }
html.no-motion .pc-img { transition: none; transform: none; }
.pmodal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; }
.pmodal[hidden] { display: none; }
.pm-backdrop { position: absolute; inset: 0; background: rgba(6,7,7,.86); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pm-panel { position: relative; width: min(1320px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--ink); border-inline: 1px solid var(--line); }
.pm-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px clamp(14px, 2vw, 24px); background: rgba(11,12,12,.94); border-bottom: 1px solid var(--line-2); }
.pm-count { flex: 1; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pm-nav, .pm-close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; font-size: 20px; color: var(--paper); background: transparent; border: 1px solid var(--line); cursor: pointer; }
.pm-nav:hover, .pm-close:hover { border-color: var(--lime); color: var(--lime); }
.pm-close { font-size: 26px; }
.pm-body { padding: clamp(16px, 2.4vw, 32px); }
.pm-head { margin-bottom: 18px; }
.pm-head h2 { margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 122%; font-size: clamp(28px, 4vw, 52px); line-height: .98; letter-spacing: -.025em; }
.pm-meta { margin: 8px 0 0; font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pm-line { margin: 10px 0 0; max-width: 80ch; color: var(--text-2); font-size: 17px; }
.pm-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.pm-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.pm-films > :only-child { grid-column: 1 / -1; }
.pm-body .jrows { gap: 12px; }
.pm-body .jrow { gap: 12px; }
html.pm-open { overflow: hidden; }
@media (max-width: 640px) {
.pm-films { grid-template-columns: 1fr; } 
}
/* walls: justified rows that fill the width, complete pieces, no empty gaps */
.jrows { display: grid; gap: 10px; }
.jrow { display: flex; gap: 10px; }
.jrow .j { flex: var(--ar) 1 0; min-width: 0; }
.jrow .tile { display: block; width: 100%; aspect-ratio: var(--ar); padding: 0; border: 0; overflow: hidden; }
.jrow .tile img { width: 100%; height: 100%; object-fit: cover; }
.jrow .lf { margin: 0; border: 0; }
.jrow .lf video { width: 100%; height: 100%; aspect-ratio: var(--ar); object-fit: cover; }
.project .jrows, .case-more .jrows { margin-top: 10px; }
.film-row { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 640px) {
.jrow { flex-wrap: wrap; }
.jrow .j { flex-basis: calc(50% - 5px); }
.jrow .j:only-child { flex-basis: 100%; } 
.js .jrow--m, .js .jrow--keep { flex-wrap: nowrap; }
.js .jrow--m .j, .js .jrow--keep .j { flex: var(--ar) 1 0; }
}
/* Work expands in the header to show where you are */
.ticks:has(.tick--open) .tick:not(.tick--open) { width: 84px; }
.tick--open { width: auto; min-width: 112px; color: var(--paper); }
.tick-top { color: inherit; text-decoration: none; }
.tick--open i b { transform: scaleX(1); }
.tick-sub { display: flex; gap: 12px; margin-top: -2px; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.tick-sub a { color: var(--muted); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.tick-sub a:hover { color: var(--paper); }
.tick-sub a[aria-current="page"] { color: var(--lime); border-bottom-color: var(--lime); }
.tick--open { grid-template-rows: auto auto auto; gap: 5px; padding: 4px 0; }
.chapters-panel li.sub a { padding-left: 28px; font-weight: 500; min-height: 44px; }
.chapters-panel li.sub a[aria-current="page"] { color: var(--lime); }
/* journey strip now carries the portraits and the behind-the-scenes files */
.portraits { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1100px; align-items: start; }
@media (max-width: 980px) {
.portraits { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
}
@media (max-width: 640px) {
.portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
}
/* ===== Navigation: a way on at the end of every section ===== */
.next-sec { display: flex; justify-content: flex-end; margin-top: clamp(20px, 3vw, 32px); }
.next-btn .k { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); margin-right: 4px; }
.project .next-sec { margin-top: 14px; }
.next-coll { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 2px solid var(--lime); }
.next-coll a { display: grid; gap: 6px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--paper); transition: border-color var(--t-fast) var(--ease); }
.next-coll a:hover { border-color: var(--lime); }
.next-coll .k { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.next-coll .t { font-family: var(--display); font-weight: 900; font-stretch: 115%; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.05; }
.next-coll .nx { text-align: right; }
.next-coll .mid { text-align: center; }
@media (max-width: 760px) {
.next-coll { grid-template-columns: 1fr; }
.next-coll .nx, .next-coll .mid { text-align: left; } 
}
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; place-items: center; width: 48px; height: 48px; font-size: 22px; color: var(--ink); background: var(--lime); text-decoration: none; box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--lime-hi, #d8ff66); }
/* DiDi: AI vs Real */
.vs-intro { margin: 4px 0 6px; color: var(--text-2); font-size: 17px; }
.vs-spread { margin-top: 18px; }
.vs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.vs-head h3 { margin: 0; font: 700 15px var(--body); color: var(--paper); }
.vs-cue { display: none; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
.vs-strip { display: grid; gap: 10px; padding: 10px; background: var(--panel); border: 1px solid var(--line); overflow-x: auto; scrollbar-color: var(--lime) var(--ink); }
.vs-strip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vs-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vs-pair { display: grid; gap: 0; min-width: 0; }
.vs-pair .tile { aspect-ratio: 16 / 9; border: 0; padding: 0; overflow: hidden; }
.vs-strip--4 .vs-pair .tile { aspect-ratio: 16 / 10; }
.vs-pair .tile img { width: 100%; height: 100%; object-fit: cover; }
.vs-dir { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.vs-dir i { font-style: normal; color: var(--lime); }
.vs-dir .real { color: var(--lime); }
@media (max-width: 980px) {
.vs-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 2.4); scroll-snap-type: x proximity; }
.vs-pair { scroll-snap-align: start; }
.vs-cue { display: inline; }

}
/* Mountain Dew: the cans centre stage, the four scenes around */
.dew { display: grid; grid-template-columns: 1fr 1.3fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a c1 d" "b c2 e"; gap: 10px; aspect-ratio: 3.3 / 1.3; }
.dew .tile { width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; }
.dew .tile img { width: 100%; height: 100%; object-fit: cover; }
.dew .dw-a { grid-area: a; }
.dew .dw-b { grid-area: b; }
.dew .dw-c1 { grid-area: c1; }
.dew .dw-c2 { grid-area: c2; }
.dew .dw-d { grid-area: d; }
.dew .dw-e { grid-area: e; }
@media (max-width: 760px) {
.dew { aspect-ratio: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-template-areas: "c1 c1" "c2 c2" "a d" "b e"; }
.dew .tile { aspect-ratio: 2 / 1; height: auto; }

}
.jrow .film--cell { margin: 0; border: 0; height: 100%; }
.jrow .film--cell video { width: 100%; height: 100%; aspect-ratio: var(--ar); object-fit: cover; }
@media (max-width: 640px) {
#digital-wall .jrow .j { flex-basis: calc(33.33% - 7px); } 
}
.orbit > .film > video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.orbit > .film { display: block; height: 100%; background: transparent; }
.pm-films > .xfilm:only-child, .pm-films > .film:only-child { width: min(100%, 1000px); justify-self: center; }
.tick--open { padding-top: 6px; }
figure.film { margin: 0; }
/* Hatly: the compact branding mosaic */
.brand-board--hand-hatly { aspect-ratio: 8 / 5; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-template-areas:
  "phone-app phone-app doorstep doorstep icons icons icons icons"
  "phone-app phone-app logo logo logo logo building building"
  "phone-screen phone-screen logo logo logo logo office office"
  "phone-screen phone-screen billboard-food billboard-food billboard-delivery billboard-delivery badge badge"
  "scooter scooter delivery-bag delivery-bag stationery stationery pattern pattern"; }
@media (max-width: 640px) {
.brand-board--hand-hatly { aspect-ratio: 5 / 7; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); grid-template-areas:
    "phone-app doorstep doorstep phone-screen" "phone-app billboard-food billboard-food phone-screen" "icons logo logo building"
    "pattern logo logo office" "scooter delivery-bag stationery badge" "billboard-delivery billboard-delivery billboard-delivery billboard-delivery"; }

}
/* Aswan Forum: the landscape biggest, the square posts gridded over its open left side */
.aswan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.as-bg { grid-column: 3 / -1; grid-row: 1; }
.as-bg .tile { display: block; width: 100%; aspect-ratio: 7681 / 4321; padding: 0; border: 0; overflow: hidden; }
.as-bg .tile img { width: 100%; height: 100%; object-fit: cover; }
.as-grid { grid-column: 1 / 6; grid-row: 1; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; background: var(--ink); box-shadow: 14px 14px 0 rgba(0,0,0,.45); }
.as-sq { aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; }
.as-sq img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
.aswan { grid-template-columns: 1fr; gap: 8px; }
.as-bg, .as-grid { grid-column: 1; grid-row: auto; }
.as-grid { padding: 0; box-shadow: none; }

}
.levels + .portraits { margin: clamp(28px, 4vw, 44px) 0 0; }
.portraits { max-width: none; }
.portraits .glitch { aspect-ratio: 4 / 5 !important; }
/* award trophies on project cards */
.pc-award { position: absolute; left: 10px; bottom: 8px; z-index: 1; }
.pc-award .trophy { position: static; display: block; height: 78px; width: auto; transform: rotate(-3deg); filter: drop-shadow(4px 6px 0 rgba(0,0,0,.6)); }
.pcard:hover .pc-award .trophy { transform: rotate(0) translateY(-4px); }
.pc-award { z-index: 2; left: 8px; bottom: 6px; }
.pc-award .trophy { height: 108px; filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(5px 7px 0 rgba(0,0,0,.65)); }
.as-grid { padding: 0; background: transparent; box-shadow: none; }
/* Work opens on hover in the header */
.tick--menu { position: relative; }
.tick--menu .chev { font-size: 9px; color: var(--lime); }
.tick-drop { position: absolute; top: 100%; left: -12px; z-index: 60; display: none; flex-direction: column; min-width: 210px; margin-top: 6px; padding: 6px 0; background: var(--panel); border: 1px solid var(--line); box-shadow: 8px 8px 0 var(--lime); }
.tick-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.tick-drop a { padding: 10px 16px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.tick-drop a:hover, .tick-drop a:focus-visible { color: var(--ink); background: var(--lime); }
.tick--menu:hover .tick-drop, .tick--menu:focus-within .tick-drop { display: flex; }
.tick--menu .tick-top { color: inherit; text-decoration: none; }
/* hero intro: each sentence on one line when there is room, wrapping only on narrow screens */
.hero-lines { max-width: none; }
.hero-lines p { text-wrap: balance; }
@media (min-width: 981px) {
.hero-lines p { white-space: nowrap; } 
}
/* Mountain Dew v2: every piece whole (2:1), the middle pair bigger, side pairs smaller and centred */
.dew { display: flex; align-items: center; gap: 10px; aspect-ratio: auto; grid-template-areas: none; }
.dw-col { display: grid; gap: 10px; min-width: 0; }
.dw-side { flex: 1 1 0; }
.dw-mid { flex: 1.45 1 0; }
.dew .tile { aspect-ratio: 2 / 1; height: auto; }
.dew .tile img { object-fit: contain; }
@media (max-width: 760px) {
.dew { flex-direction: column; align-items: stretch; }
.dw-mid { order: -1; } 
}
.dew .tile { grid-area: auto !important; width: 100%; }
/* DiDi: a gradient carries each pair from AI (cool violet) to Real (lime) */
.vs-pair { position: relative; padding: 6px; background: linear-gradient(180deg, #000 0%, #000 22%, #4A5E14 58%, var(--lime) 100%); }
.vs-pair .tile { position: relative; z-index: 1; }
.vs-dir { position: relative; z-index: 1; min-height: 34px; color: var(--ink); font-weight: 700; }
.vs-dir b { padding: 2px 7px; background: #000; color: var(--paper); }
.vs-dir .real { color: var(--lime); }
.vs-dir i { color: var(--ink); font-weight: 700; }
/* feature grid: one piece biggest on the left, the rest in rows beside it, same height */
.fgrid { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; }
.fg-main { flex: 1 1 0; min-width: 0; }
.fg-main .tile { display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; }
.fg-main .tile img { width: 100%; height: 100%; object-fit: cover; }
.fg-side { flex: 1 1 0; min-width: 0; align-content: space-between; }
.fg-side .jrow { flex-wrap: nowrap; }
@media (max-width: 640px) {
.fgrid { flex-direction: column; }
.fg-main { flex-grow: 0 !important; }
.fg-main .tile { height: auto; } 
}
.fg-side { display: flex; flex-direction: column; gap: 10px; }
.fg-side .jrow { flex: 1 1 auto; min-height: 0; }
.fg-side .jrow .j { display: flex; }
.fg-side .jrow .tile { aspect-ratio: auto; height: 100%; }
.project .fg-side.jrows, .fg-side { margin-top: 0; }
/* long words in big titles break instead of pushing the page sideways on phones */
.case-hero h1, .h-display, .sc-head h3, .pm-head h2 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 640px) { .case-hero h1 { font-size: clamp(34px, 10vw, 52px); } }
/* "How I can help" written over the behind-the-scenes files (faces pixelated in the image itself) */
.glitch--help figcaption.help-card { top: auto; padding: 14px 14px 13px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); background: linear-gradient(180deg, rgba(11,12,12,.82), rgba(11,12,12,.95)); border-top: 2px solid var(--lime); text-transform: none; letter-spacing: 0; font: 400 13.5px/1.45 var(--body); }
.help-card .hc-n { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.help-card h3 { margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 115%; font-size: clamp(19px, 1.7vw, 24px); line-height: 1; letter-spacing: -.02em; color: var(--paper); }
.help-card p { margin: 0; }
.help-card .link { align-self: flex-start; margin-top: 2px; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--lime); text-decoration: none; }
.help-card .link:hover, .help-card .link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
.portraits { grid-auto-flow: dense; }
.portraits .glitch { grid-column: 1 / -1; aspect-ratio: 4 / 4.2 !important; }
}
.nr-logo--colour img { opacity: .9; }
.nr-logo--chip img { filter: none; opacity: 1; max-height: 44px; padding: 4px 6px; background: #fff; border-radius: 3px; box-sizing: border-box; }
/* case pages open at the top; a down arrow leads into the case */
.case-hero { position: relative; }
.scroll-cue { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-top: 22px; background: var(--lime); color: var(--lime-ink); font: 700 26px/1 var(--mono); text-decoration: none; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: background var(--t-fast) var(--ease); }
.scroll-cue span { display: block; animation: cue-bob 1.6s ease-in-out infinite; }
.scroll-cue:hover, .scroll-cue:focus-visible { background: var(--lime-hi); }
@keyframes cue-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
html.no-motion .scroll-cue span { animation: none; }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }
/* the open Work tick lines up with the other chapter ticks: same label line, same bar line */
.ticks { align-items: flex-start; }
.ticks .tick--open { padding: 8px 0 0; gap: 7px; }
.ticks .tick-top > span { display: block; }
.ticks .tick-top .chev { display: inline; }
.ticks .tick-sub { margin-top: 1px; }
/* chapter headlines in lime; their doodles switch to paper so they still show */
.h-display { color: var(--lime); }
.h-display .fx-doodle { color: var(--paper); }
/* "How I can help": text block centred on the photo, lines still aligned left */
.glitch--help figcaption.help-card { top: 0; bottom: 0; justify-content: center; align-items: flex-start; padding: 18px 18px 18px 20px; border-top: 0; background: linear-gradient(90deg, rgba(11,12,12,.88) 0%, rgba(11,12,12,.7) 60%, rgba(11,12,12,.5) 100%); box-shadow: inset 3px 0 0 var(--lime); }
/* all headlines in capitals */
.h-display, .project-head h2, .sc-head h3, .else-h, .pm-head h2, .help-card h3, .case-body h2, .case-more h2, .next-case .t, .next-coll .t { text-transform: uppercase; }
.brand-board .brand-tile--film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* journey: "How I can help" heads the row on the first portrait */
.glitch--intro figcaption.help-card { justify-content: center; }
.glitch--intro .help-card h3 { font-size: clamp(22px, 2.2vw, 34px); line-height: .95; }
.glitch--intro .help-card h3 { color: var(--lime); }
.help-card .scroll-cue { margin-top: 14px; }
/* help-card titles shrink with their photo so the longest word (CONCEPTUALIZE) always fits */
.glitch--help { container-type: inline-size; }
.glitch--help .help-card h3 { font-size: min(21px, calc((100cqw - 42px) / 10.8)); overflow-wrap: normal; white-space: nowrap; }
.glitch--intro .help-card h3 { font-size: min(34px, calc((100cqw - 42px) / 7.4)); white-space: normal; }
/* rows whose pieces add up to less than one "unit" of width must still fill the row (flex-grow below 1 leaves a gap) */
.jrow .j, .js .jrow--m .j, .js .jrow--keep .j { flex-grow: calc(var(--ar) * 10); }
.case-lead--below { margin: 0 0 10px; }
.film-row .lead-in-row { margin: 0; }
.film-row .lead-in-row .stage video { width: 100%; height: auto; max-height: none; }
/* agency logos in the journey: the wide ones read bigger */
.level .logo[src*="synergy"], .level .logo[src*="wunderman"] { height: 50px; max-width: 220px; }
.proj-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 8px 0 0; font-size: 15px; }
/* hero frames on tablets and phones: each card is only as tall as its own picture (no empty dark area) */
.hero-art:not(.engine) { align-items: start; }
.hero-art:not(.engine) .float { align-self: start; height: auto; }
/* tablets and phones: hero frames keep fixed shapes, so a tall picture shuffling in never pushes the page down */
.hero-art:not(.engine) .float .frame { aspect-ratio: 4 / 5 !important; }
.hero-art:not(.engine) .float.f3 .frame { aspect-ratio: 3 / 2 !important; }

/* CV: one tile; tap it, then pick PDF or Word */
.contact-item.cv-pick { position: relative; display: block; padding: 0; grid-column: span 2; }
.cv-pick .cv-open, .cv-pick .cv-choices { display: grid; gap: 6px; align-content: start; min-height: 84px; padding: 16px 18px; width: 100%; }
.cv-pick .cv-open { background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.js .cv-pick:not(.is-open) .cv-choices { display: none; }
.js .cv-pick.is-open .cv-open { display: none; }
.cv-pick.is-open { border-color: var(--lime); }
.cv-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 18px; border: 1px solid var(--lime); color: var(--paper); font: 700 15px var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.cv-opt .arrow { color: var(--lime); }
.cv-opt:hover, .cv-opt:focus-visible { background: var(--lime); color: var(--ink); }
.cv-opt:hover .arrow, .cv-opt:focus-visible .arrow { color: var(--ink); }
@media (max-width: 980px) { .contact-item.cv-pick { grid-column: auto; } }

/* footer: a Contact button on every page */
.site-footer .wrap { align-items: center; }
.site-footer { padding-bottom: 96px; }   /* room for the back-to-top button */
.site-footer .foot-contact { color: var(--fg, var(--paper)); font-family: var(--body); letter-spacing: 0; }
@media (max-width: 640px) { .site-footer .wrap { flex-direction: column; align-items: flex-start; } }

/* contact tiles: an icon before each label */
.contact-item .k { display: flex; align-items: center; gap: 10px; }
.ci-ic { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); color: var(--lime); font: 700 11px/1 var(--mono); font-style: normal; letter-spacing: 0; text-transform: none; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ci-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.contact-item:hover .ci-ic, .contact-item.is-open .ci-ic, .contact-item:focus-within .ci-ic { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* tablets and phones: every hero label keeps room for two lines, so a longer name shuffling in never changes the height */
.hero-art:not(.engine) .float figcaption { min-height: 2.4em; align-items: flex-start; }
.hero-art:not(.engine) .float figcaption b { flex: none; }
.hero-art:not(.engine) .float figcaption span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* small text links get a bigger invisible tap area (at least 24px tall), without changing how they look */
.tick-top, .tick-sub a, .crumbs a, .link { position: relative; }
.tick-top::after, .tick-sub a::after, .crumbs a::after, .link::after { content: ""; position: absolute; inset: -6px -4px; }