/* V3: shorter, visual-first pages on design E.
   Loaded after home-haptic.css and pages-haptic.css. Adds the visible top bar, the featured
   project cards, the home blocks, the research page, the compact About timeline and the
   case-study template (ProjectHero, ProjectMeta, EvidenceGallery, ProjectInsight,
   ExpandableEvidence, RelatedProject + PageCTA). Colour stays in the work; type and spacing
   come from tokens below. */

:root {
    --grey: #6b6b6b;            /* was #8a8a8a (3.4:1 on white); #6b6b6b is 5.3:1 */
    --read: 68ch;               /* reading width */
    --t-display: clamp(40px, 4.45vw, 64px);
    --t-h2: clamp(32px, 3.4vw, 52px);
    --t-h3: clamp(26px, 2.2vw, 34px);
    --t-lede: clamp(18px, 1.35vw, 20px);
    --s-section: clamp(80px, 9vw, 128px);
    --line-dark: #262626;
}

/* ---------- Skip link ---------- */
.skip { position: fixed; top: 12px; left: 12px; z-index: 2000; padding: 12px 18px; border-radius: 100px; background: var(--black); color: var(--white); font-size: 15px; transform: translateY(-160%); transition: transform 0.2s; }
.skip:focus { transform: none; }

/* ---------- Top bar: wordmark + four links, clear of the fixed menu button ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; margin-right: 72px; }
.topbar__mark { display: block; font-size: clamp(40px, 4vw, 56px); line-height: 1; }
.topbar__nav { display: flex; gap: 6px; }
.topbar__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 100px; font-size: 16px; letter-spacing: -0.02em; transition: background-color 0.3s, color 0.3s; }
.topbar__nav a:hover { background: rgba(127, 127, 127, 0.16); }
.topbar__nav a[aria-current='page'] { box-shadow: inset 0 0 0 1px currentColor; }
@media (max-width: 767px) { .topbar__nav { display: none; } .topbar { margin-right: 56px; } }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pill-btn { min-height: 44px; height: auto; }
.pill-btn--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.pill-btn--line:hover { background: var(--white); color: var(--black); box-shadow: none; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link:hover { text-decoration-thickness: 2px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Home hero ---------- */
.hero--v3 { height: auto; min-height: 0; gap: 72px; padding-bottom: 48px; }
.hero--v3 .hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero--v3 .hero__title { max-width: 980px; }
.hero__lede { max-width: 640px; font-size: var(--t-lede); line-height: 1.45; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.9); }
.hero--v3 .pill-btn:hover { background: var(--black); color: var(--white); }
.hero--v3 .pill-btn--line:hover { background: var(--white); color: var(--accent); }
.proof { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.35); font-size: 15px; letter-spacing: -0.01em; }
.proof li { display: flex; align-items: center; gap: 10px; }
.proof li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ---------- Featured cards: media, then name, role, one line ---------- */
.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line, rgba(0, 0, 0, 0.12)); }
.card { position: relative; grid-column: span 3; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.card:nth-child(2n) { border-right: 0; }
.cards--feature .card:nth-child(3) { grid-column: span 4; border-right: 1px solid rgba(0, 0, 0, 0.12); }
.cards--feature .card:nth-child(4) { grid-column: span 2; }
.card__media { position: relative; display: block; aspect-ratio: 651 / 797; overflow: hidden; background: var(--black); }
.cards--feature .card:nth-child(3) .card__media { aspect-ratio: 1302 / 797; }
.card__media > :is(img, video) { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card__media > :is(img, video) { transform: scale(1.03); }
.card:hover .vlogo { transform: translate(-50%, -50%) scale(1.03); }
.card__body { display: grid; gap: 8px; padding: 22px var(--m) 36px; }
.card__name { font-family: var(--serif); font-weight: 300; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.05em; }
.card__name a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.card__name a:focus-visible { outline: none; }
.card:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: -4px; }
.card__role { font-size: 14px; letter-spacing: -0.01em; color: var(--grey); }
.card__line { max-width: 44ch; font-size: 17px; line-height: 1.4; letter-spacing: -0.015em; }
.card__cta { margin-top: 6px; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.card:hover .card__cta { text-decoration-thickness: 2px; }
.cards__more { display: flex; justify-content: flex-end; padding: 24px var(--m) 0; }

/* Archive cards: smaller, three or four across */
.cards--archive { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards--archive .card { grid-column: auto; border-right: 1px solid rgba(0, 0, 0, 0.12); }
.cards--archive .card:nth-child(4n) { border-right: 0; }
.cards--archive .card__media { aspect-ratio: 4 / 3; background: var(--tile); }
.cards--archive .card__name { font-size: clamp(24px, 1.9vw, 30px); }
.cards--archive .card__line { font-size: 15px; }

/* ---------- Home blocks ---------- */
.home-sec { padding: var(--s-section) var(--m); }
.home-sec__title { max-width: 18ch; margin: 40px 0 64px; font-family: var(--serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.055em; }
.bring { --cols: 3; list-style: none; padding: 0; }
.bring h3 { margin-top: 8px; }
.bring p { font-size: 17px; }
.bring-note { max-width: var(--read); margin-top: 40px; font-size: 16px; line-height: 1.45; color: rgba(0, 0, 0, 0.72); }

/* Research signal: model evidence -> interface -> human decision */
.signal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px 64px; align-items: end; }
.signal .home-sec__title { max-width: 20ch; margin-bottom: 28px; }
.signal p { max-width: 52ch; margin-bottom: 28px; font-size: var(--t-lede); line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.flowmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.flowmap li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px 0; }
.flowmap li + li { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, 0.25); }
.flowmap b { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.1; letter-spacing: -0.04em; }
.flowmap span { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.flowmap li:not(:last-child)::after { content: '→'; position: absolute; top: 18px; right: -9px; z-index: 1; padding: 0 2px; background: var(--accent-deep); font-size: 18px; }
.flowmap--light { border-color: var(--line); }
.flowmap--light li + li { border-color: var(--line); }
.flowmap--light span { color: var(--body); }
.flowmap--light li:not(:last-child)::after { background: var(--white); }
.flowmap-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--body); }
.flowmap-cases > * { padding: 12px 20px 12px 0; }
.flowmap-cases > :not(:nth-child(3n + 1)) { padding-left: 20px; border-left: 1px solid var(--line); }
.flowmap-cases b { display: block; color: var(--ink); font-weight: 600; }

/* Contact */
.contact-sec { background: var(--accent); color: var(--white); }
.contact-sec .home-sec__title { margin-bottom: 20px; }
.contact-sec p { max-width: 52ch; margin-bottom: 36px; font-size: var(--t-lede); line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.contact-sec .pill-btn { height: auto; min-height: 56px; padding: 0 28px; font-size: clamp(17px, 1.6vw, 22px); }
.contact-sec .pill-btn:hover { background: var(--black); color: var(--white); }

/* ---------- Inner page hero, compact ---------- */
.v3-hero { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); padding: var(--m) var(--m) 48px; }
.v3-hero--black { --line: var(--line-dark); --muted: #9a9a9a; --body: #c4c4c4; background: #0b0b0b; color: #f5f5f7; }
.v3-hero--yellow { --line: rgba(0, 0, 0, 0.18); --muted: rgba(0, 0, 0, 0.62); --body: rgba(0, 0, 0, 0.78); background: var(--yellow); color: var(--black); }
.v3-hero--pink { --line: rgba(0, 0, 0, 0.18); --muted: rgba(0, 0, 0, 0.62); --body: rgba(0, 0, 0, 0.78); background: var(--pink); color: var(--black); }
.v3-hero--navy { --line: rgba(255, 255, 255, 0.22); --muted: rgba(255, 255, 255, 0.72); --body: rgba(255, 255, 255, 0.86); background: var(--accent-deep); color: var(--white); }
.v3-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.v3-hero__body .eyebrow { color: var(--muted); }
.v3-hero h1 { max-width: 22ch; font-family: var(--serif); font-weight: 300; font-size: var(--t-display); line-height: 1.06; letter-spacing: -0.06em; }
.v3-hero__deck { max-width: 60ch; font-size: var(--t-lede); line-height: 1.45; letter-spacing: -0.02em; color: var(--body); }

/* ProjectMeta: role, years, team, scope in one ruled row */
.meta { display: grid; grid-template-columns: repeat(var(--meta, 4), minmax(0, 1fr)); gap: 0 20px; margin: 0; }
.meta > div { padding-top: 14px; border-top: 1px solid var(--line); }
.meta dt { margin-bottom: 6px; font-size: 13px; letter-spacing: -0.01em; color: var(--muted); }
.meta dd { margin: 0; max-width: 32ch; font-size: 15px; line-height: 1.4; letter-spacing: -0.01em; }
.meta a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Hero media band */
.v3-media { position: relative; margin: 0; overflow: hidden; background: var(--black); }
.v3-media--video { aspect-ratio: 16 / 7; }
.v3-media--video video { width: 100%; height: 100%; object-fit: cover; }
.v3-media--stage { display: flex; justify-content: center; align-items: center; padding: clamp(24px, 5vw, 72px); background: var(--stage, #e8dccb); }
.v3-media--stage img { width: 100%; max-width: 1200px; height: auto; }
.v3-media--duo { display: flex; justify-content: center; gap: clamp(12px, 2vw, 28px); padding: clamp(24px, 4vw, 56px) var(--m); background: #07070a; }
.v3-media--duo video { width: min(30vw, 340px); height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; background: #111; }

/* Brief: the problem, my contribution, what I designed */
.brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0 var(--m); border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.brief > div { display: flex; flex-direction: column; gap: 14px; padding: 40px 28px 48px 0; }
.brief > div + div { padding-left: 28px; border-left: 1px solid rgba(0, 0, 0, 0.12); }
.brief h2 { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--grey); }
.brief p { max-width: 42ch; font-size: 18px; line-height: 1.45; letter-spacing: -0.015em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; border-radius: 100px; background: var(--chip); font-size: 15px; letter-spacing: -0.01em; }

/* EvidenceGallery: 2-4 figures, captions explain a decision */
.proof-sec { padding: var(--s-section) var(--m); }
.proof-sec > .label { margin-bottom: 48px; color: var(--grey); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 20px; }
.gallery > .wide { grid-column: 1 / -1; }
.gallery figure { margin: 0; min-width: 0; }
.gallery figure > img { display: block; width: 100%; height: auto; }
.gallery figcaption, .gallery .cap { max-width: 62ch; margin-top: 14px; font-size: 16px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); }
.gallery figcaption b, .gallery .cap b { display: block; margin-bottom: 2px; font-weight: 600; }
.stage { display: flex; align-items: center; justify-content: center; padding: 6%; background: var(--stage, #ece9f5); }
.stage img { width: 100%; height: auto; }
.stage--tall img { width: auto; max-height: 640px; max-width: 100%; border-radius: 14px; }
/* Reused SlateRoom studies: one per cell, caption under the stage */
.gallery .sr-step { display: flex; flex-direction: column-reverse; gap: 14px; align-items: stretch; }
.gallery .sr-step__text { align-self: auto; }
.gallery .sr-step__num { display: none; }
.gallery .sr-step__title { margin: 0 0 2px; font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.45; letter-spacing: -0.01em; }
.gallery .sr-step__copy { max-width: 62ch; font-size: 16px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); }
.gallery .sr-stage { flex: 1; }
.gallery-note { margin-top: 40px; font-size: 14px; color: var(--grey); }
/* Reused Verikai studies: drop their long built-in captions' styling in favour of the gallery's */
.gallery .shot figcaption { color: var(--ink); }

/* What changed + insight */
.outcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; padding: var(--s-section) var(--m); border-top: 1px solid rgba(0, 0, 0, 0.12); }
.outcome h2 { font-family: var(--serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.055em; }
.outcome p { max-width: 52ch; font-size: var(--t-lede); line-height: 1.5; letter-spacing: -0.015em; }
.outcome .tag { display: inline-block; margin-bottom: 12px; font-size: 13px; color: var(--grey); }
.insight { padding: var(--s-section) var(--m); background: var(--accent-deep); color: var(--white); }
.insight .label { color: rgba(255, 255, 255, 0.78); }
.insight p { max-width: 28ch; margin-top: 32px; font-family: var(--serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.055em; }

/* ExpandableEvidence: native details */
.more { padding: 0 var(--m); border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.more details { max-width: 1100px; }
.more summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 300; font-size: var(--t-h3); letter-spacing: -0.05em; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chip); font-family: var(--sans); font-size: 22px; letter-spacing: 0; }
.more details[open] summary::after { content: '−'; }
.more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.more__body { display: grid; gap: 28px; padding: 8px 0 56px; }
.more__body h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.more__body p, .more__body li { max-width: var(--read); font-size: 16px; line-height: 1.55; color: #333; }
.more__body ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }
.more__body figure { margin: 0; }
.more__body figure img, .more__body figure video { width: 100%; height: auto; }
.more__body figcaption { margin-top: 10px; font-size: 14px; color: var(--grey); }
.more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }

/* RelatedProject + PageCTA */
.next-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.next-cta > * { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 340px; padding: 48px var(--m); }
.next-cta__next { position: relative; background: var(--tile); }
.next-cta__next .label { color: var(--grey); }
.next-cta__next a { font-family: var(--serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.055em; }
.next-cta__next a::after { content: ''; position: absolute; inset: 0; }
.next-cta__next:hover a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.next-cta__next p { font-size: 16px; color: var(--grey); }
.next-cta__mail { background: var(--accent); color: var(--white); }
.next-cta__mail .label { color: rgba(255, 255, 255, 0.85); }
.next-cta__mail h2 { font-family: var(--serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.055em; }
.next-cta__mail .pill-btn:hover { background: var(--black); color: var(--white); }
.back-link { display: inline-flex; padding: 28px var(--m) 0; }

/* ---------- Research page ---------- */
.r-intro { padding: var(--s-section) var(--m) 0; }
.r-intro p { max-width: var(--read); font-size: var(--t-lede); line-height: 1.55; letter-spacing: -0.015em; }
.focus { --cols: 3; list-style: none; padding: 0; margin-top: 56px; }
.focus h3 { margin-top: 28px; }
.focus p { font-size: 17px; }
.r-sec { padding: var(--s-section) var(--m); }
.r-sec__title { margin: 28px 0 40px; font-family: var(--serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.055em; }
.r-sec > p { max-width: var(--read); font-size: var(--t-lede); line-height: 1.55; color: var(--body); }
.r-sec .label { color: var(--muted, var(--grey)); }
.evidence-links { --cols: 2; list-style: none; padding: 0; }
.evidence-links li { position: relative; }
.evidence-links a { font-family: var(--serif); font-weight: 300; font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.05em; }
.evidence-links a::after { content: ''; position: absolute; inset: 0; }
.evidence-links li:hover a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.evidence-links .card__role { color: var(--muted, var(--grey)); }
.prospective { display: inline-flex; align-self: flex-start; margin-bottom: 20px; padding: 6px 12px; border-radius: 100px; background: var(--yellow); color: var(--black); font-size: 13px; font-weight: 600; }

/* ---------- About ---------- */
.tl { border-bottom: 1px solid var(--line); }
.tl li { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.tl__dates { font-size: 14px; color: var(--muted); }
.tl__role { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -0.045em; }
.tl__org { display: block; margin-top: 4px; font-family: var(--sans); font-size: 15px; letter-spacing: -0.01em; color: var(--muted); }
.tl p { font-size: 16px; line-height: 1.45; color: var(--body); }
.tl a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); margin: 0 calc(var(--m) * -1); }
.quotes figure { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; margin: 0; padding: 40px var(--m); }
.quotes figure + figure { border-left: 1px solid var(--line); }
.quotes blockquote { max-width: 32ch; font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2vw, 30px); line-height: 1.2; letter-spacing: -0.04em; }
.quotes figcaption { font-size: 15px; line-height: 1.4; color: var(--body); }
.quotes figcaption b { display: block; color: var(--ink); font-weight: 600; }
.quotes-note { margin-top: 24px; font-size: 14px; color: var(--muted); }

/* ---------- Footer additions ---------- */
.footer__mail { color: #080303 !important; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .cards--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cards--archive .card:nth-child(4n) { border-right: 1px solid rgba(0, 0, 0, 0.12); }
    .cards--archive .card:nth-child(3n) { border-right: 0; }
}
@media (max-width: 991px) {
    .signal { grid-template-columns: 1fr; }
    .brief { grid-template-columns: 1fr; }
    .brief > div { padding: 32px 0 36px; }
    .brief > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); }
    .outcome { grid-template-columns: 1fr; }
    .meta { --meta: 2; gap: 20px; }
    .next-cta { grid-template-columns: 1fr; }
    .next-cta > * { min-height: 0; }
    .bring { --cols: 3; }
    .bring > :nth-child(2n) { border-right: 1px solid var(--line); }
    .bring > :last-child { border-right: 0; }
    .bring > :nth-child(n + 3) { border-top: 0; }
    .tl li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 767px) {
    .cards, .cards--archive { grid-template-columns: 1fr; }
    .card, .cards--feature .card:nth-child(3), .cards--feature .card:nth-child(4) { grid-column: auto; border-right: 0; }
    .cards--archive .card:nth-child(n) { border-right: 0; }
    .card__media, .cards--feature .card:nth-child(3) .card__media { aspect-ratio: 1 / 1; }
    .cards--archive .card__media { aspect-ratio: 16 / 10; }
    .hero--v3 { gap: 56px; padding-top: 22px; }
    .bring, .focus, .evidence-links { --cols: 1; }
    .bring > *, .focus > *, .evidence-links > * { border-right: 0 !important; }
    .bring > * + *, .focus > * + *, .evidence-links > * + * { border-top: 1px solid var(--line) !important; }
    .flowmap, .flowmap-cases { grid-template-columns: 1fr; }
    .flowmap li, .flowmap li + li { padding: 16px 0 18px; border-left: 0; }
    .flowmap li + li { border-top: 1px solid rgba(255, 255, 255, 0.25); }
    .flowmap--light li + li { border-top-color: var(--line); }
    .flowmap li:not(:last-child)::after { content: '↓'; top: auto; bottom: -13px; right: auto; left: 0; }
    .flowmap-cases > :not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
    .v3-hero { padding-top: 22px; }
    .meta { --meta: 1; }
    .gallery { grid-template-columns: 1fr; gap: 40px; }
    .more__grid { grid-template-columns: 1fr; }
    .quotes { grid-template-columns: 1fr; }
    .quotes figure + figure { border-left: 0; border-top: 1px solid var(--line); }
    .v3-media--video { aspect-ratio: 4 / 3; }
    .v3-media--duo video { width: 44vw; }
    .stage--tall img { max-height: 480px; }
}
.gallery > .shot--wide { grid-column: 1 / -1; }
.gallery > .shot { margin: 0; }
.gallery > figure { display: flex; flex-direction: column; }
.gallery > figure > :is(.vstage, .stage) { flex: 1; }

/* Contrast fixes found by axe (AA 4.5:1) */
.sec--pink { --muted: rgba(0, 0, 0, 0.68); }
.sr .v1-scale { color: #98989d; }
.gallery .vk-mrow.is-skip .vk-col code, .gallery .vk-mrow.is-skip .vk-target { opacity: 0.9; }
.gallery .vk-target__ph { color: #4f4c6b; }
.gallery .sr .v3-row.is-dim { opacity: 0.8; }

/* Narrow phones: long serif words must fit 280px */
.next-cta > * { min-width: 0; }
@media (max-width: 400px) {
    :root { --t-display: 34px; --t-h2: 30px; }
    .hero--v3 .hero__title { font-size: 34px; }
    .contact-sec .pill-btn, .next-cta .pill-btn { font-size: 16px; padding: 0 18px; }
}
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) {
    .focus { --cols: 1; }
    .focus > * { border-right: 0 !important; }
    .focus > * + * { border-top: 1px solid var(--line) !important; }
}
@media (max-width: 767px) { .gallery--3 { grid-template-columns: 1fr; } }
@media (max-width: 400px) {
    .sec__title, .statement, .home-sec__title, .r-sec__title { font-size: 28px !important; }
    .cols h3 { font-size: 22px; }
}
.gallery .vk-btn--primary[disabled] { background: #5b4fd0; opacity: 1; }
@media (max-width: 767px) { .flowmap-cases { display: none; } }

/* Tighter end of case studies: outcome + insight share one band; no empty panels */
.proof-sec { padding-bottom: 72px; }
.wrapup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid rgba(0, 0, 0, 0.12); }
.wrapup .outcome { display: flex; flex-direction: column; justify-content: flex-start; gap: 20px; padding: 56px var(--m); border-top: 0; }
.wrapup .outcome h2 { font-size: var(--t-h3); }
.wrapup .outcome .tag { margin-bottom: 8px; }
.wrapup .insight { padding: 56px var(--m); }
.wrapup .insight p { max-width: 24ch; margin-top: 20px; font-size: var(--t-h3); line-height: 1.15; }
.next-cta > * { min-height: 0; gap: 28px; padding: 40px var(--m); }
.next-cta__next > div { display: grid; gap: 6px; }
@media (max-width: 991px) {
    .wrapup { grid-template-columns: 1fr; }
    .wrapup .outcome, .wrapup .insight { padding: 40px var(--m); }
}
.proof-sec { padding-top: 72px; }
.proof-sec > .label { margin-bottom: 28px; }
.more details { max-width: none; }
.more summary { min-height: 76px; }
@media (max-width: 767px) { .proof-sec { padding-top: 48px; padding-bottom: 48px; } }
.v3-hero { gap: clamp(40px, 4vw, 56px); padding-bottom: 40px; }
/* Archive card with a device mockup: iPad frame centred on a flat colour field */
.cards--archive .card__media--device { display: flex; align-items: center; justify-content: center; padding: 9% 12%; background: var(--stage); }
.card__media--device .ipad-frame img { width: 100%; height: auto; transform: none; }