/* Unified case-study shell.
   Story-specific layouts stay intact; navigation, type, rhythm and connective
   tissue now use the same system as the portfolio homepage and Address Validation. */

.unified-case {
  --canvas: #f6f2e8;
  --canvas-bright: #fffdf7;
  --canvas-deep: #e8e4d9;
  --ink: #101310;
  --ink-soft: #292e28;
  --body: #3f453e;
  --muted: #676d65;
  --line: #cac6ba;
  --line-soft: #dedacf;
  --signal: #3f50f0;
  --signal-dark: #2939c9;
  --signal-light: #9aa8ff;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(1.06rem, 1.01rem + .18vw, 1.2rem);
  line-height: 1.65;
}

.unified-case *,
.unified-case *::before,
.unified-case *::after { box-sizing: border-box; }

.unified-case h1,
.unified-case h2,
.unified-case h3,
.unified-case h4,
.unified-case p,
.unified-case li,
.unified-case a,
.unified-case span,
.unified-case strong,
.unified-case figcaption { font-family: Manrope, Arial, sans-serif; }

.unified-case h1,
.unified-case h2,
.unified-case h3,
.unified-case h4 {
  font-weight: 800;
  letter-spacing: -.055em;
}

.unified-case p,
.unified-case li,
.unified-case figcaption { color: var(--body); }

.unified-case a:not(.skip-link) { color: inherit; }
.unified-case a[href],
.unified-case button,
.unified-case summary { cursor: pointer; }
.unified-case img,
.unified-case picture,
.unified-case figure { cursor: default; }

/* Focus ring, WCAG 2.1 AA 1.4.11 (3:1 against the adjacent colour).
   A single-colour ring cannot pass on every ground this site uses. The old
   periwinkle measured 1:1 on the homepage's blue CTA and 2.23:1 on the case
   studies', so the ring was invisible on the control people tab to most.

   Two concentric bands fix it without per-context overrides. The bands sit
   against each other at a fixed 18.66:1, so the indicator is distinguishable
   whatever it is drawn on. Measured against every ground on this site:

     bright #FFFDF7 on ink   #101310 = 18.66:1   on blue #3F50F0 = 5.79:1
     ink    #101310 on cream #F6F2E8 = 16.73:1   on blue #3F50F0 = 3.22:1

   Worst band on the worst ground is 3.22:1, so it clears 3:1 everywhere. */
.unified-case :focus-visible {
  outline: 3px solid #FFFDF7;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #101310;
  border-radius: 3px;
}

.unified-case .skip-link {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 2000 !important;
  padding: 12px 18px !important;
  color: #fff !important;
  background: #2939c9 !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transform: translateY(-180%) !important;
  transition: transform 160ms ease !important;
}

.unified-case .skip-link:focus {
  transform: translateY(0) !important;
}

html { scroll-padding-top: 126px; }

