/* ── Case-study designs (js/designs.js) ───────────────────────
   A project page with a `design` takes its brand's colours across the whole page;
   each design below then has its own composition. Theme colours arrive as
   --th-bg / --th-ink / --th-accent / --th-soft / --th-line / --th-font. */

.page[data-design]:not(.is-before):not(.is-after) { background-color: var(--th-bg); }
.page[data-design] { color: var(--th-ink); }
.page[data-design] .proj__meta dt, .page[data-design] .proj__kicker, .page[data-design] .page__next-label, .page[data-design] .page__next-meta { color: var(--th-soft); }
.page[data-design] .proj__link { border-color: currentColor; }
.page[data-design] .proj__link:hover { background: var(--th-ink); color: var(--th-bg); }
.page[data-design] .proj__title, .page[data-design] .proj__subtitle { font-family: var(--th-font, inherit); }
.page[data-design] .proj__cover { background: transparent; }

/* Shared parts */
.dz-fig { margin: 0; overflow: hidden; }
.dz-fig img, .page .dz-fig img { width: 100%; height: auto; }
.full-bleed, .dz-hs, .dz-marquee { width: 100vw; margin-left: calc(50% - 50vw); }

.dz-marquee { overflow: hidden; padding: clamp(18px, 2vw, 36px) 0; white-space: nowrap; }
.dz-marquee__track { display: inline-flex; animation: dz-marquee 38s linear infinite; }
.dz-marquee__track span { padding-right: 0.6em; }
@keyframes dz-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* Sideways filmstrip: pinned while its pictures pass (desktop); a plain column on phones */
.dz-hs { position: relative; }
.dz-hs__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.dz-hs__track { display: flex; gap: clamp(16px, 2vw, 40px); padding: 0 clamp(24px, 5vw, 96px); will-change: transform; }
.dz-hs__item { position: relative; margin: 0; flex: none; height: min(72vh, 820px); }
.page .dz-hs__item img { width: auto; height: 100%; }
.dz-hs__item figcaption { position: absolute; left: 0; top: calc(100% + 12px); font: 500 12px / 1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.08em; color: var(--th-soft); }

[data-zoom], [data-parallax] { will-change: transform; }
figure:has(> img[data-zoom]), .ar-plate { overflow: hidden; }

@media (max-width: 720px) {
  .dz-hs { width: auto; margin-left: 0; }
  .dz-hs__pin { position: static; height: auto; display: block; }
  .dz-hs__track { flex-direction: column; padding: 0; }
  .dz-hs__item { height: auto; margin-bottom: 36px; }
  .page .dz-hs__item img { width: 100%; height: auto; }
}

/* ── Aakara · earthen editorial ── */
[data-design='earthen'] .proj__title { font-weight: 500; letter-spacing: -0.02em; text-transform: none; font-style: italic; }
.ea-text { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 6fr); gap: 16px clamp(24px, 4vw, 80px); padding: clamp(80px, 11vw, 220px) 0 clamp(56px, 7vw, 140px); border-top: 1px solid var(--th-line); align-items: start; }
.ea-num { font: italic 500 clamp(28px, 3vw, 56px) / 1 var(--th-font); color: var(--th-accent); }
.ea-head { font: italic 500 clamp(44px, 6vw, 128px) / 0.95 var(--th-font); letter-spacing: -0.02em; }
.ea-body { font: 400 clamp(19px, 1.45vw, 28px) / 1.5 var(--th-font); color: var(--th-soft); padding-top: 0.6em; }
.ea-body::first-letter { float: left; font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.1em 0 0; color: var(--th-accent); font-style: italic; }
.ea-fig { margin: 0 0 clamp(16px, 1.6vw, 28px); overflow: hidden; }
.ea-fig.is-inset { width: min(74%, 1400px); margin: clamp(48px, 6vw, 120px) auto; padding: clamp(14px, 1.4vw, 26px); background: var(--th-accent); }
.ea-fig.is-inset img { transform-origin: center; }
.page .ea-fig img { height: auto; }
.ea-credit { margin: clamp(64px, 8vw, 160px) 0 0; text-align: center; font: italic 400 clamp(20px, 1.6vw, 30px) / 1.3 var(--th-font); color: var(--th-accent); }

/* ── ZIO · runway ── */
.rw-marquee { background: var(--th-accent); color: #0b0b0b; font: 800 clamp(48px, 9vw, 200px) / 0.9 var(--display); letter-spacing: -0.04em; margin-bottom: clamp(40px, 5vw, 96px); }
.rw-marquee .dz-marquee__track { animation-duration: 24s; }
.rw-text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 80px); align-items: end; padding: clamp(72px, 10vw, 200px) 0 clamp(40px, 5vw, 96px); }
.rw-head { font: 800 clamp(56px, 9vw, 210px) / 0.84 var(--display); letter-spacing: -0.05em; text-transform: uppercase; }
.rw-idx { display: block; margin-bottom: 18px; color: var(--th-accent); font: 500 13px / 1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
.rw-body { font: 400 clamp(16px, 1.2vw, 22px) / 1.45 var(--text); color: var(--th-soft); }
.rw-fig { margin-bottom: clamp(16px, 1.6vw, 28px); }
.rw-hs { margin-bottom: clamp(40px, 5vw, 96px); }
.rw-credit { margin-top: clamp(64px, 8vw, 160px); font: 800 clamp(22px, 2vw, 40px) / 1 var(--display); text-transform: uppercase; letter-spacing: -0.02em; color: var(--th-accent); }

/* ── Form & Flow · flow ── */
.fl-panel { position: relative; margin: clamp(48px, 6vw, 120px) 0 clamp(16px, 1.6vw, 28px); padding: clamp(48px, 6vw, 120px) clamp(28px, 5vw, 110px); border-radius: clamp(20px, 2.4vw, 44px); background: radial-gradient(120% 140% at 100% 0%, #5a63ff 0%, rgba(90,99,255,0) 60%), var(--th-accent); color: #fff; overflow: hidden; }
.fl-dot { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--th-accent); font: 700 14px / 1 var(--display); }
.fl-head { margin-top: clamp(24px, 3vw, 56px); font: 700 clamp(44px, 6.4vw, 140px) / 0.9 var(--display); letter-spacing: -0.045em; }
.fl-body { max-width: 34em; margin-top: clamp(18px, 2vw, 32px); font: 400 clamp(17px, 1.3vw, 24px) / 1.45 var(--text); opacity: 0.88; }
.fl-fig { border-radius: clamp(16px, 1.8vw, 32px); margin-bottom: clamp(12px, 1.2vw, 20px); }
.fl-fig[data-reveal] { clip-path: inset(0 0 0 0 round clamp(16px, 1.8vw, 32px)); transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.6s; }
.page .fl-fig[data-reveal]:not(.is-in) { clip-path: inset(0 100% 0 0 round clamp(16px, 1.8vw, 32px)); opacity: 1; transform: none; }
.fl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); }
.fl-pair .fl-fig img { height: 100%; object-fit: cover; }
.fl-credit { margin-top: clamp(48px, 6vw, 120px); color: var(--th-accent); font: 700 clamp(18px, 1.4vw, 26px) / 1.2 var(--display); }

/* ── Consciousness · waves ── */
[data-design='waves'] .proj__title { font-weight: 300; letter-spacing: -0.02em; }
.wv-text { max-width: 980px; margin: 0 auto; padding: clamp(96px, 12vw, 240px) 0 clamp(64px, 8vw, 160px); text-align: center; }
.wv-wave { width: clamp(160px, 18vw, 320px); color: var(--th-accent); stroke-dasharray: 700; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s ease; }
.wv-text:not(.is-in) .wv-wave { stroke-dashoffset: 700; }
.wv-head { margin-top: clamp(24px, 3vw, 48px); font: 300 clamp(48px, 7vw, 150px) / 0.95 var(--th-font); letter-spacing: -0.03em; }
.wv-body { margin: clamp(20px, 2.4vw, 40px) auto 0; max-width: 36em; font: 300 clamp(18px, 1.4vw, 26px) / 1.55 var(--th-font); color: var(--th-soft); }
.wv-fig { margin-bottom: clamp(40px, 5vw, 100px); }
.wv-credit { padding: clamp(48px, 6vw, 120px) 0 0; text-align: center; font: 300 clamp(18px, 1.4vw, 26px) / 1.4 var(--th-font); color: var(--th-accent); }

/* ── Eva Design Group · gallery noir ── */
[data-design='noir'] .proj__title { font-weight: 400; letter-spacing: 0.04em; }
.nr-text { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 20px clamp(24px, 4vw, 96px); padding: clamp(96px, 12vw, 240px) 0 clamp(64px, 8vw, 160px); }
.nr-label { padding-top: 1.1em; border-top: 1px solid var(--th-accent); color: var(--th-accent); font: 500 clamp(11px, 0.85vw, 14px) / 1.4 var(--display); letter-spacing: 0.32em; text-transform: uppercase; }
.nr-body { font: 300 clamp(22px, 2.2vw, 44px) / 1.3 var(--display); letter-spacing: -0.01em; }
.nr-frame { margin: 0 auto clamp(56px, 7vw, 140px); width: min(100%, 1500px); padding: clamp(10px, 1.2vw, 22px); border: 1px solid var(--th-line); background: linear-gradient(180deg, rgba(180,154,106,0.06), rgba(180,154,106,0)); }
.nr-frame figcaption { display: flex; justify-content: space-between; padding-top: clamp(12px, 1.2vw, 20px); color: var(--th-accent); font: 500 clamp(10px, 0.75vw, 13px) / 1.4 var(--display); letter-spacing: 0.28em; text-transform: uppercase; }
.nr-credit { text-align: center; color: var(--th-accent); font: 500 12px / 1.4 var(--display); letter-spacing: 0.32em; text-transform: uppercase; }

