:root { --gut: max(20px, 4vw, calc((100vw - 1680px) / 2)); }   /* side gutter: content stops growing past 1680px on very wide screens */
/* Skim-first case pattern: a 30-second summary, one clear heading per section, decisions led by a picture, and a next case that looks clickable. */
.glance .g-lead { font-weight: 700; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -0.035em; max-width: 44ch; margin: 0; text-wrap: balance; }
.glance .g-grid { display: grid; gap: 14px; margin-top: clamp(28px, 5vh, 56px); }
@media (min-width: 900px) { .glance .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g-cell { border-radius: 18px; padding: 20px 22px; background: rgb(245 244 240 / 0.08); display: grid; gap: 8px; align-content: start; }
.g-cell .k { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.7; }
.g-cell p { margin: 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; font-weight: 500; }
.g-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(30px, 5vh, 56px); }
.g-nums div { display: grid; gap: 8px; align-content: start; padding: 18px 22px 0 0; border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.g-nums b { font-weight: 700; font-size: clamp(42px, 5vw, 80px); line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.g-nums span { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.35; opacity: 0.85; max-width: 30ch; }
@media (max-width: 600px) { .g-nums { grid-template-columns: 1fr; gap: 0; } .g-nums div { grid-template-columns: 96px 1fr; align-items: baseline; padding: 14px 0; } }
.g-roles { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 26px; align-items: baseline; font-size: 15px; line-height: 1.5; }
.g-roles .lbl { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.65; margin-right: 10px; }
.g-roles .lbl:not(:first-child) { margin-left: clamp(18px, 3vw, 40px); }
.g-roles span:not(.lbl) { padding: 0; box-shadow: none; background: none; font-weight: 500; }
.g-roles span:not(.lbl) + span:not(.lbl)::before { content: '\00b7'; margin: 0 9px; opacity: 0.5; }
.g-roles span.led { font-weight: 700; color: inherit; }
html.is-light .g-cell { background: rgb(20 20 22 / 0.05); } 
.sh { display: grid; gap: 14px; max-width: 980px; }
.sh .kick { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; opacity: 0.72; display: flex; gap: 10px; align-items: center; }
.sh .kick i { font-style: normal; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 12px; }
.sh h2 { margin: 0; font-weight: 700; font-size: clamp(34px, 4.6vw, 72px); line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance; }
.sh p { margin: 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.42; max-width: 48ch; opacity: 0.9; }
.kd { display: grid; gap: clamp(22px, 3vw, 52px); align-items: center; margin-top: clamp(44px, 8vh, 100px); }
@media (min-width: 960px) { .kd { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .kd.flip > .kd-vis { order: 2; } }
.kd-vis { border-radius: 22px; background: rgb(245 244 240 / 0.08); padding: clamp(18px, 3vw, 44px); display: flex; justify-content: center; align-items: center; gap: clamp(12px, 2vw, 26px); box-sizing: border-box; min-width: 0; }
html.is-light .kd-vis { background: rgb(20 20 22 / 0.05); }
.kd-vis > img, .kd-vis > figure img { display: block; max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.55); }
.kd-vis figure { margin: 0; min-width: 0; }
.kd-vis .ph { flex: 0 1 260px; min-width: 0; border-radius: 28px; border: 5px solid #0B0B0C; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6); }
.kd-vis .ph img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.kd-vis .cap { display: block; margin-top: 10px; font-size: 13px; opacity: 0.75; text-align: center; }
.kd-txt { display: grid; gap: 14px; align-content: center; }
.kd-n { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; opacity: 0.72; }
.kd-txt h3 { margin: 0; font-weight: 700; font-size: clamp(28px, 3vw, 46px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.kd-txt .why { margin: 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; }
.kd-txt .cost { margin: 0; padding-top: 12px; font-size: 15px; line-height: 1.45; opacity: 0.8; box-shadow: inset 0 1px 0 rgb(245 244 240 / 0.22); }
html.is-light .kd-txt .cost { box-shadow: inset 0 1px 0 rgb(20 20 22 / 0.15); }
.kd-txt .cost b { font-weight: 600; }
.bigstat { display: grid; gap: 18px; width: 100%; max-width: 520px; }
.bigstat .row2 { display: flex; gap: 18px; flex-wrap: wrap; }
.bigstat .bs { flex: 1 1 200px; border-radius: 18px; padding: 22px; background: rgb(245 244 240 / 0.1); }
.bigstat .bs b { display: block; font-weight: 700; font-size: clamp(44px, 5vw, 80px); line-height: 0.9; letter-spacing: -0.045em; }
.bigstat .bs span { display: block; margin-top: 8px; font-size: 15px; opacity: 0.85; }
.bigstat .bar { height: 14px; border-radius: 7px; background: rgb(245 244 240 / 0.15); overflow: hidden; } .bigstat .bar i { display: block; height: 100%; width: 75%; border-radius: 7px; background: var(--line); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .ticks.two { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.ticks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; }
.ticks li::before { content: ''; flex: 0 0 8px; height: 8px; margin-top: 0.55em; border-radius: 50%; background: currentColor; opacity: 0.7; }
.next-wrap { padding-top: clamp(56px, 10vh, 110px) !important; padding-bottom: clamp(40px, 8vh, 90px) !important; }
.next-card { display: grid; text-decoration: none; color: #F5F4F0; border-radius: 26px; overflow: hidden; position: relative; min-height: clamp(280px, 50vh, 480px); background: #000; isolation: isolate; }
.next-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.78; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s; z-index: -1; }
.next-card .nc-in { align-self: end; padding: clamp(22px, 4vw, 52px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; background: linear-gradient(to top, rgb(0 0 0 / 0.72), transparent); }
.next-card .nc-k { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.9; }
.next-card .nc-t { display: block; font-weight: 700; font-size: clamp(40px, 6.4vw, 104px); line-height: 0.9; letter-spacing: -0.045em; margin-top: 10px; }
.next-card .nc-s { display: block; margin-top: 12px; font-size: 16px; opacity: 0.88; max-width: 44ch; }
.next-card .nc-go { flex: 0 0 auto; width: clamp(60px, 6.4vw, 92px); aspect-ratio: 1; border-radius: 50%; background: #F5F4F0; color: #141416; display: grid; place-items: center; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.next-card .nc-go svg { width: 38%; height: 38%; }
@media (hover: hover) { .next-card:hover img { transform: scale(1.05); opacity: 0.92; } .next-card:hover .nc-go { transform: translateX(8px); } }
.next-card:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.next-wrap .after { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* pop scene: a pinned picture that zooms to close-ups while small cards pop up and name the problem */
.popscene { position: relative; height: 340vh; margin-top: clamp(28px, 5vh, 56px); }
.popscene .pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.popscene .stagebox { position: relative; width: min(1200px, 92vw); aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; }
.popscene .stagebox > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: var(--ox, 50%) var(--oy, 50%); transform: scale(var(--z, 1)); transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), transform-origin 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.8s; }
.popscene.on .stagebox > img { filter: brightness(0.62) saturate(0.85); }
.pop { position: absolute; width: min(300px, 44%); border-radius: 16px; padding: 14px 16px 16px; background: #F5F4F0; color: #141416; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.65); opacity: 0; transform: translateY(18px) scale(0.86); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.25); display: grid; gap: 8px; }
.pop.in { opacity: 1; transform: none; }
.pop .pk { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; opacity: 0.6; }
.pop b { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.pop .mini { border-radius: 10px; overflow: hidden; background: #1C1C1E; color: #F5F4F0; padding: 10px; font-size: 12px; line-height: 1.35; display: grid; gap: 6px; }
.pop .mini s { opacity: 0.6; } .pop .mini .row4 { display: flex; gap: 6px; } .pop .mini .row4 i { flex: 1; height: 18px; border-radius: 4px; }
@media (max-width: 700px) { .popscene .stagebox { aspect-ratio: 3 / 4; } .pop { width: 62%; } }
@media (prefers-reduced-motion: reduce) { .popscene { height: auto; } .popscene .pin { position: static; height: auto; } .pop { opacity: 1; transform: none; position: static; width: auto; margin-top: 10px; } }
/* doors: the four audiences as arched doorways, each opening onto the part of the site made for them */
.doors2 { display: grid; gap: clamp(14px, 2vw, 24px); margin-top: clamp(36px, 7vh, 72px); }
@media (min-width: 760px) { .doors2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.door2 { display: grid; gap: 12px; }
.door2 .arch { position: relative; aspect-ratio: 3 / 4.4; border-radius: 999px 999px 18px 18px; overflow: hidden; background: #1C1C1E; }
.door2 .arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 0); border-radius: 999px 999px 12px 12px; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) { .door2:hover .arch img { transform: scale(1.06); } }
.door2 .who { justify-self: start; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: #fff; background: var(--dc); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.door2 h4 { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.door2 p { margin: 0; font-size: 15px; line-height: 1.4; opacity: 0.85; }
/* artefacts with coloured ridges, revealed by a light that follows the pointer */
.relics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); width: 100%; }
.relic { position: relative; aspect-ratio: 3 / 5; border-radius: 14px; overflow: hidden; background: var(--pc); --mx: 50%; --my: 40%; touch-action: pan-y; }
.relic img { position: absolute; left: 8%; right: 8%; top: 6%; bottom: 4%; width: 84%; height: 90%; object-fit: contain; }
.relic .rg { -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, #000 18%, transparent 42%); mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, #000 18%, transparent 42%); }
.relic span { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgb(17 17 19 / 0.55); color: #F5F4F0; }
.ack { width: 100%; max-width: 560px; border-radius: 18px; padding: clamp(24px, 3vw, 40px); background: #0E0E0F; color: #EDE6DA; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(237 230 218 / 0.12); display: grid; gap: 16px; font-family: Georgia, 'Times New Roman', serif; }
.ack .lg { font-family: inherit; letter-spacing: 0.18em; font-size: 13px; opacity: 0.7; }
.ack p { margin: 0; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.4; }
.ack .go { justify-self: start; font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px; background: #A83A33; color: #fff; }

/* hero: title and summary on the left, the facts run the full width under them */
@media (min-width: 1000px) { .cine-open .open-text { grid-area: 2 / 1 / 4 / 3; } .cine-open .open-top { max-width: min(46vw, 760px); } .cine-open .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; } }
/* the page colour switch also switches the ink, so text never sits dark on dark or light on light */
body { transition: color 0.5s ease; }
html.is-light body { color: #101828; }
html.is-light .facts div, html.is-light .kd-txt .cost { border-color: rgb(16 24 40 / 0.2); }
/* next case: one full card, the picture edge to edge, so it stands out */
.next-card { min-height: clamp(380px, 64vh, 640px); color: #F5F4F0; box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.6); }
.next-card img { opacity: 0.9; }
.next-card .nc-in { background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.25) 55%, transparent); padding-top: clamp(80px, 14vh, 160px); }
html.is-light .next-card { color: #F5F4F0; }
/*nc-full: the next case fills the screen */
.next-wrap .next-card { min-height: calc(100vh - 180px); min-height: calc(100svh - 180px); }
.next-card.nc-photo img { opacity: 1; }
.next-card.nc-photo .nc-in { background: linear-gradient(to top, rgb(8 10 18 / 0.86), rgb(8 10 18 / 0.4) 55%, transparent); }
@media (max-width: 700px) { .next-wrap .next-card { min-height: calc(100svh - 190px); } }
/* next case card: a 21:9 cinema strip on tablets and up, not a near full-screen panel; phones keep the tall card */
@media (min-width: 701px) { .next-wrap .next-card { min-height: 0; aspect-ratio: 21 / 9; } .next-wrap .next-card .nc-in { padding-top: clamp(40px, 7vh, 90px); } }
/* titles one weight lighter: 600 instead of 700 */
h1, h2, .next-card .nc-t { font-weight: 600 !important; }