/* Exact homepage navigation language. No case-study item remains selected. */
.unified-case .case-global-nav {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  z-index: 1000 !important;
  display: block !important;
  width: min(calc(100% - 36px), 1180px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 29px !important;
  background: rgba(17, 20, 16, .76) !important;
  box-shadow: 0 20px 60px rgba(17, 20, 16, .16), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  transform: translateX(-50%) !important;
  transition: background 240ms ease, box-shadow 240ms ease !important;
  -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
  backdrop-filter: blur(28px) saturate(145%) !important;
}

.unified-case .case-global-nav.is-scrolled {
  background: rgba(17, 20, 16, .9) !important;
  box-shadow: 0 16px 44px rgba(17, 20, 16, .22), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.unified-case .case-global-nav .nav {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  height: 64px !important;
  padding: 8px 10px 8px 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.unified-case .case-global-nav .brand {
  display: inline-flex !important;
  min-width: max-content !important;
  padding: 0 !important;
  align-items: center !important;
  gap: 12px !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
  letter-spacing: -.025em !important;
  text-decoration: none !important;
}

.unified-case .case-global-nav .brand img {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 13px !important;
}

.unified-case .case-global-nav .links {
  display: flex !important;
  align-items: center !important;
  gap: clamp(10px, 1.45vw, 22px) !important;
}

.unified-case .case-global-nav .links a {
  display: inline-flex !important;
  min-height: 44px !important;
  padding: 0 3px !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .74) !important;
  font-size: .91rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 160ms ease, font-weight 160ms ease !important;
}

.unified-case .case-global-nav .links a::after { display: none !important; }

.unified-case .case-global-nav .links a:hover,
.unified-case .case-global-nav .links a:focus-visible {
  color: #fff !important;
  font-weight: 750 !important;
}

.unified-case .case-global-nav .links .cta {
  min-height: 46px !important;
  padding: 0 18px !important;
  border: 1px solid var(--signal) !important;
  border-radius: 19px !important;
  background: var(--signal) !important;
  color: #fff !important;
}

.unified-case .case-global-nav .links .cta:hover,
.unified-case .case-global-nav .links .cta:focus-visible {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--ink) !important;
}

/* The nav CTA is the one control that inverts its own fill on focus: it turns
   white on a dark nav, so both bands of the standard ring land on their own
   colour. Swapping the order restores contrast on both edges: ink on the white
   button reads 16.73:1, bright on the nav reads 18.66:1. */
.unified-case .case-global-nav .links .cta:focus-visible {
  outline-color: #101310 !important;
  box-shadow: 0 0 0 6px #FFFDF7 !important;
}


.unified-case .case-global-nav .menu { display: none; position: relative; }
.unified-case .case-global-nav .menu summary { list-style: none; }
.unified-case .case-global-nav .menu summary::-webkit-details-marker { display: none; }

.unified-case .case-global-nav .menu > summary {
  display: inline-flex;
  min-width: 88px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 18px;
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
}

.unified-case .case-global-nav .menu-panel {
  position: absolute;
  top: calc(100% + 15px);
  right: 0;
  display: grid;
  width: min(276px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px;
  background: rgba(17, 20, 16, .97);
  box-shadow: 0 24px 60px rgba(17, 20, 16, .28);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
}

.unified-case .case-global-nav .menu-panel a {
  display: flex;
  min-height: 48px;
  padding: 0 14px;
  align-items: center;
  border-radius: 14px;
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
}

.unified-case .case-global-nav .menu-panel a:hover,
.unified-case .case-global-nav .menu-panel a:focus-visible {
  background: var(--signal);
  color: #fff;
}

/* Shared hero proportions. Address Validation keeps its bespoke system visual. */
.unified-case:not(.address-case) .case-hero,
.unified-case.travelshop-case .hero {
  padding-top: clamp(10rem, 14vw, 13rem) !important;
  padding-bottom: clamp(5rem, 8vw, 8rem) !important;
  background: var(--ink) !important;
}

.unified-case:not(.address-case) .case-hero h1,
.unified-case.travelshop-case .hero h1 {
  max-width: 1240px !important;
  margin-top: 1.5rem !important;
  color: var(--canvas-bright) !important;
  font-size: clamp(4rem, 8vw, 6.75rem) !important;   /* homepage scale */
  font-weight: 800 !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
}

.unified-case:not(.address-case) .case-lede,
.unified-case.travelshop-case .hero .sub {
  max-width: 960px !important;
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  color: #c5cbc4 !important;
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -.025em !important;
}

.unified-case:not(.address-case) .case-kicker,
.unified-case.travelshop-case .hero .case-kicker {
  color: var(--signal-light) !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

.unified-case:not(.address-case) .case-meta,
.unified-case.travelshop-case .hero .meta {
  margin-top: clamp(3rem, 6vw, 5rem) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

.unified-case:not(.address-case) .case-meta span,
.unified-case.travelshop-case .hero .mlabel { color: var(--signal-light) !important; }

.unified-case:not(.address-case) .case-meta strong,
.unified-case.travelshop-case .hero .meta-item { color: #eef0eb !important; }

/* Address-style chapter rail and reading column on every story. */
.unified-case .case-layout {
  display: grid !important;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 1680px !important;
  margin: 0 auto !important;
  align-items: start !important;
  background: var(--canvas) !important;
}

.unified-case .section-nav {
  position: sticky !important;
  top: 112px !important;
  z-index: 80 !important;
  display: block !important;
  width: auto !important;
  max-height: calc(100vh - 132px) !important;
  margin: 0 !important;
  padding: clamp(4rem, 7vw, 7rem) 28px 40px !important;
  overflow: auto !important;
  border: 0 !important;
  background: var(--canvas) !important;
  box-shadow: none !important;
}

.unified-case .section-nav > p {
  margin: 0 0 1.5rem !important;
  color: var(--ink) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

.unified-case .section-nav ol {
  display: grid !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: .35rem !important;
  list-style: none !important;
}

.unified-case .section-nav li { margin: 0 !important; padding: 0 !important; }

.unified-case .section-nav a {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  min-height: 44px !important;
  padding: 9px 0 !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 1.02rem !important;
  font-weight: 550 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  transition: color 180ms ease, font-weight 180ms ease !important;
}

.unified-case .section-nav a::before,
.unified-case .section-nav a::after { display: none !important; }

.unified-case .section-nav a span {
  color: #676d65 !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}

.unified-case .section-nav a[aria-current="location"],
.unified-case .section-nav a:hover,
.unified-case .section-nav a:focus-visible {
  color: var(--signal-dark) !important;
  font-weight: 800 !important;
}

.unified-case .section-nav a[aria-current="location"] span { color: var(--signal-dark) !important; }
.unified-case .case-content { min-width: 0 !important; overflow: clip; }
.unified-case .case-content > section { scroll-margin-top: 112px; }

.unified-case .case-content .case-section,
.unified-case .case-content > .chapter,
.unified-case.travelshop-case .case-content > section {
  padding-top: clamp(6rem, 9vw, 9rem) !important;
  padding-bottom: clamp(6rem, 9vw, 9rem) !important;
}

.unified-case .case-content .case-heading,
.unified-case .case-content .section-intro,
.unified-case.travelshop-case .case-content .section-head {
  max-width: 1100px !important;
}

.unified-case .case-content .case-heading h2,
.unified-case.travelshop-case .case-content .section-head h2 {
  color: var(--ink);
  font-size: clamp(3rem, 5.4vw, 6rem) !important;    /* homepage scale */
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}

.unified-case .case-content .case-intro,
.unified-case.travelshop-case .case-content .section-intro {
  max-width: 900px !important;
  margin-top: 2rem !important;
  color: var(--ink-soft) !important;
  font-size: clamp(1.28rem, 1.14rem + .45vw, 1.65rem) !important;
  font-weight: 550 !important;
  line-height: 1.55 !important;
  letter-spacing: -.025em !important;
}

.unified-case .case-content p,
.unified-case .case-content li {
  font-size: clamp(1.02rem, 1.013rem + .152vw, 1.15rem);  /* homepage scale */
  line-height: 1.7;
}

.unified-case .case-content article,
.unified-case .case-content .case-callout,
.unified-case .case-content .evidence-panel,
.unified-case .case-content .callout,
.unified-case .case-content .card {
  border-radius: 22px !important;
}

.unified-case .case-content img {
  border-radius: 22px !important;
  box-shadow: 0 22px 64px rgba(17, 20, 16, .08);
}

.unified-case .case-content figcaption {
  max-width: none !important;
  margin-top: 1.25rem !important;
  color: #555b54 !important;
  font-size: clamp(1rem, .96rem + .12vw, 1.14rem) !important;
  line-height: 1.58 !important;
}

.unified-case .case-hero figcaption,
.unified-case.travelshop-case .hero-img .cap {
  color: #cbd0c9 !important;
}

.unified-case .case-content .case-heading > span,
.unified-case.travelshop-case .case-content .section-heading > .section-num {
  display: none !important;
}

/* An inline link inside the ink hero was using the deep accent, which tops out
   at 2.25:1 on that ground and can never reach AA. Dark grounds take the light
   accent, exactly as every other dark surface on the site does. */
.unified-case .case-hero .case-inline-link,
.unified-case .dark-chapter .case-inline-link,
.unified-case .on-dark .case-inline-link {
  color: var(--signal-light) !important;
}

.unified-case .case-inline-link {
  color: var(--signal-dark) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-thickness: .08em !important;
  text-underline-offset: .18em !important;
}

.unified-case .launch-table thead th {
  color: #424840 !important;
}

.unified-case .status-deferred {
  color: #424840 !important;
}

.unified-case .case-content .dark,
.unified-case .case-content .dark-chapter,
.unified-case .case-content .legacy-section { background: var(--ink) !important; }

.unified-case .case-content .dark h2,
.unified-case .case-content .dark h3,
.unified-case .case-content .dark-chapter h2,
.unified-case .case-content .dark-chapter h3,
.unified-case .case-content .legacy-section h2,
.unified-case .case-content .legacy-section h3 { color: var(--canvas-bright) !important; }

.unified-case .case-content .dark p,
.unified-case .case-content .dark li,
.unified-case .case-content .dark figcaption,
.unified-case .case-content .dark-chapter p,
.unified-case .case-content .dark-chapter li,
.unified-case .case-content .dark-chapter figcaption,
.unified-case .case-content .legacy-section p,
.unified-case .case-content .legacy-section li,
.unified-case .case-content .legacy-section figcaption { color: #c5cbc4 !important; }

/* One connective handoff instead of a different project grid on every page. */
.unified-case .next-case {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 7rem) !important;
  align-items: end !important;
  gap: 36px !important;
  border: 0 !important;
  background: var(--signal) !important;
}

.unified-case .next-case > div:first-child { max-width: 820px; }

.unified-case .next-case .next-label {
  display: block;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
}

.unified-case .next-case h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(3rem, 6vw, 6.5rem) !important;
  line-height: .95 !important;
}

.unified-case .next-case p {
  max-width: 720px;
  margin: 1.5rem 0 0 !important;
  color: rgba(255, 255, 255, .8) !important;
  font-size: clamp(1.15rem, 1.06rem + .25vw, 1.35rem) !important;
}

.unified-case .next-actions {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.unified-case .next-actions a {
  display: inline-flex !important;
  min-height: 54px !important;
  padding: 0 20px !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid rgba(255, 255, 255, .4) !important;
  border-radius: 18px !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

.unified-case .next-actions a:first-child {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--ink) !important;
}

.unified-case .next-actions a:hover,
.unified-case .next-actions a:focus-visible { transform: translateY(-2px); }

.unified-case .next-actions svg { width: 20px; height: 20px; }

/* Same quiet footer used by Address Validation. */
.unified-case > footer,
.unified-case main + footer,
.unified-case .case-page + footer {
  display: flex !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 48px clamp(1.5rem, 5vw, 5rem) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  border: 0 !important;
  background: var(--ink) !important;
}

.unified-case footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
  text-decoration: none;
}

.unified-case footer .brand img { width: 40px; height: 40px; border-radius: 13px; }
.unified-case footer p { max-width: 540px; margin: 14px 0 0; color: #aeb4ad !important; font-size: 1rem !important; }
.unified-case .footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.unified-case .footer-links a { color: #dce0da; font-size: .98rem; font-weight: 650; text-decoration: none; }
.unified-case .footer-links a:hover { color: var(--signal-light); }

@media (max-width: 1040px) {
  .unified-case .case-global-nav { width: min(calc(100% - 28px), 900px) !important; }
  .unified-case .case-global-nav .links { display: none !important; }
  .unified-case .case-global-nav .menu { display: block !important; }
  .unified-case .case-layout { grid-template-columns: 1fr !important; }
  .unified-case .section-nav {
    position: sticky !important;
    top: 92px !important;
    display: block !important;
    max-height: none !important;
    padding: 12px 18px !important;
    overflow-x: auto !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: rgba(246, 242, 232, .94) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .unified-case .section-nav > p { display: none !important; }
  .unified-case .section-nav ol { display: flex !important; width: max-content; gap: 20px !important; }
  .unified-case .section-nav a { grid-template-columns: auto auto !important; min-height: 40px !important; }
  .unified-case .next-case { grid-template-columns: 1fr !important; align-items: start !important; }
}

@media (max-width: 700px) {
  .unified-case .case-global-nav { top: 10px !important; width: calc(100% - 20px) !important; border-radius: 24px !important; }
  .unified-case .case-global-nav .nav { height: 58px !important; padding: 7px 8px 7px 10px !important; }
  .unified-case .case-global-nav .brand span { display: none !important; }
  .unified-case .case-global-nav .brand img { width: 38px !important; height: 38px !important; }
  .unified-case .case-global-nav .menu > summary { min-width: 78px; min-height: 42px; }
  .unified-case:not(.address-case) .case-hero,
  .unified-case.travelshop-case .hero { padding-top: 8.5rem !important; }
  .unified-case:not(.address-case) .case-hero h1,
  .unified-case.travelshop-case .hero h1 { font-size: clamp(3.4rem, 15vw, 5.2rem) !important; }
  .unified-case .section-nav { top: 78px !important; }
  .unified-case .next-case { padding: 4.5rem 1.25rem !important; }
  .unified-case > footer,
  .unified-case main + footer,
  .unified-case .case-page + footer { display: grid !important; padding: 38px 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .unified-case *,
  .unified-case *::before,
  .unified-case *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Final cross-case-study layout system.
   Every story now resolves to one 12-column reading canvas, one content edge,
   one heading scale and one surface language regardless of its source markup. */
.unified-case {
  --case-shell: 1600px;
  --case-rail: 236px;
  --case-inner: 1120px;
  --case-copy: 760px;
  --case-gutter: clamp(2rem, 5vw, 5.5rem);
  --surface-radius: 12px;
}

.unified-case .case-layout {
  grid-template-columns: var(--case-rail) minmax(0, 1fr) !important;
  max-width: var(--case-shell) !important;
  padding: 0 !important;
  gap: 0 !important;
}

.unified-case .section-nav {
  padding: clamp(4.5rem, 7vw, 7rem) 32px 48px !important;
  border-right: 1px solid var(--line-soft) !important;
}

.unified-case .case-content > :is(.case-section, .chapter, .block) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(6rem, 9vw, 9rem) var(--case-gutter) !important;
  border-radius: 0 !important;
}

.unified-case .case-content > :is(.case-section, .chapter, .block) + :is(.case-section, .chapter, .block) {
  padding-top: clamp(6rem, 9vw, 9rem) !important;
}

.unified-case .case-content > :is(.case-section, .chapter, .block) > *,
.unified-case .case-content .case-reading,
.unified-case .case-content .case-wide,
.unified-case .case-content .wrap,
.unified-case .case-content .wide,
.unified-case .case-content .inner,
.unified-case .case-content .case-figure,
.unified-case .case-content .section-head {
  width: 100% !important;
  max-width: var(--case-inner) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.unified-case .case-content .case-reading > p,
.unified-case .case-content .case-reading > ul,
.unified-case .case-content .wrap > p,
.unified-case .case-content .wrap > ul,
.unified-case .case-content .inner > p,
.unified-case .case-content .inner > ul,
.unified-case .case-content .section-intro > p,
.unified-case .case-content .legacy-content > p {
  max-width: var(--case-copy) !important;
}

.unified-case .case-content :is(.case-heading h2, .section-intro h2, h2.section-heading, .section-head h2, .legacy-content > h2) {
  max-width: 1080px !important;
  margin: 0 0 clamp(2rem, 4vw, 3rem) !important;
  color: var(--ink) !important;
  font-size: clamp(3rem, 5.4vw, 6.5rem) !important;   /* homepage h2 scale: 48 / 55.3 / 77.76 */
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
}

.unified-case .case-content :is(.case-intro, .section-intro > p, .block .lede) {
  max-width: 820px !important;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem) !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--ink-soft) !important;
  font-size: clamp(1.3rem, 1.12rem + .55vw, 1.7rem) !important;
  font-weight: 550 !important;
  line-height: 1.52 !important;
  letter-spacing: -.025em !important;
}

.unified-case .case-content h3 {
  font-size: clamp(1.65rem, 1.35rem + .8vw, 2.45rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.045em !important;
}

.unified-case .case-content :is(p, li) {
  font-size: clamp(1.02rem, 1.013rem + .152vw, 1.15rem) !important;  /* homepage body scale: 17.38 / 17.84 / 18.4 */
  line-height: 1.68 !important;
}

.unified-case .case-content :is(.section-intro, .section-head, .case-heading) {
  max-width: var(--case-inner) !important;
}

/* Section numbers already live in the rail; removing repeated micro-labels keeps
   the content editorial and prevents the AI-generated presentation feel. */
.unified-case.address-case .section-intro::before,
.unified-case.address-case .legacy-content::before {
  display: none !important;
}

.unified-case .case-content :is(article, .case-callout, .evidence-panel, .callout, .card,
  .alignment-decision, .revised-study, .adjacent-system, .evidence-boundary,
  .system-map, .reflection-columns article, .shipped-matrix > div) {
  border-radius: var(--surface-radius) !important;
}

.unified-case .case-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--surface-radius) !important;
  image-rendering: auto;
}

.unified-case .next-case {
  border-radius: 0 !important;
}

/* Address Validation uses the same hero width and typographic cadence as the
   other stories while retaining its system-specific visual. */
.unified-case.address-case .hero {
  width: 100% !important;
  max-width: 1440px !important;
  padding: clamp(10rem, 13vw, 12rem) var(--case-gutter) clamp(5rem, 8vw, 8rem) !important;
}

.unified-case.address-case .hero h1 {
  max-width: 1180px !important;
  color: var(--ink) !important;
  font-size: clamp(4.2rem, 8vw, 8.2rem) !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
}

.unified-case.address-case .hero-lede {
  max-width: 900px !important;
  color: var(--ink-soft) !important;
  font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
}

.unified-case.address-case .hero-system {
  grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr) !important;
  border-radius: var(--surface-radius) !important;
}

.unified-case.address-case .system-card {
  min-height: 340px !important;
  padding: clamp(2.25rem, 4vw, 4rem) !important;
}

.unified-case.address-case .system-card > span,
.unified-case.address-case .system-connector span {
  font-size: .95rem !important;
  font-weight: 750 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

.unified-case.address-case .system-card strong {
  max-width: 420px !important;
  font-size: clamp(2.4rem, 4vw, 4.8rem) !important;
}

.unified-case.address-case .system-card p {
  max-width: 38ch !important;
  font-size: 1.08rem !important;
}

.unified-case.address-case .project-facts dt {
  color: var(--signal-dark) !important;
  font-size: .9rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

.unified-case.address-case .project-facts dd {
  color: var(--ink-soft) !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
}

.unified-case.address-case .scope-note {
  grid-template-columns: 1fr !important;
  max-width: var(--case-inner) !important;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0 !important;
  padding: clamp(1.5rem, 3vw, 2.25rem) !important;
  border-left: 4px solid var(--signal) !important;
  border-radius: 0 !important;
}

.unified-case.address-case .scope-note::before {
  content: "Authorship boundary" !important;
  color: var(--signal-dark) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

.unified-case.address-case .scope-note p {
  margin: 0 !important;
  font-size: 1.08rem !important;
}

/* Timeline: a single track with labels centred on their actual milestones. */
.unified-case.address-case .progression {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: clamp(3.5rem, 7vw, 6rem) !important;
  padding-top: 1px !important;
  border: 0 !important;
}

.unified-case.address-case .progression::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 12.5%;
  left: 12.5%;
  height: 2px;
  background: #596058;
}

.unified-case.address-case .progression div,
.unified-case.address-case .progression div + div {
  position: relative !important;
  padding: 42px 18px 0 !important;
  border: 0 !important;
  text-align: center !important;
}

.unified-case.address-case .progression div::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 1;
  width: 20px;
  height: 20px;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: var(--signal-light);
  box-shadow: 0 0 0 2px var(--signal-light);
  transform: translateX(-50%);
}

.unified-case.address-case .progression span {
  color: var(--signal-light) !important;
  font-size: .98rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.unified-case.address-case .progression p {
  margin: .85rem auto 0 !important;
  color: #c7cdc5 !important;
  font-size: 1.04rem !important;
  line-height: 1.55 !important;
}

/* A single high-contrast vocabulary for every dark surface. */
.unified-case .case-content :is(.dark, .dark-chapter, .legacy-section, .decisions-dark,
  .alignment-decision, .revised-study, .adjacent-system) :is(h2, h3, h4, strong) {
  color: var(--canvas-bright) !important;
}

.unified-case .case-content :is(.dark, .dark-chapter, .legacy-section, .decisions-dark,
  .alignment-decision, .revised-study, .adjacent-system) :is(p, li, figcaption, dd, small) {
  color: #c7cdc5 !important;
}

.unified-case .case-content :is(.dark, .dark-chapter, .legacy-section, .decisions-dark,
  .alignment-decision, .revised-study, .adjacent-system) a {
  color: var(--signal-light) !important;
}

.unified-case .case-content .dark .lede,
.unified-case .case-content .dark .case-intro,
.unified-case .case-content .dark-chapter .section-intro > p,
.unified-case .case-content .decisions-dark .lede,
.unified-case .case-content .legacy-section > .legacy-content > p {
  color: #c7cdc5 !important;
}

.unified-case.address-case .alignment-decision {
  max-width: var(--case-inner) !important;
  margin: clamp(4rem, 8vw, 7rem) auto 0 !important;
}

.unified-case.address-case .alignment-decision p {
  font-size: 1.12rem !important;
}

.unified-case.address-case .legacy-section {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(6rem, 9vw, 9rem) var(--case-gutter) !important;
  border-radius: 0 !important;
}

.unified-case.address-case .shipped-matrix > div,
.unified-case.address-case .shipped-matrix > div:nth-child(even) {
  color: var(--canvas-bright) !important;
  background: #171b17 !important;
  border: 1px solid #3a4038 !important;
}

.unified-case.address-case .shipped-matrix > div:nth-child(even) {
  border-left: 4px solid var(--signal-light) !important;
}

.unified-case.address-case .shipped-matrix span,
.unified-case.address-case .shipped-matrix > div:nth-child(even) span {
  color: var(--signal-light) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

.unified-case.address-case .shipped-matrix p,
.unified-case.address-case .shipped-matrix > div:nth-child(even) p {
  color: #c7cdc5 !important;
  font-size: 1.08rem !important;
}

.unified-case.address-case .legacy-content blockquote {
  max-width: var(--case-inner) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.unified-case.address-case .legacy-content cite,
.unified-case.address-case .legacy-content cite a {
  color: var(--signal-light) !important;
  font-size: 1rem !important;
  font-style: normal !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* TravelShop's overview strip participates in the same content edge. */
.unified-case.travelshop-case .resultsbar {
  padding: 0 var(--case-gutter) !important;
}

.unified-case.travelshop-case .resultsbar .rb-inner {
  max-width: var(--case-inner) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

@media (max-width: 1040px) {
  .unified-case .case-layout { grid-template-columns: 1fr !important; }
  .unified-case .section-nav { border-right: 0 !important; }
}

@media (max-width: 900px) {
  .unified-case.address-case .hero-system { grid-template-columns: 1fr !important; }
  .unified-case.address-case .system-connector {
    min-height: 120px !important;
    flex-direction: row !important;
  }
  .unified-case.address-case .system-connector svg { transform: rotate(90deg); }
  .unified-case.address-case .project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .unified-case.address-case .project-facts div:nth-child(3) {
    padding-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
  }
  .unified-case.address-case .project-facts div:nth-child(4) { border-top: 1px solid var(--line) !important; }
}

@media (max-width: 700px) {
  .unified-case {
    --case-gutter: 1.25rem;
    --surface-radius: 8px;
  }
  .unified-case .case-content > :is(.case-section, .chapter, .block),
  .unified-case.address-case .legacy-section {
    padding: 4.75rem var(--case-gutter) !important;
  }
  .unified-case .case-content > :is(.case-section, .chapter, .block) + :is(.case-section, .chapter, .block) {
    padding-top: 4.75rem !important;
  }
  .unified-case .case-content :is(.case-heading h2, .section-intro h2, h2.section-heading, .section-head h2, .legacy-content > h2) {
    font-size: clamp(2.65rem, 12vw, 4rem) !important;
  }
  .unified-case.address-case .hero {
    padding-top: 8.5rem !important;
    padding-right: var(--case-gutter) !important;
    padding-left: var(--case-gutter) !important;
  }
  .unified-case.address-case .hero h1 { font-size: clamp(3.35rem, 15vw, 5.2rem) !important; }
  .unified-case.address-case .system-card { min-height: 290px !important; }
  .unified-case.address-case .project-facts { grid-template-columns: 1fr !important; }
  .unified-case.address-case .project-facts div,
  .unified-case.address-case .project-facts div + div {
    min-height: 0 !important;
    padding: 1.35rem 0 !important;
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
  }
  .unified-case.address-case .project-facts div:first-child { border-top: 0 !important; }
  .unified-case.address-case .progression {
    grid-template-columns: 1fr !important;
    padding: 0 0 0 28px !important;
  }
  .unified-case.address-case .progression::before {
    top: 12px;
    right: auto;
    bottom: 12px;
    left: 9px;
    width: 2px;
    height: auto;
  }
  .unified-case.address-case .progression div,
  .unified-case.address-case .progression div + div {
    padding: 0 0 2.4rem 20px !important;
    text-align: left !important;
  }
  .unified-case.address-case .progression div::before {
    top: 3px;
    left: -18px;
  }
  .unified-case.address-case .progression p { margin-left: 0 !important; }
  .unified-case.address-case .shipped-matrix { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   QA FIX 01 · COLUMN INTEGRITY
   Cause: the inline page styles give .case-motion / .case-heading /
   .case-process-figure real layout (max-width 1180, margin-inline auto,
   padding-inline clamp(20px,4.5vw,52px)). .case-motion is only a
   scroll-reveal hook, so those properties leak a second grid into the
   chapter. Where case-unified.css later narrows an element to
   --case-copy, the inherited auto margins centre it instead of aligning
   it, which is why body paragraphs float 150px into the column while
   their own heading sits 52px the other way.
   Rule from here: a measure caps on the RIGHT, never by centring.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. strip layout from the motion hook and the heading wrapper */
.unified-case .case-content :is(.case-motion, .case-process-figure, .case-heading) {
  max-width: var(--case-inner) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* 2. every flow container resolves to the chapter's own content edge */
.unified-case .case-content :is(.case-reading, .case-wide, .wrap, .wide, .inner,
  .case-figure, .coverage-figure, .section-head, .section-intro, .legacy-content,
  .case-figure-grid, .figrow, figure) {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* 3. copy is capped on the right, so it can never centre itself */
.unified-case .case-content :is(
  .case-reading, .wrap, .inner, .section-intro, .legacy-content,
  .case-section, .block, .chapter) > :is(p, ul, ol, dl) {
  max-width: var(--case-copy) !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* 4. media and captions sit on the same edge as everything else */
.unified-case .case-content :is(figure, .case-figure, .coverage-figure) > :is(img, picture) {
  margin-right: auto !important;
  margin-left: 0 !important;
}
.unified-case .case-content figcaption {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   QA FIX 02 · ONE PAGE EDGE
   Cause: the page-level blocks each carried their own width and padding
   formula, so nothing shared a vertical line. Measured at 1440 before this
   fix: nav 145, hero 182, article 308, next-case 86, footer 72.
   Every block below now derives from ONE token set, matching the
   proportions of the reference case study (1360 shell, 170 rail).
      A = page edge   = shell inset + gutter        (nav, hero, footer,
                                                     next-case, rail)
      B = article edge = A + rail + rail-gap        (all chapter content)
   Below 1041px the rail is hidden and B collapses onto A.
   ══════════════════════════════════════════════════════════════════════════ */

.unified-case {
  --shell: 1360px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --rail: 170px;
  --rail-gap: clamp(2rem, 6vw, 6rem);
  /* page edge for full-bleed blocks, never narrower than the gutter */
  --edge: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));

  /* the pre-existing names now resolve from the same source */
  --case-shell: var(--shell);
  --case-rail: var(--rail);
  --case-gutter: var(--rail-gap);
}

/* nav pill: outer edge sits on A */
.unified-case .case-global-nav {
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--shell) - 2 * var(--gutter))) !important;
}

/* hero, both variants, content on A */
.unified-case .case-hero > div,
.unified-case .hero > div {
  width: 100% !important;
  max-width: var(--shell) !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
}

.unified-case.address-case .hero {
  max-width: var(--shell) !important;
  padding-right: var(--gutter) !important;
  padding-left: var(--gutter) !important;
}

/* article shell: rail starts on A, chapter content on B */
.unified-case .case-layout {
  padding-right: var(--gutter) !important;
  padding-left: var(--gutter) !important;
}

.unified-case .section-nav {
  padding-right: var(--rail-gap) !important;
  padding-left: 0 !important;
}

/* full-bleed closing blocks, content on A */
.unified-case .next-case {
  padding-right: var(--edge) !important;
  padding-left: var(--edge) !important;
}

.unified-case footer {
  padding-right: var(--edge) !important;
  padding-left: var(--edge) !important;
}

@media (max-width: 1040px) {
  /* rail is hidden here, so the article edge collapses onto the page edge */
  .unified-case .case-global-nav {
    width: min(calc(100% - 2 * var(--gutter)), calc(var(--shell) - 2 * var(--gutter))) !important;
  }
  .unified-case .case-content > :is(.case-section, .chapter, .block) {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .unified-case .section-nav {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 700px) {
  .unified-case .case-global-nav {
    width: min(calc(100% - 2 * var(--gutter)), calc(var(--shell) - 2 * var(--gutter))) !important;
  }
}

/* Release mobile hardening.
   The chapter rail becomes a compact, non-sticky swipe row on phones so it
   never obscures the story. All legacy fixed-width compositions are allowed
   to collapse inside the viewport without changing their desktop geometry. */
@media (max-width: 700px) {
  html { scroll-padding-top: 88px !important; }

  .unified-case {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    font-size: 1rem !important;
  }

  .unified-case .case-global-nav {
    top: 10px !important;
    left: 10px !important;
    width: calc(100% - 20px) !important;
    transform: none !important;
  }

  .unified-case .case-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .unified-case .section-nav {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: var(--canvas) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    scrollbar-width: none !important;
  }

  .unified-case .section-nav::-webkit-scrollbar { display: none !important; }
  .unified-case .section-nav ol {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    list-style: none !important;
  }

  .unified-case .section-nav li { flex: 0 0 auto !important; }
  .unified-case .section-nav a {
    display: inline-flex !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    font-size: .88rem !important;
    line-height: 1 !important;
  }

  .unified-case .section-nav a span { font-size: .78rem !important; }
  .unified-case .case-content,
  .unified-case .case-content > *,
  .unified-case .case-content :is(.case-reading, .case-wide, .wrap, .wide, .inner, .section-head),
  .unified-case :is(.case-hero, .hero, .case-hero-media, .hero-visual) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .unified-case .case-content > :is(.case-section, .chapter, .block),
  .unified-case.address-case .legacy-section {
    padding: 4.25rem 1.25rem !important;
    overflow: hidden !important;
  }

  .unified-case .case-content :is(.case-heading h2, .section-intro h2, h2.section-heading, .section-head h2, .legacy-content > h2) {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 11vw, 3.5rem) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
  }

  .unified-case .case-content h3 { overflow-wrap: anywhere !important; }
  .unified-case .case-content :is(p, li, figcaption) { overflow-wrap: break-word !important; }
  .unified-case .case-content :is(img, picture, video, iframe, svg) { max-width: 100% !important; }
  .unified-case .case-content :is(table, pre) { display: block !important; max-width: 100% !important; overflow-x: auto !important; }

  .unified-case .case-content :is(
    .system-grid, .judgment-cards, .research-grid, .reflection-columns,
    .grouping-grid, .gridcells, .pointgrid, .phones, .risk-list,
    .validation-overview, .validation-cases, .shipped-matrix,
    .artifact-metrics, .flow-model, .production-framework
  ) { grid-template-columns: minmax(0, 1fr) !important; }

  .unified-case :is(.case-hero h1, .hero h1),
  .unified-case.address-case .hero h1 {
    max-width: 100% !important;
    font-size: clamp(3rem, 14vw, 4.5rem) !important;
    line-height: .98 !important;
    overflow-wrap: anywhere !important;
  }

  .unified-case .next-case,
  .unified-case > footer,
  .unified-case main + footer,
  .unified-case .case-page + footer {
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
  }
}

/* QA FIX 02a · corrections found by re-measuring
   - footer is declared on `.unified-case .case-page + footer` (0,2,1), which
     outranks a plain `.unified-case footer`, so the edge has to be set on the
     same selector list.
   - the address hero already carries the gutter, so its inner .hero-copy must
     not take it a second time.
   - travelshop's .resultsbar is a bare <section>, so the tablet reset has to
     cover every chapter-level child, not only the three known classes. */

.unified-case > footer,
.unified-case main + footer,
.unified-case .case-page + footer {
  padding-right: var(--edge) !important;
  padding-left: var(--edge) !important;
}

.unified-case.address-case .hero > div {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

@media (max-width: 1040px) {
  .unified-case .case-content > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .unified-case > footer,
  .unified-case main + footer,
  .unified-case .case-page + footer {
    padding-right: var(--edge) !important;
    padding-left: var(--edge) !important;
  }
}

/* QA FIX 02b · two residual centring artefacts
   - the hero h1 caps at 1240px inside a 1244.8px column, so its auto margins
     centre it and it lands 2.4px right of every other block. Cap on the right.
   - travelshop's .resultsbar is declared at (0,3,0), so the tablet reset needs
     the same weight to reach it. */

.unified-case .case-hero h1,
.unified-case .hero h1 {
  margin-right: auto !important;
  margin-left: 0 !important;
}

@media (max-width: 1040px) {
  .unified-case.travelshop-case .resultsbar {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   QA FIX 03 · ONE CARD IDIOM
   Cause: two idioms were running. Four pages use a hairline top rule with
   padding-top only; the address page uses bordered panels with all-round
   padding, and those panels carried eleven different padding values at 1440
   (20, 25.6, 35.2, 36, 38.4, 40, 43.2, 47.52, 48, 64), with .artifact-frame
   alone using two.
   Resolution: the top-rule block is the card. Panels lose the box, keep the
   content. Genuine feature surfaces (dark inset blocks, image mats) stay
   surfaces but resolve to ONE padding scale instead of eleven values.
   ══════════════════════════════════════════════════════════════════════════ */

.unified-case {
  /* 8px scale, stepped at breakpoints. Fluid clamps resolved to 20 / 22.2 /
     23.7 / 26.2 and 28 / 34.7 / 39 / 46.1, none of which are on the scale. */
  --pad: 16px;        /* cards, image mats */
  --pad-lg: 24px;     /* feature surfaces */
  --cap-gap: 16px;    /* figure to its caption */
  --flow: 48px;
  --rule: var(--line);
  --rule-on-dark: rgba(255, 255, 255, .16);
}

@media (min-width: 768px) {
  .unified-case { --pad: 24px; --pad-lg: 32px; --cap-gap: 16px; --flow: 48px; }
}
@media (min-width: 1024px) {
  .unified-case { --pad: 24px; --pad-lg: 48px; --cap-gap: 24px; --flow: 64px; }
}

/* ── cards on a light ground ───────────────────────────────────────────── */
.unified-case .case-content :is(
  .case-callout, .callout, .patterns, .payload, .flow-model,
  .validation-overview article, .validation-cases article,
  .reflection-columns article, .research-grid > article, .problem-grid article,
  .cost-sentence, .scope-note, .evidence-note, .evidence-boundary, .source-list,
  .system-grid > article, .judgment-cards > *, .evidence-panel, .grouping-grid > *,
  .decision, .gcell, .risk-list article, .revised-plan li) {
  padding: var(--pad) 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* a callout keeps its voice through the weight of the rule, not a box */
.unified-case .case-content :is(.case-callout, .callout) {
  border-top: 2px solid var(--signal) !important;
}

/* ── cards on a dark ground ────────────────────────────────────────────── */
.unified-case .case-content :is(
  .shipped-matrix > div, .map-column, .flow-stage, .flow-outcomes,
  .artifact-metrics > div, .production-framework p) {
  padding: var(--pad) 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule-on-dark) !important;
  border-radius: 0 !important;
  color: #bdc4ba !important;
}

/* the de-filled variants carried ink text for their old coloured background */
.unified-case .case-content :is(
  .shipped-matrix > div:nth-child(even), .shipped-matrix > div:nth-child(even) p,
  .map-column.rule-side, .map-column.rule-side p,
  .map-column.recipient-side, .map-column.recipient-side p,
  .flow-stage.critical, .artifact-metrics > div) {
  color: #bdc4ba !important;
}

.unified-case .case-content :is(
  .shipped-matrix > div, .map-column, .flow-stage,
  .artifact-metrics > div) :is(strong, h3, dt) {
  color: #fff !important;
}

/* ── feature surfaces keep their fill, on one padding value ────────────── */
/* Ten more filled surfaces on the Address Validation page were declaring their
   own near-identical clamps (2.2 / 2.25 / 2.4 / 2.5 / 4rem), which is why that
   page measured five card paddings where the others measured one. They are on
   the same value now. */
.unified-case .case-content :is(
  .thesis-callout, .team-quote, .revised-study, .adjacent-system,
  .alignment-decision, .tradeoff-panel, .principal-lesson, .validation-flow,
  .system-card, .system-connector, .evidence-boundary, .map-column,
  .problem-grid article, .shipped-matrix > div, .artifact-metrics > div,
  .project-facts > div, .validation-overview article, .validation-cases article) {
  padding: var(--pad-lg) !important;
  border-radius: var(--surface-radius) !important;
}

/* image mats: one padding, one radius, no second value */
.unified-case .case-content .artifact-frame {
  padding: var(--pad) !important;
  border-radius: var(--surface-radius) !important;
}

/* The hero sits outside .case-content, so its surfaces escaped both values
   above and shipped 57.6 / 38.4 / 32 / 25.6px. Same two values here. */
.unified-case.address-case .hero :is(
  .system-card, .system-connector, .project-facts > div) {
  padding: var(--pad-lg) !important;
  border-radius: var(--surface-radius) !important;
}
.unified-case.address-case .hero .artifact-frame {
  padding: var(--pad) !important;
  border-radius: var(--surface-radius) !important;
}

/* QA FIX 03a · cards that live outside .case-content
   .scope-note and .evidence-note sit in the hero, so the card rule above
   never reached them. */
.unified-case :is(.scope-note, .evidence-note) {
  padding: var(--pad) 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   QA FIX 04 · RESIDUAL DRIFT
   Everything the measurement pass still flagged once grid and cards agreed.
   ══════════════════════════════════════════════════════════════════════════ */

/* 04.1  right-pushed asides. These were the only blocks on the site that
   aligned to the right, so they read as mistakes rather than as a device. */
.unified-case .case-content :is(.evidence-boundary, .source-list,
  .alignment-decision, .final-boundary, .evidence-note, .artifact-metrics > p,
  .principal-lesson p, .adjacent-note) {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* 04.2  hero h1 was 115.2px on the address page and 118.08px on the other
   four. One clamp for all five. */
.unified-case.address-case .hero h1 {
  font-size: clamp(4rem, 8vw, 6.75rem) !important;   /* homepage scale */
}

/* 04.3  caption size. Hero captions ran at 15.81px on three pages and
   23.44px on the address page, against 17.09px everywhere else. */
.unified-case :is(.case-hero-media, .hero-visual, .case-hero, .hero) figcaption,
.unified-case .case-content figcaption {
  font-size: clamp(1rem, .96rem + .16vw, 1.12rem) !important;
  line-height: 1.55 !important;
}

/* 04.4  body copy inside the address page's diagram blocks ran at 16.64,
   17.28 and 17.92px against 19.46px for every other paragraph. */
.unified-case .case-content :is(.progression div, .shipped-matrix > div,
  .alignment-decision, .flow-outcomes, .production-framework) p {
  font-size: clamp(1.02rem, 1.013rem + .152vw, 1.15rem) !important;
  line-height: 1.68 !important;
}

/* 04.5  the rail label wraps at 170px. Balance the wrap instead of leaving
   an orphan, and keep the label legible rather than shrinking it to an
   eyebrow. */
.unified-case .section-nav > p:first-child {
  line-height: 1.25 !important;
  text-wrap: balance;
}

/* 04.4a  the even cells of .shipped-matrix are declared at (0,4,2), which
   outranks the rule above, so they need the same weight. */
.unified-case.address-case .shipped-matrix p,
.unified-case.address-case .shipped-matrix > div:nth-child(even) p {
  font-size: clamp(1.02rem, 1.013rem + .152vw, 1.15rem) !important;
  line-height: 1.68 !important;
  color: #bdc4ba !important;
}

/* 03a.i  .scope-note is declared at (0,3,0) on .unified-case.address-case,
   so the card rule needs the same weight to reach it. */
.unified-case.address-case .scope-note,
.unified-case.address-case .evidence-note {
  padding: var(--pad) 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}

/* 03a.ii  .shipped-matrix cells are declared at (0,4,1) and re-box themselves.
   The even cells carry a meaningful distinction (production evidence vs
   original concept), so it survives as an accent rule rather than a box plus
   a left bar, matching the callout treatment. */
.unified-case.address-case .shipped-matrix > div,
.unified-case.address-case .shipped-matrix > div:nth-child(even) {
  padding: var(--pad) 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule-on-dark) !important;
  border-radius: 0 !important;
  color: #bdc4ba !important;
}

.unified-case.address-case .shipped-matrix > div:nth-child(even) {
  border-top: 2px solid var(--signal-light) !important;
}

/* 03b  three boxed blocks the first sweep did not name:
   the decision narrative panel and the lineage list on the address page,
   and the stats band on travelshop. */
.unified-case .case-content .decision-copy > p {
  padding: var(--pad) 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
}

.unified-case .case-content .adjacent-system ul li {
  padding: var(--pad) 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule-on-dark) !important;
  border-radius: 0 !important;
}

.unified-case .case-content :is(.stats, .case-stats) {
  padding: var(--pad) 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 04.6  ch-based caps break when a later layer changes the font size.
   .decision-copy h3 was capped at 17ch for a 6rem heading; case-unified.css
   then set that heading to 2.07rem, collapsing the cap to 313px and wrapping
   a full-width heading into four lines. Cap it in the same unit as the rest
   of the site's measure instead. */
.unified-case.address-case .case-content .decision-copy h3 {
  max-width: var(--case-copy) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   QA FIX 05 · CONTRAST AFTER DE-FILLING
   Removing card fills changed the ground under some text. Colours that were
   chosen for a panel now have to answer to the section they sit on, so they
   inherit rather than assert, and the two colours that fail AA on their new
   ground are corrected.
   ══════════════════════════════════════════════════════════════════════════ */

/* de-filled cards take their section's text colour rather than a fixed one */
.unified-case .case-content :is(
  .shipped-matrix > div, .map-column, .flow-stage, .flow-outcomes,
  .artifact-metrics > div, .production-framework p, .progression div,
  .shipped-matrix > div:nth-child(even), .map-column.rule-side,
  .map-column.recipient-side, .flow-stage.critical),
.unified-case .case-content :is(
  .shipped-matrix > div, .map-column, .flow-stage, .flow-outcomes,
  .artifact-metrics > div, .progression div) :is(p, li, dd) {
  color: inherit !important;
}

/* the deep signal blue is a light-ground colour. On ink it reads at about
   2.4:1, so dark grounds get the light variant. */
.unified-case :is(.dark-chapter, .legacy-section, .system-section,
  .block.dark, .case-section.dark, .decisions-dark, .adjacent-system,
  .revised-study, .validation-flow, .alignment-decision, .principal-lesson,
  .thesis-callout, .team-quote) :is(span, strong, em, a, dt, h3, h4, .decision-index) {
  color: var(--signal-light);
}

.unified-case :is(.dark-chapter, .legacy-section, .system-section,
  .block.dark, .case-section.dark, .decisions-dark, .adjacent-system,
  .revised-study, .validation-flow, .alignment-decision, .principal-lesson,
  .thesis-callout, .team-quote) :is(h2, h3, h4, strong) {
  color: #fff;
}

/* muted at 14.7px on the sage ground sits just under AA */
.unified-case :is(.sage-chapter, .resultsbar, .matrix-legend, .tradeoff-panel) :is(p, li, span, td, th) {
  color: var(--body);
}

/* 05a  .reflection-columns article:last-child was the dark half of a
   light/dark pair. It is now a top-rule card like its sibling, so its text
   has to leave the on-dark colour behind. */
.unified-case .case-content .reflection-columns article :is(p, li, span) {
  color: var(--body) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   QA ROUND 2 · T-01 … T-06
   ══════════════════════════════════════════════════════════════════════════ */
/* --flow and --cap-gap now come from the scale block above. */

/* T-01 caption label-column reservation */
.unified-case.address-case .artifact figcaption {
  display: block !important;
  max-width: var(--case-copy) !important;
  padding: 0 !important;
}
.unified-case.address-case .artifact figcaption > span {
  display: block !important;
  margin-bottom: .5rem !important;
}

/* T-02 one vertical rhythm token per chapter */
.unified-case.address-case .case-content > .chapter > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.unified-case.address-case .case-content > .chapter > * + * { margin-top: var(--flow) !important; }
.unified-case.address-case .case-content > .chapter > * > :first-child { margin-top: 0 !important; }
.unified-case.address-case .case-content > .chapter > * > :last-child { margin-bottom: 0 !important; }
.unified-case.address-case .case-content > .chapter > .decision-block + .decision-block { margin-top: 0 !important; }

/* T-03 connector badge pinned to the column rule instead of 50% of a variable height */
.unified-case.address-case .case-content .map-column:not(:last-child)::after {
  top: 0 !important;
  right: -15px !important;
  transform: translateY(-50%) !important;
}

/* T-04 progression inherits the site's left alignment */
.unified-case.address-case .case-content .progression,
.unified-case.address-case .case-content .progression div,
.unified-case.address-case .case-content .progression p,
.unified-case.address-case .case-content .progression span { text-align: left !important; }
.unified-case.address-case .case-content .progression { column-gap: var(--pad) !important; }

/* T-05 coloured chapter bands clear the sidebar divider, text stays on the article edge */
@media (min-width: 1041px) {
  .unified-case .case-content > :is(.dark-chapter, .sage-chapter, .validation-section,
    .legacy-section, .resultsbar, .block.dark, .case-section.dark) {
    margin-left: var(--pad) !important;
    padding-left: calc(var(--rail-gap) - var(--pad)) !important;
    border-radius: var(--surface-radius) !important;
  }
}

/* T-06 one caption measure and one media-to-caption gap */
.unified-case :is(.case-content, .case-hero-media, .hero-visual, .case-hero, .hero) figcaption {
  max-width: var(--case-copy) !important;
  margin-top: var(--cap-gap) !important;
}

/* T-07/T-08 REVERSED. Forcing paired figures to share a caption baseline
   stretched every frame to its tallest neighbour, so a 46px footer strip sat
   in a 758px frame with 712px of empty ground. A mismatched caption baseline
   is invisible; 712px of cream is not. The frame now hugs its image. */
.unified-case.address-case .artifact-frame {
  align-items: flex-start !important;
  min-height: 0 !important;
}
.unified-case.address-case :is(.system-surfaces, .visual-duo, .preview-evidence,
  .placeholder-pair, .tall-pair, .recipient-pair) {
  align-items: start !important;
}
.unified-case.address-case :is(.system-surfaces, .visual-duo, .preview-evidence,
  .placeholder-pair, .tall-pair, .recipient-pair) > .artifact {
  display: block !important;
  height: auto !important;
}
.unified-case.address-case :is(.system-surfaces, .visual-duo, .preview-evidence,
  .placeholder-pair, .tall-pair, .recipient-pair) > .artifact > .artifact-frame {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
}

/* T-09 the homepage governs the grid: it uses 4.2vw, the case studies used 4vw */
.unified-case { --gutter: clamp(20px, 4.2vw, 64px) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   T-11 · CURSOR PARITY WITH THE HOMEPAGE
   The case studies shipped a stripped clone of the homepage cursor: no halo,
   no magnetic snap, no contextual badge, no suppression over static media,
   and the dot only appeared over links so plain content still showed the OS
   arrow. These rules are the homepage's, verbatim, plus the two selectors
   that differ by page type.
   ══════════════════════════════════════════════════════════════════════════ */
.unified-case { --ease-spring: cubic-bezier(.16, 1, .3, 1); }

html.has-ipad-cursor,
html.has-ipad-cursor body,
html.has-ipad-cursor a,
html.has-ipad-cursor button,
html.has-ipad-cursor summary { cursor: none !important; }

/* static evidence keeps the ordinary pointer */
html.has-ipad-cursor :is(figure, picture, img, .artifact-frame, .case-figure, .coverage-figure),
html.has-ipad-cursor :is(figure, picture, .artifact-frame, .case-figure, .coverage-figure) * {
  cursor: default !important;
}
html.has-ipad-cursor a :is(figure, picture, img, .artifact-frame),
html.has-ipad-cursor a :is(figure, picture, .artifact-frame) * { cursor: none !important; }

#ipad-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(17, 20, 16, .82);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0) translate(-50%, -50%);
  transition: opacity 120ms ease, width 220ms var(--ease-spring), height 220ms var(--ease-spring),
              background 220ms ease, border-color 220ms ease;
  will-change: transform, width, height;
}

#ipad-cursor.is-visible { opacity: 1; }
#ipad-cursor.is-suppressed { opacity: 0 !important; }

#ipad-cursor.is-link {
  width: 42px;
  height: 42px;
  border-color: rgba(63, 80, 240, .3);
  background: rgba(63, 80, 240, .2);
  box-shadow: 0 6px 24px rgba(21, 30, 128, .18);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
}

#ipad-cursor.is-card {
  width: 68px;
  height: 68px;
  border-color: rgba(255, 255, 255, .42);
  background: rgba(63, 80, 240, .9);
  box-shadow: 0 12px 36px rgba(9, 15, 72, .3);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

#ipad-cursor.is-pressed { width: 34px; height: 34px; }

.ipad-cursor__label {
  font-family: Manrope, Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  opacity: 0;
  transform: scale(.72);
  transition: opacity 160ms ease, transform 220ms var(--ease-spring);
}

#ipad-cursor.is-card .ipad-cursor__label { opacity: 1; transform: scale(1); }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #ipad-cursor { display: none !important; }
  html.has-ipad-cursor, html.has-ipad-cursor body,
  html.has-ipad-cursor a, html.has-ipad-cursor button,
  html.has-ipad-cursor summary { cursor: auto !important; }
}

/* Final phone overrides intentionally sit last in the cascade. */
@media (max-width: 700px) {
  html { scroll-padding-top: 88px !important; }
  .unified-case { width: 100% !important; max-width: 100% !important; overflow-x: clip !important; }
  .unified-case .case-global-nav { top: 10px !important; left: 10px !important; width: calc(100% - 20px) !important; transform: none !important; }
  .unified-case .case-layout { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .unified-case .section-nav {
    position: relative !important; top: auto !important; z-index: 1 !important;
    width: 100% !important; max-width: 100% !important; min-height: 0 !important;
    margin: 0 !important; padding: 10px 20px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    border: 0 !important; border-bottom: 1px solid var(--line-soft) !important;
    background: var(--canvas) !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    scrollbar-width: none !important;
  }
  .unified-case .section-nav::-webkit-scrollbar { display: none !important; }
  .unified-case .section-nav > p { display: none !important; }
  .unified-case .section-nav ol { display: flex !important; width: max-content !important; min-width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; list-style: none !important; }
  .unified-case .section-nav li { flex: 0 0 auto !important; }
  .unified-case .section-nav a { display: inline-flex !important; min-height: 44px !important; padding: 0 12px !important; align-items: center !important; gap: 7px !important; white-space: nowrap !important; font-size: .88rem !important; line-height: 1 !important; }
  .unified-case .section-nav a span { font-size: .78rem !important; }
  .unified-case :is(.case-content, .case-content > *, .case-reading, .case-wide, .wrap, .wide, .inner, .section-head, .case-hero, .hero, .case-hero-media, .hero-visual) { min-width: 0 !important; max-width: 100% !important; }
  .unified-case .case-content > :is(.case-section, .chapter, .block), .unified-case.address-case .legacy-section { padding: 4.25rem 1.25rem !important; overflow: hidden !important; }
  .unified-case .case-content :is(.case-heading h2, .section-intro h2, h2.section-heading, .section-head h2, .legacy-content > h2) { max-width: 100% !important; font-size: clamp(2.35rem, 11vw, 3.5rem) !important; line-height: 1.02 !important; overflow-wrap: anywhere !important; }
  .unified-case :is(.case-hero h1, .hero h1), .unified-case.address-case .hero h1 { max-width: 100% !important; font-size: clamp(3rem, 14vw, 4.5rem) !important; line-height: .98 !important; overflow-wrap: anywhere !important; }
  .unified-case .case-content :is(p, li, h3, figcaption) { overflow-wrap: break-word !important; }
  .unified-case .case-content :is(img, picture, video, iframe, svg) { max-width: 100% !important; }
  .unified-case .case-content :is(table, pre) { display: block !important; max-width: 100% !important; overflow-x: auto !important; }
  .unified-case .case-content :is(.system-grid, .judgment-cards, .research-grid, .reflection-columns, .grouping-grid, .gridcells, .pointgrid, .phones, .risk-list, .validation-overview, .validation-cases, .shipped-matrix, .artifact-metrics, .flow-model, .production-framework) { grid-template-columns: minmax(0, 1fr) !important; }
  .unified-case :is(.next-case, footer), .unified-case > footer, .unified-case main + footer, .unified-case .case-page + footer { padding-right: 1.25rem !important; padding-left: 1.25rem !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   TYPE PARITY WITH THE HOMEPAGE
   h1 / h2 / body now resolve to the homepage's values at 768, 1024 and 1440.
   Past 1600 the homepage steps its hero up to a 8rem cap; mirror that so the
   case studies do not fall 20px behind on a large display.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .unified-case:not(.address-case) .case-hero h1,
  .unified-case.travelshop-case .hero h1,
  .unified-case.address-case .hero h1 {
    font-size: clamp(6.75rem, 7.5vw, 8rem) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   8px SPACING SCALE · component values
   The card system is already stepped through --pad / --pad-lg above. These are
   the component-level values that sat off the scale: 2, 6, 9, 12, 14 and 18px.
   Section padding and the page gutter are deliberately excluded: they are the
   fluid values that hold the content edge identical across all six pages, and
   stepping them would break that parity.
   ══════════════════════════════════════════════════════════════════════════ */

/* skip link: 14/20 */
.unified-case .skip-link,
.unified-case .skip { padding: 16px 24px !important; }

/* chapter rail rows: 9px, and they already carry a 44px min-height */
.unified-case .section-nav a { padding: 8px 0 !important; }

/* data tables: 14px vertical, 18px horizontal */
.unified-case :is(.launch-table, .coverage-matrix, .matrix-table) :is(th, td) {
  padding: 16px 24px !important;
}
.unified-case .matrix-legend { padding: 16px 24px !important; }

/* inline code and badges: 9/12 and 9/14 */
.unified-case :is(code, .payload-link, .flow-life, .flow-branch i, .flow-linear i) {
  padding: 8px 16px !important;
}

/* label to its value: 6px is inside a text group, so it goes to 8 */
.unified-case :is(.case-stats span, .case-meta span, .system-grid > article > span,
  .evidence-panel-header > span, .pivot-column > span) {
  margin-bottom: 8px !important;
}

/* 12px layout gaps sit between 8 and 16. Text groups take 8, layout takes 16. */
.unified-case :is(.case-meta > div, .case-stats > div, .system-grid > article,
  .evidence-panel-header, .brand) { gap: 8px !important; }

/* remaining component values: 2, 6, 12 and 21.6px */
.unified-case :is(.home-link, .backlink, .navcta) { padding-inline: 8px !important; }
.unified-case :is(.brand, .next-actions, .foot-links, .footer-links) { gap: 16px !important; }
.unified-case .case-content :is(h3, h4) { margin-bottom: 8px !important; }
.unified-case .case-content :is(li, .case-reading li) { padding-left: 24px !important; }
.unified-case .case-content strong { margin-top: 8px; }

/* ── Law of Proximity ──────────────────────────────────────────────────────
   A heading and the paragraph it introduces are one group. Gaps measured
   8 to 76.8px, so the pairing was not reading as a pair. Adjacent-sibling
   selectors only, so a heading that starts a new block is untouched. */
.unified-case .case-content :is(h2, .case-heading) + :is(p, ul, ol, dl),
.unified-case .case-content :is(h2, .case-heading) + * > p:first-child {
  margin-top: 12px !important;
}
.unified-case .case-content :is(h3, h4) + :is(p, ul, ol, dl) {
  margin-top: 8px !important;
}
.unified-case .case-content :is(h2, h3, h4) { margin-bottom: 0 !important; }

/* 8px scale, remaining component values, targeted by their real selectors */
.unified-case .case-global-nav .links > a { padding-inline: 8px !important; }
.unified-case .menu-panel > a { padding-inline: 16px !important; }
.unified-case .next-actions > a { padding-inline: 24px !important; gap: 8px !important; }
.unified-case .payload > dl { gap: 8px !important; }
.unified-case .flow-linear > b { padding-inline: 16px !important; }
.unified-case .case-content strong { margin-bottom: 8px !important; }
.unified-case .case-content :is(h3, h4) { margin-top: 8px !important; }
.unified-case .case-content .pivot-column > h3 { margin-top: 8px !important; }
.unified-case .decision > p { padding-block: 0 !important; }
.unified-case .s > div.n { margin-bottom: 8px !important; }

/* the proximity value moves from 12 to 8: it satisfies the text-group rule and
   sits on the strict scale, where 12 does not */
.unified-case .case-content :is(h2, .case-heading) + :is(p, ul, ol, dl),
.unified-case .case-content :is(h2, .case-heading) + * > p:first-child {
  margin-top: 8px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   REVISION MARKER
   A standing note on every case study while the writing is still being
   tightened. Deliberately says the writing is in revision, not the work.

   To change the wording, edit the .wip__text span in each case study page.
   To remove it entirely, delete that span's parent div from the five pages;
   this block then styles nothing and can stay or go.
   ══════════════════════════════════════════════════════════════════════════ */
.wip {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 200;                      /* under the nav pill, over the content */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(17, 20, 16, .92);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 8px 32px rgba(17, 20, 16, .22);
  color: #F2F0EA;                    /* 15.8:1 on the pill ground */
  font-family: Manrope, system-ui, sans-serif;
  font-size: .875rem;                /* 14px, the mobile legibility floor */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.005em;
  white-space: nowrap;
  pointer-events: none;              /* never intercepts a click on the page */
}

.wip__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9AA8FF;               /* 7.4:1 on the pill ground */
}

/* the dot breathes so the marker reads as live rather than decorative */
@media (prefers-reduced-motion: no-preference) {
  .wip__dot { animation: wip-breathe 2.8s cubic-bezier(.4, 0, .6, 1) infinite; }
  @keyframes wip-breathe {
    0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(154, 168, 255, .55); }
    50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(154, 168, 255, 0); }
  }
}

/* the footer keeps clear of it, so the last line is never sitting underneath */
.unified-case + footer,
.unified-case footer { padding-bottom: 88px; }

/* On a phone the full sentence covered two thirds of the width and sat over
   body copy, so it collapses to the one word that carries the meaning. */
@media (max-width: 560px) {
  .wip { padding: 8px 14px; font-size: .8125rem; }   /* 13px, label scale */
  .wip__more { display: none; }
  .unified-case + footer,
  .unified-case footer { padding-bottom: 72px; }
}

@media print { .wip { display: none !important; } }