/* Case study pages. Same tokens, type and motion as the homepage (index.html).
   Part 1: shared tokens, type, reveals and footer. Part 2: the case study layout. */
:root {
  --bg: #15120f; --surface: #1f1b17; --line: #2f2a24;
  --surface-2: #27211b; --unlit: #6b6256;
  --fg: #ebe3d5; --mute: #a99f90; --acc: #f2b544; --on-acc: var(--bg);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 99px;
  --shadow-float: 0 40px 80px -24px rgba(0,0,0,.65);
  --gut: clamp(20px, 3.4vw, 48px);
  --ease: cubic-bezier(.2,.75,.15,1); --expo: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: dark; background: var(--bg); overflow-x: clip; }
body { background: transparent; color: var(--fg); font-family: "Archivo", system-ui, sans-serif; font-stretch: 100%; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; }
/* Images can't be dragged out, selected or long-pressed to save (iOS); right-click is blocked in the script */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.wrap { padding-inline: var(--gut); }
.label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); display: flex; justify-content: space-between; gap: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---------- Reveals (same vocabulary as the homepage) ---------- */
.revealing .ch > span { transition: transform .6s var(--expo) calc(var(--d, 0ms) + var(--i) * 12ms); }
[data-reveal="chars"]:not(.in) .ch > span:first-child { transform: translateY(110%); }
[data-reveal="rise"] { transition: opacity 1.1s var(--expo) var(--d, 0ms), transform 1.2s var(--expo) var(--d, 0ms), filter 1.1s var(--expo) var(--d, 0ms); }
[data-reveal="rise"]:not(.in) { opacity: 0; transform: translateY(22px); filter: blur(6px); }
[data-reveal="clip"] { clip-path: inset(0 0 0 0 round var(--radius-md)); transition: clip-path 1.3s var(--expo) var(--d, 0ms); }
[data-reveal="clip"]:not(.in) { clip-path: inset(100% 0 0 0 round var(--radius-md)); }
/* Design swipe: each frame rises into view from its bottom edge with a soft fade. The clip reaches 140px
   past the frame so its shadow travels with it, then drops once done */
[data-reveal="wipe"] { clip-path: inset(-140px); transition: clip-path 1.8s cubic-bezier(.25, 1, .3, 1) var(--d, 0ms), opacity 1.2s ease-out var(--d, 0ms); }
/* --wipe-from is set just before the swipe to the part of the frame on screen, so a frame taller than
   the space left below it still sweeps up from the bottom of the screen instead of from below the fold */
[data-reveal="wipe"]:not(.in) { clip-path: inset(var(--wipe-from, 100%) -140px 0 -140px); opacity: 0; }
[data-reveal="wipe"].in:not(.revealing) { clip-path: none; }
.label .mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.label .mask > span { display: inline-block; transition: transform .6s var(--expo) var(--d, 0ms); }
.label:not(.in) .mask > span { transform: translateY(110%); }
.ruled { position: relative; }
.ruled::before, .footbar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--expo) var(--d, 0ms); }
.ruled.in::before, .footbar.in::before { transform: scaleX(1); }
.footbar { position: relative; }
.footbar > * { transition: opacity 1s var(--expo) 250ms, filter 1s var(--expo) 250ms; }
.footbar:not(.in) > * { opacity: 0; filter: blur(5px); }

/* ---------- Cursor glow ---------- */
.glow { position: fixed; left: 0; top: 0; z-index: -1; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(214, 190, 120, .065) 0%, rgba(214, 190, 120, .03) 36%, transparent 68%);
  transform: translate(var(--gx, 50vw), var(--gy, 30vh)); opacity: 0; transition: opacity .8s ease; }
.glow.on { opacity: 1; }

/* ---------- Rolling letters on hover ---------- */
.roll { display: inline-flex; }
.ch { display: inline-flex; flex-direction: column; overflow: hidden; height: var(--lh, 1.2em); line-height: var(--lh, 1.2em); }
/* Titles and links roll almost together (short, capped stagger); big display titles keep the slower wave */
.ch > span { display: block; height: var(--lh, 1.2em); transition: transform .45s var(--ease); transition-delay: calc(min(var(--i), var(--cap, 10)) * var(--stagger, 6ms)); white-space: pre; }
.v2-title, #contact-h { --stagger: 24ms; --cap: 99; }
.ch > span + span { color: var(--acc); }
.rollable:hover .ch > span, .rollable:focus-visible .ch > span { transform: translateY(-100%); }

