.skip-link {
    position: absolute; top: -48px; left: 12px; z-index: 9999;
    background: #0F1B2D; color: #F4D470;
    padding: 10px 18px; font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
    text-decoration: none; border: 1px solid rgba(244, 212, 112, 0.4);
    border-radius: 4px; transition: top 0.18s ease;
  }
  .skip-link:focus { top: 12px; outline: 2px solid #F4D470; outline-offset: 2px; }
  .hero-page {
    position: relative; min-height: 460px;
    padding: 100px 0 70px; overflow: hidden;
    background: linear-gradient(180deg, #050B14 0%, #0A1422 50%, #0F1B2D 100%);
  }
  .hero-page .wrap { position: relative; z-index: 5; }
  .hero-page .cine-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
    color: #C8A84E; margin-bottom: 24px;
  }
  .hero-page .cine-eyebrow .cine-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #C8A84E; box-shadow: 0 0 12px rgba(200,168,78,0.7);
  }
  .hero-page h1 {
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(38px, 5.6vw, 68px);
    font-weight: 700; line-height: 1.05;
    letter-spacing: -0.025em; color: #F4F0E0;
    margin-bottom: 20px; max-width: 920px;
  }
  .hero-page h1 em {
    font-style: italic;
    background: linear-gradient(135deg, #F4D470 0%, #C8A84E 50%, #A87818 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    /* italic overshoot fix: keep ascenders/descenders inside the rendered box */
    display: inline-block;
    padding-right: 0.18em;
    margin-right: -0.12em;
    line-height: 1.1;
  }
  .hero-page .lede {
    font-family: 'Source Serif Pro', Georgia, serif;
    font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55;
    color: rgba(232, 224, 204, 0.78); max-width: 760px; margin-bottom: 28px;
  }
  .hero-page .page-toc {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.12em;
  }
  .hero-page .page-toc a {
    color: rgba(232, 224, 204, 0.7);
    padding: 8px 14px;
    background: rgba(20, 31, 48, 0.5);
    border: 1px solid rgba(200, 168, 78, 0.18);
    border-radius: 3px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.18s ease;
  }
  .hero-page .page-toc a:hover {
    color: #F4D470;
    border-color: rgba(200, 168, 78, 0.5);
    background: rgba(200, 168, 78, 0.08);
  }
  @media (max-width: 640px) {
    .hero-page { min-height: 360px; padding: 70px 0 50px; }
    .hero-page .page-toc { gap: 5px; }
    .hero-page .page-toc a { font-size: 10px; padding: 6px 10px; }
  }

  /* ─── Mobile accordion · same pattern as technical.html ─── */
  @media (max-width: 640px) {
    .mobile-collapsible {
      position: relative;
      padding-top: 32px !important;
      padding-bottom: 32px !important;
      transition: padding-bottom 0.28s;
    }
    .mobile-collapsible.mobile-collapsed { padding-bottom: 36px !important; }
    .mobile-collapsible .section-head {
      cursor: pointer;
      position: relative;
      padding-right: 56px;
      margin-bottom: 0 !important;
      user-select: none;
      -webkit-tap-highlight-color: rgba(244, 196, 64, 0.12);
    }
    .mobile-collapsible .section-head::after {
      content: '+';
      position: absolute;
      top: 12px; right: 0;
      width: 36px; height: 36px;
      border: 1px solid rgba(184, 144, 44, 0.45);
      border-radius: 50%;
      background: rgba(244, 196, 64, 0.06);
      display: grid; place-items: center;
      color: var(--bl-gold);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 22px; font-weight: 300; line-height: 1;
      transition: transform 0.32s cubic-bezier(.22,1,.36,1),
                  background 0.22s, border-color 0.22s;
    }
    .mobile-collapsible .section-head:hover::after,
    .mobile-collapsible .section-head:focus-visible::after {
      background: rgba(244, 196, 64, 0.18);
      border-color: rgba(184, 144, 44, 0.75);
    }
    .mobile-collapsible:not(.mobile-collapsed) .section-head::after {
      content: '−';
      transform: rotate(180deg);
      background: rgba(244, 196, 64, 0.20);
    }
    .mobile-collapsible.mobile-collapsed > .wrap > *:not(.section-head) { display: none !important; }
    .mobile-collapsible.mobile-collapsed > *:not(.wrap) { display: none !important; }
    .mobile-collapsible:not(.mobile-collapsed) > .wrap > *:not(.section-head) {
      animation: sectionExpand 0.36s ease-out both;
    }
    @keyframes sectionExpand {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    main hr.rule { display: none; }
    .mobile-collapsible + .mobile-collapsible { border-top: 1px solid var(--bl-rule); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-collapsible:not(.mobile-collapsed) > .wrap > *:not(.section-head) { animation: none !important; }
    .mobile-collapsible .section-head::after { transition: none !important; }
  }