/* ===== Case study pages (shared) ===== */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar__logo { display: flex; align-items: center; min-height: 48px; }
.topbar__logo img { width: 143px; height: 56px; }
@media (max-width: 699px) { .topbar__logo img { width: 103px; height: 40px; } .topbar .nav { gap: 0; } .topbar .nav .mlink { padding-left: 12px; } .topbar .nav .mlink::after { left: 12px; } }

/* Cover */
.cover { background: var(--c-blue-100); padding: var(--space-2xl) 0 var(--space-4xl); }
.cover .wrap { display: flex; flex-direction: column; gap: var(--space-4xl); }
.cover__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xl); }
.cover__text { flex: 1 0 0; min-width: min(340px, 100%); max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.cover__kicker { color: var(--c-orange-800); }
.famjam-title { display: flex; align-items: flex-end; font-weight: 800; font-variation-settings: "opsz" 96; font-size: var(--text-art-cover-stack); line-height: .84; letter-spacing: -.05em; white-space: nowrap; }
.famjam-title .jam { font-family: "Bricolage Outline", "Bricolage Grotesque", sans-serif; color: transparent; -webkit-text-stroke: var(--size-cover-jam-stroke) var(--c-grey-950); transition: color .8s var(--ease-out-expo); }
.js .famjam-title .fam { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo); }
.is-loaded .famjam-title .fam { opacity: 1; transform: none; }
.is-loaded .famjam-title .jam { color: var(--c-grey-950); transition-delay: .5s; }
.cover__standfirst { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-lead); line-height: 1.25; color: var(--c-grey-850); }
.cover__byline { color: var(--c-grey-700); }
.cover__media { width: 560px; height: 493px; border-radius: var(--r-xl); overflow: hidden; flex: none; }
.cover__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1199px) { .cover__media { width: var(--size-cover-phones-w); max-width: 100%; height: var(--size-cover-phones-h); } }

/* Facts strip */
.facts { padding-block: var(--space-2xl); }
.facts dl { display: flex; flex-wrap: wrap; gap: var(--space-l) var(--space-xl); }
.facts dl > div { flex: 1 0 0; min-width: 150px; display: flex; flex-direction: column; gap: var(--space-s); }
.facts dl > div::before { content: ""; height: 2px; background: var(--c-grey-950); }
.facts dt { color: var(--c-grey-600); }

/* Back + view toggle */
.backtoggle { display: flex; flex-direction: column; gap: var(--space-l); }
.mlink--back { font-weight: 600; font-size: var(--text-sans-button); color: var(--c-grey-950); }
.togglerow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-bottom: var(--space-s); border-bottom: 1px solid var(--c-grey-150); }
.vtoggle { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--r-pill); background: var(--c-grey-75); }
.vtoggle a { position: relative; display: flex; align-items: center; justify-content: center; height: var(--size-toggle-pill-h); padding-inline: var(--space-toggle-pill-x); border-radius: var(--r-pill); font-weight: 600; font-size: var(--text-sans-toggle); line-height: 1; color: var(--c-grey-850); transition: background .2s ease-out; }
.vtoggle a::after { content: ""; position: absolute; inset: -4px -2px; min-height: 48px; } /* tap area >= 48 */
.vtoggle a[aria-current="page"] { background: var(--c-grey-950); color: var(--c-white); }
.vtoggle a:not([aria-current]):hover { background: var(--c-white); }
.vtoggle a:not([aria-current]):active { background: var(--c-grey-150); }
.togglerow__time { flex: 1 0 0; max-width: 398px; color: var(--c-grey-700); text-align: center; }
@media (max-width: 699px) { .togglerow { flex-wrap: nowrap; } .togglerow__time { min-width: 0; } }

/* At a glance */
.glance { display: flex; flex-wrap: wrap; gap: var(--space-xl); padding-bottom: 40px; border-bottom: 1px solid var(--c-grey-150); }
.glance > div { flex: 1 0 0; min-width: min(340px, 100%); display: flex; flex-direction: column; gap: var(--space-xs); }
.glance__label { color: var(--c-orange-800); }
.glance__brief { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-quote); line-height: 1.3; }
.glance__body { color: var(--c-grey-850); }
.glance__result { display: flex; align-items: center; gap: var(--space-s); }
.glance__fig { font-family: "Instrument Serif", serif; font-size: var(--text-serif-figure-s); line-height: 1; color: var(--c-blue-700); white-space: nowrap; }

/* Concise body */
.concise { padding: var(--space-xs) 0 var(--space-section); }
.concise .wrap { display: flex; flex-direction: column; gap: 40px; }
.steps-line { color: var(--c-grey-700); }