/* ---------- Top bar ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 40; height: 88px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--gut); transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.top.solid { background: rgba(21,18,15,.86); border-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; }
.brand svg { width: 46px; height: auto; transition: transform .6s var(--ease); }
.brand:hover svg { transform: rotate(-8deg) scale(1.06); }
.nav { display: flex; align-items: center; gap: 8px; }
.nav > a { font-size: 14px; padding: 8px 12px; color: var(--mute); border-radius: var(--radius-sm); transition: color .3s; }
.nav > a:hover { color: var(--fg); }
.talk, .btn-primary { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--fg); color: var(--bg) !important; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .3s var(--ease); }
.talk { margin-left: 8px; }
.talk:hover, .talk:focus-visible, .btn-primary:hover, .btn-primary:focus-visible { background: var(--acc); }
.talk .ch > span + span, .btn-primary .ch > span + span { color: var(--on-acc); }
.btn-secondary { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--fg); color: var(--fg); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--fg); color: var(--bg); }
.btn-secondary .ch > span + span { color: var(--bg); }
@media (max-width: 760px) { .nav > a:not(.talk) { display: none; } .top { height: 72px; } .brand svg { width: 38px; } .talk { padding: 0 12px; } }

/* ================= Case study ================= */

/* Hero: eyebrow row, client name (display-l), services as pills, then the cover */
.cs-hero { padding-top: calc(88px + 64px); }
.cs-title { margin-top: 32px; margin-left: -.088em; font-size: clamp(44px, 8vw, 120px); line-height: .9; letter-spacing: -.04em; font-weight: 700; font-stretch: 125%; text-transform: uppercase; }
.cs-title .roll { flex-wrap: wrap; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.tags li { font-size: 14px; line-height: 1; color: var(--mute); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 12px; }
.tags .nda { color: var(--fg); border-color: var(--mute); }
.cover { margin-top: 64px; }

/* Framed media: a flat frame with a hairline, image edge to edge */
.shot { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.shot img { width: 100%; height: auto; }
figure figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--mute); }
.media { display: grid; gap: 48px; margin-top: 64px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* A long page inside a browser window: scroll inside to read the whole design.
   The hairline under the bar fills as you scroll */
.window { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-float); }
.window.narrow { max-width: 760px; margin-inline: auto; width: 100%; }
.window .bar { position: relative; display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--mute); font-family: "JetBrains Mono", monospace; font-size: 12px; }
.window .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.window .bar span { margin-left: 10px; }
.window .bar::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--fg); transform: scaleX(var(--p, 0)); transform-origin: left; }
.viewport { height: clamp(420px, 72vh, 760px); overflow-y: auto; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.viewport img { width: 100%; height: auto; }
.window + figcaption { display: flex; justify-content: space-between; gap: 16px; }
.window.narrow + figcaption { max-width: 760px; margin-inline: auto; }

/* Sections: a hairline, a number eyebrow, then a two-column head (display-m title, p3 body) */
.chapter { padding-block: 120px; }
.chapter-head { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); margin-top: 32px; align-items: start; }
.chapter h2 { font-size: clamp(34px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; font-stretch: 112%; }
.chapter h2 .roll { flex-wrap: wrap; }
.copy { display: grid; gap: 16px; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--mute); }
/* Overview: Client and Brief side by side, each an h3 over p3 */
.overview-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); margin-top: 32px; }
.overview-grid h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; font-stretch: 112%; margin-bottom: 16px; }
/* Two text-only sections side by side (esure) */
.twin { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); margin-top: 32px; }
.twin h2 { font-size: clamp(26px, 3.3vw, 48px); line-height: 1.06; letter-spacing: -.025em; margin-bottom: 24px; }

/* Client feedback: h1-sized quote */
.quote blockquote { margin-top: 32px; max-width: 24em; font-size: clamp(26px, 3.3vw, 48px); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; font-stretch: 112%; }
.quote blockquote::before { content: "\201C"; } .quote blockquote::after { content: "\201D"; }
.quote cite { display: block; margin-top: 24px; font-style: normal; font-size: 14px; color: var(--mute); }

/* Next project: the next client's name, big and rolling, with its pills */
.next { padding-block: 120px; }
.next-link { display: block; width: fit-content; margin-top: 32px; margin-left: -.088em; font-size: clamp(44px, 8vw, 120px); line-height: .9; letter-spacing: -.04em; font-weight: 700; font-stretch: 125%; text-transform: uppercase; }
.next-link .roll { flex-wrap: wrap; }
.next-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; }
.next-row .tags { margin-top: 0; }
.next-row .ends { display: flex; gap: 8px; }

