/* ======================================================
       WEB WRAPPER. interactive layer over the print pages
       ====================================================== */
    html, body {
      margin: 0; padding: 0;
      background: #0a0a0c;
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      color: #F5EFD9;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* Top navigation bar */
    .web-nav {
      position: fixed; top: 0; left: 0; right: 0;
      height: 72px;
      background: rgba(10, 10, 12, 0.85);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(245, 239, 217, 0.06);
      z-index: 100;
      display: flex; align-items: center;
      padding: 0 32px;
      justify-content: space-between;
    }
    .web-nav .brand {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #C9A14A; font-weight: 700;
    }
    .web-nav .brand .sep {
      color: rgba(245,239,217,0.3); margin: 0 10px;
    }
    .web-nav .brand .light {
      color: rgba(245,239,217,0.55); font-weight: 400;
    }
    .web-nav .actions {
      display: flex; gap: 14px; align-items: center;
    }
    .web-nav .nav-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 16px;
      font-family: 'Space Mono', monospace;
      font-size: 9.5px; letter-spacing: 0.2em;
      text-transform: uppercase; font-weight: 700;
      text-decoration: none;
      border: 1px solid transparent;
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
                  box-shadow 0.35s cubic-bezier(0.16,1,0.3,1),
                  background 0.25s, color 0.25s, border-color 0.25s;
      cursor: pointer;
    }
    .web-nav .nav-cta svg {
      width: 13px; height: 13px;
      stroke: currentColor; fill: none;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
      flex-shrink: 0;
    }
    .web-nav .nav-cta.phone {
      background: transparent;
      color: rgba(245,239,217,0.85);
      border-color: rgba(201,161,74,0.55);
    }
    .web-nav .nav-cta.phone:hover {
      transform: translateY(-1px);
      color: #C9A14A;
      border-color: #C9A14A;
      box-shadow: 0 4px 16px rgba(201,161,74,0.18);
    }
    .web-nav .nav-cta.network-link {
      background: transparent;
      color: rgba(245,239,217,0.85);
      border-color: rgba(245,239,217,0.18);
    }
    .web-nav .nav-cta.network-link:hover {
      transform: translateY(-1px);
      color: #C9A14A;
      border-color: rgba(201,161,74,0.55);
      box-shadow: 0 4px 16px rgba(201,161,74,0.18);
    }
    .web-nav .nav-cta.print-btn {
      background: #C9A14A; color: #1C1B1A;
      border-color: #C9A14A;
    }
    .web-nav .nav-cta.print-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(201, 161, 74, 0.4);
      background: #E0C073; border-color: #E0C073;
    }

    /* Hero opener. full viewport, editorial, LPR-watermarked */
    .web-hero {
      min-height: 100vh;
      padding: 132px 32px 80px;
      max-width: 1280px; margin: 0 auto;
      display: flex; flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 2;
    }
    /* Layer 1: Sonoran twilight photograph */
    .web-hero-bg {
      position: absolute;
      top: 0; left: 0; right: 0; height: 100vh;
      background-image: url(assets/generated/cover-twilight.jpg);
      background-size: cover;
      background-position: center 40%;
      opacity: 0.32;
      filter: contrast(1.15) saturate(0.7);
      z-index: 0;
      pointer-events: none;
    }
    .web-hero-bg::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 18% 25%, rgba(201,161,74,0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 80% at 82% 70%, rgba(96,46,134,0.10) 0%, transparent 55%),
        linear-gradient(180deg,
          rgba(10,10,12,0.72) 0%,
          rgba(10,10,12,0.45) 35%,
          rgba(10,10,12,0.88) 80%,
          rgba(10,10,12,1) 100%);
    }
    /* Layer 2A: massive LPR crest watermark. slow rotation, full-color
       (new 2026-05-01 brand kit ships in color so we drop the sepia tint) */
    .web-hero-seal {
      position: absolute;
      top: 50%; right: -8vw;
      transform: translateY(-50%);
      width: clamp(540px, 70vw, 920px);
      height: clamp(540px, 70vw, 920px);
      background-image: url(assets/brand/lpr-circle-transparent.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.085;
      z-index: 0;
      pointer-events: none;
      filter: saturate(0.85) brightness(1.1);
      mix-blend-mode: screen;
      animation: heroSealRotate 320s linear infinite,
                 heroSealBreathe 18s ease-in-out infinite;
    }
    .web-hero-seal::after {
      content: '';
      position: absolute; inset: 12%;
      border-radius: 50%;
      box-shadow: inset 0 0 100px rgba(201,161,74,0.22);
    }
    /* Layer 2B: counter-rotating LL monogram watermark, opposite corner —
       creates parallax depth instead of one flat seal */
    .web-hero-mark {
      position: absolute;
      bottom: -14vh; left: -10vw;
      width: clamp(360px, 46vw, 620px);
      height: clamp(360px, 46vw, 620px);
      background-image: url(assets/brand/ll-mark-gold.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.045;
      z-index: 0;
      pointer-events: none;
      mix-blend-mode: screen;
      filter: brightness(1.1);
      animation: heroMarkRotate 480s linear infinite;
    }
    @keyframes heroSealRotate {
      from { transform: translateY(-50%) rotate(0deg); }
      to   { transform: translateY(-50%) rotate(360deg); }
    }
    @keyframes heroSealBreathe {
      0%, 100% { opacity: 0.075; }
      50%      { opacity: 0.105; }
    }
    @keyframes heroMarkRotate {
      from { transform: rotate(0deg); }
      to   { transform: rotate(-360deg); }
    }
    /* Layer 3: subtle film grain overlay */
    .web-hero-grain {
      position: absolute; inset: 0;
      z-index: 1; pointer-events: none;
      opacity: 0.45;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.63 0 0 0 0 0.30 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      mix-blend-mode: overlay;
    }
    /* Layer 4: editorial corner marks. top-right date stamp, top-left rule */
    .web-hero-corner {
      position: absolute;
      top: 96px; right: 32px;
      z-index: 2;
      text-align: right;
      font-family: 'Space Mono', monospace;
      color: rgba(245,239,217,0.55);
      pointer-events: none;
    }
    .web-hero-corner .label {
      font-size: 9px; letter-spacing: 0.32em;
      text-transform: uppercase; font-weight: 700;
      color: #C9A14A; margin-bottom: 4px;
    }
    .web-hero-corner .id {
      font-size: 10px; letter-spacing: 0.18em;
      color: rgba(245,239,217,0.45);
    }
    .web-hero-corner .id .gold { color: #C9A14A; }
    /* Vertical gold rule running down the left of hero content */
    .web-hero-rail {
      position: absolute;
      top: 124px; bottom: 80px; left: 32px;
      width: 1px;
      background: linear-gradient(180deg,
        rgba(201,161,74,0) 0%,
        rgba(201,161,74,0.6) 18%,
        rgba(201,161,74,0.6) 82%,
        rgba(201,161,74,0) 100%);
      z-index: 2;
      pointer-events: none;
    }
    .web-hero-rail::before {
      content: '◇';
      position: absolute; top: 28%; left: -5px;
      color: #C9A14A; font-size: 9px;
      background: #0a0a0c; padding: 6px 0;
    }
    @media (max-width: 900px) {
      .web-hero-corner { display: none; }
      .web-hero-rail { display: none; }
      .web-hero-seal { right: -30vw; opacity: 0.05; }
    }

    .web-hero .kicker {
      font-family: 'Space Mono', monospace;
      font-size: 11px; letter-spacing: 0.32em;
      text-transform: uppercase;
      color: #C9A14A; font-weight: 700;
      margin-bottom: 24px;
      display: inline-flex; align-items: center; gap: 10px;
    }
    .web-hero .kicker::before {
      content: ''; display: inline-block;
      width: 28px; height: 1px; background: #C9A14A;
    }
    .web-hero h1 {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      font-size: clamp(56px, 9.5vw, 156px);
      line-height: 0.92;
      letter-spacing: -0.02em;
      margin: 0;
      color: #F5EFD9;
      text-shadow: 0 2px 60px rgba(0,0,0,0.5);
    }
    .web-hero h1 .gold {
      color: #C9A14A; font-style: italic;
      font-weight: 400;
      font-family: 'Playfair Display', Georgia, serif;
    }

    /* THE DOCTRINE LOCKUP. three beats bound by gold rules */
    .doctrine-rule {
      width: clamp(64px, 8vw, 120px);
      height: 2px;
      background: #C9A14A;
      margin: 28px 0 22px;
      box-shadow: 0 0 18px rgba(201,161,74,0.4);
    }
    .doctrine-route {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 400;
      font-style: italic;
      font-size: clamp(28px, 4.6vw, 68px);
      line-height: 1;
      letter-spacing: -0.01em;
      color: #C9A14A;
      margin: 0;
      text-shadow: 0 2px 40px rgba(201,161,74,0.25);
    }
    .doctrine-route .tm {
      font-size: 0.32em;
      vertical-align: super;
      margin-left: 4px;
      font-style: normal;
      letter-spacing: 0;
    }
    .doctrine-hairline {
      width: 32px;
      height: 1px;
      background: rgba(201, 161, 74, 0.45);
      margin: 22px 0 18px;
    }
    /* Credential strip. replaces former doctrine-promise (2026-05-01).
       Editorial masthead-style attribution underneath the two-beat doctrine. */
    .doctrine-credential {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 10px 12px;
      margin: 4px 0 0;
      padding: 14px 0 0;
      font-family: 'Space Mono', monospace;
      font-size: clamp(10px, 1.05vw, 12px);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(245, 239, 217, 0.62);
      position: relative;
    }
    .doctrine-credential .cred-mark {
      color: #C9A14A;
      font-size: 0.95em;
      transform: translateY(-1px);
    }
    .doctrine-credential .cred-text {
      white-space: nowrap;
    }
    .doctrine-credential .cred-text sup {
      font-size: 0.6em;
      vertical-align: super;
      color: rgba(245, 239, 217, 0.45);
      margin-left: 1px;
    }
    .doctrine-credential .cred-num {
      color: #C9A14A;
      font-weight: 700;
      letter-spacing: 0.08em;
    }
    .doctrine-credential .cred-sep {
      color: rgba(201, 161, 74, 0.45);
      font-weight: 400;
    }

    .web-hero .lede {
      margin-top: 40px;
      max-width: 580px;
      font-size: 18px; line-height: 1.55;
      color: rgba(245,239,217,0.75);
      letter-spacing: -0.005em;
    }
    .web-hero .lede em {
      color: #C9A14A; font-style: normal;
    }

    /* Verified record bumper. under the three-paths strip */
    .hero-record {
      margin-top: 56px;
      padding-top: 24px;
      border-top: 1px solid rgba(245, 239, 217, 0.12);
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 10px 14px;
      font-family: 'Space Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      max-width: 920px;
    }
    .hero-record .hr-stat {
      color: rgba(245, 239, 217, 0.78);
      font-weight: 700;
    }
    .hero-record .hr-stat:first-of-type,
    .hero-record .hr-stat:last-of-type {
      color: #C9A14A;
    }
    .hero-record .hr-sep {
      color: rgba(245, 239, 217, 0.25);
    }

    .web-hero .three-paths {
      margin-top: 80px;
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid rgba(245,239,217,0.14);
      padding-top: 24px;
      max-width: 720px;
    }
    .three-paths .path {
      padding-left: 24px;
      border-left: 1px solid rgba(245,239,217,0.08);
    }
    .three-paths .path:first-child {
      padding-left: 0; border-left: none;
    }
    .three-paths .k {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.24em;
      color: #C9A14A; font-weight: 700;
      text-transform: uppercase;
    }
    .three-paths .v {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.18em;
      color: rgba(245,239,217,0.5);
      text-transform: uppercase;
      margin-top: 6px;
    }

    /* Cinematic divider band. full bleed image with title */
    .cinema-band {
      position: relative;
      height: 60vh;
      min-height: 480px;
      max-height: 720px;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      z-index: 2;
    }
    .cinema-band::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(10,10,12,0.7) 0%,
        rgba(10,10,12,0.35) 50%,
        rgba(10,10,12,0.85) 100%);
    }
    .cinema-band .copy {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 920px;
      padding: 0 32px;
    }
    .cinema-band .copy .tag {
      font-family: 'Space Mono', monospace;
      font-size: 11px; letter-spacing: 0.32em;
      color: #C9A14A; font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 24px;
    }
    .cinema-band .copy h2 {
      font-family: 'DM Sans', sans-serif;
      font-weight: 800;
      font-size: clamp(40px, 7vw, 88px);
      line-height: 0.92;
      letter-spacing: -0.035em;
      margin: 0;
      color: #F5EFD9;
    }
    .cinema-band .copy h2 .gold { color: #C9A14A; }
    .cinema-band .copy .lede {
      margin-top: 24px;
      font-size: 16px;
      color: rgba(245,239,217,0.75);
      letter-spacing: -0.005em;
      max-width: 620px;
      margin-left: auto; margin-right: auto;
      line-height: 1.55;
    }

    /* Section rail */
    .section-rail {
      max-width: 1280px;
      margin: 120px auto 0;
      padding: 0 32px;
      position: relative;
      z-index: 2;
    }
    .section-head {
      display: flex; justify-content: space-between;
      align-items: baseline;
      margin-bottom: 56px;
      border-bottom: 1px solid rgba(245,239,217,0.08);
      padding-bottom: 24px;
    }
    .section-head .tag {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.28em;
      color: #C9A14A; font-weight: 700;
      text-transform: uppercase;
    }
    .section-head h2 {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: clamp(32px, 5vw, 56px);
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin: 0; flex: 1;
      max-width: 720px;
    }
    .section-head h2 .gold { color: #C9A14A; }
    .section-head .meta {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.18em;
      color: rgba(245,239,217,0.45);
      text-transform: uppercase;
    }

    /* Page frame. wraps each .page */
    .page-frame {
      position: relative;
      max-width: 816px;
      margin: 0 auto 80px;
      box-shadow: 0 28px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(245,239,217,0.06);
      border-radius: 2px;
      overflow: hidden;
      transform-origin: top center;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Atmospheric gold halo. only on hover, reveals through pseudo */
    .page-frame::after {
      content: '';
      position: absolute;
      inset: -1px;
      border: 1px solid transparent;
      pointer-events: none;
      transition: border-color 0.5s, box-shadow 0.5s;
    }
    .page-frame:hover {
      transform: translateY(-6px) scale(1.005);
      box-shadow: 0 50px 120px rgba(201, 161, 74, 0.22),
                  0 0 0 1px rgba(201, 161, 74, 0.35);
    }
    .page-frame:hover::after {
      border-color: rgba(201,161,74,0.45);
      box-shadow: inset 0 0 60px rgba(201,161,74,0.06);
    }
    /* Ascending counter on the left rail */
    .page-frame .frame-counter {
      position: absolute;
      top: 16px; left: 16px;
      font-family: 'Space Mono', monospace;
      font-size: 8.5px;
      letter-spacing: 0.22em;
      color: rgba(28,27,26,0.4);
      text-transform: uppercase;
      font-weight: 700;
      pointer-events: none;
      z-index: 5;
    }
    .page-frame .page.dark ~ .frame-counter,
    .page-frame:has(.page.dark) .frame-counter {
      color: rgba(245,239,217,0.4);
    }
    .page-frame .frame-tag {
      position: absolute;
      top: 16px; right: 16px;
      background: rgba(28,27,26,0.92);
      backdrop-filter: blur(6px);
      color: #C9A14A;
      font-family: 'Space Mono', monospace;
      font-size: 8px; letter-spacing: 0.16em;
      text-transform: uppercase; font-weight: 700;
      padding: 6px 10px;
      z-index: 20;
      pointer-events: none;
      border: 1px solid rgba(201, 161, 74, 0.4);
      white-space: nowrap;
      box-sizing: border-box;
      width: auto;
    }

    /* Reveal animation states */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.in {
      opacity: 1; transform: translateY(0);
    }

    /* Hero entrance */
    .hero-stagger > * {
      opacity: 0;
      transform: translateY(30px);
      animation: heroIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .hero-stagger > *:nth-child(1) { animation-delay: 0.1s; }
    .hero-stagger > *:nth-child(2) { animation-delay: 0.25s; }
    .hero-stagger > *:nth-child(3) { animation-delay: 0.45s; }
    .hero-stagger > *:nth-child(4) { animation-delay: 0.65s; }
    @keyframes heroIn {
      to { opacity: 1; transform: translateY(0); }
    }

    /* ═══════════════════════════════════════════════════════
       DIGITAL EMPIRE BAND. every site Tyler built, glamorous
       ═══════════════════════════════════════════════════════ */
    .web-empire {
      position: relative;
      padding: 120px 32px 100px;
      margin-top: 60px;
      overflow: hidden;
      background: linear-gradient(180deg,
        #0a0a0c 0%,
        #14110d 30%,
        #181308 65%,
        #0a0a0c 100%);
      color: #F5EFD9;
    }
    .web-empire .we-bg {
      position: absolute; inset: 0;
      background-image:
        radial-gradient(ellipse 70% 50% at 22% 18%, rgba(201,161,74,0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 78% 75%, rgba(96,46,134,0.12) 0%, transparent 60%);
      pointer-events: none; z-index: 0;
    }
    .web-empire .we-seal {
      position: absolute;
      top: 50%; left: -10vw;
      transform: translateY(-50%);
      width: clamp(480px, 60vw, 820px);
      height: clamp(480px, 60vw, 820px);
      background-image: url(assets/brand/lpr-circle-transparent.png);
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0.05;
      filter: brightness(1.6) sepia(0.3) hue-rotate(-12deg) saturate(1.4);
      mix-blend-mode: screen;
      pointer-events: none; z-index: 0;
      animation: heroSealRotate 280s linear infinite reverse;
    }
    .web-empire .we-inner {
      position: relative; z-index: 2;
      max-width: 1280px; margin: 0 auto;
    }
    .web-empire .we-head {
      max-width: 880px; margin-bottom: 64px;
    }
    .web-empire .we-tag {
      font-family: 'Space Mono', monospace;
      font-size: 11px; letter-spacing: 0.32em;
      color: #C9A14A; font-weight: 700;
      text-transform: uppercase;
      display: block; margin-bottom: 24px;
    }
    .web-empire .we-h2 {
      font-family: 'DM Sans', sans-serif;
      font-weight: 800;
      font-size: clamp(40px, 6.5vw, 84px);
      line-height: 0.92;
      letter-spacing: -0.035em;
      margin: 0 0 28px;
    }
    .web-empire .we-h2 .gold { color: #C9A14A; }
    .web-empire .we-h2 .we-h2-italic {
      font-style: italic;
      font-weight: 400;
      color: rgba(245,239,217,0.7);
      font-size: 0.6em;
      letter-spacing: -0.015em;
    }
    .web-empire .we-lede {
      font-size: 16px; line-height: 1.6;
      color: rgba(245,239,217,0.78);
      max-width: 640px; margin: 0;
    }
    .web-empire .we-lede em {
      color: #C9A14A; font-style: normal;
    }

    /* Empire grid. bento-ish, 4 cols on desktop, hero-card spans 2 */
    .we-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 72px;
    }
    .we-card {
      position: relative;
      padding: 24px 22px 56px;
      background: linear-gradient(180deg,
        rgba(245,239,217,0.045) 0%,
        rgba(245,239,217,0.015) 100%);
      border: 1px solid rgba(245,239,217,0.08);
      border-radius: 4px;
      text-decoration: none;
      color: inherit;
      transition: transform 0.45s cubic-bezier(0.16,1,0.3,1),
                  border-color 0.35s,
                  background 0.35s,
                  box-shadow 0.45s cubic-bezier(0.16,1,0.3,1);
      min-height: 196px;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .we-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(201,161,74,0.10) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.45s;
      pointer-events: none;
    }
    .we-card:hover {
      transform: translateY(-6px);
      border-color: rgba(201,161,74,0.5);
      background: linear-gradient(180deg,
        rgba(201,161,74,0.06) 0%,
        rgba(245,239,217,0.02) 100%);
      box-shadow: 0 24px 60px rgba(201,161,74,0.18),
                  inset 0 0 50px rgba(201,161,74,0.04);
    }
    .we-card:hover::before { opacity: 1; }
    .we-card-hero {
      grid-column: span 2;
      padding: 36px 32px 64px;
      background: linear-gradient(135deg,
        rgba(201,161,74,0.10) 0%,
        rgba(96,46,134,0.06) 50%,
        rgba(245,239,217,0.02) 100%);
      border-color: rgba(201,161,74,0.32);
    }
    .we-card-hub {
      grid-column: span 2;
      cursor: default;
      background: linear-gradient(135deg,
        rgba(96,46,134,0.10) 0%,
        rgba(245,239,217,0.02) 100%);
      border-color: rgba(96,46,134,0.32);
    }
    .we-card-hub:hover {
      transform: none;
      box-shadow: 0 0 0 transparent;
    }
    .we-card-tag {
      font-family: 'Space Mono', monospace;
      font-size: 9px; letter-spacing: 0.26em;
      color: #C9A14A; font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .we-card-hub .we-card-tag { color: #8A58AE; }
    .we-card-name {
      font-family: 'DM Sans', sans-serif;
      font-weight: 800;
      font-size: 24px;
      letter-spacing: -0.025em;
      line-height: 1.05;
      color: #F5EFD9;
      margin-bottom: 6px;
    }
    .we-card-hero .we-card-name { font-size: 38px; }
    .we-card-name .gold { color: #C9A14A; font-weight: 400; font-style: italic; }
    .we-card-url {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.06em;
      color: rgba(201,161,74,0.85);
      margin-bottom: 14px;
      word-break: break-all;
    }
    .we-card-note {
      font-size: 13px; line-height: 1.5;
      color: rgba(245,239,217,0.62);
      letter-spacing: -0.005em;
      flex: 1;
    }
    .we-card-hero .we-card-note { font-size: 15px; max-width: 460px; }
    .we-card-arr {
      position: absolute;
      bottom: 18px; right: 22px;
      font-family: 'Space Mono', monospace;
      font-size: 18px; color: #C9A14A;
      opacity: 0.4;
      transition: opacity 0.35s, transform 0.45s cubic-bezier(0.16,1,0.3,1);
    }
    .we-card:hover .we-card-arr {
      opacity: 1;
      transform: translateX(4px);
    }

    /* THE REACH grid */
    .we-reach {
      padding-top: 48px;
      margin-bottom: 56px;
      border-top: 1px solid rgba(245,239,217,0.10);
    }
    .we-reach-head {
      font-family: 'Space Mono', monospace;
      font-size: 11px; letter-spacing: 0.32em;
      color: #C9A14A; font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 32px;
    }
    .we-reach-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px 48px;
    }
    .we-reach-cell {
      padding-top: 16px;
      border-top: 2px solid #C9A14A;
    }
    .we-reach-k {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: -0.018em;
      color: #F5EFD9;
      margin-bottom: 8px;
    }
    .we-reach-v {
      font-size: 13.5px; line-height: 1.55;
      color: rgba(245,239,217,0.65);
      letter-spacing: -0.005em;
    }

    /* Empire foot. quote */
    .we-foot {
      padding-top: 40px;
      border-top: 1px solid rgba(245,239,217,0.08);
      max-width: 880px;
    }
    .we-foot-quote {
      font-family: 'DM Sans', sans-serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(20px, 2.4vw, 28px);
      line-height: 1.35;
      letter-spacing: -0.018em;
      color: rgba(245,239,217,0.85);
    }
    .we-foot-quote .gold { color: #C9A14A; font-style: normal; font-weight: 700; }
    .we-foot-attr {
      margin-top: 16px;
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.26em;
      text-transform: uppercase;
      color: rgba(245,239,217,0.45);
      font-weight: 700;
    }

    @media (max-width: 1100px) {
      .we-grid { grid-template-columns: repeat(2, 1fr); }
      .we-card-hero, .we-card-hub { grid-column: span 2; }
      .we-reach-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
    }
    @media (max-width: 600px) {
      .web-empire { padding: 80px 22px 60px; }
      .we-grid { grid-template-columns: 1fr; }
      .we-card-hero, .we-card-hub { grid-column: span 1; padding: 24px 20px 56px; }
      .we-card-hero .we-card-name { font-size: 30px; }
      .we-reach-grid { grid-template-columns: 1fr; gap: 24px; }
    }

    /* Footer / CTA band */
    .web-cta {
      max-width: 1280px;
      margin: 120px auto 0;
      padding: 80px 32px 40px;
      border-top: 1px solid rgba(245,239,217,0.08);
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 48px;
      align-items: end;
      position: relative;
      z-index: 2;
    }
    .web-cta h3 {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin: 0 0 18px;
    }
    .web-cta h3 .gold { color: #C9A14A; }
    .web-cta .signature {
      font-family: 'Space Mono', monospace;
      font-size: 11px; letter-spacing: 0.18em;
      color: rgba(245,239,217,0.55);
      text-transform: uppercase;
    }
    .web-cta .signature .gold {
      color: #C9A14A;
    }
    .web-cta .contact {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px;
    }
    .web-cta .contact .lbl {
      font-family: 'Space Mono', monospace;
      font-size: 9px; letter-spacing: 0.22em;
      color: rgba(245,239,217,0.45);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .web-cta .contact .val {
      font-family: 'Space Mono', monospace;
      font-size: 13px; color: #F5EFD9;
      letter-spacing: 0.04em;
    }
    .web-cta .contact .val.gold { color: #C9A14A; }

    .web-foot {
      max-width: 1280px; margin: 0 auto;
      padding: 40px 32px 60px;
      display: flex; justify-content: space-between;
      align-items: center;
      gap: 32px;
      font-family: 'Space Mono', monospace;
      font-size: 9.5px; letter-spacing: 0.2em;
      color: rgba(245,239,217,0.4);
      text-transform: uppercase;
      position: relative;
      z-index: 2;
      flex-wrap: wrap;
    }
    .web-foot .doctrine-foot {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0 10px;
      color: rgba(245,239,217,0.78);
      font-weight: 700;
    }
    .web-foot .doctrine-foot em {
      color: #C9A14A;
      font-style: italic;
      letter-spacing: 0.18em;
    }
    .web-foot .doctrine-foot .dot {
      color: rgba(245,239,217,0.25);
    }

    /* Resources band */
    .web-resources {
      max-width: 1280px;
      margin: 100px auto 0;
      padding: 0 32px;
      position: relative; z-index: 2;
    }
    .web-resources-inner {
      border-top: 1px solid rgba(245,239,217,0.08);
      padding: 64px 0 24px;
    }
    .web-resources-head {
      display: flex; justify-content: space-between;
      align-items: baseline; margin-bottom: 40px;
    }
    .web-resources-head .tag {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.28em;
      color: #C9A14A; font-weight: 700; text-transform: uppercase;
    }
    .web-resources-head h3 {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 0.95; letter-spacing: -0.03em;
      margin: 0;
    }
    .web-resources-head h3 .gold { color: #C9A14A; }
    .web-resources-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px 32px;
    }
    .web-resources-grid .group .label {
      font-family: 'Space Mono', monospace;
      font-size: 9.5px; letter-spacing: 0.24em;
      color: rgba(245,239,217,0.55);
      text-transform: uppercase; font-weight: 700;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(245,239,217,0.1);
    }
    .web-resources-grid .group a {
      display: flex; justify-content: space-between;
      align-items: baseline;
      padding: 6px 0;
      font-size: 13px;
      color: #F5EFD9; text-decoration: none;
      letter-spacing: -0.005em;
      border-bottom: 1px dotted rgba(245,239,217,0.06);
      transition: color 0.25s, padding-left 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    .web-resources-grid .group a:hover {
      color: #C9A14A; padding-left: 6px;
    }
    .web-resources-grid .group a .arr {
      font-family: 'Space Mono', monospace;
      font-size: 10px; color: #C9A14A;
      letter-spacing: 0.1em; opacity: 0.6;
      transition: opacity 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    .web-resources-grid .group a:hover .arr {
      opacity: 1; transform: translateX(3px);
    }

    @media (max-width: 900px) {
      .web-resources-head { flex-direction: column; gap: 12px; }
      .web-resources-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 540px) {
      .web-resources-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 900px) {
      .web-hero { padding: 100px 20px 60px; }
      .three-paths { grid-template-columns: 1fr; }
      .three-paths .path { padding-left: 0; border-left: none;
        border-top: 1px solid rgba(245,239,217,0.08); padding-top: 18px; margin-top: 18px; }
      .three-paths .path:first-child { border-top: none; padding-top: 0; margin-top: 0; }
      .section-rail { padding: 0 20px; }
      .section-head { flex-direction: column; gap: 16px; }
      .web-cta { grid-template-columns: 1fr; padding: 60px 20px 40px; }
    }

    /* ───────────────────────────────────────────────────
       MOBILE. scale the 8.5×11 page-frame to viewport.
       The page-frame is fixed at 816px wide for print.
       On phones we scale it down via CSS transform and
       compensate with a negative bottom margin so layout
       follows the visual height. Also pull in the section
       rail container so cards aren't cut off.
       ─────────────────────────────────────────────────── */
    @media (max-width: 880px) {
      .section-rail { padding: 0 12px; }
      .page-frame {
        --pf-w: 816px;
        --pf-h: 1056px;
        --pf-tag: 36px;
        --avail: calc(100vw. 24px);
        --scale: calc(var(--avail) / var(--pf-w));
        transform: scale(var(--scale));
        transform-origin: top left;
        margin-left: 12px !important;
        margin-right: 0 !important;
        /* Visual height after scale. Pull layout up so the next sibling sits flush. */
        margin-bottom: calc((var(--pf-h) * (var(--scale) - 1)) - 8px) !important;
      }
      .page-frame .frame-tag { font-size: 11px !important; }
      .web-nav { padding: 0 16px !important; height: 52px !important; }
      .web-nav .brand { font-size: 9px !important; letter-spacing: 0.18em !important; }
      .web-nav .phone { display: none !important; }
      .web-nav .nav-cta.network-link span { display: none !important; }
      .web-nav .nav-cta.network-link { padding: 8px 11px !important; }
      .web-nav button.print-btn,
      .web-nav a.print-btn { font-size: 9px !important; padding: 8px 14px !important; }
    }
    @media (max-width: 480px) {
      .page-frame {
        margin-left: 8px !important;
      }
      .section-rail { padding: 0 8px; }
    }

    /* ───────────────────────────────────────────────────
       MOBILE LANDING. shown above the scaled handbook on phones.
       We keep the lead card (call/download/email) AND render the
       full 16-page handbook scaled to viewport below it.
       ─────────────────────────────────────────────────── */
    .mobile-landing { display: none; }
    @media (max-width: 600px) {
      .web-nav, .web-hero, .web-hero-bg, .cinema-band, .web-cta, .web-foot,
      .web-resources { display: none !important; }
      .mobile-landing { display: block !important; }
      /* Section rail + page-frames remain visible. the existing 880px
         transform: scale rule sizes them to phone width. */
      .section-rail { display: block; margin-top: 8px !important; }
      .page-frame { display: block; }
    }
    /* Scroll cue button on mobile landing. anchors to the pages below */
    .ml-browse {
      display: none;
      margin: 28px auto 0; max-width: 320px;
      padding: 14px 18px; text-align: center;
      font-family: 'Space Mono', monospace; font-size: 11px;
      letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
      color: #0d0d0d; background: #C9A14A; text-decoration: none;
    }
    @media (max-width: 600px) { .ml-browse { display: block; } }
    .ml-browse-arrow {
      display: inline-block; margin-left: 6px;
      transform: translateY(2px);
    }
    .mobile-landing {
      min-height: 100vh; padding: 88px 22px 40px;
      background: linear-gradient(180deg, #0a0a0c 0%, #131210 50%, #0a0a0c 100%);
      color: #F5EFD9;
      position: relative;
      overflow: hidden;
    }
    /* LPR seal watermark behind mobile landing. slow rotate */
    .mobile-landing::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 140vw; height: 140vw;
      max-width: 700px; max-height: 700px;
      background-image: url(assets/brand/lpr-circle-transparent.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.045;
      pointer-events: none;
      filter: brightness(1.6) sepia(0.3) hue-rotate(-12deg) saturate(1.4);
      mix-blend-mode: screen;
      animation: heroSealRotate 240s linear infinite;
      z-index: 0;
    }
    /* Atmospheric gold radial */
    .mobile-landing::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 40% at 50% 18%, rgba(201,161,74,0.15) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% 88%, rgba(96,46,134,0.10) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
    }
    .mobile-landing > * { position: relative; z-index: 1; }
    .ml-lockup { display: block; width: 100%; max-width: 320px; height: auto;
      margin: 0 auto 28px; }
    .ml-doctrine {
      text-align: center; font-family: 'DM Sans', sans-serif; font-weight: 800;
      font-size: 38px; line-height: 0.95; letter-spacing: -0.03em;
      color: #F5EFD9; margin: 14px 0 6px;
    }
    .ml-doctrine em {
      display: block; color: #C9A14A; font-style: italic; font-weight: 400;
      font-size: 22px; margin-top: 8px; letter-spacing: -0.015em;
    }
    .ml-lede {
      text-align: center; font-size: 14px; line-height: 1.55;
      color: rgba(245,239,217,0.72); max-width: 28em; margin: 18px auto 26px;
    }
    .ml-lede em { color: #C9A14A; font-style: normal; }
    .ml-actions {
      display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto;
    }
    .ml-actions a {
      display: block; padding: 16px 18px; text-align: center;
      font-family: 'Space Mono', monospace; font-size: 11px;
      letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
      text-decoration: none; border-radius: 0;
    }
    .ml-actions .ml-call {
      background: #C9A14A; color: #0d0d0d;
    }
    .ml-actions .ml-pdf {
      background: rgba(245,239,217,0.06); color: #F5EFD9;
      border: 1px solid rgba(201,161,74,0.5);
    }
    .ml-actions .ml-email {
      background: transparent; color: rgba(245,239,217,0.65);
      border: 1px solid rgba(245,239,217,0.18);
    }
    .ml-stats {
      margin: 36px auto 22px; max-width: 360px;
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px;
      padding: 22px 0; border-top: 1px solid rgba(245,239,217,0.16);
      border-bottom: 1px solid rgba(245,239,217,0.16);
    }
    .ml-stats .ml-stat .n {
      font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 24px;
      color: #C9A14A; letter-spacing: -0.025em; line-height: 1;
    }
    .ml-stats .ml-stat .l {
      font-family: 'Space Mono', monospace; font-size: 8px;
      letter-spacing: 0.22em; color: rgba(245,239,217,0.55);
      text-transform: uppercase; margin-top: 5px;
    }
    .ml-foot {
      margin-top: 28px; text-align: center;
      font-family: 'Space Mono', monospace; font-size: 8.5px;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: rgba(245,239,217,0.45); line-height: 1.7;
    }
    .ml-foot em { color: #C9A14A; font-style: normal; font-weight: 700; }

    /* ───────────────────────────────────────────────────
       MOBILE-NATIVE HANDBOOK. touch-friendly content sections
       shown only on phones (<600px). Lives between the lead
       card and the scaled print pages.
       ─────────────────────────────────────────────────── */
    .mobile-handbook { display: none; }
    @media (max-width: 600px) {
      .mobile-handbook { display: block; }
    }
    .mobile-handbook .gold { color: #C9A14A; }
    .mh-section {
      padding: 56px 22px 48px;
      border-bottom: 1px solid rgba(245,239,217,0.06);
      background: #0a0a0c;
      color: #F5EFD9;
    }
    .mh-section-dark {
      background: linear-gradient(180deg, #0a0a0c 0%, #14110d 50%, #0a0a0c 100%);
    }
    .mh-section-cta {
      background: linear-gradient(180deg, #0a0a0c 0%, #1a1408 60%, #0a0a0c 100%);
      text-align: center; padding: 64px 22px 56px;
    }
    .mh-kicker {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.26em;
      text-transform: uppercase; color: #C9A14A;
      font-weight: 700; margin-bottom: 14px;
    }
    .mh-h2 {
      font-family: 'DM Sans', sans-serif;
      font-weight: 800; font-size: 36px; line-height: 0.96;
      letter-spacing: -0.028em; margin: 0 0 14px;
      color: #F5EFD9;
    }
    .mh-lede {
      font-size: 15px; line-height: 1.55;
      color: rgba(245,239,217,0.72);
      margin: 0 0 26px;
    }
    .mh-lede em { color: #C9A14A; font-style: normal; }

    /* THREE PATHS */
    .mh-paths {
      display: flex; flex-direction: column; gap: 14px;
    }
    .mh-path {
      position: relative;
      padding: 22px 20px;
      background: rgba(245,239,217,0.03);
      border: 1px solid rgba(245,239,217,0.08);
      border-radius: 4px;
    }
    .mh-path-rec {
      background: linear-gradient(135deg, rgba(201,161,74,0.10) 0%, rgba(201,161,74,0.03) 100%);
      border-color: rgba(201,161,74,0.45);
      box-shadow: 0 8px 32px rgba(201,161,74,0.10);
    }
    .mh-path-rec-flag {
      position: absolute; top: -10px; right: 14px;
      background: #C9A14A; color: #0d0d0d;
      font-family: 'Space Mono', monospace; font-size: 9px;
      letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
      padding: 4px 10px;
    }
    .mh-path-tag {
      font-family: 'Space Mono', monospace;
      font-size: 11px; letter-spacing: 0.32em;
      color: #C9A14A; font-weight: 700;
      text-transform: uppercase; margin-bottom: 10px;
    }
    .mh-path-net {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700; font-size: 22px;
      letter-spacing: -0.02em; line-height: 1.05;
      color: #F5EFD9; margin-bottom: 6px;
    }
    .mh-path-time {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(245,239,217,0.5); margin-bottom: 12px;
    }
    .mh-path-when {
      font-size: 14px; line-height: 1.5;
      color: rgba(245,239,217,0.78);
    }

    /* TEAM GRID. 2-column phone layout */
    .mh-team {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .mh-team-card {
      padding: 18px 14px 16px; text-align: center;
      background: rgba(245,239,217,0.04);
      border: 1px solid rgba(245,239,217,0.08);
      border-radius: 4px;
    }
    .mh-team-card img {
      width: 72px; height: 72px; border-radius: 50%;
      object-fit: cover; object-position: center 22%;
      border: 1.5px solid #C9A14A;
      box-shadow: 0 4px 14px rgba(0,0,0,0.4);
      display: block; margin: 0 auto 10px;
      filter: contrast(1.04) saturate(0.96);
    }
    .mh-team-bench img {
      border-color: rgba(245,239,217,0.25);
    }
    .mh-team-card .mh-name {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700; font-size: 15px;
      color: #F5EFD9; letter-spacing: -0.01em;
      line-height: 1.15; margin-bottom: 3px;
    }
    .mh-team-card .mh-role {
      font-family: 'Space Mono', monospace;
      font-size: 8.5px; letter-spacing: 0.16em;
      color: rgba(245,239,217,0.5); text-transform: uppercase;
      font-weight: 600; line-height: 1.3;
      margin-bottom: 10px;
    }
    .mh-team-card a {
      display: block;
      font-family: 'Space Mono', monospace;
      font-size: 11px; color: #C9A14A;
      text-decoration: none; padding: 5px 0;
      border-top: 1px solid rgba(201,161,74,0.18);
      letter-spacing: 0.04em;
    }
    .mh-team-card .mh-mail {
      font-size: 9.5px;
      color: rgba(245,239,217,0.65);
      letter-spacing: 0.02em;
      word-break: break-all;
    }

    /* PHASE TIMELINE */
    .mh-phases {
      display: flex; flex-direction: column; gap: 8px;
    }
    .mh-phase {
      padding: 22px 20px;
      background: rgba(245,239,217,0.03);
      border-left: 3px solid #C9A14A;
    }
    .mh-phase-tag {
      font-family: 'Space Mono', monospace;
      font-size: 10px; letter-spacing: 0.24em;
      color: #C9A14A; font-weight: 700;
      text-transform: uppercase; margin-bottom: 6px;
    }
    .mh-phase-title {
      font-family: 'DM Sans', sans-serif;
      font-weight: 800; font-size: 20px;
      color: #F5EFD9; letter-spacing: -0.02em;
      line-height: 1.05; margin-bottom: 10px;
    }
    .mh-phase-body {
      font-size: 14px; line-height: 1.5;
      color: rgba(245,239,217,0.72);
    }
    .mh-phase-arrow {
      text-align: center;
      font-size: 18px; color: #C9A14A;
      opacity: 0.5; margin: 2px 0;
    }

    /* PAGES LIST */
    .mh-pages-list {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .mh-page-link {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 12px; text-decoration: none;
      background: rgba(245,239,217,0.03);
      border: 1px solid rgba(245,239,217,0.06);
      transition: background 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
      border-radius: 3px;
    }
    .mh-page-link:active {
      background: rgba(201,161,74,0.10);
      border-color: rgba(201,161,74,0.4);
      transform: scale(0.98);
    }
    .mh-page-link .n {
      font-family: 'Space Mono', monospace;
      font-size: 11px; color: #C9A14A;
      letter-spacing: 0.18em; font-weight: 700;
      flex-shrink: 0;
    }
    .mh-page-link .t {
      font-family: 'DM Sans', sans-serif;
      font-size: 12.5px; color: #F5EFD9;
      letter-spacing: -0.01em; line-height: 1.25;
      font-weight: 500;
    }

    /* MOBILE EMPIRE. bento card grid for phones */
    .mh-empire {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 24px;
    }
    .mh-emp-card {
      display: block;
      padding: 16px 14px;
      background: rgba(245,239,217,0.04);
      border: 1px solid rgba(245,239,217,0.08);
      border-radius: 4px;
      text-decoration: none;
      color: inherit;
      min-height: 70px;
      transition: background 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    .mh-emp-card:active {
      background: rgba(201,161,74,0.08);
      border-color: rgba(201,161,74,0.4);
      transform: scale(0.98);
    }
    .mh-emp-hero {
      grid-column: span 2;
      padding: 22px 18px;
      background: linear-gradient(135deg, rgba(201,161,74,0.10) 0%, rgba(96,46,134,0.05) 100%);
      border-color: rgba(201,161,74,0.4);
    }
    .mh-emp-tm {
      background: linear-gradient(135deg, rgba(96,46,134,0.10) 0%, rgba(245,239,217,0.02) 100%);
      border-color: rgba(96,46,134,0.32);
    }
    .mh-emp-tag {
      font-family: 'Space Mono', monospace;
      font-size: 8.5px; letter-spacing: 0.22em;
      color: #C9A14A; font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .mh-emp-tm .mh-emp-tag { color: #8A58AE; }
    .mh-emp-name {
      font-family: 'DM Sans', sans-serif;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: -0.018em;
      color: #F5EFD9;
      line-height: 1.15;
    }
    .mh-emp-hero .mh-emp-name { font-size: 22px; font-weight: 800; }
    .mh-emp-name .gold { color: #C9A14A; font-weight: 400; font-style: italic; }
    .mh-emp-note {
      margin-top: 8px;
      font-size: 12.5px; line-height: 1.45;
      color: rgba(245,239,217,0.65);
    }
    .mh-empire-quote {
      font-family: 'DM Sans', sans-serif;
      font-style: italic;
      font-size: 16px; line-height: 1.45;
      letter-spacing: -0.012em;
      color: rgba(245,239,217,0.82);
      padding: 18px 0 0;
      border-top: 1px solid rgba(245,239,217,0.10);
    }
    .mh-empire-quote .gold { color: #C9A14A; font-style: normal; font-weight: 700; }

    /* CTA */
    .mh-cta-actions {
      display: flex; flex-direction: column; gap: 12px;
      max-width: 320px; margin: 24px auto 0;
    }
    .mh-cta-actions a {
      display: block; padding: 16px 18px; text-align: center;
      font-family: 'Space Mono', monospace; font-size: 11px;
      letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
      text-decoration: none;
    }
    .mh-cta-actions a:nth-child(1) {
      background: #C9A14A; color: #0d0d0d;
    }
    .mh-cta-actions a:nth-child(2) {
      background: rgba(245,239,217,0.06); color: #F5EFD9;
      border: 1px solid rgba(201,161,74,0.5);
    }
    .mh-cta-actions a:nth-child(3) {
      background: transparent; color: rgba(245,239,217,0.65);
      border: 1px solid rgba(245,239,217,0.18);
    }
    .mh-cta-foot {
      margin-top: 32px;
      font-family: 'Space Mono', monospace; font-size: 9px;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: rgba(245,239,217,0.45); line-height: 1.8;
    }
    .mh-cta-foot em { color: #C9A14A; font-style: normal; font-weight: 700; }

    /* On phones, hide the scaled print frames by default;
       show them only when the user taps the 'See The Print Pages' link. */
    @media (max-width: 600px) {
      .section-rail, .page-frame, #page-stage-01, #page-stage-02,
      #page-stage-03, #page-stage-04, #page-stage-05, #page-stage-06,
      #page-stage-07, #page-stage-08, #page-stage-09, #page-stage-10,
      #page-stage-11, #page-stage-12, #page-stage-13, #page-stage-14,
      #page-stage-15, #page-stage-16 {
        display: none !important;
      }
      body.show-print-pages .section-rail,
      body.show-print-pages .page-frame {
        display: block !important;
      }
    }

    /* Print mode. hide web chrome, show only pages */
    @media print {
      .web-nav, .web-hero, .web-hero-bg, .cinema-band,
      .section-rail .section-head, .web-resources,
      .web-cta, .web-foot { display: none !important; }
      .page-frame {
        max-width: none; margin: 0; box-shadow: none; border-radius: 0;
      }
      .page-frame .frame-tag { display: none; }
      .section-rail { margin: 0; padding: 0; }
      @page { size: letter; margin: 0; }
      .page { break-after: page; page-break-after: always; }
    }