/* Shared editorial system for all 17 original case compositions.
   Media dimensions, grids, overlaps, sources and source order are untouched.
   Surface decisions follow each case's transparent artwork; five stay dark. */
:root:has([data-okto-surface="white"]) { background-color: #fff !important; color-scheme: light; }
body:has([data-okto-surface="white"]),
body:has([data-okto-surface="white"]) :is(#__next, #smooth-wrapper, #smooth-content, main) { background-color: #fff; }
[data-okto-case][data-okto-case] {
  --case-ink: #f7f7f7;
  --case-muted: #b9bcb8;
  font-family: var(--okto-font);
  color: var(--case-ink);
}
[data-okto-case][data-okto-surface="white"] { --case-ink: #181b18; --case-muted: #646a62; background: #fff; }
[data-okto-case][data-okto-case] :is(.h3-cap,.h5-locator,.h4-primary-bold,.h4-primary,.h2,.h4-ps,.p-ps,p) { font-family: var(--okto-font); color: var(--case-ink); }
[data-okto-case="pirate-ship-fun-shipping"] :is(.case-ps,.bg-ps,.bg-ps-b,.bg-ps-bl,.ps-case_PSBackgroundAWrapper__dbdrh,.ps-case_PSBackgroundBWrapper__tl3Go) { background-color:#fff; }
/* The title and discipline label share a text column; image wrappers stay intact. */
[data-okto-case][data-okto-case] .container > div > div:has(> .h3-cap) {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
[data-okto-case][data-okto-case] .h3-cap {
  width: 100%;
  font-size: clamp(44px, 4.45vw, 64px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
[data-okto-case][data-okto-case] .h5-locator {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--case-muted);
}
[data-okto-case][data-okto-case] p.h4-primary-bold {
  font-size: clamp(24px, 1.35vw, 32px);
  font-weight: 200;
  line-height: 1.38;
  letter-spacing: -.025em;
  max-width: 27ch;
}

/* Statement / subsection / body roles match the homepage and heart pages. */
[data-okto-case][data-okto-case] .h2 {
  font-size: clamp(40px, 3.35vw, 52px);
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: -.035em;
  max-width: 29ch;
  text-wrap: balance;
}
[data-okto-case][data-okto-case] :is(.h4-ps, h2.h4-primary-bold) {
  font-size: 36px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -.035em;
  text-wrap: balance;
}
[data-okto-case][data-okto-case] .h4-ps:has(+ .p-ps) {
  margin-bottom: 24px;
}
[data-okto-case][data-okto-case] .p-ps,
[data-okto-case][data-okto-case] ul.h4-primary {
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
  letter-spacing: -.02em;
  max-width: 58ch;
  opacity: 1;
}
[data-okto-case][data-okto-case] .p-ps span {
  opacity: 1;
  color: var(--case-muted);
}
[data-okto-case][data-okto-case] .bg-ps-b .h4-ps {
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: -.035em;
}

/* Identical paths, dimensions and viewBoxes; only white marks become Ink.
   Original src/alt/order remain owned by React, including dynamic arrivals. */
[data-okto-case][data-okto-case] img[src$="ps-img-3.2edc7184.svg"] { content: url('/assets/case-details/ps-img-3-paper.svg'); }
[data-okto-case][data-okto-case] img[src$="ps-img-6.404fa442.svg"] { content: url('/assets/case-details/ps-img-6-paper.svg'); }
[data-okto-case][data-okto-case] img[src$="ps-img-13.svg"] { content: url('/assets/case-details/ps-img-13-paper.svg?v=2'); }
[data-okto-case][data-okto-case] img[src$="ps-img-14.svg"] { content: url('/assets/case-details/ps-img-14-paper.svg?v=2'); }

@media (max-width: 767px) {
  [data-okto-case][data-okto-case] .h3-cap { font-size: clamp(44px, 11vw, 72px); line-height: 1.02; }
  [data-okto-case][data-okto-case] .container > div > div:has(> .h3-cap) { gap: 20px; }
  [data-okto-case][data-okto-case] .h2 { font-size: 32px; line-height: 1.12; }
  [data-okto-case][data-okto-case] :is(.h4-ps, h2.h4-primary-bold) { font-size: 25px; line-height: 31px; }
  [data-okto-case][data-okto-case] .bg-ps-b .h4-ps { font-size: 30px; line-height: 1.12; }
  [data-okto-case][data-okto-case] .p-ps,
  [data-okto-case][data-okto-case] ul.h4-primary { font-size: 20px; line-height: 29px; }
}


/* Long institutional name needs a compact display role in its original column. */
[data-okto-case="adg"][data-okto-case] .h3-cap { font-size:clamp(28px,2.65vw,40px); line-height:1.06; overflow-wrap:anywhere; }
[data-okto-case="pirate-ship-fun-shipping"][data-okto-case] .h3-cap { font-size:clamp(44px,7.778vw,112px); }
[data-okto-case][data-okto-case]  :is(h4,div).h4-primary { font-size:clamp(24px,1.35vw,32px); font-weight:200; line-height:1.38; letter-spacing:-.025em; }
[data-okto-case][data-okto-case] p:not([class]) { font-size:21px; line-height:1.43; font-weight:200; letter-spacing:-.02em; }
[data-okto-case="ado-reborn"] svg:not(.logo-horizontal) .SVG_fill { fill:var(--case-ink); }
[data-okto-case="ado-reborn"] [class*="Block_Logos_B"] { color:var(--case-muted); }

/* The original Fader owns each media surface. Match the homepage cadence
   without adding a second transform, changing crops or clipping overlaps. */
[data-okto-case][data-okto-case] .Fader_Fader__koW22 { --FaderTranlation:32px; }
[data-okto-case][data-okto-case] .Fader_ShortVersion__zvEMp { --FaderTranlation:16px; }
[data-okto-case][data-okto-case] .Fader_EffectTarget__jFidD { transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .8s cubic-bezier(.22,1,.36,1); }
[data-okto-case][data-okto-case] .Fader_Fader__koW22:not(.fade-up-in) > .Fader_EffectTarget__jFidD { opacity:0; }
[data-case-hold] { opacity:0; }
@media(prefers-reduced-motion:reduce) {
 [data-okto-case][data-okto-case] .Fader_EffectTarget__jFidD { transition:none;transform:none;opacity:1!important; }
 [data-case-hold] { opacity:1; }
}
@media(max-width:767px) {
 [data-okto-case][data-okto-case] p:not([class]) { font-size:20px;line-height:1.45; }
}
/* Lead sizing follows the canonical role, including its 700px breakpoint. */
@media(max-width:700px) {
 [data-okto-case][data-okto-case] :is(p.h4-primary-bold,h4.h4-primary,div.h4-primary) { font-size:22px;line-height:1.35; }
}
@media print { [data-case-hold],[data-okto-case] .Fader_EffectTarget__jFidD { opacity:1!important;transform:none!important; } }

[data-okto-case][data-okto-case] .Fader_Fader__koW22:focus-within > .Fader_EffectTarget__jFidD { opacity:1!important;transform:none;transition:none; }

/* Retired agency marks (SPARK, CORE, REAL, LINK, FOCUS): remove the complete
   strip, including its margins. Unrelated case captions and artwork are untouched. */
[data-okto-case] [data-case-agency],
[data-okto-case] [data-case-obsolete-agencies] { display:none!important; }

/* Approved spacing audit, 31 October: only empty/text/scope spacing changes.
   Native media geometry and media-only clearances remain authored. */
[data-okto-case][data-okto-case] .container > div > div:has(> .h3-cap) > .h3-cap + div:empty,
[data-okto-case][data-okto-case] .container > div > div:has(> .h3-cap) > .h5-locator:empty,
[data-okto-case][data-okto-case] [data-case-empty-copy] { display:none; }
[data-okto-case][data-okto-case] [data-case-gap="0"] { height:0; }
[data-okto-case][data-okto-case] [data-case-gap="64"] { height:64px; }
[data-okto-case][data-okto-case] [data-case-gap="80"] { height:80px; }
[data-okto-case][data-okto-case] [data-case-gap="112"] { height:112px; }
@media(min-width:768px) {
  [data-okto-case][data-okto-case] [data-case-scope-copy] { padding-block:48px; }
  [data-okto-case="routewise-smart-logistics"][data-okto-case] .container.gap-48 { gap:64px; }
}
@media(max-width:767px) {
  [data-okto-case][data-okto-case] [data-case-scope-grid] { gap:64px; }
  [data-okto-case][data-okto-case] [data-case-empty-scope-grid] { gap:0; }
  [data-okto-case][data-okto-case] [data-case-empty-scope-column] { display:none; }
  [data-okto-case][data-okto-case] .container > .flex > .md\:w-1\/12:empty { display:none; }
  [data-okto-case][data-okto-case] .container > .flex > div:has(> .h3-cap:empty):has(> .h5-locator:empty) { display:none; }
  /* The original sm:h-0 starts at 375px; hide at 320px as well. */
  [data-okto-case][data-okto-case] :is(.h-28,.h-56).sm\:h-0 { height:0; }
  [data-okto-case][data-okto-case] .h4-primary.py-20,
  [data-okto-case][data-okto-case] .py-20:has(> p:not(.hidden)) { padding-block:40px; }
  [data-okto-case="violife-join-the-good-life"][data-okto-case] .pt-20:has(> p),
  [data-okto-case="adg"][data-okto-case] .pt-20:has(ul.h4-primary) { padding-top:48px; }
  [data-okto-case="routewise-smart-logistics"][data-okto-case] .container.gap-48 { gap:40px; }
  [data-okto-case="ado-virtual-journey"][data-okto-case] .Block_0_01_D_Content3Wrapper__nfbKo { gap:40px; }
  [data-okto-case="ado-virtual-journey"][data-okto-case] .Block_0_01_D_Content3Wrapper__nfbKo > .h4-primary { margin-top:0; }
  [data-okto-case="ado-reborn"][data-okto-case] .Block_Logos_B_ContentWrapper__r2W_4 { padding-block:64px; }
}