@media (max-width: 900px) {
  .chapter-head, .overview-grid, .twin { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .chapter, .next { padding-block: 96px; }
}
@media (max-width: 760px) {
  .cs-hero { padding-top: calc(72px + 48px); }
  .cover, .media { margin-top: 48px; }
  .viewport { height: 64vh; }
}

/* ---------- Contact and footer bar (as on the homepage) ---------- */
.contact { padding-top: 120px; }
.contact-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
.contact-row > div { min-width: 0; }
.contact-row .email { display: block; width: fit-content; margin-top: 24px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--mute); transition: color .3s; }
.contact-row .email:hover { color: var(--fg); }
.contact-row .btn-primary { margin-top: 24px; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; padding-left: calc(9.5em + 24px); }
.foot-h { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.foot-links ul { list-style: none; margin-top: 32px; display: grid; gap: 12px; }
.foot-links a { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; font-weight: 600; font-stretch: 112%; }
@media (max-width: 900px) { .contact-row { grid-template-columns: 1fr; gap: 48px; } .foot-links { padding-left: 0; } }
.contact h2 .roll { flex-wrap: nowrap !important; }
.contact h2 { margin-top: 32px; margin-left: -.088em; white-space: nowrap; font-size: clamp(40px, 8vw, 120px); line-height: .88; letter-spacing: -.04em; font-weight: 700; font-stretch: 125%; text-transform: uppercase; }
.footbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 88px; margin-top: 120px; font-size: 14px; color: var(--mute); }
.footbar .copy { justify-self: start; }
.footbar svg { width: 46px; height: auto; color: var(--fg); }
.footbar .links { justify-self: end; display: flex; gap: 24px; }
.footbar a:hover { color: var(--fg); }
@media (max-width: 760px) { .footbar { grid-template-columns: 1fr auto; height: auto; row-gap: 14px; padding-block: 22px; } .footbar svg { grid-row: 1; grid-column: 2; } .footbar .copy { grid-row: 1; } .footbar .links { grid-column: 1 / -1; justify-self: start; } }