/* ── .taras · studio index ── */
.st-marquee { background: var(--th-accent); color: #0c0c0c; font: 800 clamp(40px, 7vw, 150px) / 0.95 var(--display); letter-spacing: -0.04em; margin-bottom: clamp(40px, 5vw, 96px); transform: rotate(-1.5deg); }
.st-text { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 5fr); gap: 16px clamp(24px, 3vw, 64px); align-items: start; padding: clamp(72px, 9vw, 180px) 0 clamp(40px, 5vw, 96px); }
.st-mark { color: var(--th-accent); font: 800 clamp(40px, 5vw, 110px) / 0.9 var(--display); letter-spacing: -0.04em; }
.st-head { font: 800 clamp(40px, 5.2vw, 116px) / 0.9 var(--display); letter-spacing: -0.045em; }
.st-body { padding-top: 0.5em; color: var(--th-soft); font: 400 clamp(16px, 1.2vw, 22px) / 1.5 var(--text); }
.st-wall { columns: 2; column-gap: clamp(12px, 1.4vw, 24px); }
.st-wall.is-single { columns: 1; }
.st-item { break-inside: avoid; margin: 0 0 clamp(12px, 1.4vw, 24px); }
.st-item figcaption { display: flex; gap: 12px; padding: 10px 0 0; border-top: 2px solid var(--th-accent); margin-top: 10px; font: 500 12px / 1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--th-soft); }
.st-item figcaption b { color: var(--th-accent); }
.st-credit { margin-top: clamp(48px, 6vw, 120px); display: inline-block; padding: 10px 16px; background: var(--th-accent); color: #0c0c0c; font: 700 14px / 1 var(--display); }

/* ── 40 Feet · shipping manifest ── */
.mf-text { padding: clamp(80px, 10vw, 200px) 0 clamp(40px, 5vw, 96px); max-width: 1500px; }
.mf-tag { display: inline-block; padding: 8px 14px; background: var(--th-accent); color: #121110; font: 700 12px / 1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.mf-head { margin-top: clamp(20px, 2vw, 36px); font: 800 clamp(48px, 7vw, 160px) / 0.86 var(--display); letter-spacing: -0.05em; text-transform: uppercase; }
.mf-body { max-width: 38em; margin-top: clamp(18px, 2vw, 32px); color: var(--th-soft); font: 400 clamp(16px, 1.25vw, 23px) / 1.5 var(--text); }
.mf-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: clamp(16px, 2vw, 40px); padding: clamp(16px, 1.6vw, 28px) 0; border-top: 1px dashed var(--th-line); }
.mf-rail { display: flex; flex-direction: column; gap: 10px; font: 500 12px / 1.4 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--th-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.mf-rail b { color: transparent; -webkit-text-stroke: 1.5px var(--th-accent); font: 800 clamp(48px, 5vw, 110px) / 0.9 var(--display); letter-spacing: -0.04em; }
.mf-row[data-reveal] .mf-fig { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s; }
.mf-row[data-reveal]:not(.is-in) .mf-fig { transform: translate3d(12%, 0, 0); opacity: 0; }
.page .mf-row[data-reveal]:not(.is-in) { transform: none; opacity: 1; }
.mf-credit { margin-top: clamp(48px, 6vw, 120px); color: var(--th-accent); font: 500 13px / 1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── Initium World · split ── */
.sp-chapter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 96px); padding: clamp(56px, 7vw, 140px) 0; border-top: 1px solid var(--th-line); }
.sp-chapter.is-bare { grid-template-columns: minmax(0, 1fr); }
.sp-pin { position: sticky; top: clamp(80px, 12vh, 140px); align-self: start; }
.sp-idx { display: inline-flex; align-items: center; gap: 10px; color: var(--th-accent); font: 600 13px / 1 var(--display); letter-spacing: 0.08em; }
.sp-idx::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--th-accent); box-shadow: 0 0 0 6px rgba(23,178,106,0.15); }
.sp-head { margin-top: 20px; font: 700 clamp(40px, 4.6vw, 100px) / 0.92 var(--display); letter-spacing: -0.045em; background: linear-gradient(100deg, var(--th-ink) 30%, var(--th-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-body { margin-top: clamp(18px, 2vw, 32px); color: var(--th-soft); font: 400 clamp(16px, 1.2vw, 22px) / 1.5 var(--text); }
.sp-media { display: grid; gap: clamp(14px, 1.4vw, 24px); }
.sp-fig { border-radius: 14px; }
.sp-credit { padding-top: clamp(40px, 5vw, 96px); color: var(--th-accent); font: 600 15px / 1.3 var(--display); }

/* ── Debarro Interiors · architectural ── */
.ar-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(24px, 4vw, 96px); padding: clamp(88px, 11vw, 220px) 0 clamp(56px, 7vw, 140px); border-top: 1px solid var(--th-ink); }
.ar-head { display: flex; align-items: baseline; gap: 0.35em; font: 700 clamp(40px, 5vw, 110px) / 0.92 var(--display); letter-spacing: -0.045em; }
.ar-head::before { content: ''; flex: none; width: 0.28em; height: 0.28em; background: var(--th-accent); }
.ar-body { max-width: 34em; margin-left: auto; color: var(--th-soft); font: 400 clamp(16px, 1.2vw, 22px) / 1.55 var(--text); }
.ar-plate { width: 82%; margin: 0 0 clamp(48px, 6vw, 120px); }
.ar-plate.is-right { margin-left: auto; }
.ar-plate figcaption { display: flex; align-items: center; gap: 14px; padding-top: 14px; font: 500 clamp(10px, 0.75vw, 13px) / 1.4 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--th-soft); }
.ar-plate figcaption::before { content: ''; width: 48px; height: 1px; background: var(--th-accent); }
.ar-plate.is-right figcaption { justify-content: flex-end; }
.ar-credit { padding-top: 24px; border-top: 1px solid var(--th-ink); font: 500 13px / 1.4 var(--display); letter-spacing: 0.2em; text-transform: uppercase; }

/* ── Sidhi · herbal ── */
[data-design='herbal'] .proj__title { font-weight: 400; letter-spacing: 0; }
.hb-text { max-width: 900px; margin: 0 auto; padding: clamp(96px, 12vw, 240px) 0 clamp(56px, 7vw, 140px); text-align: center; }
.hb-leaf { display: block; width: 26px; height: 40px; margin: 0 auto clamp(24px, 3vw, 48px); border-radius: 0 100% 0 100%; background: var(--th-accent); transform: rotate(45deg); }
.hb-head { font: 400 clamp(48px, 6.4vw, 140px) / 0.95 var(--th-font); }
.hb-body { margin: clamp(20px, 2.4vw, 40px) auto 0; max-width: 34em; color: var(--th-soft); font: 400 clamp(17px, 1.3vw, 24px) / 1.6 var(--text); }
.hb-float { width: min(86%, 1500px); margin: 0 auto clamp(56px, 7vw, 140px); }
.hb-fig { border-radius: clamp(24px, 3vw, 56px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.45); }
.hb-credit { text-align: center; color: var(--th-accent); font: 400 clamp(18px, 1.4vw, 26px) / 1.4 var(--th-font); }

/* ── JC Construction · blueprint (restyles its blocks) ── */
[data-design='blueprint']:not(.is-before):not(.is-after) {
  background-image: linear-gradient(rgba(243,237,229,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(243,237,229,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  background-attachment: local;
  background-position: 0 calc(var(--sy, 0) * -0.35px); /* the grid slides a little slower than the page */
}
[data-design='blueprint'] .proj__title { text-transform: uppercase; letter-spacing: -0.03em; }
[data-design='blueprint'] .mod--th { background: transparent; }
[data-design='blueprint'] .mod--chapter, [data-design='blueprint'] .mod--section, [data-design='blueprint'] .mod--cards, [data-design='blueprint'] .mod--palette { border-top: 1px solid rgba(196,148,111,0.35); }
[data-design='blueprint'] .th__num { color: transparent; -webkit-text-stroke: 1.2px var(--th-accent); font: 800 clamp(56px, 6vw, 130px) / 0.8 var(--display); }
[data-design='blueprint'] .th__num::after { display: none; }
[data-design='blueprint'] .th__label { flex-direction: column; align-items: flex-start; gap: 14px; }
[data-design='blueprint'] .th__heading { text-transform: uppercase; letter-spacing: -0.035em; }
[data-design='blueprint'] .mod--image, [data-design='blueprint'] .mod--duo { margin-bottom: 14px; outline: 1px solid rgba(196,148,111,0.35); outline-offset: 6px; overflow: hidden; }
[data-design='blueprint'] .mod--duo { gap: 14px; }
[data-design='blueprint'] .th__swatch { border-radius: 0; box-shadow: inset 0 0 0 1px rgba(196,148,111,0.5); }

/* JC: headings build word by word; numbers rise; each mockup arrives its own way */
.wsplit .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.wsplit .w > span { display: inline-block; transform: translate3d(0, 108%, 0) rotate(4deg); transform-origin: left bottom; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i) * 60ms + 0.1s); }
.is-in .wsplit .w > span { transform: none; }
[data-design='blueprint'] .th__num { display: inline-block; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s; }
[data-design='blueprint'] .mod--th:not(.is-in) .th__num { transform: translate3d(0, 50%, 0); opacity: 0; }
[data-design='blueprint'] .th__body p, [data-design='blueprint'] .th__copy { transition: opacity 1s 0.5s, transform 1.1s 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
[data-design='blueprint'] .mod--th:not(.is-in) .th__body p, [data-design='blueprint'] .mod--th:not(.is-in) .th__copy { opacity: 0; transform: translate3d(0, 24px, 0); }
[data-design='blueprint'] .th__swatch, [data-design='blueprint'] .th__card { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s; }
[data-design='blueprint'] .th__swatch:nth-child(2), [data-design='blueprint'] .th__card:nth-child(2) { transition-delay: 0.15s; }
[data-design='blueprint'] .th__swatch:nth-child(3) { transition-delay: 0.3s; }
[data-design='blueprint'] .mod--th:not(.is-in) .th__swatch { transform: translate3d(0, 30%, 0); opacity: 0; }
[data-design='blueprint'] .mod--th:not(.is-in) .th__card { transform: translate3d(0, 80px, 0); opacity: 0; }
[data-design='blueprint'] .mod--split .th__media img { transition: clip-path 1.4s cubic-bezier(0.76, 0, 0.24, 1), transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
[data-design='blueprint'] .mod--split:not(.is-in) .th__media img { clip-path: inset(0 0 100% 0); transform: scale(1.15); }

[data-design='blueprint'] [data-enter] { transition: clip-path 1.3s cubic-bezier(0.76, 0, 0.24, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s, filter 1.2s; }
[data-design='blueprint'] [data-enter] figure, [data-design='blueprint'] [data-enter] img { transition: clip-path 1.3s cubic-bezier(0.76, 0, 0.24, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.page[data-design='blueprint'] [data-enter]:not(.is-in) { opacity: 1; transform: none; }
.page[data-design='blueprint'] [data-enter='wipe-up']:not(.is-in) { clip-path: inset(100% 0 0 0); }
.page[data-design='blueprint'] [data-enter='wipe-left']:not(.is-in) { clip-path: inset(0 0 0 100%); }
.page[data-design='blueprint'] [data-enter='wipe-right']:not(.is-in) { clip-path: inset(0 100% 0 0); }
.page[data-design='blueprint'] [data-enter='curtain']:not(.is-in) { clip-path: inset(0 50% 0 50%); }
.page[data-design='blueprint'] [data-enter='tilt']:not(.is-in) { opacity: 0; transform: perspective(1400px) rotateX(22deg) translate3d(0, 120px, 0); transform-origin: center bottom; }
.page[data-design='blueprint'] [data-enter='blur']:not(.is-in) { opacity: 0; filter: blur(24px); transform: scale(1.06); }
.page[data-design='blueprint'] [data-enter='zoom-out']:not(.is-in) { clip-path: inset(12% 12% 12% 12%); }
.page[data-design='blueprint'] [data-enter='zoom-out']:not(.is-in) img { transform: scale(1.35); }
.page[data-design='blueprint'] [data-enter='drop']:not(.is-in) { opacity: 0; transform: translate3d(0, -90px, 0) rotate(-2deg); }
.page[data-design='blueprint'] .mod--duo[data-enter]:not(.is-in) figure:first-child { transform: translate3d(-18%, 0, 0); }
.page[data-design='blueprint'] .mod--duo[data-enter]:not(.is-in) figure + figure { transform: translate3d(18%, 0, 0); }
.page[data-design='blueprint'] .mod--duo[data-enter='split']:not(.is-in) figure:first-child { transform: translate3d(0, 30%, 0); clip-path: inset(0 0 100% 0); }
.page[data-design='blueprint'] .mod--duo[data-enter='split']:not(.is-in) figure + figure { transform: translate3d(0, -30%, 0); clip-path: inset(100% 0 0 0); }

/* Every other design has its own way of bringing pictures in */
.ea-fig[data-reveal], .rw-fig[data-reveal], .wv-fig[data-reveal], .nr-frame[data-reveal], .st-item[data-reveal], .sp-fig[data-reveal], .ar-plate[data-reveal], .hb-fig[data-reveal] {
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), clip-path 1.4s cubic-bezier(0.76, 0, 0.24, 1), filter 1.4s ease;
}
.page .ea-fig[data-reveal]:not(.is-in) { opacity: 0; transform: scale(1.05); }                                   /* Aakara: settles like clay */
.page .rw-fig[data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(14%, 0, 0) skewX(-4deg); }             /* ZIO: struts in from the side */
.page .wv-fig[data-reveal]:not(.is-in) { opacity: 0; transform: none; filter: blur(18px); }                       /* Consciousness: comes into focus */
.page .nr-frame[data-reveal]:not(.is-in) { opacity: 0; transform: none; filter: brightness(0.15); }               /* Eva: a gallery light coming up */
.page .st-item[data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 70px, 0) skewY(5deg); }          /* .taras: snaps up into the wall */
.page .sp-fig[data-reveal]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(35% 0 0 0 round 14px); }    /* Initium: rises out of the ground */
.page .ar-plate.is-left[data-reveal]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }  /* Debarro: drawn across like a plan */
.page .ar-plate.is-right[data-reveal]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 0 0 100%); }
.page .hb-fig[data-reveal]:not(.is-in) { opacity: 0; transform: scale(0.9) translate3d(0, 50px, 0); }            /* Sidhi: grows like a leaf */
.page[data-design='cube'] .mod--image[data-reveal]:not(.is-in) { opacity: 0; transform: perspective(1400px) rotateY(-14deg) translate3d(-40px, 0, 0); } /* Optigrise: turns like a cube face */
[data-design='cube'] .mod--image[data-reveal] { transition: opacity 1s, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1); }

