*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:      #0a1628;
      --navy-mid:  #0d2147;
      --blue:      #1a3d7c;
      --blue-mid:  #22518a;
      --white:     #ffffff;
      --off-white: #f5f6f8;
      --light-gray:#e8eaee;
      --text-dark: #0a1628;
      --text-mid:  #3a4a60;
      --text-light:#8898aa;
      --rule:      #dde1e8;
      --font: 'EB Garamond', Georgia, 'Times New Roman', serif;
      --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
      --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    }

    html { scroll-behavior: smooth; }

    body { font-family: var(--font); color: var(--text-dark); background: var(--white); line-height: 1.7; -webkit-font-smoothing: antialiased; }

    h1, h2, h3, h4 { font-family: var(--font); font-weight: normal; }

    h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.2; letter-spacing: -0.02em; }

    h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.25; letter-spacing: -0.015em; }

    h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.3; letter-spacing: -0.01em; }

    h4 { font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--sans); font-weight: 600; }

    p  { margin-bottom: 1em; }

    p:last-child { margin-bottom: 0; }

    a  { color: inherit; text-decoration: none; }

    .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }

    .container--narrow { max-width: 780px; margin: 0 auto; padding: 0 2rem; }


    /* NAV */
    #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,0.08); }

    .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 68px; }

    .nav-logo { display: flex; align-items: center; cursor: pointer; }

    .nav-links { display: flex; gap: 0; list-style: none; align-items: center; }

    .nav-links li a { color: rgba(255,255,255,0.65); font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 3px; transition: color 0.2s, background 0.2s; }

    .nav-links li a:hover, .nav-links li a.active { color: var(--white); background: rgba(255,255,255,0.07); }


    /* Approach dropdown — hover on desktop, focus-within for keyboard */
    .nav-dropdown { position: relative; }

    .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }

    .nav-dropdown-trigger.has-active { color: var(--white); background: rgba(255,255,255,0.07); }

    .nav-dropdown-chev { font-size: 0.7em; opacity: 0.7; transition: transform 0.2s; }

    .nav-dropdown:hover .nav-dropdown-chev,
    .nav-dropdown:focus-within .nav-dropdown-chev { transform: rotate(180deg); opacity: 1; }

    .nav-dropdown-menu {
      position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
      min-width: 268px;
      background: linear-gradient(180deg, #0c1c33 0%, #0a1628 100%);
      border: 1px solid rgba(111,179,255,0.14);
      border-radius: 8px;
      padding: 0.5rem;
      list-style: none;
      box-shadow: 0 18px 48px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.2s cubic-bezier(.22,1,.36,1), visibility 0.2s cubic-bezier(.22,1,.36,1), transform 0.2s cubic-bezier(.22,1,.36,1);
      z-index: 200;
      overflow: hidden;
    }

    .nav-dropdown-menu::before {
      content: "APPROACH"; display: block;
      font-family: var(--sans); font-size: 0.6rem; font-weight: 600;
      letter-spacing: 0.16em; color: rgba(111,179,255,0.5);
      padding: 0.4rem 0.7rem 0.55rem; border-bottom: 1px solid rgba(255,255,255,0.07);
      margin-bottom: 0.35rem;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
      opacity: 1; visibility: visible; pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .nav-dropdown-menu li { width: 100%; }

    .nav-dropdown-menu li a {
      display: block; position: relative;
      padding: 0.6rem 0.85rem 0.6rem 1.15rem;
      color: rgba(255,255,255,0.82);
      font-family: var(--sans); font-size: 0.85rem; font-weight: 500;
      letter-spacing: 0.01em; text-transform: none;
      border-radius: 5px;
      transition: color 0.18s cubic-bezier(.22,1,.36,1), background 0.18s cubic-bezier(.22,1,.36,1);
    }

    .nav-dropdown-menu li a .dd-desc {
      display: block; font-size: 0.72rem; font-weight: 400;
      color: rgba(255,255,255,0.42); margin-top: 0.12rem; letter-spacing: 0;
      transition: color 0.18s cubic-bezier(.22,1,.36,1);
    }

    .nav-dropdown-menu li a::before {
      content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
      width: 2px; height: 0; background: var(--accent); border-radius: 2px;
      transition: height 0.2s cubic-bezier(.22,1,.36,1);
    }

    .nav-dropdown-menu li a:hover, .nav-dropdown-menu li a.active {
      color: var(--white); background: rgba(111,179,255,0.08);
    }

    .nav-dropdown-menu li a:hover::before, .nav-dropdown-menu li a.active::before { height: 60%; }

    .nav-dropdown-menu li a:hover .dd-desc { color: rgba(255,255,255,0.6); }

    /* Small visual gap-bridge so the menu doesn't disappear when moving cursor down */
    .nav-dropdown::after {
      content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
    }

    .nav-cta { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: #0a1628; background: #6fb3ff; border: none; cursor: pointer; padding: 0.55rem 1.2rem; border-radius: 3px; transition: background 0.2s; font-weight: 600; }

    .nav-cta:hover { background: #4a9eff; }

    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }

    .hamburger span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; }

    .page.active { display: block; }


    /* HERO */
    .hero { background: var(--navy); padding: 140px 0 90px; position: relative; overflow: hidden; }

    .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(26,61,124,0.35) 0%, transparent 65%); pointer-events: none; }

    .hero .container { position: relative; }

    .hero-label { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 1.8rem; }

    .hero h1 { color: var(--white); max-width: 780px; }

    .hero .hero-sub { color: rgba(255,255,255,0.6); font-size: clamp(1rem, 1.8vw, 1.18rem); max-width: 640px; margin: 1.6rem 0 2.8rem; line-height: 1.7; }

    @media (max-width: 1024px) {
      .hero-proof { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 560px) {
      .hero-proof { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 2.4rem; padding-top: 1.6rem; }
    }


    /* BUTTONS */
    .btn { display: inline-block; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.85rem 2rem; border-radius: 3px; cursor: pointer; border: none; transition: all 0.2s; }

    .btn-primary { background: #6fb3ff; color: #0a1628; font-weight: 600; }

    .btn-primary:hover { background: #4a9eff; }

    .btn-outline { background: transparent; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.25); }

    .btn-outline:hover { border-color: rgba(255,255,255,0.6); color: var(--white); }

    .btn-group { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }


    /* SECTIONS */
    .section { padding: 80px 0; }

    .section--light { background: var(--white); }

    .section--alt { background: var(--off-white); }

    .section--dark { background: var(--navy); color: var(--white); }

    .section-label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 1rem; }

    .section--dark .section-label { color: rgba(255,255,255,0.45); }

    .section-rule { width: 40px; height: 2px; background: var(--blue); margin-bottom: 2rem; }

    .section--dark .section-rule { background: rgba(255,255,255,0.25); }


    /* GRIDS */
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }

    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }

    @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; gap: 2rem; } .grid-3 { grid-template-columns: 1fr; gap: 2rem; } }


    /* STEPS */
    .step-item { display: grid; grid-template-columns: 60px 1fr; gap: 2rem; padding: 2.5rem 0; border-bottom: 1px solid var(--rule); }

    .step-item:first-child { border-top: 1px solid var(--rule); }

    .step-num { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); padding-top: 0.35rem; }

    .step-content h3 { margin-bottom: 0.75rem; }

    .step-content p { color: var(--text-mid); font-size: 0.97rem; }

    .step-content ul { margin: 0.8rem 0 0.8rem 1rem; color: var(--text-mid); font-size: 0.95rem; }

    .step-content ul li { margin-bottom: 0.3rem; }


    /* PRINCIPLES */
    .principle { padding: 1.6rem 0; border-top: 1px solid rgba(255,255,255,0.1); }

    .principle h3 { color: var(--white); margin-bottom: 0.5rem; font-size: 1.1rem; }

    .principle p  { color: rgba(255,255,255,0.55); font-size: 0.95rem; }


    /* METHODOLOGY */
    .method-item { position: relative; padding: 2rem 0 2rem 1.4rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 180px 1fr; gap: 2.5rem; transition: background 0.3s cubic-bezier(.22,1,.36,1); }

    .method-item::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.35s cubic-bezier(.22,1,.36,1); }

    .method-item:hover { background: linear-gradient(90deg, rgba(111,179,255,0.05), transparent 60%); }

    .method-item:hover::before { transform: scaleY(1); }

    .method-item:hover h3 { color: var(--blue); }

    .method-item h3 { transition: color 0.25s cubic-bezier(.22,1,.36,1); }

    .method-list.unfold .method-item { animation: methodIn 560ms cubic-bezier(.22,1,.36,1) both; }

    .method-list .method-item { opacity: 0; transform: translateY(10px); }

    .method-list.unfold .method-item:nth-child(2){animation-delay:.10s;}

    .method-list.unfold .method-item:nth-child(3){animation-delay:.22s;}

    .method-list.unfold .method-item:nth-child(4){animation-delay:.34s;}

    .method-list.unfold .method-item:nth-child(5){animation-delay:.46s;}

    .method-list.unfold .method-item:nth-child(6){animation-delay:.58s;}

    .method-list.unfold .method-item:nth-child(7){animation-delay:.70s;}

    @keyframes methodIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

    @media (prefers-reduced-motion: reduce){ .method-list .method-item{opacity:1!important;transform:none!important;animation:none!important;} .method-item::before{transition:none;} }

    @media (max-width: 640px) { .method-item { grid-template-columns: 1fr; gap: 0.8rem; } }

    .method-item h3 { font-size: 1.1rem; }

    .method-item p { color: var(--text-mid); font-size: 0.96rem; }


    /* BRIEF ITEMS */
    .brief-item { padding: 1.8rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--white); }

    .brief-item h3 { font-size: 1rem; margin-bottom: 0.6rem; }

    .brief-item p { color: var(--text-mid); font-size: 0.93rem; }


    /* CONTACT FORM */
    .contact-form { background: var(--off-white); border: 1px solid var(--rule); padding: 2.5rem; border-radius: 2px; }

    .contact-form .field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }

    @media (max-width: 600px) { .contact-form .field-group { grid-template-columns: 1fr; } }

    .contact-form label { display: block; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); margin-bottom: 0.4rem; }

    .contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--white); color: var(--text-dark); font-family: var(--font); font-size: 0.95rem; outline: none; transition: border-color 0.2s; }

    .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--blue); }

    .contact-form textarea { resize: vertical; min-height: 120px; }

    .contact-form .form-field { margin-bottom: 1.2rem; }


    /* CTA BAND */
    .cta-band { background: var(--navy); padding: 80px 0; text-align: center; }

    .cta-band h2 { color: var(--white); max-width: 600px; margin: 0 auto 1rem; }

    .cta-band p { color: rgba(255,255,255,0.55); max-width: 480px; margin: 0 auto 2rem; font-size: 0.97rem; }

    .cta-band .btn-group { justify-content: center; }


    /* FOOTER */
    #footer { background: #060e1a; padding: 3rem 0 2rem; border-top: 1px solid rgba(255,255,255,0.06); }

    .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }

    .footer-brand p { color: rgba(255,255,255,0.35); font-size: 0.83rem; font-family: var(--sans); margin-top: 0.3rem; max-width: 260px; line-height: 1.5; }

    .footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }

    .footer-nav a { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); transition: color 0.2s; }

    .footer-nav a:hover { color: var(--white); }

    .footer-bottom { max-width: 1100px; margin: 2rem auto 0; padding: 1.5rem 2rem 0; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }

    .footer-bottom span { font-family: var(--sans); font-size: 0.75rem; color: rgba(255,255,255,0.25); letter-spacing: 0.04em; }


    /* LISTS */
    .plain-list { list-style: none; margin: 1rem 0; }

    .plain-list li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); font-size: 0.96rem; color: var(--text-mid); display: flex; align-items: baseline; gap: 0.7rem; }

    .plain-list li::before { content: '\2014'; color: var(--blue); flex-shrink: 0; font-size: 0.8em; }

    .plain-list--dark li { border-bottom-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }

    .plain-list--dark li::before { color: rgba(255,255,255,0.3); }


    /* PULL QUOTE */
    .pull-quote { border-left: 3px solid var(--blue); padding-left: 1.8rem; margin: 2.5rem 0; }

    .pull-quote p { font-size: 1.22rem; color: var(--text-dark); font-style: italic; line-height: 1.6; }


    /* TAGS */
    .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

    .tag { font-family: var(--sans); font-size: 0.73rem; letter-spacing: 0.07em; text-transform: uppercase; background: var(--off-white); border: 1px solid var(--rule); color: var(--text-mid); padding: 0.3rem 0.75rem; border-radius: 2px; }


    /* MOBILE NAV */
    @media (max-width: 860px) { .nav-links, .nav-cta { display: none; } .hamburger { display: flex; } }

    .mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; bottom: 0; background: var(--navy); z-index: 99; padding: 2rem; flex-direction: column; gap: 0; }

    .mobile-menu.open { display: flex; }

    .mobile-menu a { color: rgba(255,255,255,0.7); font-family: var(--sans); font-size: 1.1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); letter-spacing: 0.04em; }

    .mobile-menu a:hover { color: var(--white); }

    .mobile-menu .mob-cta { margin-top: 1.5rem; display: inline-block; background: #6fb3ff; color: #0a1628; padding: 0.85rem 2rem; border-radius: 3px; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.07em; text-transform: uppercase; text-align: center; font-weight: 600; }


    /* ── COOKIE BANNER ─────────────────────────────── */
    #cookie-banner {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
      background: rgba(6,14,26,0.97); backdrop-filter: blur(14px);
      border-top: 1px solid rgba(255,255,255,0.1);
      padding: 1.2rem 2rem;
      transform: translateY(100%);
      transition: transform 0.45s cubic-bezier(.22,1,.36,1);
    }

    #cookie-banner.visible { transform: translateY(0); }

    .cookie-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: space-between; }

    .cookie-text { font-family: var(--sans); font-size: 0.82rem; color: rgba(255,255,255,0.6); line-height: 1.55; flex: 1; min-width: 220px; }

    .cookie-text a { color: #6fb3ff; text-decoration: none; }

    .cookie-text a:hover { text-decoration: underline; }

    .cookie-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; flex-shrink: 0; }

    .cookie-btn { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.6rem 1.4rem; border-radius: 3px; cursor: pointer; border: none; transition: all 0.2s; white-space: nowrap; }

    .cookie-accept { background: #6fb3ff; color: #0a1628; font-weight: 600; }

    .cookie-accept:hover { background: #4a9eff; }

    .cookie-decline { background: transparent; color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.18); }

    .cookie-decline:hover { border-color: rgba(255,255,255,0.5); color: var(--white); }

    @media (max-width: 640px) { #cookie-banner { padding: 1rem 1.2rem; } .cookie-inner { gap: 1rem; } }


    /* ── PRIVACY PAGE ──────────────────────────────── */
    .privacy-content { max-width: 760px; }

    .privacy-content h2 { font-size: 1.4rem; margin: 2.5rem 0 0.75rem; padding-top: 2rem; border-top: 1px solid var(--rule); }

    .privacy-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

    .privacy-content p { color: var(--text-mid); line-height: 1.75; margin-bottom: 1rem; font-size: 0.97rem; }

    .privacy-content ul { list-style: none; margin: 0 0 1rem 0; }

    .privacy-content ul li { color: var(--text-mid); font-size: 0.95rem; padding: 0.3rem 0 0.3rem 1.4rem; position: relative; line-height: 1.6; }

    .privacy-content ul li::before { content: '—'; position: absolute; left: 0; color: var(--blue); font-size: 0.8em; }

    .privacy-content .pp-meta { font-family: var(--sans); font-size: 0.78rem; color: var(--text-light); letter-spacing: 0.06em; margin-bottom: 2.5rem; }

    .privacy-content a { color: var(--blue); }


    /* ══════════════════════════════════════════════════════════════
       PREMIUM DESIGN LAYER
       ══════════════════════════════════════════════════════════════ */

    /* ── Refined colour accents ─────────────────────────────── */
    :root {
      --accent: #6fb3ff;
      --accent-hover: #4a9eff;
      --glow: rgba(111,179,255,0.08);
      --shadow-sm: 0 1px 3px rgba(10,22,40,0.06), 0 1px 2px rgba(10,22,40,0.04);
      --shadow-md: 0 4px 16px rgba(10,22,40,0.08), 0 2px 6px rgba(10,22,40,0.04);
      --shadow-lg: 0 12px 40px rgba(10,22,40,0.12), 0 4px 12px rgba(10,22,40,0.06);
      --radius: 6px;
      --radius-lg: 12px;
    }


    /* ── Nav upgrade ──────────────────────────────────────── */
    #nav { background: rgba(10,22,40,0.92); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid rgba(111,179,255,0.08); transition: background 0.4s, box-shadow 0.4s; }

    #nav.scrolled { background: rgba(10,22,40,0.98); box-shadow: 0 4px 30px rgba(0,0,0,0.25); }

    .nav-cta { border-radius: var(--radius); transition: background 0.25s, transform 0.2s, box-shadow 0.25s; }

    .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(111,179,255,0.3); }


    /* ── Hero upgrade ─────────────────────────────────────── */
    .hero { padding: 160px 0 100px; }

    .hero::before {
      background:
        radial-gradient(ellipse at 70% 40%, rgba(111,179,255,0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(26,61,124,0.25) 0%, transparent 50%);
    }

    .hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(111,179,255,0.2) 30%, rgba(111,179,255,0.2) 70%, transparent 100%); }

    .hero h1 { background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.85) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }


    /* Animated mesh gradient overlay */
    @keyframes meshDrift {
      0%   { background-position: 0% 50%, 100% 50%, 50% 0%; }
      25%  { background-position: 50% 0%, 0% 100%, 100% 50%; }
      50%  { background-position: 100% 50%, 50% 0%, 0% 100%; }
      75%  { background-position: 50% 100%, 100% 0%, 50% 50%; }
      100% { background-position: 0% 50%, 100% 50%, 50% 0%; }
    }

    /* Static gradient field — no looping motion. Stillness reads as control. */
    .hero-mesh {
      position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.32;
      background:
        radial-gradient(circle 600px at 20% 30%, rgba(111,179,255,0.16), transparent),
        radial-gradient(circle 500px at 80% 70%, rgba(26,61,124,0.20), transparent),
        radial-gradient(circle 400px at 50% 50%, rgba(111,179,255,0.07), transparent);
    }


    /* ── Buttons upgrade ──────────────────────────────────── */
    .btn { border-radius: var(--radius); transition: all 0.3s cubic-bezier(.22,1,.36,1); position: relative; overflow: hidden; }

    .btn-primary { box-shadow: 0 2px 8px rgba(111,179,255,0.25); }

    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(111,179,255,0.28); }

    .btn-outline { border-radius: var(--radius); }

    .btn-outline:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); }


    /* ── Section refinements ──────────────────────────────── */
    .section-rule { height: 2px; background: linear-gradient(90deg, var(--accent) 0%, transparent 100%); width: 60px; border-radius: 1px; }

    .section--dark .section-rule { background: linear-gradient(90deg, rgba(111,179,255,0.5) 0%, transparent 100%); }

    .brief-item { border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--rule); transition: transform 0.35s, box-shadow 0.35s; }

    .brief-item:hover { transform: none; border-color: rgba(111,179,255,0.45); background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); }


    /* ── Monitor tables upgrade ───────────────────────────── */
    .monitor-group { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--rule); margin-bottom: 2.5rem; }

    .monitor-group-label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; padding-bottom: 0.5rem; display:flex; align-items:center; gap:0.6rem; }

    .monitor-group-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--rule), transparent); }

    .monitor-row { display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--rule); transition: background 0.25s; }

    .monitor-row:last-child { border-bottom: none; }

    .monitor-row:hover { background: var(--glow); box-shadow: inset 2px 0 0 rgba(111,179,255,0.55); }

    .monitor-name { padding: 1.2rem 1.5rem; font-weight: 600; font-size: 0.95rem; color: var(--navy); border-right: 1px solid var(--rule); display: flex; align-items: flex-start; gap: 0.5rem; }

    .monitor-name::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-top: 0.5rem; flex-shrink: 0; opacity: 0.55; transition: opacity 0.2s cubic-bezier(.22,1,.36,1), box-shadow 0.2s cubic-bezier(.22,1,.36,1); }

    .monitor-name a:hover { color: var(--accent) !important; }

    .monitor-scope { padding: 1.2rem 1.5rem; font-size: 0.9rem; color: var(--text-mid); line-height: 1.6; }

    .monitor-row:hover .monitor-name::before { opacity: 1; box-shadow: 0 0 6px rgba(111,179,255,0.6); }

    .monitor-name a, .monitor-name-text { transition: transform 0.2s cubic-bezier(.22,1,.36,1), color 0.2s cubic-bezier(.22,1,.36,1); }

    .monitor-row:hover .monitor-name a, .monitor-row:hover .monitor-name-text { transform: translateX(1px); }

    .monitor-row--alt { background: #f9fafb; }

    @media (max-width: 640px) { .monitor-row { grid-template-columns: 1fr; } .monitor-name { border-right: none; border-bottom: 1px solid var(--rule); } }


    /* ── MCP add-on indicators ─────────────────────────────── */
    /* Catalogue row: tag pulled to the right of the monitor-name cell,
       aligned to the cell boundary on every row regardless of name length */
    .monitor-name { justify-content: flex-start; }

    .monitor-name .monitor-name-text { flex: 1; min-width: 0; }

    .mcp-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.32rem;
      margin-left: auto;
      align-self: center;
      padding: 0.18rem 0.55rem;
      font-family: var(--sans);
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      background: transparent;
      border: 1px solid rgba(111, 179, 255, 0.32);
      border-radius: 2px;
      white-space: nowrap;
      flex-shrink: 0;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }

    .mcp-tag::before {
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }

    .mcp-tag:hover {
      color: var(--accent-hover);
      border-color: rgba(111, 179, 255, 0.6);
      background: rgba(111, 179, 255, 0.08);
    }

    @media (max-width: 640px) {
      .mcp-tag { margin-left: 0.6rem; font-size: 0.58rem; }
    }


    /* Monitor-page hero indicator — inline meta-style, fourth column of the dl */
    .monitor-hero-meta .meta-mcp dt { color: rgba(111, 179, 255, 0.55) !important; }

    .monitor-hero-meta .meta-mcp dd {
      color: var(--accent) !important;
    }

    .monitor-hero-meta .meta-mcp dd a {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      color: var(--accent);
      transition: color 0.2s;
    }

    .monitor-hero-meta .meta-mcp dd a::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 6px rgba(111, 179, 255, 0.5);
      flex-shrink: 0;
    }

    .monitor-hero-meta .meta-mcp dd a .meta-mcp-arrow {
      font-size: 0.85em;
      opacity: 0.7;
      transition: transform 0.2s, opacity 0.2s;
    }

    .monitor-hero-meta .meta-mcp dd a:hover {
      color: var(--white);
    }

    .monitor-hero-meta .meta-mcp dd a:hover .meta-mcp-arrow {
      opacity: 1;
      transform: translateX(2px);
    }


    /* ── Pricing band — product page ──────────────────────── */
    .pricing-band { background: var(--white); border-top: 3px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); padding: 2.2rem 2.4rem; box-shadow: var(--shadow-sm); }

    .pricing-band-row { display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }

    .pricing-band-label { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); flex-shrink: 0; }

    .pricing-band-headline { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 400; color: var(--navy); margin: 0; line-height: 1.4; letter-spacing: -0.005em; }

    .pricing-band-headline strong { color: var(--navy); font-weight: 700; }

    .pricing-band-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }

    .pricing-band-list li { color: var(--text-mid); font-size: 0.95rem; line-height: 1.55; padding-left: 1.1rem; position: relative; }

    .pricing-band-list li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }

    .pricing-band-list li strong { color: var(--navy); font-weight: 600; }

    @media (max-width: 720px) { .pricing-band { padding: 1.6rem 1.4rem; } .pricing-band-list { grid-template-columns: 1fr; } }


    /* ── Testimonials ─────────────────────────────────────── */
    .testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

    .testimonial-card { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--rule); border-radius: 8px; padding: 1.8rem 1.8rem 1.6rem; box-shadow: var(--shadow-sm); margin: 0; display: flex; flex-direction: column; gap: 1.2rem; transition: border-color 0.25s cubic-bezier(.22,1,.36,1), background 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s cubic-bezier(.22,1,.36,1); }

    .testimonial-card::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(.22,1,.36,1); }

    .testimonial-card:hover { border-color: rgba(111,179,255,0.5); background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); box-shadow: var(--shadow-sm); }

    .testimonial-card:hover::before { transform: scaleX(1); }

    .testimonial-card blockquote::before { content: "\201C"; font-family: var(--font); font-size: 2.2rem; line-height: 0; color: rgba(111,179,255,0.45); margin-right: 0.15rem; vertical-align: -0.35em; }

    .testimonial-card blockquote { margin: 0; padding: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.6; color: var(--navy); letter-spacing: -0.005em; }

    .testimonial-card figcaption { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); border-top: 1px solid var(--rule); padding-top: 0.9rem; margin-top: auto; }

    @media (max-width: 720px) { .testimonial-grid { grid-template-columns: 1fr; } }


    /* ── Founder cards ────────────────────────────────────── */
    .founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

    .founder-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 2rem; display: flex; gap: 1.6rem; align-items: flex-start; transition: transform 0.3s, box-shadow 0.3s; }

    .founder-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

    .founder-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--accent); }

    .founder-body { flex: 1; min-width: 0; }

    .founder-body h3 { font-size: 1.18rem; margin-bottom: 0.15rem; color: var(--navy); }

    .founder-role { font-family: var(--font); font-style: italic; font-size: 0.95rem; color: var(--accent); margin-bottom: 0.9rem; letter-spacing: 0; }

    .founder-body p { color: var(--text-mid); font-size: 0.93rem; line-height: 1.6; margin-bottom: 0.9rem; }

    .founder-links { font-family: var(--sans); font-size: 0.84rem; }

    .founder-links a { color: var(--navy); border-bottom: 1px solid var(--rule); transition: border-color 0.2s, color 0.2s; }

    .founder-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

    .founder-link-sep { color: var(--text-light); margin: 0 0.5rem; }

    @media (max-width: 820px) {
      .founder-grid { grid-template-columns: 1fr; gap: 1.4rem; }
      .founder-card { flex-direction: column; align-items: center; text-align: center; padding: 1.8rem 1.4rem; }
      .founder-body { text-align: left; width: 100%; }
    }


    /* ── Pull quote upgrade ───────────────────────────────── */
    .pull-quote { border-left: 3px solid var(--accent); padding-left: 2rem; }

    .pull-quote p { font-size: 1.28rem; letter-spacing: -0.01em; }


    /* ── CTA band upgrade ─────────────────────────────────── */
    .cta-band { position: relative; overflow: hidden; }

    .cta-band::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 50% 0%, rgba(111,179,255,0.1) 0%, transparent 60%); pointer-events:none; }


    /* ── Monitor landing pages ────────────────────────────── */
    .monitor-hero-meta {
      display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem;
      font-family: var(--sans); font-size: 0.78rem; color: rgba(255,255,255,0.4);
    }

    .monitor-hero-meta dt { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: rgba(255,255,255,0.3); margin-bottom: 0.2rem; }

    .monitor-hero-meta dd { color: rgba(255,255,255,0.55); }

    .monitor-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; }

    .monitor-detail-grid h3 { font-family: var(--sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 0.8rem; }

    .monitor-detail-grid ul { list-style: none; }

    .monitor-detail-grid ul li { font-size: 0.93rem; color: var(--text-mid); padding: 0.45rem 0; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; gap: 0.6rem; }

    .monitor-detail-grid ul li::before { content: '\2014'; color: var(--accent); flex-shrink: 0; font-size: 0.8em; }

    @media (max-width: 640px) { .monitor-detail-grid { grid-template-columns: 1fr; } }


    /* ── Footer refinement ────────────────────────────────── */
    #footer { background: linear-gradient(180deg, #060e1a 0%, #040a12 100%); }


    /* ── Tags upgrade ─────────────────────────────────────── */
    .tag { border-radius: var(--radius); transition: background 0.25s, border-color 0.25s; }

    .tag:hover { background: #e8eef5; border-color: var(--blue); }


    /* ══════════════════════════════════════════════════════════════
       SCROLL-REVEAL ANIMATION SYSTEM
       ══════════════════════════════════════════════════════════════ */
    @keyframes revealUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes revealFade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes revealScale {
      from { opacity: 0; transform: scale(0.99) translateY(10px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    @keyframes revealLeft {
      from { opacity: 0; transform: translateX(-14px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    @keyframes heroTextIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes accentLine {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    @keyframes glowPulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }


    /* Hero entrance — plays on load */
    .hero-label  { animation: heroTextIn 0.8s cubic-bezier(.22,1,.36,1) 0.1s both; }

    .hero h1     { animation: heroTextIn 0.8s cubic-bezier(.22,1,.36,1) 0.25s both; }

    .hero-sub    { animation: heroTextIn 0.8s cubic-bezier(.22,1,.36,1) 0.4s both; }

    .hero .btn-group { animation: heroTextIn 0.8s cubic-bezier(.22,1,.36,1) 0.55s both; }

    .hero::after { animation: accentLine 1.2s cubic-bezier(.22,1,.36,1) 0.6s both; transform-origin: left; }


    /* Elements waiting to be revealed */
    [data-reveal] {
      opacity: 0;
      will-change: transform, opacity;
    }

    [data-reveal].revealed {
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.22,1,.36,1);
    }

    [data-reveal="up"].revealed       { animation-name: revealUp;    animation-duration: 0.7s; }

    [data-reveal="fade"].revealed     { animation-name: revealFade;  animation-duration: 0.8s; }

    [data-reveal="scale"].revealed    { animation-name: revealScale; animation-duration: 0.7s; }

    [data-reveal="left"].revealed     { animation-name: revealLeft;  animation-duration: 0.7s; }

    [data-reveal="lock"] { animation: none !important; }

    [data-reveal="lock"].revealed { animation: none !important; }


    /* Stagger children inside grids */
    [data-reveal-stagger] > * { opacity: 0; will-change: transform, opacity; }

    [data-reveal-stagger].revealed > * {
      animation: revealUp 0.6s cubic-bezier(.22,1,.36,1) both;
    }

    [data-reveal-stagger].revealed > *:nth-child(1) { animation-delay: 0s; }

    [data-reveal-stagger].revealed > *:nth-child(2) { animation-delay: 0.08s; }

    [data-reveal-stagger].revealed > *:nth-child(3) { animation-delay: 0.16s; }

    [data-reveal-stagger].revealed > *:nth-child(4) { animation-delay: 0.24s; }

    [data-reveal-stagger].revealed > *:nth-child(5) { animation-delay: 0.32s; }

    [data-reveal-stagger].revealed > *:nth-child(6) { animation-delay: 0.40s; }

    [data-reveal-stagger].revealed > *:nth-child(7) { animation-delay: 0.48s; }


    /* Smooth section-rule animation */
    .section-rule { transform-origin: left; }

    [data-reveal] .section-rule,
    [data-reveal-stagger] .section-rule { animation: none; }

    .revealed .section-rule { animation: accentLine 0.8s cubic-bezier(.22,1,.36,1) 0.15s both; }


    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
    }

    /* ══════════════════════════════════════════════════════════════
       LOGO — SVG mark + wordmark
       ══════════════════════════════════════════════════════════════ */
    .nav-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; }

    .nav-logo-mark { height: 36px; width: auto; flex-shrink: 0; display: block; transition: transform 0.35s cubic-bezier(.22,1,.36,1), filter 0.35s cubic-bezier(.22,1,.36,1); transform-origin: center; filter: drop-shadow(0 0 0.5px rgba(111,179,255,0.45)); }

    .nav-logo:hover .nav-logo-mark { transform: scale(1.04); filter: drop-shadow(0 0 1px rgba(111,179,255,0.5)); }

    .nav-logo-wordmark {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 0.98rem;
      letter-spacing: 0.01em;
      color: var(--white);
      white-space: nowrap;
    }

    @media (max-width: 540px) {
      .nav-logo-mark { height: 28px; }
      .nav-logo { gap: 9px; }
      .nav-logo-wordmark { font-size: 0.92rem; }
    }

    @media (max-width: 360px) {
      .nav-logo-wordmark { font-size: 0.85rem; }
    }

    /* Footer logo mark */
    .footer-logo-mark { height: 30px; width: auto; display: block; margin-bottom: 0.6rem; transition: transform 0.35s cubic-bezier(.22,1,.36,1), filter 0.35s cubic-bezier(.22,1,.36,1); transform-origin: left center; filter: drop-shadow(0 0 0.5px rgba(111,179,255,0.45)); }

    .footer-brand:hover .footer-logo-mark,
    a:hover > .footer-logo-mark { transform: scale(1.04); filter: drop-shadow(0 0 1px rgba(111,179,255,0.5)); }


    /* ══════════════════════════════════════════════════════════════
       INLINE LINK
       ══════════════════════════════════════════════════════════════ */
    .inline-link {
      display: inline-block;
      font-family: var(--sans); font-size: 0.82rem;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--blue);
      border-bottom: 1px solid var(--blue);
      padding-bottom: 1px;
      transition: opacity 0.2s;
    }

    .inline-link:hover { opacity: 0.7; }

    .inline-link--dark { color: var(--accent); border-bottom-color: var(--accent); }


    /* ══════════════════════════════════════════════════════════════
       BRIEF EXTRACT CARD (homepage)
       ══════════════════════════════════════════════════════════════ */
    .brief-extract {
      background: #fbfcfe;
      border: 1px solid var(--rule);
      border-left: 3px solid var(--accent);
      border-radius: var(--radius);
      padding: 1.8rem 1.8rem 1.6rem;
      box-shadow: var(--shadow-md);
      font-family: var(--font);
    }

    .brief-extract-header {
      display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
      padding-bottom: 0.8rem; margin-bottom: 1rem;
      border-bottom: 1px solid var(--rule);
    }

    .brief-extract-label {
      font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy);
    }

    .brief-extract-meta {
      font-family: var(--sans); font-size: 0.72rem;
      color: var(--text-light); font-style: italic;
    }

    .brief-extract-dev-title {
      font-family: var(--font); font-size: 1.02rem; font-weight: 600; text-transform: none;
      letter-spacing: -0.005em; color: var(--text-dark); margin-bottom: 1rem;
    }

    .brief-extract-fields {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.2rem;
      padding: 0.8rem 1rem; margin-bottom: 1rem;
      background: #f1f4f8; border-radius: 4px;
    }

    .brief-extract-fields > div { display: flex; flex-direction: column; gap: 0.15rem; }

    .brief-extract-fields label {
      font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light);
    }

    .brief-extract-fields span { font-family: var(--sans); font-size: 0.82rem; color: var(--text-dark); }

    .badge-high {
      display: inline-block; background: #2d5b3d; color: #fff;
      padding: 0.08rem 0.5rem; border-radius: 3px;
      font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
      letter-spacing: 0.05em; width: fit-content;
    }

    .brief-extract-body {
      font-size: 0.93rem; color: var(--text-dark); line-height: 1.65; margin-bottom: 1rem;
    }

    .brief-extract-field-block {
      padding: 0.8rem 0; border-top: 1px dashed var(--rule);
    }

    .brief-extract-field-block label {
      display: block;
      font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue);
      margin-bottom: 0.4rem;
    }

    .brief-extract-field-block p {
      font-style: italic; color: var(--text-mid); font-size: 0.9rem; line-height: 1.6;
    }

    .brief-extract-footer {
      font-family: var(--sans); font-size: 0.72rem; color: var(--text-light);
      margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--rule);
      font-style: italic;
    }

    @media (max-width: 640px) {
      .brief-extract-fields { grid-template-columns: 1fr; }
    }


    /* ══════════════════════════════════════════════════════════════
       HOME MAP EMBED — light variant
       Background matches the section it sits in; map reads as
       typography, not as a glowing dark widget.
       ══════════════════════════════════════════════════════════════ */
    .home-map-embed {
      background: var(--off-white);
      border: 1px solid var(--rule);
      border-radius: var(--radius-lg);
      padding: 1.5rem 1.5rem 1.2rem;
      position: relative;
      overflow: hidden;
    }

    #home-map-container {
      width: 100%; height: 380px; position: relative;
    }

    #home-map-container svg { width: 100%; height: 100%; display: block; }

    .home-map-footer {
      display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
      padding-top: 1rem; margin-top: 0.5rem;
      border-top: 1px solid var(--rule);
      font-family: var(--sans); font-size: 0.78rem; color: var(--text-light);
    }

    .home-map-footer strong { color: var(--navy); font-weight: 600; }

    .home-map-footer .home-map-stat { letter-spacing: 0.02em; }

    .home-map-footer .home-map-sep { color: var(--rule); }

    .home-map-footer .inline-link { color: var(--blue); border-bottom-color: var(--blue); margin-left: auto; }


    /* ══════════════════════════════════════════════════════════════
       COVERAGE PAGE — filters, map, popup
       ══════════════════════════════════════════════════════════════ */
    /* ── Instrument search ────────────────────────────────────── */
    .instrument-search {
      position: relative;
      background: var(--off-white);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      padding: 1.2rem 1.4rem;
      margin-bottom: 1rem;
    }

    .instrument-search-label {
      display: block;
      font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light);
      margin-bottom: 0.55rem;
    }

    #instrument-search-input {
      width: 100%;
      font-family: var(--sans); font-size: 0.95rem;
      background: var(--white); border: 1px solid var(--rule);
      color: var(--navy);
      padding: 0.7rem 0.95rem;
      border-radius: var(--radius);
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
    }

    #instrument-search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111,179,255,0.18); }

    #instrument-search-input::placeholder { color: var(--text-light); font-style: italic; }

    .instrument-search-results {
      display: none;
      position: absolute;
      top: calc(100% + 6px); left: 1.4rem; right: 1.4rem;
      background: var(--white);
      border: 1px solid rgba(111,179,255,0.28);
      border-radius: var(--radius);
      box-shadow: 0 18px 48px rgba(10,22,40,0.16), 0 2px 8px rgba(10,22,40,0.06);
      max-height: 380px;
      overflow-y: auto;
      z-index: 50;
      opacity: 0; transform: translateY(-6px);
    }

    .instrument-search-results.active {
      opacity: 1; transform: translateY(0);
      transition: opacity 160ms cubic-bezier(.22,1,.36,1), transform 180ms cubic-bezier(.22,1,.36,1);
    }

    /* command-palette header rule */
    .instrument-search-results::before {
      content: "Coverage search"; display: block;
      font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text-light); padding: 0.6rem 1rem 0.5rem; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--white);
    }

    .instrument-search-result { transition: background 0.14s cubic-bezier(.22,1,.36,1), box-shadow 0.14s cubic-bezier(.22,1,.36,1); }

    .instrument-search-result.focused { box-shadow: inset 2px 0 0 var(--accent); }

    .instrument-search-results.active { display: block; }

    /* (animation handled above) */
    .instrument-search-result {
      display: block; width: 100%; text-align: left;
      background: transparent; border: none; border-bottom: 1px solid var(--rule);
      padding: 0.85rem 1rem;
      cursor: pointer;
      transition: background 0.15s;
      font-family: var(--sans);
    }

    .instrument-search-result:last-child { border-bottom: none; }

    .instrument-search-result:hover, .instrument-search-result.focused { background: var(--off-white); }

    .instrument-search-result-name { display: block; font-size: 0.92rem; color: var(--navy); font-weight: 600; margin-bottom: 0.15rem; }

    .instrument-search-result-meta { display: block; font-size: 0.76rem; color: var(--text-light); letter-spacing: 0.02em; }

    .instrument-search-result-meta strong { color: var(--text-mid); font-weight: 500; }

    .instrument-search-empty {
      padding: 1rem;
      font-family: var(--sans); font-size: 0.86rem;
      color: var(--text-light); font-style: italic; text-align: center;
    }

    @media (max-width: 720px) {
      .instrument-search { padding: 1rem 1.1rem; }
      .instrument-search-results { left: 1.1rem; right: 1.1rem; }
    }


    .coverage-filters {
      background: var(--off-white);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      padding: 1.2rem 1.4rem;
      margin-bottom: 1.5rem;
      display: flex; flex-direction: column; gap: 0.75rem;
    }

    .filter-row {
      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    }

    .filter-row--right { justify-content: flex-end; padding-top: 0.2rem; border-top: 1px dashed var(--rule); margin-top: 0.2rem; }

    .filter-label {
      font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light);
      min-width: 100px;
    }

    .filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

    .filter-chip {
      font-family: var(--sans); font-size: 0.78rem;
      background: var(--white); border: 1px solid var(--rule);
      color: var(--text-mid);
      padding: 0.4rem 0.9rem; border-radius: 20px;
      cursor: pointer; transition: all 0.2s;
    }

    .filter-chip:hover { border-color: var(--accent); color: var(--navy); }

    .filter-chip.active {
      background: var(--navy); border-color: var(--navy); color: var(--white);
    }

    .filter-reset {
      font-family: var(--sans); font-size: 0.74rem;
      background: transparent; border: none; cursor: pointer;
      color: var(--text-mid); letter-spacing: 0.05em;
      text-decoration: underline; text-underline-offset: 3px;
      transition: color 0.2s;
    }

    .filter-reset:hover { color: var(--navy); }


    /* ── Coverage explorer: map + drawer ───────────────────────── */
    .coverage-explorer { position: relative; }

    .map-wrap {
      background:
        radial-gradient(ellipse at 50% 0%, rgba(26,61,124,0.35) 0%, transparent 60%),
        linear-gradient(180deg, #0c1c33 0%, #0a1628 100%);
      border: 1px solid rgba(111,179,255,0.14);
      border-radius: var(--radius-lg);
      padding: 1rem;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 50px rgba(0,0,0,0.18);
    }

    #coverage-map { width: 100%; height: 580px; position: relative; }

    #coverage-map svg { width: 100%; height: 100%; display: block; cursor: grab; }

    #coverage-map svg:active { cursor: grabbing; }


    .map-legend {
      position: absolute; bottom: 1.2rem; left: 1.4rem;
      display: flex; gap: 1.1rem; flex-wrap: wrap;
      font-family: var(--sans); font-size: 0.74rem; color: rgba(255,255,255,0.6);
      z-index: 2;
    }

    .map-legend-item { display: flex; align-items: center; gap: 0.4rem; }

    .map-legend .dot {
      display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    }

    .dot--in-force { background: #6fb3ff; }

    .dot--in-flight { background: #4a90e2; }


    .map-status {
      position: absolute; top: 1rem; right: 1.4rem;
      font-family: var(--sans); font-size: 0.72rem; color: rgba(255,255,255,0.6);
      letter-spacing: 0.04em; z-index: 2;
      background: rgba(10,22,40,0.6); padding: 0.35rem 0.8rem; border-radius: 4px;
      border: 1px solid rgba(111,179,255,0.18);
      backdrop-filter: blur(8px);
    }


    .coverage-provenance {
      font-family: var(--sans); font-size: 0.78rem; line-height: 1.6;
      color: var(--text-light); letter-spacing: 0.01em;
      margin-top: 1.4rem; max-width: 60ch;
    }

    @media (max-width: 680px) {
      .coverage-legend { grid-template-columns: 1fr; gap: 1rem; }
    }


    /* Map jurisdiction fills — light variant */
    .map-jurisdiction { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.08); stroke-width: 0.5; transition: fill 0.25s cubic-bezier(.22,1,.36,1); }

    .map-jurisdiction.covered { fill: rgba(111,179,255,0.10); stroke: rgba(111,179,255,0.22); }


    /* Jurisdiction pins — one per jurisdiction, sized by instrument count.
       No exploded sub-pins: clicking a pin opens the drawer. */
    .jpin-group { cursor: pointer; transition: opacity 0.2s; }

    .jpin-group { transition: opacity 0.3s cubic-bezier(.22,1,.36,1); }

    .jpin-group:hover .jpin-badge { stroke-width: 2.4; }

    .jpin-group:hover .jpin-ring { opacity: 0.85; stroke-width: 2; }

    .jpin-group.active .jpin-ring { opacity: 1; stroke-width: 2.4; }

    .jpin-ring { fill: none; stroke-width: 1.4; opacity: 0.35; transition: opacity 0.3s cubic-bezier(.22,1,.36,1), stroke-width 0.3s cubic-bezier(.22,1,.36,1); }

    .jpin-ring--in_force { stroke: #1a3d7c; }

    .jpin-ring--in_flight { stroke: #4a90e2; }

    .jpin-badge { stroke: var(--off-white); stroke-width: 1.5; transition: stroke-width 0.15s; }

    .jpin-badge--in_force { fill: #1a3d7c; }

    .jpin-badge--in_flight { fill: #4a90e2; }

    .jpin-count {
      fill: #fff; font-family: var(--sans); font-weight: 600;
      font-size: 11px; text-anchor: middle; pointer-events: none; letter-spacing: 0.01em;
    }

    .jpin-label {
      fill: var(--text-dark); font-family: var(--sans); font-size: 10px; font-weight: 600;
      text-anchor: middle; pointer-events: none; letter-spacing: 0.02em;
      paint-order: stroke; stroke: rgba(248,250,252,0.95); stroke-width: 3px;
      opacity: 0; transition: opacity 0.15s;
    }

    .jpin-group:hover .jpin-label,
    .jpin-group.active .jpin-label { opacity: 1; }


    /* ── Coverage drawer ───────────────────────────────────────── */
    .coverage-drawer-scrim {
      position: fixed; inset: 0; background: rgba(10,22,40,0.32);
      opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
      z-index: 300;
    }

    .coverage-drawer-scrim.open { opacity: 1; visibility: visible; }


    .coverage-drawer {
      position: fixed; top: 68px; right: 0; height: calc(100vh - 68px);
      width: 420px; max-width: 92vw;
      background: #fff; z-index: 301;
      box-shadow: -16px 0 48px rgba(10,22,40,0.18);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.42s cubic-bezier(.22,1,.36,1), opacity 0.42s cubic-bezier(.22,1,.36,1);
      opacity: 0;
      visibility: hidden;
    }

    .coverage-drawer.open { transform: translateX(0); opacity: 1; visibility: visible; }

    .drawer-handle { display: none; }

    .drawer-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 1rem; padding: 1.5rem 1.6rem 1.1rem;
      border-bottom: 1px solid var(--rule); flex-shrink: 0;
    }

    .drawer-eyebrow {
      font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light);
      margin-bottom: 0.3rem;
    }

    .drawer-header h3 {
      font-family: var(--font); font-size: 1.35rem; font-weight: 600;
      color: var(--text-dark); line-height: 1.2;
    }

    .drawer-sub {
      font-family: var(--sans); font-size: 0.78rem; color: var(--text-mid);
      margin-top: 0.35rem; line-height: 1.45;
    }

    .drawer-close {
      background: transparent; border: none; cursor: pointer;
      font-size: 1.6rem; line-height: 1; color: var(--text-light);
      padding: 0.1rem 0.3rem; transition: color 0.2s; flex-shrink: 0;
    }

    .drawer-close:hover { color: var(--navy); }

    .drawer-body { flex: 1; overflow-y: auto; padding: 0.6rem 1.6rem 2rem; }


    /* Coverage-depth indicator — compact thread breakdown at the top of the list */
    .dg-depth {
      display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
      padding: 0.6rem 0.7rem 0.9rem;
      font-family: var(--sans); font-size: 0.74rem; color: var(--text-light);
    }

    .dg-depth-stat { white-space: nowrap; }

    .dg-depth-stat strong {
      color: var(--navy); font-weight: 700; font-size: 0.82rem;
      margin-right: 0.1rem;
    }

    .dg-depth-sep { color: var(--rule); }


    /* Thread section inside drawer (Digital / Financial / Cross-cutting) */
    .dg-thread { margin-bottom: 0.4rem; }

    .dg-thread:not(:first-child) { margin-top: 1.4rem; }

    .dg-thread-head {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 0.6rem; padding: 0 0.7rem 0.5rem;
      border-bottom: 1px solid var(--rule); margin-bottom: 0.4rem;
    }

    .dg-thread-name {
      font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy);
    }

    .dg-thread-count {
      font-family: var(--sans); font-size: 0.7rem; color: var(--text-light);
    }


    /* Instrument row inside a thread section */
    .dg-instrument {
      width: 100%; display: flex; align-items: flex-start; gap: 0.6rem;
      padding: 0.7rem 0.75rem; background: transparent;
      border: 1px solid transparent;
      border-radius: 6px; cursor: pointer; text-align: left;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
    }

    .dg-instrument:hover {
      background: var(--off-white);
      border-color: var(--rule);
    }

    .dg-instrument:active { transform: scale(0.995); }

    .dg-instrument-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 0.42rem;
    }

    .dg-instrument-text { flex: 1; min-width: 0; }

    .dg-instrument-name {
      font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
      color: var(--text-dark); line-height: 1.35;
    }

    .dg-instrument-meta {
      font-family: var(--sans); font-size: 0.7rem; color: var(--text-light);
      letter-spacing: 0.02em; margin-top: 0.15rem; display: block; line-height: 1.4;
    }

    .dg-instrument-arrow {
      font-family: var(--sans); color: var(--text-light); font-size: 1rem;
      flex-shrink: 0; align-self: center;
      transition: transform 0.15s, color 0.15s;
    }

    .dg-instrument:hover .dg-instrument-arrow {
      color: var(--blue); transform: translateX(2px);
    }


    /* Empty / no-match state inside drawer */
    .dg-empty {
      font-family: var(--sans); font-size: 0.82rem; color: var(--text-light);
      padding: 2rem 0.5rem; text-align: center; line-height: 1.5;
    }


    /* Full instrument card (drawer detail view) */
    .dg-card-back {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: var(--sans); font-size: 0.74rem; color: var(--blue);
      background: transparent; border: none; cursor: pointer;
      padding: 0.3rem 0; margin-bottom: 0.8rem; letter-spacing: 0.03em;
    }

    .dg-card-back:hover { opacity: 0.7; }

    .dg-card-name {
      font-family: var(--font); font-size: 1.15rem; font-weight: 600;
      color: var(--text-dark); line-height: 1.3; margin-bottom: 0.7rem;
    }

    .dg-card-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }

    .dg-tag {
      font-family: var(--sans); font-size: 0.66rem; font-weight: 600;
      padding: 0.18rem 0.55rem; border-radius: 3px; letter-spacing: 0.04em;
    }

    .dg-tag--type { background: var(--off-white); color: var(--text-mid); border: 1px solid var(--rule); text-transform: capitalize; }

    .dg-card-fields {
      display: grid; grid-template-columns: 96px 1fr; gap: 0.4rem 0.8rem;
      margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule);
    }

    .dg-card-fields dt {
      font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light);
      padding-top: 0.1rem;
    }

    .dg-card-fields dd {
      font-family: var(--sans); font-size: 0.79rem; color: var(--text-dark); line-height: 1.45;
    }

    .dg-card-desc {
      font-size: 0.9rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 0.9rem;
    }

    .dg-card-impact {
      font-family: var(--sans); font-size: 0.78rem; color: var(--text-mid); line-height: 1.6;
      padding: 0.7rem 0.9rem; background: var(--off-white); border-radius: 5px; margin-bottom: 1rem;
    }

    .dg-card-impact strong {
      color: var(--navy); font-weight: 600; letter-spacing: 0.05em; font-size: 0.66rem;
      text-transform: uppercase; display: block; margin-bottom: 0.25rem;
    }

    .dg-card-links {
      display: flex; flex-direction: column; gap: 0.7rem;
      margin-top: 0.4rem;
    }

    /* Primary action: enter the full monitor — styled as a Vellum CTA */
    .dg-card-cta {
      display: inline-flex; align-items: center; justify-content: space-between;
      gap: 0.6rem; width: 100%;
      font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--white); background: var(--blue);
      border: none; border-radius: 5px; cursor: pointer;
      padding: 0.7rem 0.95rem; text-align: left;
      transition: background 0.2s, transform 0.12s, box-shadow 0.2s;
    }

    .dg-card-cta:hover {
      background: var(--blue-mid);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(26,61,124,0.28);
    }

    .dg-card-cta:active { transform: translateY(0); box-shadow: none; }

    .dg-card-cta-arrow { font-size: 1rem; transition: transform 0.15s; flex-shrink: 0; }

    .dg-card-cta:hover .dg-card-cta-arrow { transform: translateX(3px); }

    /* Secondary reference link: quieter, clearly subordinate to the CTA */
    .dg-card-link {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: var(--sans); font-size: 0.74rem; color: var(--blue);
      cursor: pointer; letter-spacing: 0.03em; transition: opacity 0.2s;
      background: transparent; border: none; padding: 0; text-align: left;
    }

    .dg-card-link:hover { opacity: 0.65; }


    @media (max-width: 760px) {
      #coverage-map { height: 420px; }
      .filter-label { min-width: auto; width: 100%; }
      /* Drawer becomes a bottom sheet */
      .coverage-drawer {
        top: auto; bottom: 0; right: 0; left: 0;
        width: 100%; max-width: 100%; height: 82vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
      }
      .coverage-drawer.open { transform: translateY(0); }
      .drawer-handle {
        display: block; width: 36px; height: 4px; border-radius: 2px;
        background: var(--rule); margin: 0.7rem auto 0.2rem;
      }
      .drawer-header { padding-top: 0.6rem; }
      .coverage-drawer { box-shadow: 0 -16px 48px rgba(10,22,40,0.22); }
    }


    /* Changes list */
    .changes-list {
      list-style: none;
      max-height: 360px; overflow-y: auto; scroll-behavior: smooth;
      padding-right: 6px;
      /* hero-style edge fade: top fade sits within first row's padding so text stays crisp */
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 26px), transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 26px), transparent 100%);
      scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
    }

    .changes-list::-webkit-scrollbar { width: 6px; }

    .changes-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

    .changes-list::-webkit-scrollbar-track { background: transparent; }

    .changes-list li {
      padding: 1rem 0; border-bottom: 1px solid var(--rule);
      display: grid; grid-template-columns: 90px 1fr; gap: 1rem; align-items: baseline;
    }

    .changes-list li:last-child { border-bottom: none; }

    .changes-list .change-date {
      font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
      letter-spacing: 0.05em; color: var(--text-light); text-transform: uppercase;
    }

    .changes-list .change-body { font-size: 0.92rem; color: var(--text-mid); line-height: 1.6; }

    .changes-list .change-body strong { color: var(--text-dark); font-weight: 600; }

    .changes-list .change-tag {
      display: inline-block; font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.12rem 0.45rem; border-radius: 3px; margin-right: 0.5rem;
      vertical-align: 0.08em;
    }

    @media (max-width: 640px) {
      .changes-list li { grid-template-columns: 1fr; gap: 0.3rem; }
    }



    /* ══════════════════════════════════════════════════════════════
       VELLUM SIGNATURE MOTION — evidence scan → judgement lock
       Reserved for high-value cards/sections. Not a general fade-up.
       Movement → structure → judgement.
       ══════════════════════════════════════════════════════════════ */
    .vellum-lock { position: relative; opacity: 0; transform: translateY(8px); }

    .vellum-lock.revealed {
      opacity: 1; transform: translateY(0);
      transition: opacity 520ms cubic-bezier(.22,1,.36,1), transform 520ms cubic-bezier(.22,1,.36,1);
    }

    /* thin evidence line scans across once as the block resolves */
    .vellum-lock::after {
      content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0%;
      background: linear-gradient(90deg, transparent, rgba(111,179,255,0.7), transparent);
      opacity: 0; pointer-events: none; z-index: 3;
    }

    .vellum-lock.revealed::after { animation: evidenceScan 760ms cubic-bezier(.22,1,.36,1) 140ms both; }

    @keyframes evidenceScan {
      0%   { width: 0%;   opacity: 0; }
      18%  { opacity: 1; }
      100% { width: 100%; opacity: 0; }
    }

    /* border locks to its final colour just after the scan passes */
    .vellum-lock { border-color: var(--rule); }

    .vellum-lock.revealed { transition: opacity 520ms cubic-bezier(.22,1,.36,1), transform 520ms cubic-bezier(.22,1,.36,1), border-color 360ms cubic-bezier(.22,1,.36,1) 560ms; }

    @media (prefers-reduced-motion: reduce) {
      .vellum-lock { opacity: 1 !important; transform: none !important; }
      .vellum-lock::after { display: none !important; }
    }

    @keyframes proofResolve {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes proofLine { from { width: 0; } to { width: 100%; } }

    @keyframes dotLock {
      from { opacity: 0.5; box-shadow: 0 0 0 rgba(111,179,255,0); }
      60%  { opacity: 1; box-shadow: 0 0 7px rgba(111,179,255,0.6); }
      to   { opacity: 1; box-shadow: 0 0 3px rgba(111,179,255,0.35); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-proof--pipeline .hero-proof-item { opacity: 1 !important; transform: none !important; animation: none !important; }
      .hero-proof--pipeline::before { display: none !important; }
      .hero-proof--pipeline .hero-proof-label::before { animation: none !important; opacity: 1 !important; }
    }

    .hero--home .hero-copy h1 { max-width: 100%; }

    @keyframes fragResolve {
      0%   { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.96); }
      28%  { opacity: 1; }
      72%  { opacity: 1; transform: translate(calc(var(--fx) * 0.2), calc(var(--fy) * 0.2)) scale(1); }
      100% { opacity: 0; transform: translate(0,0) scale(0.9); } /* absorbed into the card */
    }

    @keyframes cardCompose {
      from { opacity: 0; transform: translateY(14px) scale(0.985); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes hdScan { 0%{width:0;opacity:0;} 20%{opacity:1;} 100%{width:100%;opacity:0;} }

    @keyframes fieldLock { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }


    @media (prefers-reduced-motion: reduce) {
      .hd-frag { display: none !important; }
      .hd-card, .hd-field, .hd-card-conf, .hd-card-foot { opacity: 1 !important; transform: none !important; animation: none !important; }
      .hd-card-head::after { display: none !important; }
    }

    @media (max-width: 940px) {
      .hero--home .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .hero-demo { min-height: 340px; max-width: 460px; }
    }


    /* ── ABOUT · interactive distinctive dossier cards ──────────── */
    .distinct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

    @media (max-width: 860px){ .distinct-grid { grid-template-columns: 1fr; } }

    .distinct-card {
      position: relative; text-align: left; cursor: pointer;
      background: var(--white); border: 1px solid var(--rule); border-radius: 8px;
      padding: 1.6rem 1.5rem 1.4rem; overflow: hidden;
      font-family: inherit;
      transition: border-color 0.25s cubic-bezier(.22,1,.36,1), background 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s cubic-bezier(.22,1,.36,1);
    }

    .distinct-card::before { /* top evidence rule, scans on hover/open */
      content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%;
      background: linear-gradient(90deg, var(--accent), var(--blue));
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.5s cubic-bezier(.22,1,.36,1);
    }

    .distinct-card:hover, .distinct-card.open {
      border-color: rgba(111,179,255,0.5);
      background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
      box-shadow: var(--shadow-sm);
    }

    .distinct-card:hover::before, .distinct-card.open::before { transform: scaleX(1); }

    .distinct-index {
      font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em;
      color: var(--text-light); transition: color 0.25s cubic-bezier(.22,1,.36,1);
    }

    .distinct-card:hover .distinct-index, .distinct-card.open .distinct-index { color: var(--accent); }

    .distinct-card h3 { font-size: 1.12rem; margin: 0.5rem 0 0.55rem; color: var(--navy); }

    .distinct-lede { color: var(--text-mid); font-size: 0.93rem; margin: 0; }

    .distinct-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(.22,1,.36,1); }

    .distinct-more-inner {
      overflow: hidden; min-height: 0;
      color: var(--text-mid); font-size: 0.9rem; line-height: 1.6;
      opacity: 0; transition: opacity 0.35s cubic-bezier(.22,1,.36,1) 0.05s;
    }

    .distinct-card.open .distinct-more { grid-template-rows: 1fr; margin-top: 0.7rem; }

    .distinct-card.open .distinct-more-inner { opacity: 1; padding-top: 0.1rem; }

    .distinct-cue {
      position: absolute; top: 1.4rem; right: 1.4rem;
      font-family: var(--sans); font-size: 1.1rem; font-weight: 300; line-height: 1;
      color: var(--text-light); transition: transform 0.3s cubic-bezier(.22,1,.36,1), color 0.25s cubic-bezier(.22,1,.36,1);
    }

    .distinct-card:hover .distinct-cue { color: var(--accent); }

    .distinct-card.open .distinct-cue { transform: rotate(45deg); color: var(--accent); }

    @media (prefers-reduced-motion: reduce) {
      .distinct-card::before { transition: none; }
      .distinct-more, .distinct-more-inner, .distinct-cue { transition: none; }
    }

    .wf-left .section-label { color: rgba(255,255,255,0.45); }

    .wf-stage.active { opacity: 1; border-left-color: var(--accent); }

    .wf-stage.active .wf-stage-desc { max-height: 80px; opacity: 1; }


    @media (max-width: 900px) {
      .workflow-sticky { height: auto; }
      .wf-viewport { position: static; height: auto; padding: 4rem 0; }
      .wf-inner { grid-template-columns: 1fr; gap: 2.5rem; }
      .wf-stage { opacity: 1; border-left-color: var(--accent); }
      .wf-stage-desc { max-height: 80px; opacity: 1; }
      .wf-frags { display: none; }
      .wf-brief { opacity: 1; transform: none; }
      .wf-bf, .wf-brief-conf, .wf-brief-foot { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .workflow-sticky { height: auto; } .wf-viewport { position: static; height: auto; padding: 4rem 0; }
      .wf-stage, .wf-stage-desc, .wf-brief, .wf-bf, .wf-brief-conf, .wf-brief-foot { opacity: 1 !important; transform: none !important; max-height: none !important; }
      .wf-frags { display: none; }
    }


    /* ── HOW IT WORKS · steps reveal in sequence as you scroll ──── */
    .process-flow .step-item { position: relative; border-bottom: 1px solid var(--rule); opacity: 0; transform: translateY(14px); }

    .process-flow .step-item.in { animation: stepUnfold 600ms cubic-bezier(.22,1,.36,1) both; }

    @keyframes stepUnfold { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }

    /* timeline rail sits in the gutter BETWEEN the step number and the content */
    .process-flow .step-item::before {
      content:""; position:absolute; left:74px; top:0; width:1px; height:100%;
      background: linear-gradient(180deg, var(--accent), rgba(111,179,255,0.12));
      transform: scaleY(0); transform-origin: top; opacity: 0;
    }

    .process-flow .step-item.in::before { animation: railFill 640ms cubic-bezier(.22,1,.36,1) 80ms both; }

    @keyframes railFill { from{transform:scaleY(0);opacity:0;} to{transform:scaleY(1);opacity:1;} }

    .process-flow .step-num { position: relative; z-index:1; transition: color 0.3s cubic-bezier(.22,1,.36,1); }

    .process-flow .step-item.in .step-num { color: var(--accent); }

    .src-cluster { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.9rem; max-width:420px; }

    .src-chip { font-family: var(--sans); font-size:0.68rem; letter-spacing:0.02em; color: var(--text-mid);
      background: transparent; border:1px solid var(--rule); border-radius:4px; padding:0.22rem 0.5rem;
      opacity:0; transform: translateY(4px); }

    .process-flow .step-item.in .src-chip { animation: chipIn 360ms cubic-bezier(.22,1,.36,1) both; }

    .process-flow .step-item.in .src-chip:nth-child(1){animation-delay:.20s;}

    .process-flow .step-item.in .src-chip:nth-child(2){animation-delay:.27s;}

    .process-flow .step-item.in .src-chip:nth-child(3){animation-delay:.34s;}

    .process-flow .step-item.in .src-chip:nth-child(4){animation-delay:.41s;}

    .process-flow .step-item.in .src-chip:nth-child(5){animation-delay:.48s;}

    .process-flow .step-item.in .src-chip:nth-child(6){animation-delay:.55s;}

    .process-flow .step-item.in .src-chip:nth-child(7){animation-delay:.62s;}

    .src-chip--count { color: var(--accent); border-color: rgba(111,179,255,0.45); font-weight:600; }

    @keyframes chipIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }

    @media (prefers-reduced-motion: reduce) {
      .process-flow .step-item, .src-chip { opacity:1!important; transform:none!important; animation:none!important; }
      .process-flow .step-item::before { transform: scaleY(1); opacity:1; animation:none!important; }
    }


    /* Dropdown dismiss-on-click: stays closed after selection until the
       pointer leaves, so a chosen item doesn't keep the menu open. */
    .nav-dropdown.dd-dismiss .nav-dropdown-menu {
      opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
      transform: translateX(-50%) translateY(-6px) !important;
    }


    /* ══════════════════════════════════════════════════════════════
       HERO — intelligence panel, integrated (borderless, edges fade)
       ══════════════════════════════════════════════════════════════ */
    .hero-premium { min-height: min(760px, 100vh); padding: 150px 0 95px;
      background:
        radial-gradient(circle at 80% 30%, rgba(111,179,255,0.12), transparent 36%),
        radial-gradient(circle at 16% 82%, rgba(26,61,124,0.30), transparent 40%),
        #0a1628;
      position: relative; overflow: hidden; }

    .hero-premium-bg { position:absolute; inset:0; pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 72px 72px;
      -webkit-mask-image: radial-gradient(circle at 74% 44%, black 0%, transparent 60%);
      mask-image: radial-gradient(circle at 74% 44%, black 0%, transparent 60%);
      opacity: 0.4; }

    .hero-premium-grid { position:relative; display:grid;
      grid-template-columns: minmax(0, 1fr) minmax(400px, 0.82fr); gap: 4.5rem; align-items:center; }

    .hero-premium .hero-copy { max-width: 680px; }

    .hero-premium .hero-label { animation: premiumTextIn 700ms cubic-bezier(.22,1,.36,1) 80ms both; }

    .hero-premium h1 { max-width: 720px; animation: premiumTextIn 820ms cubic-bezier(.22,1,.36,1) 190ms both; }

    .hero-premium .hero-sub { animation: premiumTextIn 820ms cubic-bezier(.22,1,.36,1) 330ms both; }

    .hero-premium .btn-group { animation: premiumTextIn 760ms cubic-bezier(.22,1,.36,1) 500ms both; }

    @keyframes premiumTextIn { from{opacity:0;transform:translateY(14px);filter:blur(4px);} to{opacity:1;transform:translateY(0);filter:blur(0);} }


    /* Borderless panel: no card, edges fade into the navy, top/bottom rules only */
    .intel-panel { position:relative; padding: 0.2rem 0.2rem;
      animation: panelArrive 900ms cubic-bezier(.22,1,.36,1) 320ms both; }

    @keyframes panelArrive { from{opacity:0;transform:translateY(16px);filter:blur(6px);} to{opacity:1;transform:translateY(0);filter:blur(0);} }

    .intel-line { height:1px; background: linear-gradient(90deg, transparent, rgba(111,179,255,0.35), transparent); }

    .intel-head { display:flex; justify-content:space-between; gap:1rem; padding: 0.85rem 0.3rem;
      font-family: var(--sans); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color: rgba(255,255,255,0.4); }


    /* Roulette: 3 visible rows, centre active is larger, neighbours fade */
    .intel-roulette { position:relative; height: 186px; overflow:hidden;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%); }

    .intel-track { display:flex; flex-direction:column; will-change: transform;
      transition: transform 620ms cubic-bezier(.22,1,.36,1); }

    .sig { height: 62px; flex: 0 0 62px; display:grid; grid-template-columns: 1fr auto; align-items:center;
      gap:0.4rem 0.9rem; padding: 0 0.4rem; opacity: 0.32; transform: scale(0.965);
      transition: opacity 420ms cubic-bezier(.22,1,.36,1), transform 420ms cubic-bezier(.22,1,.36,1); }

    .sig.is-active { opacity:1; transform: scale(1); }

    .sig-meta { display:flex; align-items:center; gap:0.6rem; grid-column:1; }

    .sig-date { font-family: var(--sans); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:#6fb3ff; min-width:62px; }

    .sig-type { font-family: var(--sans); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color: rgba(255,255,255,0.4);
      border:1px solid rgba(255,255,255,0.14); border-radius:3px; padding:0.08rem 0.4rem; }

    .sig-title { grid-column:1; font-family: var(--sans); font-size:0.92rem; line-height:1.3; color: rgba(255,255,255,0.85); margin-top:0.25rem; }

    .sig.is-active .sig-title { color:#fff; }

    .sig-tag { grid-column:2; grid-row:1 / 3; align-self:center; font-family: var(--sans); font-size:0.62rem; letter-spacing:0.06em;
      color:#6fb3ff; border:1px solid rgba(111,179,255,0.25); border-radius:999px; padding:0.16rem 0.5rem; white-space:nowrap; }


    /* Distillation: hundreds of sources -> a 5-10 page brief (not the sample-brief section) */
    .intel-distill { padding: 1rem 0.3rem 0.4rem; }

    .distill-top { display:flex; align-items:center; gap:0.9rem; }

    .distill-bars { display:flex; align-items:flex-end; gap:3px; height:26px; flex-shrink:0; }

    .distill-bars span { width:3px; background: linear-gradient(180deg, rgba(111,179,255,0.7), rgba(111,179,255,0.18)); border-radius:2px;
      transform: scaleY(0); transform-origin:bottom; animation: barRise 600ms cubic-bezier(.22,1,.36,1) both; }

    @keyframes barRise { to { transform: scaleY(1); } }

    .distill-cap { font-family: var(--sans); font-size:0.8rem; color: rgba(255,255,255,0.6); line-height:1.4; }

    .distill-num { color:#fff; font-weight:600; }

    .distill-flow { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0 0.5rem; }

    .distill-rule { height:1px; flex:1; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12)); }

    .distill-rule:last-child { background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent); }

    .distill-chev { color:#6fb3ff; font-size:0.9rem; }

    .distill-out { display:flex; align-items:center; gap:0.6rem; transition: transform 0.25s cubic-bezier(.22,1,.36,1); cursor: default; }

    .distill-out-icon { display:inline-flex; flex-shrink:0; }

    .distill-top { transition: transform 0.25s cubic-bezier(.22,1,.36,1); cursor: default; }

    .distill-top:hover, .distill-out:hover { transform: scale(1.035); }

    .distill-top:hover .distill-bars span { background: linear-gradient(180deg, rgba(111,179,255,0.95), rgba(111,179,255,0.3)); }

    .distill-pages { font-family: var(--font); font-size:1.7rem; color:#fff; line-height:1; }

    .distill-out-cap { font-family: var(--sans); font-size:0.8rem; color: rgba(255,255,255,0.6); }

    @media (max-width: 980px) {
      .hero-premium { min-height:auto; padding:135px 0 80px; }
      .hero-premium-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .intel-panel { max-width: 560px; }
      .opmodel-grid { grid-template-columns: repeat(2,1fr); gap:1.4rem; }
    }

    @media (max-width: 620px) { .intel-panel { display:none; } .opmodel-grid { grid-template-columns:1fr; } }

    @media (prefers-reduced-motion: reduce) {
      .hero-premium .hero-label, .hero-premium h1, .hero-premium .hero-sub, .hero-premium .btn-group,
      .intel-panel, .sig, .distill-bars span { animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
      .intel-track { transition:none !important; }
    }


    /* ══════════════════════════════════════════════════════════════
       STICKY WORKFLOW v2 — dark, integrated; snaps cleanly to 4 stages
       ══════════════════════════════════════════════════════════════ */
    .wf2 { position: relative; height: 360vh; background: #0a1628; }

    .wf2-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden;
      background:
        radial-gradient(circle at 82% 30%, rgba(111,179,255,0.10), transparent 38%),
        radial-gradient(circle at 14% 80%, rgba(26,61,124,0.26), transparent 42%); }

    .wf2-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: center; width: 100%; }

    .wf2-stages { list-style: none; margin: 1.4rem 0 0; padding: 0; }

    .wf2-stage { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start;
      padding: 1.15rem 0 1.15rem 1.2rem; border-left: 2px solid rgba(255,255,255,0.10);
      opacity: 0.3; transition: opacity 0.45s cubic-bezier(.22,1,.36,1), border-color 0.45s cubic-bezier(.22,1,.36,1); }

    .wf2-stage.on { opacity: 1; border-left-color: var(--accent); }

    .wf2-n { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); padding-top: 0.35rem; }

    .wf2-name { display: block; font-family: var(--font); font-size: 1.55rem; color: #fff; line-height: 1.1; }

    .wf2-desc { display: block; font-family: var(--sans); font-size: 0.88rem; color: rgba(255,255,255,0.55); line-height: 1.5;
      margin-top: 0.35rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.28s cubic-bezier(.22,1,.36,1), opacity 0.22s cubic-bezier(.22,1,.36,1); }

    .wf2-stage.on .wf2-desc { max-height: 90px; opacity: 1; }


    /* Right: borderless dark panel (no white box), edges fade */
    .wf2-panel { position: relative; padding: 0.2rem 0.2rem; }

    .wf2-row--more span:first-child { color: var(--accent); font-weight: 600; }

    .wf2-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(111,179,255,0.35), transparent); }

    .wf2-head { display: flex; justify-content: space-between; padding: 0.85rem 0.3rem;
      font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); }

    .wf2-head-stage { color: var(--accent); transition: color 0.3s cubic-bezier(.22,1,.36,1); }

    .wf2-body { position: relative; min-height: 300px; }


    /* raw stream visible at stage 0, dissolves after */
    .wf2-stream { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.55rem;
      transition: opacity 0.26s cubic-bezier(.22,1,.36,1), transform 0.26s cubic-bezier(.22,1,.36,1); }

    .wf2-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
      border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: rgba(255,255,255,0.03);
      padding: 0.8rem 0.9rem; font-family: var(--sans); font-size: 0.85rem; color: rgba(255,255,255,0.7); }

    .wf2-row-tag { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35);
      border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 0.14rem 0.5rem; }


    /* structured brief composes from stage 1 */
    .wf2-brief { position: relative; opacity: 0; transform: translateY(14px); transition: opacity 0.26s cubic-bezier(.22,1,.36,1), transform 0.26s cubic-bezier(.22,1,.36,1); }

    .wf2-brief-tag { font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }

    .wf2-brief-title { font-family: var(--font); font-size: 1.2rem; line-height: 1.35; color: #fff; margin-bottom: 1rem;
      padding-bottom: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.1); }

    .wf2-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.4rem; margin-bottom: 1rem; }

    .wf2-f { display: flex; flex-direction: column; gap: 0.15rem; opacity: 0; transform: translateY(4px);
      transition: opacity 0.22s cubic-bezier(.22,1,.36,1), transform 0.22s cubic-bezier(.22,1,.36,1); }

    .wf2-f label { font-family: var(--sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); }

    .wf2-f span { font-family: var(--sans); font-size: 0.85rem; color: rgba(255,255,255,0.85); font-weight: 500; }

    .wf2-assess { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin-bottom: 1rem;
      opacity: 0; transition: opacity 0.22s cubic-bezier(.22,1,.36,1); }

    .wf2-conf { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: #8fe0a6;
      background: rgba(45,91,61,0.3); border: 1px solid rgba(143,224,166,0.25); padding: 0.18rem 0.55rem; border-radius: 3px; }

    .wf2-horizon { font-family: var(--sans); font-size: 0.72rem; color: rgba(255,255,255,0.5); }

    .wf2-cta { opacity: 0; transition: opacity 0.22s cubic-bezier(.22,1,.36,1); }

    .wf2-open { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent);
      background: none; border: none; cursor: pointer; padding: 0; }

    .wf2-open:hover { color: #fff; }


    /* Stage states (class on #wf2) */
    .wf2[data-stage="1"] .wf2-stream, .wf2[data-stage="2"] .wf2-stream, .wf2[data-stage="3"] .wf2-stream {
      opacity: 0; transform: translateY(-10px); pointer-events: none; }

    .wf2[data-stage="1"] .wf2-brief, .wf2[data-stage="2"] .wf2-brief, .wf2[data-stage="3"] .wf2-brief {
      opacity: 1; transform: translateY(0); }

    .wf2[data-stage="1"] .wf2-f, .wf2[data-stage="2"] .wf2-f, .wf2[data-stage="3"] .wf2-f { opacity: 1; transform: translateY(0); }

    .wf2[data-stage="2"] .wf2-assess, .wf2[data-stage="3"] .wf2-assess { opacity: 1; }

    .wf2[data-stage="3"] .wf2-cta { opacity: 1; }


    @media (max-width: 900px) {
      .wf2 { height: auto; }
      .wf2-pin { position: static; height: auto; padding: 4rem 0; }
      .wf2-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .wf2-stage { opacity: 1; border-left-color: var(--accent); }
      .wf2-desc { max-height: 90px; opacity: 1; }
      .wf2-stream { position: static; }
      .wf2-brief { opacity: 1; transform: none; margin-top: 1.5rem; }
      .wf2-f, .wf2-assess, .wf2-cta { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .wf2 { height: auto; } .wf2-pin { position: static; height: auto; padding: 4rem 0; }
      .wf2-stage, .wf2-desc, .wf2-brief, .wf2-f, .wf2-assess, .wf2-cta { opacity: 1 !important; transform: none !important; max-height: none !important; }
      .wf2-stream { position: static; }
    }


    /* ── Monitor row: hover reveals a compact coverage preview ──── */
    .monitor-scope { transition: color 0.2s cubic-bezier(.22,1,.36,1); }

    .monitor-preview {
      display: grid; grid-template-rows: 0fr;
      transition: grid-template-rows 0.34s cubic-bezier(.22,1,.36,1);
    }

    .monitor-preview-inner { overflow: hidden; min-height: 0; }

    .monitor-row:hover .monitor-preview, .monitor-row:focus-within .monitor-preview { grid-template-rows: 1fr; }

    .monitor-preview-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem;
      padding-top: 0.7rem; margin-top: 0.7rem; border-top: 1px dashed var(--rule);
      opacity: 0; transform: translateY(4px); transition: opacity 0.3s cubic-bezier(.22,1,.36,1) 0.06s, transform 0.3s cubic-bezier(.22,1,.36,1) 0.06s;
    }

    .monitor-row:hover .monitor-preview-row, .monitor-row:focus-within .monitor-preview-row { opacity: 1; transform: translateY(0); }

    .mpv { display: inline-flex; align-items: baseline; gap: 0.35rem; font-family: var(--sans); font-size: 0.76rem; color: var(--text-mid); }

    .mpv-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); }

    .mpv-val { color: var(--navy); font-weight: 600; }

    .mpv-cta { margin-left: auto; font-family: var(--sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }

    .mpv-cta:hover { color: var(--accent-hover); }

    .monitor-row:hover .mpv-cta { color: var(--accent); }

    .monitor-row:hover .mpv-cta .mpv-arrow { transform: translateX(3px); }

    .mpv-arrow { transition: transform 0.2s cubic-bezier(.22,1,.36,1); }

    @media (prefers-reduced-motion: reduce) {
      .monitor-preview { grid-template-rows: 1fr; }
      .monitor-preview-row { opacity: 1; transform: none; }
    }


    /* Proof strip inside the hero (blue area) */
    .hero-proof-strip { position: relative; display:grid; grid-template-columns: repeat(4,1fr); gap:1.6rem;
      margin-top:3rem; padding-top:1.8rem; border-top:1px solid rgba(255,255,255,0.1);
      animation: heroProofIn 700ms cubic-bezier(.22,1,.36,1) 0.7s both; }

    @keyframes heroProofIn { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }

    .hpf { position:relative; display:flex; flex-direction:column; gap:0.4rem; padding-left:0.9rem; }

    .hpf::before { content:""; position:absolute; left:0; top:0.4rem; width:5px; height:5px; border-radius:50%; background: var(--accent); }

    .hpf-label { font-family:var(--sans); font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#6fb3ff; }

    .hpf-text { font-family:var(--sans); font-size:0.85rem; line-height:1.5; color:rgba(255,255,255,0.6); }

    @media (max-width:980px){ .hero-proof-strip{ grid-template-columns:repeat(2,1fr); } }

    @media (max-width:620px){ .hero-proof-strip{ grid-template-columns:1fr; gap:1.3rem; } }

    @media (prefers-reduced-motion: reduce){ .hero-proof-strip{ animation:none; } }


    /* Visible sweep when the workflow advances a stage */
    .wf2-sweep { position:absolute; inset:0; pointer-events:none; z-index:2;
      background: linear-gradient(120deg, transparent 38%, rgba(111,179,255,0.16) 50%, transparent 62%);
      transform: translateX(-100%); opacity:0; }

    .wf2-panel.flash .wf2-sweep { animation: wfSweep 720ms cubic-bezier(.22,1,.36,1); }

    @keyframes wfSweep { 0%{transform:translateX(-100%);opacity:0;} 28%{opacity:1;} 100%{transform:translateX(100%);opacity:0;} }

    .wf2-head-stage { transition: color 0.3s cubic-bezier(.22,1,.36,1); }

    .wf2-stage.on .wf2-n { text-shadow: 0 0 10px rgba(111,179,255,0.5); }

    .wf2-stage { transition: opacity 0.2s cubic-bezier(.22,1,.36,1), border-color 0.2s cubic-bezier(.22,1,.36,1), background 0.2s cubic-bezier(.22,1,.36,1); }

    .wf2-stage.on { background: linear-gradient(90deg, rgba(111,179,255,0.06), transparent 70%); }
.dg-instrument-dot--none{background:#aeb6c0}
.dot--current{background:#7658bd}
.dot--pipeline{background:#c88a22}
.dot--historical{background:#888}
.jpin-ring--current{stroke:#7658bd}
.jpin-badge--current{fill:#7658bd}
.jpin-ring--pipeline{stroke:#c88a22}
.jpin-badge--pipeline{fill:#c88a22}
.jpin-ring--historical{stroke:#888}
.jpin-badge--historical{fill:#888}
.jpin-ring--none{stroke:#aeb6c0}
.jpin-badge--none{fill:#aeb6c0}

    .dg-instrument-dot--in_force { background: #1a3d7c; }

    .dg-instrument-dot--in_flight { background: #4a90e2; }

    .dg-instrument-dot--watch { background: #8e7cc3; }

    .dg-tag--status-in_force { background: rgba(111,179,255,0.15); color: #1c5fa8; }

    .dg-tag--status-in_flight { background: rgba(255,180,40,0.18); color: #8a5b00; }

    .dg-tag--status-watch { background: rgba(140,100,220,0.15); color: #6537a8; }

    .dg-tag--flag { background: rgba(26,61,124,0.08); color: var(--navy); }

    .dg-card-reviewed {
      font-family: var(--sans); font-size: 0.7rem; color: var(--text-light);
      margin-top: 0.9rem; font-style: italic;
    }

  
    /* Status extensions for the existing map and drawer components */
    .dg-instrument-dot--current{background:#7658bd}
.dg-instrument-dot--pipeline{background:#c88a22}
.dg-instrument-dot--historical{background:#888}
.dg-tag--status-current{background:rgba(118,88,189,.14);color:#5a4298}
.dg-tag--status-pipeline{background:rgba(200,138,34,.16);color:#805500}
.dg-tag--status-historical{background:#eee;color:#666}