/* ---------- Custom cursor: the nib, a ring over links ---------- */
html.cur, html.cur a, html.cur button { cursor: none; }
.cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; mix-blend-mode: difference; display: none; }
html.cur .cursor { display: block; }
.cursor .nib { position: absolute; width: 10px; height: 24px; margin: -12px 0 0 -5px; background: #fff; clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%); transform: rotate(var(--rot, 28deg)) scaleY(var(--st, 1)); transition: opacity .25s; }
.cursor .ring { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 1.5px solid #fff; border-radius: 50%; transform: scale(var(--rs, 0)); transition: transform .35s var(--ease); }
.cursor.link { --rs: 1; } .cursor.link .nib { opacity: 0; }
/* Over a scrolling window the nib turns upright, hinting at the scroll */
.cursor.scroll .nib { --rot: 0deg; }

html.still *, html.still *::before, html.still *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ---------- Part 2: case study layout ----------
   Layout after trionn.com/work/techno, in the homepage tokens.
   Every text block sits on one grid: a label column, then a content column that starts on the
   same line as the second figure in the numbers row (a quarter of the width, plus its padding). */
:root { --cols: calc(25% + 25px) minmax(0, 1fr); --col-gap: clamp(32px, 6vw, 96px); --shadow-lift: 0 30px 60px -18px rgba(0,0,0,.7), 0 12px 24px -12px rgba(0,0,0,.5); }
body { background: var(--bg); }
/* The cursor glow sits over the page colour and under the content, as on the homepage */
.glow { z-index: 0; }
main { position: relative; z-index: 1; }
.grid { display: grid; grid-template-columns: var(--cols); gap: 0; }
.grid > :first-child { padding-right: 24px; }
.grid > * { min-width: 0; }
.label.solo { justify-content: flex-start; gap: 12px; }

/* ---------- Hero: eyebrow, name in H2, thesis, then the details at the bottom ---------- */
.v2-hero.cs-hero { padding-top: calc(88px + 40px); padding-bottom: 40px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.v2-title { margin-top: 16px; font-size: clamp(34px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; font-stretch: 112%; }
.v2-title .roll { flex-wrap: wrap; }
/* Same as the intro under the homepage name */
.thesis { margin-top: 24px; max-width: 44ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--mute); }
.meta { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.meta dl { padding-left: 25px; min-width: 0; }
.meta dl:first-child { padding-left: 0; }
.meta .wide-dl { grid-column: span 2; }
.meta dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.meta dd { margin-top: 12px; font-size: 16px; line-height: 1.5; }

/* ---------- Stage: the work sits straight on the page, no panel behind it ---------- */
.stage { position: relative; }
.stage.bleed { padding: 0 var(--gut); }
.stage.inset { border-radius: var(--radius-md); overflow: hidden; }
.stage img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.stage [data-parallax] { will-change: transform; }

/* ---------- Brief and chapter heads share the grid ---------- */
.brief { padding-block: 120px; }
.big { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.25; letter-spacing: -.015em; font-weight: 500; text-wrap: pretty; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.brief .cols2 { margin-top: 64px; }
.sub { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); margin-bottom: 16px; }
.cols2 p, .head .copy p { font-size: 16px; line-height: 1.55; color: var(--mute); }
.head { padding-block: 120px 64px; }
/* Chapter heads stack: eyebrow, then title, then body, all from the left edge */
.head.grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.head.grid > :first-child { padding-right: 0; }
.head h2 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; font-stretch: 112%; }
.head h2 .roll { flex-wrap: wrap; }
.head .copy { max-width: 1240px; margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* ---------- Numbers: four facts that count up, and lift on hover ---------- */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.numbers > div { position: relative; padding: 32px 24px 48px; transition: background-color .5s var(--ease); }
.numbers > div:first-child { padding-left: 0; }
.numbers > div + div { border-left: 1px solid var(--line); }
.numbers.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.numbers b { display: inline-block; font-size: clamp(44px, 6vw, 96px); line-height: .9; letter-spacing: -.04em; font-weight: 700; font-stretch: 125%; font-variant-numeric: tabular-nums; transition: color .4s var(--ease), transform .6s var(--expo); }
.numbers > div > span { display: block; margin-top: 16px; max-width: 20ch; font-size: 14px; line-height: 1.45; color: var(--mute); transition: color .4s var(--ease); }
.numbers > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--expo); }
.numbers > div:first-child::after { left: 0; }
@media (hover: hover) {
  .numbers > div:hover > span { color: var(--fg); }
  .numbers > div:hover::after { transform: scaleX(1); }
}

/* ---------- Device: a phone screen with a 1px hairline, iPhone ratio ---------- */
.device { position: relative; flex: none; aspect-ratio: 375 / 812; max-width: 100%; border: 1px solid rgba(235, 227, 213, .18); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--shadow-lift); }
.device .scr { height: 100%; overflow: hidden; }
.device img { display: block; width: 100%; height: auto; border-radius: 0 !important; transition: transform var(--dur, 6s) cubic-bezier(.45, 0, .25, 1); }

/* Mobile templates: five screens in a row, centred on each other; hover scrolls a page, click opens it */
.fan { display: flex; justify-content: center; align-items: center; gap: 2vw; }
.fan .device { width: min(16vw, 248px); }
.fan .device:nth-child(3) { width: min(19vw, 296px); z-index: 2; }
.fan .device:hover img, .fan .device:focus-visible img { transform: translateY(var(--t, 0px)); }

/* ---------- Browser: a desktop window, 16:10, header fixed and the page scrolling under it ---------- */
.browser { display: flex; flex-direction: column; border: 1px solid rgba(235, 227, 213, .18); border-radius: var(--radius-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-lift); }
.browser .bar { flex: none; display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--mute); font-family: "JetBrains Mono", monospace; font-size: 12px; }
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.browser .bar span { margin-left: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* long addresses end in … instead of being cut */
.browser img { display: block; width: 100%; height: auto; border-radius: 0 !important; }
.desk { aspect-ratio: 16 / 10; max-width: 100%; }
.desk .bar + * { flex: none; }
/* The window header is the top of the same page image, clipped; the scrolling body is that image pulled up by the header height */
.desk .hdr { overflow: hidden; }
.desk .page { flex: 1; min-height: 0; overflow: hidden; position: relative; container-type: inline-size; }
.desk .page .flow { display: flow-root; position: relative; will-change: transform; transition: transform 1.1s var(--expo); }
.desk.scrolled .page .flow { transition: none; }
.wide { max-width: 1240px; margin-inline: auto; }
/* Product page window: cropped to the product hero, so the step pills sit in view under it */
.proto.desk { aspect-ratio: auto; }
.proto.desk .page { flex: none; aspect-ratio: 1440 / 550; }
/* Homepage: the window pins in the middle of the screen, then its page scrolls */
.desk-pin { position: relative; height: 220vh; }
.desk-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: 24px var(--gut); }
.desk-sticky .desk { width: min(1240px, 100%, calc((100vh - 96px) * 1.6)); }

