.orbit-viewer-section {
      padding: 20px 0 60px;
      background: linear-gradient(180deg, var(--bg) 0%, rgba(212, 175, 115, 0.03) 100%);
      overflow: visible;
  }

  .orbit-viewer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      max-width: 900px;
      margin: 0 auto;
  }

  /* Canvas container — the image display area */
  .orbit-canvas {
      position: relative;
      width: 85%;
      aspect-ratio: 16 / 10;
      border-radius: 0;
      overflow: hidden;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      touch-action: none;
  }

  .orbit-canvas.dragging {
      cursor: grabbing;
  }

  /* Image element with smooth transitions */
  .orbit-image {
      width: 100%;
      height: 100% !important;
      /* object-fit: cover;
      object-position: center; */
      display: block;
      opacity: 1;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .orbit-image.transitioning {
      transition: opacity 0.2s ease-out;
  }

  /* Loading spinner */
  .orbit-loading {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.95);
      z-index: 10;
      opacity: 1;
      transition: opacity 0.3s ease;
  }

  .orbit-loading.hidden {
      pointer-events: none;
      opacity: 0;
  }

  /* Spinner animation */
  .orbit-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(212, 175, 115, 0.2);
      border-top-color: #d4af73;
      border-radius: 50%;
      animation: orbitSpin 0.8s linear infinite;
  }

  @keyframes orbitSpin {
      to { transform: rotate(360deg); }
  }

  /* Controls and info */
  .orbit-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 0 20px;
  }

  .orbit-hint {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(54, 52, 53, 0.5);
  }

  /* Frame indicators (dots) */
  .orbit-frame-indicators {
      display: flex;
      gap: 8px;
  }

  .orbit-indicator-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(212, 175, 115, 0.3);
      transition: background 0.3s ease, transform 0.3s ease;
      cursor: pointer;
  }

  .orbit-indicator-dot.active {
      background: #d4af73;
      transform: scale(1.3);
  }

  Provinces 3-column layout, lines & hover cards (lines 1222–1446)

  /* Allow hover cards to bleed beyond the section boundary */
  .orbit-viewer-section {
      overflow: visible;
  }

  .orbit-provinces-layout {
      display: grid;
      grid-template-columns: 300px 1fr 300px;
      align-items: center;
      /* max-width: 1380px; */
      margin: 0 auto;
      /* padding: 20px 60px 60px; */
      gap: 0;
  }

  /* Override standalone centering when inside the 3-col layout */
  .orbit-provinces-layout .orbit-viewer {
      max-width: none;
      margin: 0;
      width: 100%;
  }

  .orbit-provinces-layout .orbit-canvas {
      width: 100%;
  }

  /* Province columns */
  .orbit-prov-col {
      display: flex;
      flex-direction: column;
      gap: 54px;
      overflow: visible;
  }

  .orbit-prov-item {
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      overflow: visible;
  }

  /* ── LEFT COLUMN: text (right-aligned) → line stretching rightward ── */
  .orbit-prov-left .orbit-prov-item { flex-direction: row; }

  .orbit-prov-left .orbit-prov-content {
      text-align: right;
      flex-shrink: 0;
      order: 1;
  }

  .orbit-prov-left .orbit-prov-line {
      flex: 1;
      margin-left: 18px;
      order: 2;
      background: linear-gradient(to right, rgba(212,175,115,0.12) 0%, rgba(212,175,115,0.75) 100%);
  }

  /* ── RIGHT COLUMN: line stretching leftward → text (left-aligned) ── */
  .orbit-prov-right .orbit-prov-item { flex-direction: row; }

  .orbit-prov-right .orbit-prov-line {
      flex: 1;
      margin-right: 18px;
      order: 1;
      background: linear-gradient(to right, rgba(212,175,115,0.75) 0%, rgba(212,175,115,0.12) 100%);
  }

  .orbit-prov-right .orbit-prov-link { order: 2; }

  .orbit-prov-right .orbit-prov-content {
      text-align: left;
      flex-shrink: 0;
      order: 2;
  }

  /* Province text */
  .orbit-prov-content { padding: 0; }

  .orbit-prov-num {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 5px;
      transition: opacity 0.3s;
  }

  .orbit-prov-name {
      display: block;
      font-family: 'Scheherazade New', serif;
      font-size: 28px;
      font-weight: 300;
      color: var(--dark);
      line-height: 1.1;
      margin-bottom: 8px;
      transition: color 0.3s ease;
  }

  .orbit-prov-item:hover .orbit-prov-name { color: #c9a24e; }

  .orbit-prov-tag {
      font-size: 11.5px;
      line-height: 1.65;
      color: var(--muted);
      margin: 0;
      max-width: 210px;
  }

  .orbit-prov-right .orbit-prov-tag { max-width: 210px; }

  /* Connecting line */
  .orbit-prov-line {
      height: 1px;
      max-width: 12px;
      transition: opacity 0.3s;
  }

  .orbit-prov-item:hover .orbit-prov-line {
      background: rgba(212,175,115,0.9) !important;
  }

  /* ── HOVER CARDS ── */
  .orbit-prov-card {
      position: absolute;
      top: 50%;
      transform: translateY(-50%) scale(0.94);
      width: 272px;
      background: #fff;
      border-radius: 0;
      box-shadow: 0 18px 52px rgba(0,0,0,0.14), 0 4px 14px rgba(0,0,0,0.07);
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(.16,1,.3,1),
                  transform 0.35s cubic-bezier(.16,1,.3,1);
      z-index: 200;
  }

  .orbit-prov-card.visible {
      opacity: 1;
      transform: translateY(-50%) scale(1);
      pointer-events: auto;
  }

  /* Left-col cards open rightward (over the orbit disc gap) */
  .orbit-prov-card-right { left: calc(100% + 18px); }
  /* Right-col cards open leftward */
  .orbit-prov-card-left  { right: calc(100% + 18px); }

  .orbit-prov-card-img { height: 152px; overflow: hidden; }

  .orbit-prov-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s ease;
  }

  .orbit-prov-card.visible .orbit-prov-card-img img { transform: scale(1.05); }

  .orbit-prov-card-body { padding: 16px 18px 20px; }

  .orbit-prov-card-num {
      display: block;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 6px;
  }

  .orbit-prov-card-name {
      font-family: 'Scheherazade New', serif;
      font-size: 20px;
      font-weight: 300;
      color: var(--dark);
      margin: 0 0 9px;
      line-height: 1.2;
  }

  .orbit-prov-card-body p {
      font-size: 12px;
      line-height: 1.7;
      color: var(--muted);
      margin: 0;
  }

  /* Invisible on desktop, becomes card on mobile */
  .orbit-prov-link {
      color: inherit;
      text-decoration: none;
      display: block;
  }

  Responsive CSS

  There are four breakpoints affecting this section. The last @media (max-width: 768px) block (~line 4711) is a full mobile rewrite that overrides the
  earlier 900px rules.

  /* ── Core viewer responsive (lines 1021–1042) ── */
  @media (max-width: 768px) {
      .orbit-viewer { gap: 30px; }
      .orbit-canvas { border-radius: 0; }
      .orbit-hint   { font-size: 12px; }
  }

  @media (max-width: 480px) {
      .orbit-viewer-section { padding: 40px 0; }
      .orbit-canvas         { aspect-ratio: 1 / 1; }
  }

  /* ── Provinces layout responsive (lines 1448–1542) ── */
  @media (max-width: 1200px) {
      .orbit-provinces-layout {
          grid-template-columns: 240px 1fr 240px;
          padding: 20px 30px 50px;
      }
      .orbit-prov-name { font-size: 24px; }
      .orbit-prov-card { width: 240px; }
  }

  @media (max-width: 900px) {
      .orbit-provinces-layout {
          display: flex;
          flex-direction: column;
          gap: 36px;
          padding: 20px 24px 50px;
      }
      .orbit-prov-col {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          width: 100%;
      }
      .orbit-prov-left  { grid-template-columns: repeat(2, 1fr); }
      .orbit-prov-right { grid-template-columns: repeat(2, 1fr); }

      /* Last right-col item (Solitaire) spans both cols and centers */
      .orbit-prov-right .orbit-prov-item:last-child {
          grid-column: 1 / -1;
          max-width: calc(50% - 8px);
          margin: 0 auto;
      }
      .orbit-prov-item {
          flex-direction: column !important;
          align-items: center;
          width: 100%;
          aspect-ratio: 2.5 / 1;
          display: flex;
          justify-content: center;
      }
      .orbit-prov-link {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .orbit-prov-left .orbit-prov-content,
      .orbit-prov-right .orbit-prov-content {
          text-align: center;
          order: unset;
          width: 100%;
      }
      .orbit-prov-line { display: none; }
      .orbit-prov-card { display: none; }
      .orbit-prov-tag  { display: none; }
      .orbit-prov-name { font-size: 18px; margin-bottom: 4px; }
      .orbit-prov-num  { font-size: 9px; }
      .orbit-provinces-layout .orbit-canvas { aspect-ratio: 4 / 3; }
  }

  /* ── Mobile rewrite — inside @media (max-width: 768px), ~line 4711 ──
     Unified 2-col grid: disc spans full width, all 5 cards in numerical order */
  @media (max-width: 768px) {
      .orbit-viewer-section { padding: 0 0 32px; }

      .orbit-provinces-layout .orbit-viewer,
      .orbit-viewer { gap: 4px; }

      .orbit-provinces-layout {
          display: grid !important;
          grid-template-columns: 1fr 1fr;
          width: min(340px, 92vw);
          margin: 0 auto;
          gap: 6px;
          padding: 0 16px 8px;
          align-items: start;
      }

      /* Disc spans both columns, centred */
      .orbit-viewer {
          grid-column: 1 / -1;
          order: unset;
          gap: 4px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
      }

      /* Column wrappers become transparent — items join parent grid directly */
      .orbit-prov-col { display: contents !important; }
      .orbit-prov-left,
      .orbit-prov-right { display: contents; order: unset; }

      /* Numerical order: 01 Sports, 02 Forest, 03 Lake, 04 Lagoon, 05 Solitaire */
      .orbit-prov-right .orbit-prov-item:nth-child(1) { order: 3; } /* Sports  01 */
      .orbit-prov-left  .orbit-prov-item:nth-child(1) { order: 2; } /* Forest  02 */
      .orbit-prov-left  .orbit-prov-item:nth-child(2) { order: 3; } /* Lake    03 */
      .orbit-prov-right .orbit-prov-item:nth-child(2) { order: 4; } /* Lagoon  04 */
      .orbit-prov-right .orbit-prov-item:nth-child(3) {             /* Solitaire 05 */
          order: 5;
          grid-column: 1 / -1;
          justify-self: center;
          width: 50%;
      }

      .orbit-provinces-layout .orbit-canvas {
          aspect-ratio: 1 / 1;
          width: 100%;
          margin: 0 auto 4px;
          display: block;
      }
      .orbit-provinces-layout .orbit-image { object-fit: contain; }

      .orbit-hint { font-size: 11px; letter-spacing: 1.5px; }

      .orbit-prov-item {
          width: 100% !important;
          flex-direction: unset !important;
          align-items: unset !important;
      }

      /* The tappable card */
      .orbit-prov-link {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding: 12px 10px;
          border: 1px solid rgba(0, 0, 0, 0.09);
          background: #fff;
          min-height: 62px;
          transition: border-color 0.2s ease, background 0.2s ease;
          -webkit-tap-highlight-color: transparent;
      }
      .orbit-prov-link:active {
          border-color: var(--gold);
          background: rgba(255, 204, 2, 0.06);
      }
      .orbit-prov-link .orbit-prov-content {
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      .orbit-prov-num  { font-size: 9px; letter-spacing: 2.5px; margin-bottom: 4px; display: block; }
      .orbit-prov-name { font-size: 16px; margin-bottom: 0; display: block; }
  }