/* ===== Step cards (flip) ===== */
.cards { position: relative; display: flex; flex-direction: column; gap: var(--gutter); }
.cards.is-masonry { display: block; }
.cards.is-masonry > .scard { position: absolute; width: calc(50% - var(--gutter) / 2); }
.scard { position: relative; perspective: 1600px; }
.scard__inner { position: relative; display: grid; transform-style: preserve-3d; transition: transform .5s var(--ease-out-expo); }
.scard__face { grid-area: 1 / 1; border-radius: var(--r-xl); padding: 28px; box-shadow: var(--shadow-card); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.scard__front { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; background: var(--c-blue-50); }
.scard__back { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: var(--c-grey-950); color: var(--c-white); transform: rotateY(180deg); }
.scard.is-flipped .scard__inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .scard:hover .scard__inner { transform: rotateY(180deg); } }
.scard__img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; background: var(--c-blue-100); }
.scard__img img { width: 100%; height: 100%; object-fit: cover; }
.scard__text { display: flex; flex-direction: column; gap: var(--space-s); }
.scard__num { font-family: "Instrument Serif", serif; font-size: var(--text-serif-headline); line-height: 1.05; letter-spacing: -.01em; color: var(--c-blue-700); }
.theme-ds .scard__num { font-family: "Bricolage Outline", "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px var(--c-orange-700); }
.scard__kicker { color: var(--c-orange-800); }
.scard__title { font-weight: 800; font-size: var(--text-sans-heading-3); line-height: 1.1; letter-spacing: -.02em; }
.scard__summary { color: var(--c-grey-850); }
.scard__figs { display: flex; flex-wrap: wrap; gap: var(--space-m); width: 100%; padding-top: var(--space-m); border-top: 1px solid var(--c-blue-grey-200); }
.scard__figs > div { flex: 1 0 0; min-width: 120px; display: flex; flex-direction: column; gap: var(--space-2xs); }
.scard__figs .v { font-family: "Instrument Serif", serif; font-size: var(--text-serif-figure-s); line-height: 1; color: var(--c-blue-700); white-space: nowrap; }
.scard__figs .v.warn { color: #b84f00; }
.scard__figs .l { color: var(--c-grey-700); }
.scard__flip { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin: -12px 0 -14px; color: var(--c-grey-700); }
.scard__flip svg { width: 13px; height: 13px; fill: currentColor; }
.scard__flip:focus-visible { outline-offset: 0; }
.scard__backlabel { color: var(--c-orange-300); }
.scard__skills { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 24px; margin-top: 16px; }
.scard__skills li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-sans-body); line-height: 1.45; }
.scard__skills li::before { content: ""; flex: none; width: 14px; height: 8px; margin-top: 5px; border-left: 2px solid var(--c-orange-300); border-bottom: 2px solid var(--c-orange-300); transform: rotate(-45deg); }
@media (max-width: 699px) { .scard__skills { grid-template-columns: 1fr; gap: 10px; } }
.scard__back .link { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .scard__inner { transition: none; transform: none !important; }
  .scard__back { transform: none; opacity: 0; transition: opacity .25s linear; visibility: hidden; }
  .scard__front { transition: opacity .25s linear; }
  .scard.is-flipped .scard__back { opacity: 1; visibility: visible; }
  .scard.is-flipped .scard__front { opacity: 0; }
  @media (hover: hover) and (pointer: fine) { .scard:hover .scard__back { opacity: 1; visibility: visible; } .scard:hover .scard__front { opacity: 0; } }
}

/* ===== Next case study + footer ===== */
.next { background: var(--c-grey-950); color: var(--c-white); padding: var(--space-4xl) 0 var(--space-3xl); }
.next .wrap { display: flex; flex-direction: column; gap: var(--space-l); }
.next__kicker { color: var(--c-orange-300); }
.next__link { display: block; font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-art-next-title); line-height: .9; letter-spacing: -.04em; transition: color .25s var(--ease-out-expo); }
.next__link .arrow { display: inline-block; transition: transform .35s var(--ease-out-expo); }
.next__link:hover { color: var(--accent, var(--c-orange-300)); }
.next__link:hover .arrow { transform: translateX(12px); }
.next__link:active .arrow { transform: translateX(20px); }
.next__link:focus-visible { outline-color: var(--c-blue-300); border-radius: 8px; }
.next__stand { max-width: 900px; font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-standfirst); line-height: 1.22; color: var(--c-grey-300); }
.next footer { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; padding-top: var(--space-m); border-top: 1px solid var(--c-grey-800); }
.next footer .t-caption { color: var(--c-grey-500); }
@media (prefers-reduced-motion: reduce) { .next__link .arrow { transition: none; transform: none !important; } .famjam-title .fam, .famjam-title .jam { transition: none !important; } }

/* DS cover */
.ds-title { display: inline-flex; flex-direction: column; align-items: stretch; }
.ds-title .famjam-title { line-height: .84; }
.ds-title__pair { display: flex; justify-content: space-between; gap: var(--space-ds-cover-word-gap); font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; font-size: var(--text-art-ds-cover-line); line-height: .84; letter-spacing: -.02em; white-space: nowrap; }
.ds-title__pair .system { color: var(--c-orange-500); }
.js .ds-title__pair span { display: inline-block; opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo); }
.js .ds-title__pair .design { transition-delay: .2s; } .js .ds-title__pair .system { transition-delay: .28s; }
.is-loaded .ds-title__pair span { opacity: 1; transform: none; }
.cover--ds .cover__kicker { color: var(--c-orange-700); }
.cover__media--ds { width: 600px; height: 421px; }
@media (max-width: 1199px) { .cover__media--ds { width: var(--size-cover-phones-w); height: var(--size-cover-phones-h); } }
.facts--ds { padding: var(--space-l) 0 var(--space-m); }
.facts--ds dd { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-quote); line-height: 1.3; }
.next__link--sans { font-family: "Bricolage Grotesque", sans-serif; font-style: normal; font-weight: 800; font-variation-settings: "opsz" 96; letter-spacing: -.05em; line-height: .88; }
.next__link--sans .arrow { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .ds-title__pair span { transition: none !important; opacity: 1 !important; transform: none !important; } }