/* Product page prototype: hotspots click through the states */
.proto .sec { position: relative; overflow: hidden; transition: height .9s var(--expo); }
.proto .sec img { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .6s var(--ease); }
.proto .sec img.on { position: relative; opacity: 1; }
.proto .sec img.on ~ img.on { position: absolute; }
.hot { position: absolute; z-index: 3; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 10px; }
.hot::before { content: ""; position: absolute; inset: -6px; border-radius: 12px; border: 2px solid var(--acc); opacity: 0; animation: pulse 1.8s var(--ease) infinite; }
.hot[hidden] { display: none; }
@keyframes pulse { 0% { opacity: .9; transform: scale(.96); } 70% { opacity: 0; transform: scale(1.12); } 100% { opacity: 0; } }
.steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; font-size: 14px; color: var(--mute); }
.steps ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.steps li button { font: inherit; font-size: 14px; color: var(--mute); background: none; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 8px 12px; cursor: pointer; transition: color .3s, border-color .3s; }
.steps li button[aria-current="step"] { color: var(--fg); border-color: var(--fg); }
.steps li button:hover { color: var(--fg); }

/* ---------- Design system: a bento of the component sheets ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 64px) clamp(24px, 2.8vw, 40px); }
.bento figure { min-width: 0; display: flex; flex-direction: column; }
.bento .stage { flex: 1; display: flex; align-items: center; }
.bento .w4 { grid-column: span 4; } .bento .w3 { grid-column: span 3; } .bento .w2 { grid-column: span 2; } .bento .w6 { grid-column: span 6; }
.bento figcaption, .cap { margin-top: 12px; font-size: 14px; color: var(--mute); display: flex; justify-content: space-between; gap: 16px; }
/* A row of cards that turns into a swipeable carousel on smaller screens (journeys personas) */
.bento .carousel { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 2.8vw, 40px); }
.bento .carousel > figure { grid-column: auto; }
.bento .dots { display: none; }
/* Gallery cards and maps: the swipe is slower and even, and the card rises 32px as it is uncovered,
   so even a tall card (a persona profile) visibly sweeps up into place rather than flashing in */
.bento [data-reveal="wipe"], .pan[data-reveal="wipe"] { transition: clip-path 1.6s cubic-bezier(.45, .05, .2, 1) var(--d, 0ms), transform 1.6s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), opacity 1s ease-out var(--d, 0ms); }
.bento [data-reveal="wipe"]:not(.in), .pan[data-reveal="wipe"]:not(.in) { transform: translateY(32px); }
@media (max-width: 900px) {
  .bento .carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .bento .carousel::-webkit-scrollbar { display: none; }
  .bento .carousel > figure { flex: 0 0 min(82%, 360px); scroll-snap-align: start; }
  .bento .dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 4px; margin-top: -24px; }
  .dots button { width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
  .dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background-color .3s var(--ease), transform .3s var(--ease); }
  .dots button[aria-current="true"]::before { background: var(--fg); transform: scale(1.15); }
}
/* ---------- Big maps: a window you drag to pan, with zoom steps ---------- */
.pan-fig { min-width: 0; }
.pan { position: relative; height: clamp(360px, 72vh, 760px); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; border-radius: var(--radius-md); background: #fff; box-shadow: 0 0 0 1px rgba(237,230,218,.14); cursor: grab; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.28) transparent; touch-action: pan-x pan-y; }
.pan.drag { cursor: grabbing; user-select: none; }
.pan:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
.pan-in { display: flex; width: max-content; height: calc(var(--z, 1) * 100%); }
.pan-in img { display: block; height: 100%; width: auto; max-width: none; pointer-events: none; }
.pan-ctl { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px; flex: none; }
.pan-ctl button { font: inherit; font-size: 13px; line-height: 1; color: var(--mute); background: none; border: 0; border-radius: var(--radius-pill); min-width: 32px; min-height: 28px; padding: 4px 10px; cursor: pointer; }
.pan-ctl button:hover, .pan-ctl button:focus-visible { color: var(--fg); }
.pan-ctl output { font-size: 12px; color: var(--mute); min-width: 36px; text-align: center; }
.pan-fig figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } /* never less than 4px between the caption and the zoom buttons */
/* A map that fits the window's width at 1x: the window takes the map's shape, so no empty strip on the right */
.pan.fit-w { height: auto; aspect-ratio: var(--ar); min-height: 280px; }
/* The page always scrolls past a map: a plain wheel or swipe never gets caught in it. The map pans sideways
   with a trackpad, and in any direction by dragging or with the arrow keys; at 1x a map that already fits
   holds no scroll at all. On touch screens a zoomed map can be swiped around */