/* ── Optigrise · cube (restyles its blocks) ── */
[data-design='cube'] .mod--th { border-left: 10px solid var(--th-accent); }

/* Header: title and details on the left, the symbol built from nine tiles on the right */
.page[data-design='cube'] .proj__head {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'lead mark' 'side mark';
  align-items: end; gap: clamp(28px, 3vw, 56px) clamp(32px, 5vw, 120px);
}
.page[data-design='cube'] .proj__lead { grid-area: lead; }
.page[data-design='cube'] .proj__side {
  grid-area: side; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px clamp(24px, 3vw, 64px);
  padding-top: clamp(20px, 2vw, 32px); border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.page[data-design='cube'] .proj__side .proj__summary { margin: 0; max-width: 34em; }
.og-mark {
  grid-area: mark; align-self: center;
  --t: clamp(64px, 7.4vw, 150px); --s: calc(var(--t) * 0.27); /* tile size, stroke */
  display: grid; grid-template-columns: repeat(3, var(--t)); gap: calc(var(--t) * 0.3);
}
.og-tile { position: relative; width: var(--t); aspect-ratio: 1; --c: #9da3a8; }
.og-tile.is-grey { --c: #8f969c; } .og-tile.is-silver { --c: #c9cdd0; } .og-tile.is-white { --c: #ffffff; }
.og-tile.is-yellow { --c: #fad200; } .og-tile.is-green { --c: #3fa535; } .og-tile.is-orange { --c: #ff4e00; } .og-tile.is-blue { --c: #1f5fb4; }
/* each tile is a square frame with some sides left open, like the letters of the mark;
   drawn as flat bars (not borders) so every open end is cut square */
.og-tile::before {
  content: ''; position: absolute; inset: 0;
  --bar: linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat;
  background-image: var(--bar), var(--bar), var(--bar), var(--bar);
  background-position: top, bottom, left, right;
  background-size: 100% var(--s), 100% var(--s), var(--s) 100%, var(--s) 100%;
}
.og-tile.is-arch::before { background-image: var(--bar), none, var(--bar), var(--bar); }   /* open at the bottom */
.og-tile.is-cup::before { background-image: none, var(--bar), var(--bar), var(--bar); }    /* open at the top */
.og-tile.is-open-r::before { background-image: var(--bar), var(--bar), var(--bar), none; } /* open on the right */
.og-tile.is-open-l::before { background-image: var(--bar), var(--bar), none, var(--bar); } /* open on the left */
.og-tile.is-bars::before { background-image: none, none, var(--bar), var(--bar); }          /* two upright bars */
/* the tiles drop in one by one, then each lifts a little under the cursor */
.og-tile { animation: og-drop 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(0.35s + var(--i) * 0.08s); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes og-drop { from { opacity: 0; transform: translate3d(0, -40px, 0) scale(0.6) rotate(-12deg); } }
.og-mark:hover .og-tile { transform: scale(0.92); }
.og-mark .og-tile:hover { transform: translate3d(0, -8px, 0) scale(1.06); }

/* The brief: a white panel, the reverse of the page, under a band of the five service colours */
.page[data-design='cube'] .proj__modules > .mod--chapter:first-child {
  position: relative; border-left: 0; overflow: hidden;
  background: #ffffff; color: #073c59; --th-soft: rgba(7, 60, 89, 0.78); --th-accent: #1f5fb4;
  grid-template-columns: minmax(0, 1fr); padding-top: calc(clamp(72px, 9vw, 180px) + 14px);
}
.page[data-design='cube'] .proj__modules > .mod--chapter:first-child::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: linear-gradient(90deg, #fad200 0 20%, #3fa535 20% 40%, #ff4e00 40% 60%, #1f5fb4 60% 80%, #9da3a8 80%);
  transform-origin: left; transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
.page[data-design='cube'] .proj__modules > .mod--chapter:first-child:not(.is-in)::before { transform: scaleX(0); }
.page[data-design='cube'] .proj__modules > .mod--chapter:first-child .th__heading { font-size: clamp(44px, 6.4vw, 140px); max-width: 12em; }
.page[data-design='cube'] .proj__modules > .mod--chapter:first-child .th__body { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .page[data-design='cube'] .proj__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'mark' 'lead' 'side'; }
  .page[data-design='cube'] .proj__side { grid-template-columns: minmax(0, 1fr); }
  .og-mark { --t: 56px; justify-self: start; }
  .page[data-design='cube'] .proj__modules > .mod--chapter:first-child .th__body { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .og-tile { animation: none; } }
[data-design='cube'] .mod--section:nth-of-type(4n + 1) { --th-accent: #fad200; }
[data-design='cube'] .mod--section:nth-of-type(4n + 2) { --th-accent: #6dc065; }
[data-design='cube'] .mod--section:nth-of-type(4n + 3) { --th-accent: #3989c9; }
[data-design='cube'] .mod--section:nth-of-type(4n) { --th-accent: #ff4e00; }
[data-design='cube'] .mod--section { background: var(--th-accent); color: #073c59; border-left: 0; }
[data-design='cube'] .mod--section .th__label { color: #073c59; }
[data-design='cube'] .mod--duo, [data-design='cube'] .mod--image { padding: 10px; background: #fff; }
[data-design='cube'] .mod--duo { gap: 10px; }
[data-design='cube'] .mod--duo.is-stagger[data-reveal] figure { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
[data-design='cube'] .mod--duo.is-stagger[data-reveal]:not(.is-in) figure:first-child { transform: translate3d(0, 60px, 0); }
[data-design='cube'] .mod--duo.is-stagger[data-reveal]:not(.is-in) figure + figure { transform: translate3d(0, 140px, 0); }
[data-design='cube'] .th__card-media { border-radius: 0; }
[data-design='cube'] .th__swatches { gap: 10px; }
[data-design='cube'] .th__swatch { min-height: clamp(160px, 18vw, 340px); aspect-ratio: 1; flex: 1 1 0; }

/* ── Fresh Learning · campus ── */
[data-design='campus'] .proj__cover { border-radius: clamp(14px, 1.6vw, 28px); }
.cp-kicker { display: flex; align-items: center; gap: 14px; color: var(--th-accent); font: 600 clamp(11px, 0.85vw, 14px) / 1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.cp-kicker span:first-child { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--th-ink); color: var(--th-bg); letter-spacing: 0; }
.cp-kicker--solo { margin-bottom: 14px; }
.cp-copy, .cp-cols p { color: var(--th-soft); font: 400 clamp(17px, 1.3vw, 24px) / 1.55 var(--text); text-wrap: pretty; }

/* Headings rise in word by word */
.cp-words { display: flex; flex-wrap: wrap; gap: 0 0.24em; }
.cp-w { display: inline-block; overflow: hidden; padding-bottom: 0.08em; }
.cp-w > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i) * 70ms); }
.is-in .cp-w > span, .cp-words.is-in .cp-w > span { transform: none; }
.cp-title { font: 700 clamp(48px, 7vw, 156px) / 0.92 var(--display); letter-spacing: -0.05em; color: var(--th-ink); }
.cp-title--md { font-size: clamp(36px, 4.4vw, 96px); }
.cp-line { font: 600 clamp(26px, 2.8vw, 58px) / 1.05 var(--display); letter-spacing: -0.03em; }

/* Brief: big words, a gold rule that draws itself, two columns of text */
.cp-brief { padding: clamp(96px, 12vw, 240px) 0 clamp(64px, 8vw, 160px); }
.cp-brief .cp-title { margin-top: clamp(20px, 2.4vw, 40px); max-width: 12em; }
.cp-rule { display: block; height: 4px; width: min(40%, 520px); margin: clamp(28px, 3vw, 56px) 0; background: var(--th-accent); transform-origin: left; transform: scaleX(0); transition: transform 1.4s 0.5s cubic-bezier(0.76, 0, 0.24, 1); }
.cp-brief.is-in .cp-rule { transform: none; }
.cp-cols { columns: 2 22em; column-gap: clamp(32px, 4vw, 96px); max-width: 70em; }

/* Pictures swing in from alternate sides, then drift */
.cp-pic { margin: 0; }
.page .cp-pic img { border-radius: clamp(12px, 1.4vw, 24px); }
.page .cp-pic[data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 60px, 0) scale(0.96); }
.page .cp-pic.from-left[data-reveal]:not(.is-in) { transform: translate3d(-80px, 40px, 0) rotate(-3deg); }
.page .cp-pic.from-right[data-reveal]:not(.is-in) { transform: translate3d(80px, 40px, 0) rotate(3deg); }
.cp-pic[data-reveal] { transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease; }
.cp-drift { overflow: hidden; border-radius: clamp(12px, 1.4vw, 24px); margin-bottom: clamp(16px, 2vw, 36px); }
.cp-drift img { animation: cp-drift 22s ease-in-out infinite alternate; }
@keyframes cp-drift { from { transform: scale(1.02) translate3d(-1%, 0, 0); } to { transform: scale(1.1) translate3d(1.5%, -1.5%, 0); } }
.cp-float { width: min(78%, 1500px); margin: clamp(40px, 5vw, 96px) auto; }
.cp-float img { box-shadow: 0 60px 120px -50px rgba(12, 41, 83, 0.55); animation: cp-float 7s ease-in-out infinite; }
.cp-float.from-right { margin-left: auto; margin-right: 0; }
.cp-float.from-left { margin-left: 0; }
@keyframes cp-float { 50% { translate: 0 -14px; } }

/* Process: the sketch sheet on a stack of paper */
.cp-sketch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 120px); align-items: center; padding: clamp(64px, 8vw, 160px) 0; }
.cp-sketch__text { display: grid; gap: clamp(18px, 2vw, 32px); }
.cp-sketch__stack { position: relative; }
.cp-sheet--back { position: absolute; inset: 4% -2% -4% 4%; border-radius: 18px; background: var(--th-accent); opacity: 0.25; rotate: 4deg; }
.page .cp-sketch .cp-sheet img { rotate: -2deg; box-shadow: 0 40px 80px -40px rgba(12, 41, 83, 0.5); }

/* Five ideas, one mark: a pinned panel that steps through each idea, then shows the whole mark.
   Without .is-live (phones, reduced motion) it is a plain list of photo + words. */
.cp-steps { position: relative; }
.cp-steps__stage { display: grid; gap: 24px; }
.cp-steps__media, .cp-steps__icons, .cp-steps__words, .cp-steps__panel { display: contents; }
.cp-step-img, .cp-step-icon, .cp-step-text { order: var(--o); } /* photo, icon, words — idea by idea */
.cp-step-img { margin: 0; border-radius: clamp(16px, 2vw, 28px); overflow: hidden; }
.page .cp-step-img img { width: 100%; height: auto; display: block; }
.page .cp-step-icon { width: 72px; height: auto; border-radius: 14px; }
.cp-step-icon.is-blank, .cp-steps__bar { display: none; }
.cp-step-text { display: grid; gap: 10px; margin-bottom: 32px; }

.cp-steps.is-live { height: calc(var(--n) * 90vh + 100vh); }
.cp-steps.is-live .cp-steps__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; padding: clamp(72px, 10vh, 120px) 0 clamp(32px, 5vh, 64px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; align-content: stretch;
}
.cp-steps.is-live .cp-steps__media {
  display: block; position: relative; overflow: hidden; border-radius: clamp(20px, 2vw, 36px) 0 0 clamp(20px, 2vw, 36px);
  background: var(--th-ink); box-shadow: 0 50px 100px -60px rgba(12, 41, 83, 0.55);
}
/* Each photo wipes in from the side it is travelling towards, with a slow settle of scale */
.cp-steps.is-live .cp-step-img {
  position: absolute; inset: 0; border-radius: 0;
  clip-path: inset(0 0 0 100%); transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}
.cp-steps.is-live [data-dir="-1"] .cp-step-img { clip-path: inset(0 100% 0 0); }
.cp-steps.is-live .cp-step-img.is-past { clip-path: inset(0 0 0 0); transition-delay: 0s; }
.cp-steps.is-live .cp-step-img.is-on { clip-path: inset(0 0 0 0); z-index: 2; }
.page .cp-steps.is-live .cp-step-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1); }
.page .cp-steps.is-live .cp-step-img.is-on img { transform: scale(1.06); } /* settles just past the thin white edge in the source photos */
.page .cp-steps.is-live .cp-step-img.is-final.is-on img { transform: scale(1); }

.cp-steps.is-live .cp-steps__panel {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: clamp(28px, 3.4vw, 64px); border-radius: 0 clamp(20px, 2vw, 36px) clamp(20px, 2vw, 36px) 0;
  background: var(--th-ink); color: var(--th-bg); transition: background-color 0.9s ease, color 0.9s ease;
}
.cp-steps.is-live .is-even .cp-steps__panel { background: var(--th-accent); color: var(--th-ink); }
.cp-steps.is-live .cp-steps__icons { display: block; position: relative; height: clamp(96px, 10vw, 160px); }
.page .cp-steps.is-live .cp-step-icon {
  position: absolute; left: 0; top: 0; width: auto; height: 100%; border-radius: 18px;
  opacity: 0; transform: scale(0.7) rotate(-8deg); transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page .cp-steps.is-live .cp-step-icon.is-on { opacity: 1; transform: none; transition-delay: 0.2s; }
.cp-steps.is-live .cp-steps__words { display: block; position: relative; flex: 1; }
.cp-steps.is-live .cp-step-text {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.cp-steps.is-live .cp-step-text.is-past { transform: translate3d(0, -40px, 0); }
.cp-steps.is-live .cp-step-text.is-on { opacity: 1; transform: none; transition-delay: 0.25s; }
/* Progress: one segment per idea */
.cp-steps.is-live .cp-steps__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: clamp(20px, 2.4vw, 36px); }
.cp-steps__bar span { height: 3px; border-radius: 3px; background: currentColor; opacity: 0.22; transition: opacity 0.5s ease; }
.cp-steps__bar span.is-on { opacity: 1; }
/* The last step: the whole mark, the panel and photo become one surface */
.cp-steps.is-live .is-final .cp-steps__panel { background: #17213c; color: #fff; } /* the brandmark photo's own navy, so the two read as one surface */
.cp-steps.is-live .is-final .cp-steps__icons { visibility: hidden; }

/* Five ideas: cards that stack as they arrive */
.cp-ideas { padding: clamp(64px, 8vw, 160px) 0; }
.cp-ideas__head { display: grid; gap: clamp(18px, 2vw, 32px); margin-bottom: clamp(40px, 5vw, 96px); }
.cp-stack { list-style: none; margin: 0; padding: 0; }
.cp-card {
  position: sticky; top: calc(clamp(80px, 12vh, 140px) + var(--i) * 22px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-height: min(68vh, 680px); margin-bottom: clamp(48px, 10vh, 120px);
  border-radius: clamp(20px, 2vw, 36px); overflow: hidden;
  background: var(--th-ink); color: var(--th-bg);
  box-shadow: 0 -30px 60px -40px rgba(12, 41, 83, 0.5);
}
.cp-card:nth-child(even) { background: var(--th-accent); color: var(--th-ink); }
.cp-card__media { margin: 0; overflow: hidden; }
.page .cp-card__media img { height: 100%; object-fit: cover; }
.cp-card__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(28px, 3.4vw, 64px); }
.page .cp-card__icon { width: clamp(72px, 7vw, 120px); height: auto; border-radius: 14px; margin-bottom: auto; }
.cp-card__n { font: 600 13px / 1 var(--display); letter-spacing: 0.18em; opacity: 0.75; }
.cp-card__title { font: 700 clamp(30px, 3.2vw, 64px) / 0.95 var(--display); letter-spacing: -0.035em; }
.cp-card__body { font: 400 clamp(16px, 1.2vw, 22px) / 1.5 var(--text); opacity: 0.86; }

/* Colour: two circles that grow and overlap */
.cp-colour { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 120px); align-items: center; padding: clamp(64px, 8vw, 160px) 0; }
.cp-colour__text { display: grid; gap: clamp(18px, 2vw, 32px); }
.cp-venn { display: flex; justify-content: center; }
.cp-dot {
  width: min(32vw, 520px); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #f6f1e7; text-align: center; mix-blend-mode: multiply;
  transform: scale(0.5); opacity: 0; transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s; transition-delay: calc(var(--i) * 0.25s);
}
.cp-dot + .cp-dot { margin-left: -12%; }
.cp-colour.is-in .cp-dot { transform: none; opacity: 1; }
.cp-dot__name { font: 700 clamp(28px, 3vw, 60px) / 1 var(--display); letter-spacing: -0.03em; }
.cp-dot__code { font: 500 clamp(11px, 0.85vw, 14px) / 1.3 var(--display); letter-spacing: 0.12em; }

/* The pattern runs past as a band */
.cp-band { overflow: hidden; margin: clamp(40px, 5vw, 96px) 0; border-radius: clamp(14px, 1.6vw, 28px); background: #fff; }
.cp-band { --bh: clamp(220px, 24vw, 460px); --tw: calc(var(--bh) * 1130 / 915); height: var(--bh); } /* tile width at the band's height */
.cp-band__fill {
  height: 100%; width: calc(100% + var(--tw));
  background-repeat: repeat-x; background-size: var(--tw) 100%; background-position: 0 0;
  animation: cp-band-slide 22s linear infinite; will-change: transform;
}
@keyframes cp-band-slide { to { transform: translate3d(calc(-1 * var(--tw)), 0, 0); } }

/* Applications: the lead picture drifts; the rest sit in two columns that move apart */
.cp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 36px); margin-bottom: clamp(16px, 2vw, 36px); }
.cp-apps { padding: clamp(80px, 10vw, 200px) 0 0; }
.cp-apps__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 64px); align-items: center; margin-bottom: clamp(32px, 4vw, 72px); }
.cp-apps__n { display: grid; place-items: center; width: clamp(88px, 9vw, 180px); aspect-ratio: 1; border-radius: 50%; background: var(--th-accent); color: var(--th-ink); font: 800 clamp(32px, 3.6vw, 72px) / 1 var(--display); letter-spacing: -0.04em; transform: rotate(-12deg) scale(0.6); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.cp-apps__head.is-in .cp-apps__n { transform: none; }
.cp-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 36px); align-items: start; }
.cp-col { display: grid; gap: clamp(16px, 2vw, 36px); }
.cp-col--low { margin-top: clamp(80px, 12vw, 240px); }
.cp-credit { padding: clamp(80px, 10vw, 200px) 0 0; text-align: center; color: var(--th-accent); font: 600 clamp(18px, 1.4vw, 26px) / 1.3 var(--display); }

@media (max-width: 900px) {
  .cp-sketch, .cp-colour { grid-template-columns: minmax(0, 1fr); }
  .cp-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
  .cp-card__media { aspect-ratio: 16 / 10; }
  .page .cp-card__icon { width: 64px; margin-bottom: 8px; }
  .cp-dot { width: 46vw; padding: 0 12%; }
  .cp-dot__code { font-size: 9px; letter-spacing: 0.06em; }
  .cp-float { width: 100%; }
}
@media (max-width: 560px) {
  .cp-pair, .cp-cols2 { grid-template-columns: minmax(0, 1fr); }
  .cp-col--low { margin-top: 0; }
  .cp-apps__head { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-drift img, .cp-float img, .cp-band__fill { animation: none; }
}

@media (max-width: 900px) {
  .ea-text, .rw-text, .nr-text, .st-text, .ar-text, .sp-chapter { grid-template-columns: minmax(0, 1fr); }
  .sp-pin { position: static; }
  .ea-fig.is-inset { width: 100%; }
  .ar-plate { width: 100%; }
  .mf-row { grid-template-columns: minmax(0, 1fr); }
  .mf-rail { flex-direction: row; align-items: baseline; }
  .mf-rail b { font-size: 40px; }
}
@media (max-width: 560px) {
  .st-wall { columns: 1; }
  .fl-pair { grid-template-columns: minmax(0, 1fr); }
  .hb-float { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-marquee__track { animation: none; }
}

/* A picture that drifts with parallax is drawn a little larger, so its edges never show */
.ea-fig img[data-parallax] { scale: 1.12; }

/* ── JC Construction · foundation (the Behance boards, rebuilt as live panels) ──
   Deep green #063a33, muted clay #b5886a, near-black #111, Poppins — the page keeps the blueprint grid behind */
[data-design='foundation']:not(.is-before):not(.is-after) {
  background-image: linear-gradient(rgba(243,237,229,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(243,237,229,0.05) 1px, transparent 1px);
  background-size: 56px 56px; background-attachment: local;
  background-position: 0 calc(var(--sy, 0) * -0.35px);
}
[data-design='foundation'] { --fd-green: #063a33; --fd-clay: #b5886a; --fd-black: #111111; --fd-mint: #22b573; --fd-ease: cubic-bezier(0.22, 1, 0.36, 1); --fd-wipe: cubic-bezier(0.76, 0, 0.24, 1); }
[data-design='foundation'] .proj__title { font-family: 'Poppins', var(--display); font-weight: 600; letter-spacing: -0.03em; text-transform: none; }
.fd-panel { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 168px) clamp(28px, 6vw, 140px); font-family: 'Poppins', var(--text); }
.fd-h { font: 500 clamp(36px, 4.6vw, 96px) / 1.04 'Poppins', var(--display); letter-spacing: -0.03em; }
.fd-h--sm { font-size: clamp(22px, 2vw, 40px); }
.fd-h--xs { font-size: clamp(22px, 2.1vw, 42px); }
.fd-green { color: var(--fd-mint); }
.fd-clay { color: var(--fd-clay); }
.fd-dark { color: var(--fd-green); }
.fd-paras { display: grid; gap: 1em; max-width: 46em; margin-top: clamp(20px, 2vw, 36px); }
.fd-p { font: 300 clamp(14px, 1.05vw, 19px) / 1.65 'Poppins', var(--text); color: rgba(243, 237, 229, 0.82); }
.fd-p--clay { color: var(--fd-clay); }
.fd-p--sm { font-size: clamp(13px, 0.95vw, 17px); }
.fd-label { color: var(--fd-mint); font: 400 clamp(13px, 1vw, 18px) / 1 'Poppins', var(--text); }
.fd-label--light { color: #f3ede5; }

/* Words rise; paragraphs and lists follow in turn */
.fd-panel .fd-paras p, .fd-list li { transition: opacity 1s var(--fd-ease), transform 1.1s var(--fd-ease); }
.fd-panel:not(.is-in) .fd-paras p, .fd-panel:not(.is-in) .fd-list li { opacity: 0; transform: translate3d(0, 26px, 0); }
.fd-paras p:nth-child(1), .fd-list li:nth-child(1) { transition-delay: 0.45s; }
.fd-paras p:nth-child(2), .fd-list li:nth-child(2) { transition-delay: 0.6s; }
.fd-paras p:nth-child(3), .fd-list li:nth-child(3) { transition-delay: 0.75s; }
.fd-list li:nth-child(4) { transition-delay: 0.9s; }
.fd-panel figure { margin: 0; }

/* Line drawings draw themselves */
.fd-outline { position: absolute; fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.55; }
.fd-outline path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s 0.3s var(--fd-wipe); }
.is-in .fd-outline path { stroke-dashoffset: 0; }

/* Films (the Behance motion pieces) */
.fd-film { margin: 0; overflow: hidden; }
.fd-film video { display: block; width: 100%; height: auto; }
.page .fd-film[data-reveal]:not(.is-in) { opacity: 0; transform: scale(0.96); }
.fd-film[data-reveal] { transition: opacity 1.2s var(--fd-ease), transform 1.4s var(--fd-ease); }

/* Plates: each picture arrives its own way */
.fd-plate { position: relative; margin: 0; overflow: hidden; }
.fd-plate__frame { overflow: hidden; }
.page .fd-plate__frame img { display: block; width: 100%; height: auto; }
.page .fd-plate__frame img[data-parallax] { scale: 1.1; }
.fd-plate[data-reveal] { transition: clip-path 1.4s var(--fd-wipe), opacity 1.1s var(--fd-ease), transform 1.4s var(--fd-ease), filter 1.4s ease; }
.fd-plate[data-reveal] img { transition: transform 1.8s var(--fd-ease), filter 1.6s ease; }
.page .fd-plate[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.page .fd-plate[data-enter='rise']:not(.is-in) { clip-path: inset(100% 0 0 0); }
.page .fd-plate[data-enter='curtain']:not(.is-in) { clip-path: inset(0 50% 0 50%); }
.page .fd-plate[data-enter='wipe']:not(.is-in) { clip-path: inset(0 100% 0 0); }
.page .fd-plate[data-enter='zoom']:not(.is-in) { clip-path: inset(10% 10% 10% 10%); }
.page .fd-plate[data-enter='zoom']:not(.is-in) img { transform: scale(1.3); }
.page .fd-plate[data-enter='drop']:not(.is-in) { opacity: 0; transform: translate3d(0, -80px, 0); }
.page .fd-plate[data-enter='light']:not(.is-in) { filter: brightness(0.05) contrast(1.2); }
.page .fd-plate[data-enter='columns']:not(.is-in) { clip-path: inset(0 0 100% 0); }
.page .fd-plate[data-enter='tiles']:not(.is-in) { opacity: 0; transform: perspective(1600px) rotateX(16deg) translate3d(0, 90px, 0); transform-origin: center bottom; }
.fd-plate.is-light { background: #f0f0f0; }
.fd-overlay { position: absolute; z-index: 1; max-width: 12em; margin: 0; color: #fff; font: 400 clamp(28px, 4.2vw, 88px) / 1.08 'Poppins', var(--display); letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0,0,0,0.25); }
.fd-overlay.is-top-left { left: 6%; top: 7%; }
.fd-overlay.is-bottom-right { right: 5%; bottom: 7%; text-align: right; max-width: none; font-size: clamp(22px, 3vw, 60px); }
.fd-overlay.is-bottom-left { left: 6%; bottom: 8%; max-width: none; font-size: clamp(22px, 3vw, 60px); }
.fd-overlay .w > span { transition-delay: calc(var(--i) * 80ms + 0.9s); }
.fd-labels { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 2.2% 4%; color: #fff; font: 400 clamp(11px, 0.95vw, 17px) / 1 'Poppins', var(--text); }
.fd-labels span:last-child { color: #c8f031; font-weight: 600; }
.fd-labels span { transition: opacity 1s 1.2s, transform 1s 1.2s var(--fd-ease); }
.fd-plate:not(.is-in) .fd-labels span { opacity: 0; transform: translate3d(0, 12px, 0); }

/* Intro: green, logo and details on the left, the line drawing on the right */
.fd-intro { background: var(--fd-green); min-height: clamp(520px, 50vw, 980px); display: flex; align-items: center; }
.fd-intro__text { position: relative; z-index: 1; max-width: 60em; }
.page .fd-logo { width: min(100%, 420px); height: auto; margin-bottom: clamp(40px, 5vw, 96px); transition: opacity 1.2s, transform 1.4s var(--fd-ease); }
.fd-intro:not(.is-in) .fd-logo { opacity: 0; transform: translate3d(-40px, 0, 0); }
.fd-meta { display: grid; gap: 10px; margin-bottom: clamp(32px, 4vw, 72px); color: var(--fd-clay); font: 400 clamp(13px, 1vw, 18px) / 1.3 'Poppins', var(--text); }
.fd-quote { margin-top: 10px; color: var(--fd-clay); font: 400 clamp(14px, 1.05vw, 19px) / 1.4 'Poppins', var(--text); }
.fd-intro__lines { right: -4%; top: 4%; width: 46%; color: var(--fd-clay); }

/* Moodboard: white, collage left, clay heading right */
.fd-mood { background: #fff; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 120px); align-items: center; }
.page .fd-mood__art img { transition: clip-path 1.6s var(--fd-wipe), transform 1.8s var(--fd-ease); }
.fd-mood:not(.is-in) .fd-mood__art img { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transform: translate3d(-30px, 0, 0); }
.fd-mood.is-in .fd-mood__art img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.fd-mood .fd-h { font-size: clamp(40px, 5vw, 110px); }

/* Logo logic: steps wipe in left to right */
.fd-concept, .fd-inspired, .fd-nature { background: var(--fd-green); }
.fd-steps { margin: clamp(40px, 5vw, 96px) 0; }
.page .fd-steps img { transition: clip-path 1.8s 0.2s var(--fd-wipe); }
.fd-concept:not(.is-in) .fd-steps img { clip-path: inset(0 100% 0 0); }
.fd-inspired__art { margin: clamp(32px, 4vw, 72px) 0; }
.page .fd-inspired__art img { transition: clip-path 1.6s 0.2s var(--fd-wipe), transform 1.8s var(--fd-ease); }
.fd-inspired:not(.is-in) .fd-inspired__art img { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
.fd-nature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 0; }
.fd-nature__text { padding: clamp(64px, 8vw, 168px) clamp(28px, 4vw, 96px); }
.fd-nature__small { width: min(70%, 420px); margin-bottom: clamp(32px, 4vw, 72px) !important; overflow: hidden; }
.page .fd-nature__small img { transition: transform 1.8s var(--fd-ease), opacity 1.2s; }
.fd-nature:not(.is-in) .fd-nature__small img { transform: scale(1.25); opacity: 0; }
.fd-nature__big { overflow: hidden; }
.page .fd-nature__big img { height: 100%; object-fit: cover; scale: 1.12; }

/* Significance: the sunset crane on the left, words on the warm dark right */
.fd-sig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; background: linear-gradient(160deg, #3b2412 0%, #1a120c 60%, #120d09 100%); }
.fd-sig__photo { overflow: hidden; }
.page .fd-sig__photo img { height: 100%; object-fit: cover; scale: 1.1; }
.fd-sig__text { padding: clamp(56px, 7vw, 150px) clamp(28px, 5vw, 110px); align-self: center; }
.fd-sig .fd-h { color: #fff; font-size: clamp(30px, 3.4vw, 72px); }

/* Benefits: muted clay */
.fd-benefits { background: var(--fd-clay); color: var(--fd-green); min-height: clamp(460px, 42vw, 820px); display: flex; flex-direction: column; justify-content: center; }
.fd-benefits .fd-h { max-width: 12em; position: relative; z-index: 1; }
.fd-benefits__lines { right: -6%; top: 4%; width: 44%; color: var(--fd-green); }
.fd-list { list-style: none; margin: clamp(28px, 3vw, 56px) 0 0; padding: 0; display: grid; gap: 10px; max-width: 60em; position: relative; z-index: 1; }
.fd-list li { position: relative; padding-left: 26px; font: 300 clamp(14px, 1.05vw, 19px) / 1.55 'Poppins', var(--text); }
.fd-list li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--fd-green); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.fd-list b { font-weight: 600; }
.fd-list--light { color: rgba(243, 237, 229, 0.85); }
.fd-list--light li::before { background: var(--fd-mint); }

/* Clearspace: black */
.fd-clear { background: var(--fd-black); }
.fd-clear__art { margin-top: clamp(40px, 5vw, 96px); }
.page .fd-clear__art img { transition: opacity 1.4s 0.4s, transform 1.6s 0.4s var(--fd-ease); }
.fd-clear:not(.is-in) .fd-clear__art img { opacity: 0; transform: scale(0.94); }

/* Brand tone: the two angled shards slide in from opposite sides */
.fd-tone { background: var(--fd-black); min-height: clamp(640px, 66vw, 1280px); }
.fd-tone > .fd-label { position: absolute; left: 6%; top: 7%; z-index: 2; }
.fd-shard { position: absolute; transition: transform 1.6s var(--fd-ease), opacity 1.2s; }
.fd-shard.is-green { left: 0; top: 0; width: 35%; height: 61%; background: var(--fd-green); clip-path: polygon(0 45%, 100% 0, 100% 52%, 0 100%); color: var(--fd-mint); }
.fd-shard.is-clay { left: 35%; top: 33%; width: 35%; height: 61%; background: var(--fd-clay); clip-path: polygon(0 0, 100% 45%, 100% 100%, 0 52%); color: #1a120c; }
.fd-tone:not(.is-in) .fd-shard.is-green { transform: translate3d(-30%, -20%, 0); opacity: 0; }
.fd-tone:not(.is-in) .fd-shard.is-clay { transform: translate3d(30%, 20%, 0); opacity: 0; }
.fd-codes { position: absolute; display: grid; gap: 2px; font: 400 clamp(12px, 1.15vw, 22px) / 1.25 'Poppins', var(--text); }
.fd-codes span:nth-child(2), .fd-codes span:nth-child(4) { margin-bottom: 0.7em; }
.fd-shard.is-green .fd-codes { left: 50%; top: 30%; }
.fd-shard.is-clay .fd-codes { left: 12%; top: 22%; }
.fd-note { position: absolute; z-index: 1; width: 28%; }
.fd-note.is-1 { left: 42%; top: 9%; }
.fd-note.is-2 { left: 8%; top: 68%; }
.fd-note.is-3 { left: 75%; top: 50%; width: 21%; }
.fd-note .fd-paras { margin-top: 14px; }

/* Closing */
.fd-closing { background: var(--fd-green); min-height: clamp(480px, 48vw, 940px); }
.fd-closing__thanks { position: relative; z-index: 1; color: var(--fd-clay); font: 400 clamp(18px, 1.8vw, 34px) / 1.2 'Poppins', var(--text); }
.fd-closing__lines { right: 4%; top: 22%; width: 44%; color: var(--fd-clay); }
.fd-closing__name { position: absolute; left: clamp(28px, 6vw, 140px); bottom: clamp(40px, 5vw, 96px); display: grid; gap: 4px; color: var(--fd-clay); font: 400 clamp(14px, 1.2vw, 22px) / 1.3 'Poppins', var(--text); }
.fd-closing__year { position: absolute; right: clamp(28px, 6vw, 140px); bottom: clamp(40px, 5vw, 96px); color: var(--fd-clay); font: 400 clamp(11px, 0.85vw, 15px) / 1 'Poppins', var(--text); }
.fd-credit { padding-top: clamp(64px, 8vw, 140px); text-align: center; color: var(--fd-clay); font: 400 clamp(15px, 1.1vw, 20px) / 1.3 'Poppins', var(--text); }

@media (max-width: 900px) {
  .fd-mood, .fd-nature, .fd-sig { grid-template-columns: minmax(0, 1fr); }
  .fd-nature__big { aspect-ratio: 4 / 3; }
  .fd-sig__photo { aspect-ratio: 4 / 3; }
  .fd-intro__lines, .fd-benefits__lines { width: 70%; opacity: 0.25; }
  .fd-tone { min-height: 0; display: grid; gap: 28px; padding-top: 96px; }
  .fd-tone > .fd-label { position: static; }
  .fd-shard, .fd-note, .fd-note.is-3 { position: relative; left: auto !important; top: auto !important; width: 100% !important; }
  .fd-shard { height: 220px; clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%) !important; }
  .fd-shard .fd-codes { left: 10% !important; top: 26% !important; }
  .fd-closing__lines { width: 70%; top: auto; bottom: 30%; opacity: 0.35; }
}

/* ── Poster collections ─────────────────────────────────────── */
/* TCSL · red wall */
.rw2-head { display: flex; align-items: center; gap: 18px; padding: clamp(56px, 7vw, 140px) 0 clamp(32px, 4vw, 72px); color: var(--th-soft); font: 500 clamp(12px, 0.9vw, 15px) / 1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.rw2-bar { width: clamp(48px, 5vw, 96px); height: 6px; background: var(--th-accent); transform-origin: left; transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1); }
.rw2-head:not(.is-in) .rw2-bar { transform: scaleX(0); }
.rw2-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 96px); align-items: start; }
.rw2-col { display: grid; gap: clamp(48px, 7vw, 160px); }
.rw2-col--low { margin-top: clamp(120px, 18vw, 380px); }
.rw2-card { margin: 0; }
.rw2-frame { overflow: hidden; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.45); }
.page .rw2-frame img { transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.rw2-card:hover .rw2-frame img { transform: scale(1.04); }
.rw2-card[data-reveal] .rw2-frame { transition: clip-path 1.4s cubic-bezier(0.76, 0, 0.24, 1); clip-path: inset(0); }
.page .rw2-card[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.rw2-card:not(.is-in) .rw2-frame { clip-path: inset(100% 0 0 0); }
.rw2-card figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; padding-top: 18px; border-top: 2px solid var(--th-accent); margin-top: 18px; }
.rw2-n { grid-row: span 2; color: var(--th-accent); font: 800 clamp(28px, 2.6vw, 52px) / 0.9 var(--display); letter-spacing: -0.04em; }
.rw2-title { font: 700 clamp(18px, 1.5vw, 28px) / 1.1 var(--display); letter-spacing: -0.02em; }
.rw2-note { color: var(--th-soft); font: 500 clamp(11px, 0.85vw, 14px) / 1.3 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }

/* Kadalas Cafe · carousel */
/* The row scrolls on its own (mouse over it), so it sits in the page instead of pinning to the screen */
.kc-strip .dz-hs__pin { position: relative; height: auto; align-items: flex-start; padding: clamp(64px, 11vh, 120px) 0 clamp(110px, 14vh, 150px); }
.kc-strip .dz-hs__track { align-items: flex-start; gap: clamp(28px, 3.4vw, 72px); }
.kc-intro { flex: none; width: min(30vw, 480px); display: grid; gap: 18px; }
.kc-kicker { color: var(--th-ink); font: 600 13px / 1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.kc-title { font: 800 clamp(48px, 6vw, 130px) / 0.9 var(--display); letter-spacing: -0.05em; color: var(--th-ink); }
.kc-sub { color: var(--th-soft); font: 400 clamp(16px, 1.2vw, 22px) / 1.45 var(--text); }
/* Every poster the same height, standing straight, titles level beneath; a hover lifts and turns it slightly */
.kc-card { flex: none; margin: 0; height: min(66vh, 720px); display: flex; flex-direction: column; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.kc-card:hover { transform: translate3d(0, -10px, 0) rotate(var(--tilt)); }
.page .kc-card img { flex: 1 1 auto; min-height: 0; width: auto; height: auto; max-height: calc(100% - 64px); border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(15, 59, 57, 0.55); }
.kc-card figcaption { display: grid; gap: 4px; padding-top: 14px; }
.kc-card figcaption b { font: 700 clamp(15px, 1.2vw, 22px) / 1.15 var(--display); color: var(--th-ink); }
/* Arrows to step along the row (scrolling down, or a sideways swipe, moves it too) */
.kc-nav { position: absolute; left: 50%; transform: translateX(calc(-50% + clamp(80px, 8vw, 160px))); bottom: clamp(8px, 1.5vh, 20px); /* beneath the posters, a little right of centre */ display: flex; gap: 10px; z-index: 2; }
.kc-nav__btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--th-line); background: var(--th-bg, #fff); color: var(--th-ink);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s, color 0.25s, opacity 0.25s;
}
.kc-nav__btn svg { width: 20px; height: 20px; }
.kc-nav__btn:hover:not(:disabled) { background: var(--th-ink); color: var(--th-bg, #fff); transform: scale(1.06); }
.kc-nav__btn:active:not(:disabled) { transform: scale(0.96); }
.kc-nav__btn:disabled { opacity: 0.3; cursor: default; }
.kc-nav__btn:focus-visible { outline: 2px solid var(--th-accent); outline-offset: 3px; }
.kc-card figcaption span { display: inline-block; justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--th-accent); color: var(--th-ink); font: 600 11px / 1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }

/* Other posters · exhibit */
.ex-room { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 120px); align-items: center; padding: clamp(72px, 9vw, 180px) 0; }
.ex-room.is-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ex-room.is-right .ex-frame { order: 2; }
.ex-light { position: absolute; top: 0; left: 0; width: 58%; height: 100%; pointer-events: none; background: radial-gradient(50% 55% at 50% 45%, rgba(255, 236, 200, 0.16), rgba(255, 236, 200, 0) 70%); opacity: 0; transition: opacity 1.8s ease; }
.ex-room.is-right .ex-light { left: auto; right: 0; }
.ex-room.is-in .ex-light { opacity: 1; }
.ex-frame { position: relative; margin: 0; justify-self: center; width: min(100%, 620px); }
.page .ex-frame img { box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: filter 1.6s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.ex-room:not(.is-in) .ex-frame img { filter: brightness(0.12); transform: scale(0.96); }
.page .ex-room[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.ex-label { display: grid; gap: 14px; transition: opacity 1s 0.5s, transform 1.2s 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.ex-room:not(.is-in) .ex-label { opacity: 0; transform: translate3d(0, 24px, 0); }
.ex-n { color: var(--th-accent); font: 500 13px / 1 var(--display); letter-spacing: 0.24em; text-transform: uppercase; }
.ex-title { font: 600 clamp(34px, 3.8vw, 80px) / 1 var(--display); letter-spacing: -0.035em; }
.ex-note { padding-top: 14px; border-top: 1px solid var(--th-line); color: var(--th-soft); font: 400 clamp(14px, 1vw, 18px) / 1.4 var(--text); letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .rw2-wall { display: flex; flex-direction: column; gap: 56px; } /* one column, posters in order */
  .rw2-col { display: contents; }
  .kc-intro { width: 100%; }
  .kc-nav { display: none; } /* on phones the posters stack and simply scroll */
  .kc-card { height: auto; rotate: 0deg; margin-bottom: 40px; }
  .page .kc-card img { width: 100%; height: auto; }
  .ex-room, .ex-room.is-right { grid-template-columns: minmax(0, 1fr); }
  .ex-room.is-right .ex-frame { order: 0; }
  .ex-light { width: 100%; }
}

/* ── Poster viewer (js/lightbox.js) ── */
img[data-lightbox] { cursor: zoom-in; }
.has-lightbox .page { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: clamp(56px, 7vh, 96px) clamp(64px, 8vw, 140px);
  background: rgba(8, 8, 8, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.35s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lb__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; max-height: 100%; }
.lb__img {
  display: block; max-width: min(100%, 1400px); max-height: calc(100vh - clamp(150px, 18vh, 230px)); width: auto; height: auto;
  object-fit: contain; border-radius: 6px; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translate3d(var(--from, 0px), 0, 0) scale(0.96);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lb__img.is-in { opacity: 1; transform: none; }
.lb__stage figcaption { display: flex; gap: 14px; align-items: baseline; color: #f2efe9; font: 500 clamp(13px, 1vw, 17px) / 1.3 var(--display); text-align: center; }
.lb__count { color: rgba(242, 239, 233, 0.55); font-variant-numeric: tabular-nums; }
.lb__btn {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  transition: background-color 0.25s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.lb__btn:hover { background: rgba(255, 255, 255, 0.22); }
.lb__btn svg { width: 20px; height: 20px; }
.lb__close { top: clamp(16px, 3vh, 32px); right: clamp(16px, 3vw, 40px); }
.lb__close:hover { transform: rotate(90deg); }
.lb__prev { left: clamp(12px, 2.4vw, 40px); top: 50%; translate: 0 -50%; }
.lb__next { right: clamp(12px, 2.4vw, 40px); top: 50%; translate: 0 -50%; }
.lb__prev:hover { transform: translateX(-3px); }
.lb__next:hover { transform: translateX(3px); }
.lb__btn[hidden] { display: none; }
@media (max-width: 720px) {
  .lightbox { padding: 72px 12px 96px; }
  .lb__prev, .lb__next { top: auto; bottom: 24px; translate: none; }
  .lb__prev { left: calc(50% - 60px); }
  .lb__next { right: calc(50% - 60px); }
}

/* Poster Design category: the tiles stand upright and show each poster whole, at its own shape */
/* the tiles sit together, centred; more collections wrap onto centred rows below */
[data-page='category'][data-slug='poster-design'] .cat__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(40px, 4vw, 72px) clamp(20px, 2.2vw, 40px); }
[data-page='category'][data-slug='poster-design'] .cat__grid > li { flex: none; max-width: 100%; }
/* one shared, shorter height; each poster fills it whole, so all three line up top and bottom */
[data-page='category'][data-slug='poster-design'] .thumb__media { aspect-ratio: auto; height: clamp(340px, 36vw, 640px); background: transparent; display: flex; border-radius: clamp(10px, 1vw, 18px); }
.page[data-slug='poster-design'] .thumb__media img { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: left top; border-radius: clamp(10px, 1vw, 18px); }
.page[data-slug='poster-design'] .thumb__title, .page[data-slug='poster-design'] .thumb__meta { max-width: 26em; }

/* Poster Design cover wall: white gaps between the posters instead of dark ones */
[data-page='category'][data-slug='poster-design'] .cat__wall,
[data-page='category'][data-slug='poster-design'] .cat__hero { background: #ffffff; }

/* ── Brochures: booklet ───────────────────────────────────────── */
.bk-wrap { display: grid; justify-items: center; gap: 18px; padding: clamp(24px, 4vw, 72px) 0 clamp(48px, 6vw, 120px); }
.bk-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 40px); width: 100%; outline: none; }
.bk-book {
  --page-h: min(78vh, 860px);
  position: relative; height: var(--page-h); aspect-ratio: calc(2 * 1400) / 1979;
  perspective: 7000px; transform-style: preserve-3d; /* deep perspective: a turning page stays level instead of rising */
  transition: transform 1.25s cubic-bezier(0.45, 0.05, 0.2, 1); /* slides in step with the turning leaf */
  cursor: pointer;
}
.bk-book.is-closed-front { transform: translateX(-25%); }
/* the book casts a soft shadow along its pages' outline, the turning page included */

/* two half shadows, one under each side of the open book; the empty side's shows only once a page has landed there */
.bk-book > .bk-shade { position: absolute; top: 0; bottom: 0; z-index: -1; pointer-events: none; box-shadow: 0 24px 40px rgba(40, 24, 10, 0.2), 0 4px 10px rgba(40, 24, 10, 0.1); }
.bk-shade.is-left { left: 0; right: 50%; } .bk-shade.is-right { left: 50%; right: 0; }
.bk-book.is-closed-front > .bk-shade.is-left, .bk-book.is-closed-back > .bk-shade.is-right { opacity: 0; transition: opacity 0.15s ease; }
.bk-book > .bk-shade { transition: opacity 0.35s ease 1.05s; }
.bk-book.is-closed-back { transform: translateX(25%); }
.bk-leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.25s cubic-bezier(0.45, 0.05, 0.2, 1); will-change: transform;
}
.bk-leaf.is-turned { transform: rotateY(-180deg); }
.bk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #fff; } /* no shadow per page: stacked, they built a blotchy halo */
.bk-face.is-back { transform: rotateY(180deg); }
.page .bk-face img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* paper shading toward the spine, so the spread reads as a bound booklet */
.bk-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.bk-face.is-front::after { background: linear-gradient(90deg, rgba(0,0,0,0.16), rgba(0,0,0,0) 8%); }
.bk-face.is-back::after { background: linear-gradient(270deg, rgba(0,0,0,0.16), rgba(0,0,0,0) 8%); }
/* one soft, neutral shadow under the whole book, following it as it opens and closes */
.bk-book::before { content: ''; position: absolute; left: 50%; right: 0; bottom: -18px; height: 36px; z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.22), transparent 70%); filter: blur(6px); transition: left 1.25s cubic-bezier(0.45, 0.05, 0.2, 1), right 1.25s cubic-bezier(0.45, 0.05, 0.2, 1); }
.bk-book:not(.is-closed-front):not(.is-closed-back)::before { left: 0; right: 0; }
.bk-book.is-closed-back::before { left: 0; right: 50%; }
/* a turning page: it lifts off the stack, and light and shade sweep across it as it bends over the spine */
.bk-leaf.is-flipping .bk-face::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: bk-sheen 1.25s cubic-bezier(0.45, 0.05, 0.2, 1) forwards; }
.bk-leaf.is-flipping .bk-face.is-front::before { background: linear-gradient(90deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.28)); }
.bk-leaf.is-flipping .bk-face.is-back::before { background: linear-gradient(270deg, rgba(255,255,255,0.18), rgba(0,0,0,0) 50%, rgba(0,0,0,0.22)); }
@keyframes bk-sheen { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bk-leaf, .bk-book { transition-duration: 0.01s; } .bk-leaf.is-flipping .bk-face::before { animation: none; } }
.bk-arrow {
  flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--th-ink); color: var(--th-bg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}
.bk-arrow svg { width: 22px; height: 22px; }
.bk-arrow.is-prev:hover { transform: translateX(-3px); }
.bk-arrow.is-next:hover { transform: translateX(3px); }
.bk-arrow:disabled { opacity: 0.2; pointer-events: none; }
.bk-count { font: 600 clamp(13px, 1vw, 16px) / 1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--th-ink); }
.bk-hint { color: var(--th-soft); font: 400 13px / 1.3 var(--text); }
@media (max-width: 720px) {
  .bk-book { --page-h: auto; height: auto; width: calc(100vw - 100px); }
  .bk-arrow { position: absolute; z-index: 5; top: 50%; translate: 0 -50%; width: 44px; height: 44px; }
  .bk-arrow.is-prev { left: 0; } .bk-arrow.is-next { right: 0; }
  .bk-book.is-closed-front { transform: translateX(-25%); }
}

/* Brochure Design category: upright tiles that show each brochure cover whole */
[data-page='category'][data-slug='brochure-design'] .thumb__media { aspect-ratio: 1400 / 1979; }

/* Optigrise · Layers of meaning: on the brand yellow, in navy */
.page[data-design='cube'] .mod--cards {
  background: #fad200; color: #073c59;
  --th-soft: rgba(7, 60, 89, 0.82); --th-accent: #073c59;
  border-left-color: #073c59;
}
.page[data-design='cube'] .mod--cards .th__card-title, .page[data-design='cube'] .mod--cards .th__heading { color: #073c59; }
.page[data-design='cube'] .mod--cards .th__label { color: #073c59; } /* the block's own blue accent would not read on yellow */


/* ── Motion Design — Self-Taught · reel ───────────────────────
   One grid for every section: number + label in the left column, content in the right.
   Quiet surfaces, hairline rules, nothing decorative; the film supplies the colour. */
.page[data-design='reel'] .proj__modules { --rl-gap: clamp(96px, 11vw, 200px); --rl-cols: minmax(0, 3fr) minmax(0, 9fr); --rl-colgap: clamp(24px, 3vw, 64px); }
.rl-sec { display: grid; grid-template-columns: var(--rl-cols); gap: 28px var(--rl-colgap); margin-top: var(--rl-gap); padding-top: clamp(28px, 2.6vw, 44px); border-top: 1px solid var(--th-line); }
.rl-head { display: flex; align-items: baseline; gap: 14px; font: 500 12px / 1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.rl-head__n { color: var(--th-accent); font-variant-numeric: tabular-nums; }
.rl-head__label { color: var(--th-soft); }
.rl-sec__body { min-width: 0; }
.rl-sec h3 { font: 600 clamp(17px, 1.3vw, 22px) / 1.2 var(--display); letter-spacing: -0.01em; }
.rl-sec p { color: var(--th-soft); font: 400 clamp(15px, 1.05vw, 18px) / 1.55 var(--text); }

/* The film, untouched, beside its spec sheet */
.rl-film { display: grid; grid-template-columns: var(--rl-cols); gap: 28px var(--rl-colgap); align-items: end; padding-top: clamp(16px, 2vw, 40px); }
.rl-film__screen { grid-column: 2; grid-row: 1; width: min(100%, 680px); }
.rl-film .mod--video { margin: 0; }
.page .rl-film .mod--video.is-portrait video { width: 100%; height: auto; border-radius: 14px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.rl-film__bar { display: flex; align-items: center; gap: 14px; margin-top: 14px; color: var(--th-soft); font: 500 11px / 1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.06em; }
.rl-film__track { flex: 1; height: 1px; background: var(--th-line); overflow: hidden; }
.rl-film__track i { display: block; height: 100%; background: var(--th-ink); transform: scaleX(0); transform-origin: left; transition: transform 0.25s linear; }
.rl-film__specs { grid-column: 1; grid-row: 1; margin: 0; display: grid; gap: 0; align-self: end; }
.rl-film__specs div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--th-line); }
.rl-film__specs div:last-child { border-bottom: 1px solid var(--th-line); }
.rl-film__specs dt { color: var(--th-soft); font: 500 12px / 1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.rl-film__specs dd { margin: 0; font: 500 14px / 1.3 var(--display); text-align: right; }

/* 01 · the idea, set large */
.page .rl-idea__text { color: var(--th-ink); font: 500 clamp(24px, 2.6vw, 48px) / 1.22 var(--display); letter-spacing: -0.025em; max-width: 24em; text-wrap: pretty; }

/* 02 · approach: three columns, numbered */
.rl-approach__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rl-colgap); }
.rl-approach__list li { display: grid; gap: 12px; align-content: start; }
.rl-approach__n { color: var(--th-accent); font: 500 12px / 1 var(--display); letter-spacing: 0.12em; }

/* 03 · story structure: each beat placed at its second on a 0–30 s ruler */
.rl-timeline__beats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.rl-beat { display: grid; gap: 10px; align-content: start; }
.rl-beat figure { margin: 0; }
.page .rl-beat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.rl-beat__t { color: var(--th-soft); font: 500 11px / 1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.06em; }
.rl-beat__w { font: 600 13px / 1.25 var(--display); }
.rl-timeline__ruler { position: relative; height: 34px; margin-top: 28px; border-top: 1px solid var(--th-line); }
.rl-timeline__ruler span { position: absolute; top: 0; left: calc(var(--at) * 100%); transform: translateX(-50%); padding-top: 10px; color: var(--th-soft); font: 500 10px / 1 ui-monospace, 'SF Mono', Menlo, monospace; }
.rl-timeline__ruler span::before { content: ''; position: absolute; top: -4px; left: 50%; width: 1px; height: 7px; background: var(--th-soft); }
.rl-timeline__ruler span:first-child { transform: none; }
.rl-timeline__ruler span:first-child::before { left: 0; }
.rl-timeline__ruler span:last-child { transform: translateX(-100%); }
.rl-timeline__ruler span:last-child::before { left: auto; right: 0; }

/* 04 · motion guideline: six rule cards, each opening with a small visual */
.rl-guide__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--th-line); border: 1px solid var(--th-line); }
.rl-rule { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.2vw, 36px); background: var(--th-bg); }
.rl-rule__visual { height: 120px; margin-bottom: 12px; display: grid; place-items: center start; }
.rl-v-format { display: grid; place-items: center; width: 72px; aspect-ratio: 4 / 5; border: 1px solid var(--th-ink); border-radius: 6px; }
.rl-v-format i { font: 500 12px / 1 ui-monospace, 'SF Mono', Menlo, monospace; font-style: normal; color: var(--th-soft); }
.rl-v-rhythm { position: relative; width: 100%; height: 40px; border-bottom: 1px solid var(--th-line); }
.rl-v-rhythm i { position: absolute; bottom: 0; left: calc(var(--at) * 100%); width: 2px; height: 100%; background: var(--th-accent); }
.rl-v-colour { display: flex; }
.rl-v-colour i { width: 34px; height: 34px; border-radius: 50%; margin-right: -8px; box-shadow: 0 0 0 2px var(--th-bg); }
.rl-v-type { font: 700 40px / 1 var(--display); letter-spacing: -0.03em; }
.rl-v-comp { position: relative; display: grid; place-items: center; width: 72px; aspect-ratio: 4 / 5; border: 1px solid var(--th-line); border-radius: 6px; background: linear-gradient(var(--th-line), var(--th-line)) center / 1px 100% no-repeat, linear-gradient(var(--th-line), var(--th-line)) center / 100% 1px no-repeat; }
.rl-v-comp i { width: 14px; height: 14px; border-radius: 50%; background: var(--th-ink); }
.rl-v-light { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--th-line) 0 2deg, transparent 2deg 15deg); }
.rl-v-light i { width: 22px; height: 22px; border-radius: 50%; background: var(--th-ink); box-shadow: 0 0 24px 8px rgba(227, 100, 151, 0.55); }

/* 05 · frames: an even grid of stills with their timecodes */
.rl-frames__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rl-frames__grid li { position: relative; }
.page .rl-frames__grid img, .rl-frames__grid .rl-clip { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.rl-frames__grid span { display: block; margin-top: 8px; color: var(--th-soft); font: 500 10px / 1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.06em; }

/* credits */
.rl-credits { margin-bottom: clamp(24px, 3vw, 48px); }
.page .rl-credits p { color: var(--th-ink); }

@media (max-width: 960px) {
  .rl-timeline__beats { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 24px; }
  .rl-guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-frames__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rl-timeline__ruler { display: none; }
}
@media (max-width: 720px) {
  .rl-sec, .rl-film { grid-template-columns: minmax(0, 1fr); }
  .rl-film__screen, .rl-film__specs { grid-column: 1; grid-row: auto; width: 100%; }
  .rl-approach__list { grid-template-columns: minmax(0, 1fr); }
  .rl-timeline__beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-guide__grid { grid-template-columns: minmax(0, 1fr); }
  .rl-frames__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Film hero: the screen centred on the page, its specs as one even row beneath */
.rl-film { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(40px, 5vw, 80px); }
.rl-film__screen { grid-column: 1; grid-row: 1; width: min(100%, 640px); }
.rl-film__specs { grid-column: 1; grid-row: 2; width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--th-line); border-bottom: 1px solid var(--th-line); }
.rl-film__specs div, .rl-film__specs div:last-child { display: grid; grid-template-columns: none; gap: 10px; padding: clamp(18px, 2vw, 28px) clamp(12px, 1.6vw, 24px); border: 0; border-left: 1px solid var(--th-line); }
.rl-film__specs div:first-child { border-left: 0; padding-left: 0; }
.rl-film__specs dd { text-align: left; font-size: clamp(15px, 1.2vw, 20px); }
@media (max-width: 720px) {
  .rl-film__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-film__specs div { border-left: 0; border-top: 1px solid var(--th-line); padding-left: 0; }
}

/* Brochure category: smaller, portrait thumbnails, so more sit in a row */
[data-page='category'][data-slug='brochure-design'] .cat__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { [data-page='category'][data-slug='brochure-design'] .cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { [data-page='category'][data-slug='brochure-design'] .cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }