/* Branding index on Apple's dark "Pro" page pattern: black canvas, centred
   hero, chip navigation, rounded tiles on #161617, centred sign-off.
   Loads after showcase.css and ../css/apple.css. The hover glow that tints
   the page in each brand's colour stays; it is this page's signature. */

.branding-index {
  --paper: #000; --ink: #f5f5f7; --muted: #86868b; --line: #424245; --dark: #161617; --mint: var(--a-link-dark);
  --b-card: #161617; --b-card-2: #1d1d1f;
  background: #000; color: #f5f5f7;
}
.branding-index::before { opacity: .55; }
.branding-index .wrap { width: min(var(--a-content-wide), calc(100% - 2 * var(--a-gutter))); }

/* Nav: Apple's dark translucent bar. */
.branding-index .site-nav#siteNav { background: rgba(22, 22, 23, .8); color: #f5f5f7; }
.branding-index .site-nav .brand-mark { color: #f5f5f7; }
.branding-index .site-nav .brand-mark .brand-accent { color: var(--a-link-dark); }
.branding-index .site-nav .nav-links a { color: rgba(255, 255, 255, .8); }
.branding-index .site-nav .nav-links a:hover,
.branding-index .site-nav .nav-links a[aria-current] { color: #fff; }
.branding-index .site-nav .nav-links a.nav-cta { color: #fff; }

/* Hero: centred, product-page scale. */
.branding-index .intro {
  display: block; max-width: none; padding: 96px 0 40px; text-align: center; border: 0;
}
.branding-index .intro .eyebrow { margin: 0 0 14px; color: #f5f5f7; }
.branding-index .intro h1 {
  max-width: 11em; margin: 0 auto;
  font-size: var(--a-hero-size); line-height: var(--a-hero-lh); letter-spacing: var(--a-hero-ls);
  font-weight: 600; font-stretch: var(--w-display);
}
.branding-index .intro-copy {
  max-width: 24em; margin: 22px auto 0; color: var(--muted);
  font-family: var(--a-font-display); font-size: var(--a-subhead-size); line-height: var(--a-subhead-lh); letter-spacing: var(--a-subhead-ls);
}

/* Collection shortcuts: Apple's chip row. */
.branding-index .collection-shortcuts { justify-content: center; gap: 10px; margin: 0 auto 24px; }
.branding-index .collection-shortcuts > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.branding-index .collection-shortcuts a {
  min-height: 36px; padding: 0 16px; border-radius: 980px; background: var(--b-card-2); color: #f5f5f7;
  font-size: 14px; letter-spacing: -.016em; text-decoration: none; transition: background .2s var(--a-ease);
}
.branding-index .collection-shortcuts a:hover { background: #2d2d2f; text-decoration: none; }

/* Section heads: centred headline, quiet count. */
.branding-index .collection-section { margin-top: 110px; scroll-margin-top: calc(var(--a-nav) + 24px); }
.branding-index .collection-heading {
  flex-direction: column; justify-content: center; gap: 10px; padding: 0; margin: 0 0 48px; border: 0; text-align: center;
}
.branding-index .collection-heading h2 {
  font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls);
  font-weight: 600; font-stretch: var(--w-display);
}
.branding-index .collection-heading > span { color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: -.016em; }
.branding-index .collection-heading > span::after { content: " projects"; }
.branding-index .collection-note { margin: -30px 0 40px; text-align: center; font-size: var(--a-intro-size); line-height: var(--a-intro-lh); color: var(--muted); }

/* Shared card language. */
.branding-index .index-card { transition: transform .5s var(--a-ease); }
.branding-index :is(.system-media, .index-media) { border-radius: var(--a-radius-lg); }
.branding-index :is(.mark-card, .compact-mark-card, .deferred-card) .index-media { border-radius: var(--a-radius); }
.branding-index .system-media .system-lead { transition: transform 1s var(--a-ease); }
.branding-index .system-card:hover .system-lead { transform: scale(1.03); }
.branding-index .index-caption { gap: 4px; padding-top: 16px; }
.branding-index .index-name { 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; justify-content: flex-start; }
.branding-index .card-arrow { display: none; }
.branding-index .index-meta { font-size: 14px; line-height: 1.43; letter-spacing: -.016em; color: var(--muted); }
.branding-index .index-scope { font-size: 17px; line-height: 1.47; letter-spacing: -.022em; color: #d2d2d7; }
.branding-index .index-award { border: 0; padding: 0; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--a-link-dark); }

/* Identity systems: big 2-up feature tiles. */
.branding-index .systems-grid { gap: 48px 24px; }
.branding-index .system-card .index-name { font-size: var(--a-card-size); line-height: 1.1429; letter-spacing: .007em; }
.branding-index .system-kind { font-size: 12px; letter-spacing: -.01em; padding: 6px 12px; border-radius: 980px; background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); text-shadow: none; }

/* Client brands: lockups on dark cards, caption inside the card. */
.branding-index .clients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.branding-index .client-card {
  display: flex; flex-direction: column; padding: 28px 28px 30px; border-radius: var(--a-radius-lg); background: var(--b-card);
}
.branding-index .client-card:hover { transform: scale(1.015); }
.branding-index .client-logo-stage { height: 180px; align-items: center; justify-content: center; padding: 0 0 20px; }
.branding-index .client-logo-stage .client-logo { object-position: center; max-width: min(100%, 190px); }
.branding-index .client-view { justify-content: center; inset: 0 0 20px; text-decoration: none; color: var(--a-link-dark); text-shadow: none; }
.branding-index .client-card:hover .client-logo { opacity: .24; }
.branding-index .client-card:hover .client-view { opacity: 1; transform: none; }
.branding-index .client-card .index-caption { margin-top: auto; }
.branding-index .client-label { font-size: 14px; color: var(--muted); }

/* Marks and deferred identities. */
.branding-index .marks-grid { gap: 32px 20px; }
.branding-index .mark-card .index-caption { padding: 12px 2px 0; }
.branding-index .mark-card .index-name { font-size: 17px; line-height: 1.24; letter-spacing: -.022em; }
.branding-index .mark-card .index-meta { font-size: 12px; }
.branding-index .deferred-identities { margin-top: 110px; border-block: 1px solid var(--line); }
.branding-index .deferred-identities summary { min-height: 96px; justify-content: center; gap: 16px; font-size: inherit; }
.branding-index .deferred-identities summary h2 {
  font-size: var(--a-headline-sm-size); line-height: 1.1; letter-spacing: var(--a-headline-ls); font-weight: 600; font-stretch: var(--w-display);
}
.branding-index .deferred-identities summary > span:last-child { gap: 14px; color: var(--muted); font-size: 14px; }
.branding-index .deferred-identities summary b {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--b-card-2); color: #f5f5f7; font-size: 22px; line-height: 1; transition: transform .4s var(--a-ease);
}
.branding-index .deferred-grid { gap: 32px 20px; padding: 24px 0 56px; }

/* Standalone marks: tidy dark squares. */
.branding-index .compact-mark-card.index-card .index-media { background: var(--b-card); }
.branding-index .compact-mark-card .index-name { font-size: 14px; letter-spacing: -.016em; }
.branding-index .compact-mark-card .index-meta { font-size: 12px; }

/* Lightbox: Apple's modal sheet. */
.branding-index .mark-dialog { border: 0; border-radius: var(--a-radius-lg); background: var(--b-card); color: #f5f5f7; padding: 28px; }
.branding-index .mark-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.branding-index .mark-dialog button { border: 0; border-radius: 980px; background: #2d2d2f; color: #f5f5f7; }
.branding-index .mark-dialog button:hover { background: #3a3a3c; }
.branding-index .mark-dialog-copy h2 { font-size: var(--a-card-size); font-weight: 600; letter-spacing: .007em; }
.branding-index .mark-dialog-copy p, .branding-index .mark-variant-caption { color: var(--muted); font-size: 14px; }
.branding-index .mark-variants button[aria-pressed=true] { outline-color: var(--a-link-dark); }

/* Closing: centred sign-off. */
.branding-index .closing { margin-top: 140px; padding: 110px 0 120px; background: #000; border-top: 1px solid var(--line); text-align: center; }
.branding-index .closing .wrap { flex-direction: column; justify-content: center; gap: 32px; }
.branding-index .closing .eyebrow { color: var(--muted); }
.branding-index .closing h2 {
  max-width: none; margin: 12px 0 0; font-size: var(--a-headline-size); line-height: var(--a-headline-lh); letter-spacing: var(--a-headline-ls);
  font-weight: 600; font-stretch: var(--w-display);
}
.branding-index .closing .section-door { order: 2; margin: 0 auto 48px; font-size: 17px; }
.branding-index .closing .section-door a { color: var(--a-link-dark); text-decoration: none; }
.branding-index .closing .section-door a:hover { text-decoration: underline; }
.branding-index .closing .a-button { font-size: 17px; }

@media (max-width: 1068px) {
  .branding-index .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
  .branding-index .intro { padding-top: 56px; }
  .branding-index .collection-section { margin-top: 80px; }
  .branding-index .systems-grid { grid-template-columns: 1fr; gap: 36px; }
  .branding-index .clients-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .branding-index .client-card { padding: 20px 18px 22px; }
  .branding-index .client-logo-stage { height: 120px; }
  .branding-index .closing { margin-top: 90px; padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .branding-index :is(.index-card, .system-lead) { transition: none; }
  .branding-index :is(.client-card, .system-card):hover, .branding-index .system-card:hover .system-lead { transform: none; }
}
.branding-index .closing { display: flex; flex-direction: column; }
.branding-index .closing .wrap { align-items: center; }
.branding-index .closing .section-door { order: 2; margin: 56px auto 0; text-align: center; }
.branding-index :is(.intro, .closing) .eyebrow { font-size: var(--a-eyebrow-size); line-height: var(--a-eyebrow-lh); letter-spacing: var(--a-eyebrow-ls); font-weight: 600; text-transform: none; }