.pan.fit-w:not(.zoomed) { overflow: hidden; cursor: default; }
@media (pointer: coarse) { .pan.zoomed { overflow-y: auto; } }
/* Buttons: light and dark crossfade, with a toggle */
.flip-tile { position: relative; display: grid; width: 100%; }
.flip-tile img { grid-area: 1 / 1; transition: opacity .9s var(--ease); }
.flip-tile[data-mode="dark"] img.light, .flip-tile[data-mode="light"] img.dark { opacity: 0; }
.mode { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px; }
.mode button { font: inherit; font-size: 12px; color: var(--mute); background: none; border: 0; border-radius: var(--radius-pill); padding: 4px 10px; cursor: pointer; }
.mode button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* ---------- Colour Creation Service: the phone floats over the window ---------- */
.pairs { display: grid; gap: clamp(48px, 7vw, 112px); }
.pair-v2 { position: relative; overflow: visible; }
.pair-v2 .browser { width: 88%; }
/* The phone is smaller than the window and centred on it, so it reads as sitting in front */
.pair-v2 .device { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 19%; border-radius: 22px; box-shadow: 0 40px 80px -12px rgba(0,0,0,.75), 0 18px 36px -10px rgba(0,0,0,.55); }
.pair-v2.flip .browser { margin-left: auto; }
.pair-v2.flip .device { right: auto; left: 0; }

/* ---------- Client feedback: a full screen, centred, opening on a large quote mark ---------- */
.quote-v2 { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding-block: 96px; }
.quote-v2 figure { max-width: 22em; font-size: clamp(26px, 3.3vw, 48px); }
.quote-v2 .mark { display: block; height: .55em; font-size: clamp(120px, 14vw, 220px); line-height: .9; font-weight: 700; color: var(--acc); }
.quote-v2 blockquote { margin: 0 auto; max-width: none; font-size: 1em; text-wrap: balance; }
.quote-v2 blockquote::before, .quote-v2 blockquote::after { content: none; }
.quote-v2 cite { margin-top: 32px; font-size: 14px; }

