/* Brand case pages on Apple's product-page pattern. Each case keeps its own
   world colours (--world-base, --world-surface, --world-ink, --world-accent),
   the way Apple colours a page for a product finish. Structure, type scale,
   rounded media and chrome follow the rest of the site. Brand typefaces set by
   brand-worlds.css are left alone. Loads after brand-worlds.css and apple.css. */

.brand-world { --b-muted: color-mix(in srgb, var(--world-ink, #f5f5f7) 64%, transparent); --b-hair: color-mix(in srgb, var(--world-ink, #f5f5f7) 18%, transparent); }
.brand-world main.wrap { width: min(var(--a-content-wide), calc(100% - 2 * var(--a-gutter))); }

/* Global nav: translucent over the brand colour. */
.case-shell .site-nav#siteNav { background: rgba(0, 0, 0, .32); color: #f5f5f7; }
.case-shell .site-nav .brand-mark, .case-shell .site-nav .nav-links a { color: rgba(255, 255, 255, .86); }
.case-shell .site-nav .brand-mark .brand-accent { color: #fff; }
.case-shell .site-nav .nav-links a[aria-current] { color: #fff; }
.case-shell .site-nav .nav-links a.nav-cta { color: #fff; }
.brand-world .breadcrumb { margin-top: 20px; font-size: 14px; letter-spacing: -.016em; text-decoration: none; color: var(--b-muted); }
.brand-world .breadcrumb:hover { color: var(--world-ink); }

/* Hero: centred lockup, eyebrow, intro and chips. */
.brand-world .case-heading {
  display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 64px 0 56px; text-align: center;
}
.brand-world .case-heading > div { display: flex; flex-direction: column; align-items: center; }
.brand-world .case-heading .eyebrow {
  font-family: var(--a-font-display); font-size: var(--a-eyebrow-size); line-height: var(--a-eyebrow-lh);
  letter-spacing: var(--a-eyebrow-ls); font-weight: 600; text-transform: none; color: var(--b-muted); margin: 0 0 20px;
}
.brand-world .case-heading .brand-lockup { margin: 0 auto; }
.brand-world .case-heading .brand-lockup img { max-height: min(260px, 32vw); width: auto; max-width: min(520px, 80vw); margin: 0 auto; }
.brand-world .case-heading p {
  max-width: 30em; margin: 0 auto; color: var(--world-ink);
  font-family: var(--a-font-display); font-size: var(--a-intro-size); line-height: var(--a-intro-lh); letter-spacing: var(--a-intro-ls);
}
.brand-world .surface-tags { justify-content: center; gap: 8px; margin-top: 22px; }
.brand-world .surface-tags span {
  border: 0; border-radius: 980px; padding: 7px 14px; background: color-mix(in srgb, var(--world-ink, #fff) 12%, transparent);
  font-size: 14px; letter-spacing: -.016em; text-transform: none;
}

/* Local nav: Apple's product sub-nav. */
.brand-world .case-sections {
  top: var(--a-nav); padding: 0; margin: 0 0 40px; gap: 0 28px; justify-content: center; min-height: 52px; align-items: center;
  background: color-mix(in srgb, var(--world-base) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--b-hair);
}
.brand-world .case-sections a { font-size: 12px; letter-spacing: -.01em; opacity: .8; text-decoration: none; }
.brand-world .case-sections a[aria-current] { opacity: 1; text-decoration: none; font-weight: 600; }
.brand-world .case-sections .case-collection { font-size: 17px; font-weight: 600; opacity: 1; margin-right: auto; padding-left: 4px; }
.brand-world :is(section[id], #applications, #credits) { scroll-margin-top: calc(var(--a-nav) + 72px); }

/* Media: rounded, with quiet 12px captions. */
.brand-world :is(.case-hero, .evidence-figure) img,
.brand-world :is(.case-hero, .evidence-figure) .artwork-link { border-radius: var(--a-radius-lg); overflow: hidden; }
.brand-world .gallery .evidence-figure :is(img, .artwork-link) { border-radius: var(--a-radius); }
.brand-world .caption { margin-top: 12px; font-size: 12px; line-height: 1.34; letter-spacing: -.01em; color: var(--b-muted); }
.brand-world .caption span, .brand-world figcaption { text-transform: none !important; letter-spacing: -.01em !important; }
.brand-world .caption span:last-child { font-size: 12px; }

/* Section heads: large, tight, sentence case. */
.brand-world :is(.suite-heading, .section-head, .chapter-intro, .identity-copy) .eyebrow {
  font-family: var(--a-font-display); font-size: var(--a-eyebrow-size); line-height: var(--a-eyebrow-lh);
  letter-spacing: var(--a-eyebrow-ls); font-weight: 600; text-transform: none; color: var(--b-muted);
}
.brand-world :is(#suite-title, .section-head h2, #craft-title, #identity-title, .chapter-intro h2) {
  font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls); text-transform: none;
}
.brand-world :is(.chapter-intro, .identity-copy) p { font-size: var(--a-intro-size); line-height: var(--a-intro-lh); letter-spacing: var(--a-intro-ls); max-width: 34em; color: var(--b-muted); }
.brand-world .suite-count { font-size: 14px; letter-spacing: -.016em; text-transform: none; color: var(--b-muted); }

/* Logo suite: a grid of rounded tiles on the surface colour. */
.brand-world .logo-suite.bleed { padding-block: 110px; }
.brand-world .suite-mark { border-radius: var(--a-radius); overflow: hidden; }
.brand-world .suite-mark figcaption { font-size: 12px; color: var(--b-muted); }

/* Identity row, craft deck, digital experience: rounded panels. */
.brand-world .identity-row { gap: 24px; margin-block: 110px; }
.brand-world :is(.identity-row .mark-stage, .craft-deck, .digital-experience, .experience-frame) { border-radius: var(--a-radius-lg); overflow: hidden; }
.brand-world .swatches i { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--b-hair); }
.brand-world .craft-section { margin-block: 110px; }
.brand-world .craft-tabs button { border-radius: 980px; font-size: 14px; letter-spacing: -.016em; text-transform: none; }
.brand-world .experience-bar { font-size: 12px; text-transform: none; }
.brand-world .experience-bar .eyebrow { font-size: 12px; text-transform: none; letter-spacing: -.01em; }

/* Disclosures: Apple "show more" rows. */
.brand-world .scene-disclosure { border-block: 1px solid var(--b-hair); }
.brand-world .scene-disclosure summary { font-size: var(--a-eyebrow-size); font-weight: 600; letter-spacing: var(--a-eyebrow-ls); text-transform: none; }
.brand-world .scene-disclosure summary span { font-size: 14px; letter-spacing: -.016em; text-transform: none; color: var(--b-muted); }

/* Credits and sign-off. */
.brand-world #credits.evidence { max-width: var(--a-content); margin: 110px auto 0; padding-top: 40px; border-top: 1px solid var(--b-hair); }
.brand-world #credits .eyebrow { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: -.016em; }
.brand-world #credits p { font-size: 14px; line-height: 1.5; letter-spacing: -.016em; color: var(--b-muted); }
.brand-world .case-ending { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 96px; padding: 72px 0 110px; border-top: 1px solid var(--b-hair); text-align: center; }
.brand-world .case-browse-links { justify-content: center; }
.brand-world .case-browse { font-size: 14px; text-decoration: none; }
.brand-world .case-role-line { font-family: var(--a-font-display); font-size: var(--a-intro-size); line-height: var(--a-intro-lh); }
.brand-world .case-ending-actions { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 18px; }
.brand-world .case-next-project { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.brand-world .case-ending-label { font-size: 14px; font-weight: 600; letter-spacing: -.016em; text-transform: none; color: var(--b-muted); }
.brand-world .case-ending-title { font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls); font-weight: 600; }
.brand-world .case-brief {
  display: inline-flex; align-items: center; padding: 11px 21px; border: 0; border-radius: 980px;
  background: var(--a-blue); color: #fff; font-size: 17px; letter-spacing: -.022em; text-transform: none;
}
.brand-world .case-brief:hover { background: var(--a-blue-hover); }

@media (max-width: 734px) {
  .brand-world .case-heading { padding: 40px 0 36px; }
  .brand-world .case-sections { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; gap: 0 20px; padding-inline: 4px; }
  .brand-world .case-sections .case-collection { display: none; }
  .brand-world .case-sections a { white-space: nowrap; }
  .brand-world .logo-suite.bleed { padding-block: 72px; }
}
.brand-world .case-browse-links a, .brand-world .case-browse { color: var(--world-ink); opacity: .8; }
.brand-world .case-browse-links a:hover { opacity: 1; text-decoration: underline; }
.brand-world .case-next-project, .brand-world .case-next-project * { text-decoration: none !important; color: var(--world-ink); }
.brand-world .case-next-project:hover .case-ending-title { opacity: .8; }
/* No stroked shapes: swatches read through shade. */
.brand-world .swatches i { border: 0; box-shadow: inset 0 0 0 100px rgba(0,0,0,0), 0 2px 8px rgba(0, 0, 0, .18); }

/* ---------- Craft viewer: Apple gallery pattern, no strokes ----------
   Chip tabs (filled when selected), a soft tinted surface, the artwork on a
   lighter tint, round filled paddles. Colours derive from each brand world. */
html body.brand-world .craft-deck {
  border: 0 !important; border-radius: var(--a-radius-lg); padding: 24px;
  background: color-mix(in srgb, var(--world-ink, #fff) 6%, var(--world-surface, #000)) !important;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}
html body.brand-world .craft-tabs {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 0 0 20px; margin: 0;
  border: 0 !important; scrollbar-width: none; justify-content: flex-start;
}
html body.brand-world .craft-tabs::-webkit-scrollbar { display: none; }
html body.brand-world .craft-tabs button {
  flex: none; display: inline-flex; align-items: center; gap: 0; min-height: 36px; padding: 0 16px;
  border: 0 !important; border-radius: 980px; box-shadow: none !important;
  background: color-mix(in srgb, var(--world-ink, #fff) 9%, transparent) !important;
  color: color-mix(in srgb, var(--world-ink, #fff) 78%, transparent);
  font-size: 14px; line-height: 1; letter-spacing: -.016em; font-weight: 400; white-space: nowrap; text-align: center;
  transition: background .25s var(--a-ease), color .25s var(--a-ease);
}
html body.brand-world .craft-tabs button span { display: none !important; }
html body.brand-world .craft-tabs button:hover { background: color-mix(in srgb, var(--world-ink, #fff) 15%, transparent) !important; color: var(--world-ink); }
html body.brand-world .craft-tabs button:is([aria-selected="true"], .is-active, [aria-current]) {
  background: var(--world-ink, #fff) !important; color: var(--world-surface, #000); font-weight: 600;
}
html body.brand-world .craft-tabs button::before, html body.brand-world .craft-tabs button::after { display: none !important; }
html body.brand-world .craft-tabs button:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--world-accent, #8593ff) 70%, transparent) !important; }

html body.brand-world .craft-panel .artwork-link {
  border-radius: var(--a-radius) !important; overflow: hidden;
  background: color-mix(in srgb, var(--world-ink, #fff) 10%, var(--world-surface, #000)) !important;
}
html body.brand-world .craft-panel .artwork-link img { border-radius: 0; }
html body.brand-world .craft-panel .caption { margin-top: 14px; }
html body.brand-world .craft-note {
  margin: 14px 0 0; max-width: 40em; font-size: 17px; line-height: 1.47; letter-spacing: -.022em;
  color: color-mix(in srgb, var(--world-ink, #fff) 82%, transparent);
}

html body.brand-world .craft-controls {
  justify-content: center; gap: 20px; margin-top: 24px; padding: 0; border: 0 !important;
}
html body.brand-world .craft-controls button {
  display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 0; padding: 0;
  border: 0 !important; border-radius: 50%; box-shadow: none;
  background: color-mix(in srgb, var(--world-ink, #fff) 12%, transparent) !important; color: var(--world-ink, #fff);
  font-size: 18px; line-height: 1; transition: background .2s var(--a-ease), transform .1s ease-out;
}
html body.brand-world .craft-controls button:hover { background: color-mix(in srgb, var(--world-ink, #fff) 20%, transparent) !important; }
html body.brand-world .craft-controls button:active { transform: scale(.94); }
html body.brand-world .craft-controls button:disabled { opacity: .35; }
html body.brand-world .craft-position { min-width: 64px; text-align: center; font-size: 14px !important; letter-spacing: -.016em !important; color: color-mix(in srgb, var(--world-ink, #fff) 70%, transparent); }
@media (max-width: 734px) {
  html body.brand-world .craft-deck { padding: 16px; }
  html body.brand-world .craft-note { font-size: 15px; }
}
html body.brand-world .craft-tabs { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 48px), transparent); padding-right: 40px; }

/* ---------- Drawer-era case pages: Apple finish for the editorial landing and drawer ---------- */
html body.brand-world :is(.case-cover, .case-explorer, .case-display, .digital-experience) .eyebrow {
  font-family: var(--a-font-display); font-size: var(--a-eyebrow-size) !important; line-height: var(--a-eyebrow-lh);
  letter-spacing: var(--a-eyebrow-ls) !important; font-weight: 600; text-transform: none !important; color: var(--b-muted);
}
html body.brand-world .case-cover-back {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 0; border-radius: 980px;
  background: color-mix(in srgb, var(--world-ink, #fff) 14%, transparent) !important; color: var(--world-ink);
  font-size: 14px !important; letter-spacing: -.016em; text-decoration: none;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
html body.brand-world .case-cover .surface-tags span, html body.brand-world .case-cover [class*="tags"] span {
  font-size: 14px !important; letter-spacing: -.016em !important; text-transform: none !important;
  padding: 7px 14px; border: 0 !important; border-radius: 980px; background: color-mix(in srgb, var(--world-ink, #fff) 12%, transparent);
}
html body.brand-world .case-cover-caption, html body.brand-world .suite-count { font-size: 12px !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--b-muted); }
html body.brand-world .case-door-number { font-size: 12px !important; letter-spacing: -.01em !important; }
html body.brand-world .case-explorer a:not(.case-door), html body.brand-world .digital-experience .experience-bar a { font-size: 14px !important; letter-spacing: -.016em; text-decoration: none; }
html body.brand-world .case-drawer-label h2 { font-size: var(--a-eyebrow-size) !important; letter-spacing: var(--a-eyebrow-ls); font-weight: 600; }

/* Cover title: the brand's primary logo, at a confident but contained size. */
html body.brand-world .case-cover-logo { margin: 14px 0 0; }
html body.brand-world .case-cover-logo img { display: block; width: auto; height: auto; max-width: min(440px, 72vw); max-height: min(300px, 38vh); object-fit: contain; }

/* Photo covers: everything over the photograph reads in white on a soft shade. */
html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .34) 45%, rgba(0, 0, 0, .08) 75%),
    linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 40%) !important;
  opacity: 1 !important;
}
html body.brand-world .case-cover[data-cover-mode="photo"] :is(.eyebrow, .case-cover-copy p, .case-cover-caption, .recognition-list li) { color: #fff !important; }
html body.brand-world .case-cover[data-cover-mode="photo"] .eyebrow { color: rgba(255, 255, 255, .86) !important; }
html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-back {
  background: rgba(255, 255, 255, .18) !important; color: #fff !important;
}
html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-back:hover { background: rgba(255, 255, 255, .28) !important; }
html body.brand-world .case-cover[data-cover-mode="photo"] .surface-tags span { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .42) 50%, rgba(0, 0, 0, .38) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 40%) !important;
}
html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-copy p { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* Photo covers: the description and tags sit on a frosted glass panel. */
html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-copy {
  padding: 22px 24px 24px; border-radius: 22px;
  background: rgba(20, 20, 22, .475);
  -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .5);
}
html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-copy p { text-shadow: none; margin: 0; }
html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-copy .surface-tags { margin-top: 16px; justify-content: flex-start; }
html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-copy .surface-tags span { background: rgba(255, 255, 255, .14) !important; }
@media (prefers-reduced-transparency: reduce) {
  html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-copy { background: rgba(20, 20, 22, .85); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Inside the drawer, text colours come from the drawer's own ink (worked out for the
   drawer surface), not the page's brand ink, so copy stays legible on any drawer. */
html body.brand-world .case-display {
  --b-muted: color-mix(in srgb, var(--drawer-ink, #f5f5f7) 72%, transparent);
  --b-hair: color-mix(in srgb, var(--drawer-ink, #f5f5f7) 18%, transparent);
  color: var(--drawer-ink, #f5f5f7);
}
html body.brand-world .case-display #credits :is(p, li, span, a),
html body.brand-world .case-display .evidence :is(p, li) { color: color-mix(in srgb, var(--drawer-ink, #f5f5f7) 78%, transparent) !important; }
html body.brand-world .case-display #credits a { text-decoration: underline; text-underline-offset: 3px; }
/* Top bar on brand pages: Apple's dark translucent bar, legible over any brand colour. */
/* Nav takes a hint of whatever is behind it: the image shows through, blurred and dimmed
   (dimming the backdrop itself keeps its hue while keeping white text legible). */
html body.case-shell .site-nav#siteNav {
  background: rgba(0, 0, 0, .18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) brightness(.5) !important; backdrop-filter: blur(24px) saturate(150%) brightness(.5) !important;
}
@media (prefers-reduced-transparency: reduce) {
  html body.case-shell .site-nav#siteNav { background: rgba(22, 22, 23, .92) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
html body.case-shell .site-nav .brand-mark, html body.case-shell .site-nav .nav-links a:not(.nav-cta) { color: #f5f5f7 !important; }
html body.case-shell .site-nav .brand-mark .brand-accent { color: var(--a-link-dark) !important; }
html body.case-shell .site-nav .brand-mark small { opacity: .8; }

/* Legibility fixes from the contrast audit. */
html body .skip, html body .skip-link { background: #1d1d1f !important; color: #fff !important; border-radius: 980px; padding: 8px 16px; }
html body.brand-world .case-browse-links a, html body.brand-world .case-browse { opacity: 1 !important; }
html body.brand-world .luthuli-safety button, html body.brand-world [class*="safety"] button { font-size: 12px !important; }
html body.brand-world .safety-footer-actions button { opacity: 1 !important; color: inherit !important; font-weight: 600; }

/* Banner for marks without photography: the brand's own logo, enlarged and heavily
   blurred into a soft colour field in its palette. */
html body.brand-world .case-cover-image.is-glow {
  object-fit: cover; object-position: 50% 50%;
  filter: blur(70px) saturate(1.5) brightness(.9); transform: scale(1.6);
}
html body.brand-world .case-cover:has(.is-glow) {
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 78% 30%, color-mix(in srgb, var(--cover-glow, var(--world-accent, #888)) 42%, transparent), transparent 72%),
    radial-gradient(55% 80% at 15% 95%, color-mix(in srgb, var(--cover-glow, var(--world-accent, #888)) 22%, transparent), transparent 70%),
    var(--world-base, #222);
}
html body.brand-world .case-cover-image.is-glow { mix-blend-mode: screen; opacity: .85; }
html body.brand-world .case-cover-logo.is-dark-mark img { filter: brightness(0) invert(1); }
html body.brand-world .case-cover-soften {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  object-position: var(--cover-position, 50% 50%);
  filter: blur(6.5px) brightness(.8); transform: scale(1.02);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 34%, transparent 58%); mask-image: linear-gradient(90deg, #000 0, #000 34%, transparent 58%);
}
@media (max-width: 734px) {
  html body.brand-world .case-cover-soften { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 30%); mask-image: linear-gradient(0deg, transparent 0, #000 30%); }
}

/* Desktop cover treatment (per the supplied diagrams).
   - Blur: an ellipse anchored in the bottom-left corner of the left half. Full
     strength along the lower-left edge and the left of the bottom edge, half at
     the centre of the left half, none along the top and at the banner's midpoint.
     Eased stops keep the falloff seamless.
   - Dimmer: fades left to right to nothing at the midpoint, deepened by the same
     ellipse where the logo sits. */
@media (min-width: 735px) {
  html body.brand-world .case-cover[data-cover-mode="photo"] .case-cover-shade {
    background:
      radial-gradient(ellipse 50% 100% at 0% 100%, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .3) 40%, rgba(0, 0, 0, .2) 58%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .03) 90%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .34) 18%, rgba(0, 0, 0, .14) 36%, rgba(0, 0, 0, 0) 50%) !important;
    -webkit-mask-image: none; mask-image: none;
  }
  html body.brand-world .case-cover-soften {
    filter: blur(10px) brightness(.9); transform: scale(1.04);
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 0%, #000 42%, rgba(0, 0, 0, .8) 55%, rgba(0, 0, 0, .5) 70.7%, rgba(0, 0, 0, .22) 84%, rgba(0, 0, 0, .06) 94%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 0%, #000 42%, rgba(0, 0, 0, .8) 55%, rgba(0, 0, 0, .5) 70.7%, rgba(0, 0, 0, .22) 84%, rgba(0, 0, 0, .06) 94%, transparent 100%);
    -webkit-mask-size: 50% 100%; mask-size: 50% 100%;
    -webkit-mask-position: 0 0; mask-position: 0 0;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}

/* The cover runs up under the sticky nav, so the nav picks up the banner, not the page colour. */
html body.brand-world .case-cover { margin-top: calc(-1 * var(--a-nav, 44px)); padding-top: var(--a-nav, 44px); }

/* One measure for the whole page: cover copy, project navigator, drawers and their display
   boxes all share the nav's width, so every headline, paragraph and container starts and ends
   on the same two edges, with a uniform margin either side. */
html body.brand-world {
  --case-measure: min(var(--a-content-wide, 1260px), calc(100% - 44px)); /* same as the nav */
}
html body.brand-world :is(.case-cover-inner, .case-explorer, .case-display > .case-panel, .case-display > .case-drawer-tabs) {
  width: var(--case-measure) !important; max-width: none !important; margin-inline: auto !important;
  padding-inline: 0 !important; box-sizing: border-box;
}
html body.brand-world .case-panel :is(.logo-browser, .smart-shelf, .craft-viewer, .case-use-tabs, .guide-disclosure) {
  width: 100% !important; max-width: none !important; margin-inline: 0 !important;
}
html body.brand-world main#main.wrap { width: var(--case-measure) !important; max-width: none !important; }
html body.brand-world #case > .case-explorer { width: 100% !important; margin-inline: 0 !important; }

/* Held banner: the picture layers counter the scroll, so the photo stays put while the cover's
   copy scrolls up; the cover clips it as the next section slides over. */
html body.brand-world .case-cover.is-held { overflow: clip; }
html body.brand-world .case-cover.is-held :is(.case-cover-image, .case-cover-soften, .case-cover-shade) {
  translate: 0 var(--banner-hold, 0px); will-change: translate;
}

/* Here for Every Fan: the supplied artwork is shown whole (never cropped or enlarged) and
   the cover continues its own blue, top to bottom, so the banner spans any screen seamlessly. */
html body.brand-world[data-brand="every-fan"] .case-cover {
  background: linear-gradient(180deg, rgb(1, 103, 175) 0%, rgb(2, 117, 184) 50%, rgb(2, 55, 97) 100%) !important;
}
html body.brand-world[data-brand="every-fan"] .case-cover :is(.case-cover-image, .case-cover-soften) { object-fit: contain !important; object-position: 50% 100% !important; }
@media (max-width: 734px) {
  html body.brand-world[data-brand="every-fan"] .case-cover .case-cover-image { inset: 0 !important; height: 100% !important; width: 100% !important; object-position: 50% 44px !important; }
  html body.brand-world[data-brand="every-fan"] .case-cover .case-cover-soften { display: none !important; }
}
@media (max-width: 734px) {
  /* The artwork is 79.4vw tall (2000×1588) starting 44px down; the blue follows its edges exactly, then stays navy. */
  html body.brand-world[data-brand="every-fan"] .case-cover {
    background: linear-gradient(180deg, rgb(1, 103, 175) 44px, rgb(2, 117, 184) calc(44px + 39.7vw), rgb(2, 55, 97) calc(44px + 79.4vw), rgb(2, 55, 97) 100%) !important;
  }
}