/* ---------- Lightbox: every image opens large ---------- */
[data-zoom] { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: var(--fg); display: flex; align-items: center; justify-content: center; padding: 72px var(--gut) 32px; background: rgba(12,10,8,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.lb.open { opacity: 1; pointer-events: auto; }
/* Native <dialog>: hidden unless open, and no grey browser backdrop (the panel draws its own) */
.lb:not([open]) { display: none; }
.lb::backdrop { background: transparent; }
/* One frame per kind, always centred in the window. The image fills the frame's width and scrolls inside it when it is taller. */
.lb .lb-body { flex: none; margin: 0 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: var(--radius-md); background: #fff; box-shadow: 0 0 0 1px rgba(237,230,218,.14); }
.lb .lb-body::-webkit-scrollbar { display: none; }
.lb .lb-body.lb-desk { width: min(1240px, 100%); max-height: calc(100dvh - 104px); }
.lb .lb-body.lb-phone { height: calc(100dvh - 104px); aspect-ratio: 375 / 812; max-width: 100%; border-radius: 28px; }
.lb img { display: block; width: 100%; height: auto; max-width: none; max-height: none; }
.lb .lb-close { position: absolute; top: 16px; right: var(--gut); font: inherit; font-size: 14px; font-weight: 600; color: var(--bg); background: var(--fg); border: 0; border-radius: var(--radius-sm); height: 42px; padding: 0 16px; cursor: pointer; }
.lb .lb-cap { position: absolute; left: var(--gut); top: 28px; font-size: 14px; color: var(--mute); }
html.lb-on { overflow: hidden; }

/* ---------- Next project: one row of the work list ---------- */
.next-row-v2 { padding-block: 120px 0; }
.next-row-v2 .projects { list-style: none; margin-top: 32px; border-block: 1px solid var(--line); }
.next-row-v2 a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; padding: 32px 0; color: var(--mute); transition: color .3s; }
.next-row-v2 h3 { font-size: clamp(26px, 3.3vw, 48px); line-height: 1.2; font-weight: 600; font-stretch: 112%; letter-spacing: -.03em; color: var(--fg); } /* h1 */
.next-row-v2 h3 .roll { flex-wrap: wrap; }
.next-row-v2 .tags { margin: 0; align-self: center; font-size: 14px; text-align: right; }
.next-row-v2 .arrow { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); transition: background-color .4s var(--ease), color .4s var(--ease), transform .6s var(--expo), border-color .4s; }
.next-row-v2 a:hover { color: var(--fg); }
.next-row-v2 a:hover .arrow { background: var(--acc); border-color: var(--acc); color: var(--bg); transform: translateX(6px); }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; row-gap: 24px; }
  .grid > :first-child { padding-right: 0; }
  .meta { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .meta dl:nth-child(3) { padding-left: 0; }
  .cols2, .head .copy { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .numbers > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .numbers.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numbers.three > div:nth-child(3) { border-left: 1px solid var(--line); border-top: 0; padding-left: 16px; }
  .numbers.three > div + div { padding-left: 16px; } .numbers.three > div { padding-right: 8px; } .numbers.three b { font-size: 36px; }
  .bento .w4, .bento .w3, .bento .w2 { grid-column: span 6; }
  .next-row-v2 a { grid-template-columns: 1fr auto; }
  .next-row-v2 .tags { display: none; }
}
@media (max-width: 760px) {
  .v2-hero.cs-hero { padding-top: calc(72px + 32px); padding-bottom: 32px; }
  .brief { padding-block: 96px; }
  .head { padding-block: 96px 32px; }
  .desk { aspect-ratio: 4 / 3; }
  /* On phones the window follows the copy straight away, then pins mid-screen while it scrolls */
  /* The title and copy move inside the pin (case.js) and the group sits mid-screen while the window scrolls */
  .desk-pin { height: 140vh; margin-top: 96px; }
  .desk-sticky { height: auto; display: block; padding-block: 0; top: max(16px, calc(50svh - var(--gh, 0px) / 2)); }
  .desk-sticky > .head { padding: 0 0 32px; }
  .mobiles { padding-inline: 0; }
  .mobiles .fan { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gut) 32px; scrollbar-width: none; }
  .mobiles .fan .device { width: 58vw; scroll-snap-align: center; }
  .pair-v2 .browser { width: 100%; }
  .pair-v2 .device { position: relative; right: auto; top: auto; transform: none; width: 28%; margin: -44% 4% 0 auto; border-radius: 10px; }
  .mobiles .fan .device { border-radius: 20px; }
  .pair-v2.flip .device { left: auto; }
}

/* Nav slides away while reading down, comes back on a small scroll up */
.top { transition: transform .5s var(--expo), background .4s, border-color .4s; }
.top.away { transform: translateY(-100%); }
/* The bar comes back whenever keyboard focus is inside it, so a focused link is never off screen */
.top.away:focus-within { transform: none; }

/* Pause/play control for motion that runs by itself (same as the homepage) */
.pp { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--mute); cursor: pointer; transition: color .3s, border-color .3s; }
.pp:hover, .pp:focus-visible { color: var(--fg); border-color: var(--mute); }
.pp:focus-visible { border-radius: 50%; }
.steps .pp { margin-right: auto; }


/* Back to the work list: sits where the eyebrow was, arrow in a circle like the next project row */
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--fg); }
.back .arrow { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s, transform .6s var(--expo); }
.back:hover .arrow, .back:focus-visible .arrow { background: var(--acc); border-color: var(--acc); color: var(--bg); transform: translateX(-4px); }
.back + .v2-title { margin-top: 24px; }

/* Phones: the mobile type scale from the design system (each style's -mobile row) */
@media (max-width: 760px) {
  .v2-title, .head h2 { font-size: 48px; }                                   /* display-m-mobile */
  .next-row-v2 h3 { font-size: 20px; letter-spacing: -.025em; }             /* h3-mobile, same as the homepage work list */
  .next-row-v2 h3 .roll { --lh: 1.1em; }
  .contact h2 { font-size: min(51px, 13.1vw); }                              /* display-l-mobile, shrinks on narrower phones so LET'S TALK fits */
  .quote-v2 figure { font-size: 40px; }                                      /* h1-mobile */
  .foot-links a { font-size: 20px; }                                         /* h3-mobile */
  .thesis, .contact-row .email { font-size: 16px; }                          /* p2-mobile */
  .meta dd, .cols2 p, .head .copy p { font-size: 14px; }                     /* p3-mobile */
  .nav > a, .talk, .btn-primary, .numbers > div > span, .steps, .steps li button, .bento figcaption, .cap,
  .quote-v2 cite, .lb .lb-close, .lb .lb-cap, .back, .footbar { font-size: 13px; } /* p4-mobile */
}

/* ---------- Brand colours drawn as live swatches (OMV), so they stay sharp at any size ---------- */
.palette { display: grid; gap: 40px; width: 100%; }
.palette .sub { margin-bottom: 16px; }
.swatches { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; list-style: none; }
.sw { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.sw i { display: block; aspect-ratio: 16 / 9; background: var(--c); transition: transform .6s var(--expo); transform-origin: bottom; }
.sw.big i { aspect-ratio: 16 / 7; }
.sw:hover i { transform: scaleY(1.06); }
.sw span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px; font-size: 14px; font-weight: 600; }
.sw code { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 400; color: var(--mute); }
.tints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; }
.tints ul { list-style: none; display: grid; gap: 10px; align-content: start; }
.tints li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.tints li i { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--c); }
.tints li code { display: block; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 400; color: var(--mute); }

/* ---------- Cards that swap to their hover state, as they do on the site (OMV) ---------- */
.hover-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.8vw, 40px); max-width: 980px; margin-inline: auto; }
.hcard { position: relative; display: grid; border-radius: var(--radius-md); overflow: hidden; transition: transform .6s var(--expo); }
.hcard img { grid-area: 1 / 1; width: 100%; height: auto; transition: opacity .4s var(--ease); }
.hcard img.hov { opacity: 0; }
.hcard:hover, .hcard:focus-visible { transform: translateY(-6px); }
.hcard[data-reveal="wipe"] { transition: transform .6s var(--expo), clip-path 1.8s cubic-bezier(.25, 1, .3, 1) var(--d, 0ms), opacity 1.2s ease-out var(--d, 0ms); }
.hcard:hover img.hov, .hcard:focus-visible img.hov, .hcard.on img.hov { opacity: 1; }

/* Long page designs get more scroll, so their window reads at the same pace as Crown's */
.desk-pin.long { height: 340vh; }

@media (max-width: 900px) {
  .swatches.four { --n: 2 !important; }
  .tints { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .desk-pin.long { height: 140vh; }
  .hover-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gut) 24px; margin-inline: calc(var(--gut) * -1); scrollbar-width: none; }
  .hcard { scroll-snap-align: center; }
  .sw span, .tints li { font-size: 13px; }
  .sw span { flex-direction: column; gap: 2px; padding: 10px 12px; }
  .sw.big i { aspect-ratio: 1; }
}

/* Very narrow screens (320px, or 400% zoom): long display words would be wider than the screen */
@media (max-width: 360px) {
  .v2-title, .head h2 { font-size: 11vw; }
  .next-row-v2 a { gap: 16px; }
  .next-row-v2 .arrow { width: 44px; height: 44px; }
}

/* ---------- Password and 404 pages (built by Next.js, same layout as a case study hero) ---------- */
.unlock .back { margin-bottom: 48px; }
.unlock .label + .unlock-title { margin-top: 16px; }
.unlock-title { font-size: clamp(34px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; font-stretch: 112%; }
.unlock-link { color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--mute); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .3s; }
.unlock-link:hover { text-decoration-color: var(--acc); }
.unlock-form { margin-top: 48px; max-width: 560px; }
.unlock-row { margin-top: 12px; display: flex; gap: 12px; }
.unlock-row input { flex: 1; min-width: 0; height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; font-size: 16px; transition: border-color .3s; }
.unlock-row input:hover { border-color: var(--unlit); }
.unlock-row input:focus { outline: none; border-color: var(--acc); }
.unlock-row .btn-primary { border: 0; cursor: pointer; font-family: inherit; transition: background-color .3s; }
.unlock-row .btn-primary:disabled { opacity: .6; cursor: progress; }
.unlock-error { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--acc); }
.unlock-home { margin-top: 32px; align-self: flex-start; }
@media (max-width: 600px) {
  .unlock-title { font-size: 48px; }
  .unlock-row { flex-direction: column; }
  .unlock-row input { flex: none; }
  .unlock-row .btn-primary { justify-content: center; }
}