:root {
      --navy: #1C2D6B;
      --navy-dark: #0E1A42;
      --navy-deeper: #080F28;
      --orange: #E8751A;
      --orange-light: #F5903A;
      --orange-dim: rgba(232,117,26,0.15);
      --white: #F4F6FF;
      --gray: #8A95B8;
      --card-bg: rgba(28, 45, 107, 0.25);
      --border: rgba(232,117,26,0.2);
    }

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

    html { scroll-behavior: smooth; }

    body {
      background-color: var(--navy-deeper);
      color: var(--white);
      font-family: 'Public Sans', sans-serif;
      font-size: clamp(15px, 1vw, 18px);
      font-weight: 400;
      overflow-x: hidden;
    }
    @supports (overflow-x: clip) { body { overflow-x: clip; } }

    /* ─── GRID BACKGROUND ─── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(232,117,26,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232,117,26,0.04) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0;
    }

    /* ─── NAVBAR ─── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5%;
      height: 80px;
      background: rgba(8,15,40,0.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }

    .nav-logo img {
      height: 56px;
      display: block;
    }

    .nav-links {
      display: flex;
      gap: 1.9rem;
      list-style: none;
      white-space: nowrap;
    }
    @media (min-width: 1121px) and (max-width: 1340px) {
      .nav-links { gap: 1.3rem; }
      .nav-links a { font-size: 0.86rem; letter-spacing: 0.08em; }
    }

    .nav-links a {
      text-decoration: none;
      color: var(--gray);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--orange); }

    .nav-cta {
      background: var(--orange);
      color: #fff !important;
      padding: 0.5rem 1.4rem;
      clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
      transition: background 0.2s !important;
    }

    .nav-cta:hover { background: var(--orange-light) !important; color: #fff !important; }

    /* ─── HERO ─── */
    #hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 100px 5% 60px;
      overflow: hidden;
      z-index: 1;
    }

    .hero-glow {
      position: absolute;
      width: 700px; height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232,117,26,0.12) 0%, transparent 70%);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .hero-glow-navy {
      position: absolute;
      width: 900px; height: 900px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(28,45,107,0.5) 0%, transparent 70%);
      top: 40%; right: -20%;
      pointer-events: none;
    }

    /* Circuit lines decoration */
    .circuit-lines {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 45%;
      opacity: 0.12;
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      max-width: 720px;
      animation: fadeUp 1s ease forwards;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--orange-dim);
      border: 1px solid var(--border);
      color: var(--orange);
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.88rem;
      letter-spacing: 0.1em;
      padding: 0.4rem 1.1rem;
      clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
      margin-bottom: 1.5rem;
    }

    .hero-badge::before {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--orange);
      animation: pulse 2s infinite;
    }

    .hero-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(2.2rem, 4vw, 4rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: var(--white);
    }

    .hero-title .accent { color: var(--orange); }

    .hero-tagline {
      margin-top: 1.5rem;
      font-size: clamp(1rem, 1.1vw, 1.2rem);
      font-weight: 300;
      color: var(--gray);
      line-height: 1.8;
      max-width: 560px;
    }

    .hero-tagline strong {
      color: var(--white);
      font-weight: 600;
    }

    .hero-actions {
      margin-top: 2.5rem;
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .btn-primary {
      display: inline-block;
      background: var(--orange);
      color: #fff;
      text-decoration: none;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.9rem 2.2rem;
      clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
      transition: background 0.2s, transform 0.2s;
    }

    .btn-primary:hover { background: var(--orange-light); transform: translateY(-2px); }

    .btn-outline {
      display: inline-block;
      border: 1px solid rgba(244,246,255,0.25);
      color: var(--white);
      text-decoration: none;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.9rem 2.2rem;
      clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
      transition: border-color 0.2s, color 0.2s;
    }

    .btn-outline:hover { border-color: var(--orange); color: var(--orange); }

    .hero-stats {
      margin-top: 3.5rem;
      display: flex;
      gap: 3rem;
      flex-wrap: wrap;
    }

    .stat-item {}
    .stat-number {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(1.8rem, 2.5vw, 2.6rem);
      font-weight: 800;
      color: var(--orange);
    }
    .stat-label {
      font-size: 0.88rem;
      color: var(--gray);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 0.2rem;
    }


    /* ─── HERO TWO-COLUMN ─── */
    .hero-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
      width: 100%;
      max-width: 1400px;
    }

    .hero-visual {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: fadeUp 1.2s ease forwards;
      animation-delay: 0.3s;
      opacity: 0;
    }

    .hero-visual svg {
      width: 100%;
      max-width: 500px;
      height: auto;
      filter: drop-shadow(0 0 30px rgba(232,117,26,0.1));
    }

    @keyframes nodePulse {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }

    .dib-node { animation: nodePulse 3s ease-in-out infinite; }
    .dib-node:nth-child(2) { animation-delay: 0.5s; }
    .dib-node:nth-child(3) { animation-delay: 1s; }
    .dib-node:nth-child(4) { animation-delay: 1.5s; }
    .dib-node:nth-child(5) { animation-delay: 2s; }
    .dib-node:nth-child(6) { animation-delay: 2.5s; }

    @media (max-width: 900px) {
      .hero-layout { grid-template-columns: 1fr; }
      .hero-visual { display: none; }
    }

    /* ─── SECTION BASE ─── */
    section { position: relative; z-index: 1; }

    .section-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 100px 5%;
    }

    .section-label {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.85rem;
      color: var(--orange);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 0.8rem;
    }

    .section-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 800;
      text-transform: uppercase;
      line-height: 1.05;
      color: var(--white);
    }

    .section-title .accent { color: var(--orange); }

    .section-subtitle {
      margin-top: 1rem;
      color: var(--gray);
      font-size: clamp(1rem, 1.1vw, 1.15rem);
      font-weight: 300;
      line-height: 1.8;
      max-width: 680px;
    }

    /* ─── CMMC STRIP ─── */
    #cmmc-strip {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .cmmc-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 60px 5%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }

    .cmmc-text h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 800;
      text-transform: uppercase;
      line-height: 1.1;
    }

    .cmmc-text p {
      margin-top: 1rem;
      color: var(--gray);
      font-size: 0.95rem;
      line-height: 1.75;
    }

    .cmmc-domains {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.6rem;
    }

    .domain-pill {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(232,117,26,0.08);
      border: 1px solid rgba(232,117,26,0.15);
      padding: 0.5rem 0.75rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      color: var(--white);
      clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
    }

    .domain-pill::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--orange);
      flex-shrink: 0;
    }

    /* ─── SERVICES ─── */
    #services { background: var(--navy-deeper); }

    .services-grid {
      margin-top: 3.5rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5px;
      background: var(--border);
      border: 1px solid var(--border);
    }

    .service-card {
      background: var(--navy-deeper);
      padding: 2.5rem 2rem;
      position: relative;
      overflow: hidden;
      transition: background 0.3s;
    }

    .service-card:hover { background: rgba(28,45,107,0.4); }

    .service-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 3px; height: 0;
      background: var(--orange);
      transition: height 0.4s ease;
    }

    .service-card:hover::before { height: 100%; }

    .service-icon {
      width: 48px; height: 48px;
      margin-bottom: 1.5rem;
      color: var(--orange);
    }

    .service-number {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.82rem;
      color: var(--orange);
      letter-spacing: 0.15em;
      margin-bottom: 0.75rem;
      opacity: 0.7;
    }

    .service-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 0.8rem;
    }

    .service-desc {
      font-size: 1rem;
      color: var(--gray);
      line-height: 1.75;
    }

    .service-list {
      margin-top: 1.2rem;
      list-style: none;
    }

    .service-list li {
      font-size: 0.95rem;
      color: var(--gray);
      padding: 0.3rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      display: flex;
      gap: 0.5rem;
      align-items: flex-start;
    }

    .service-list li::before {
      content: '›';
      color: var(--orange);
      font-weight: 700;
      flex-shrink: 0;
    }

    /* ─── WHY TRANUSA ─── */
    #why {
      background: linear-gradient(180deg, var(--navy-dark) 0%, var(--navy-deeper) 100%);
      border-top: 1px solid var(--border);
    }

    .why-grid {
      margin-top: 3.5rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }

    .why-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      padding: 2rem;
      position: relative;
      clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
      transition: border-color 0.3s;
    }

    .why-card:hover { border-color: var(--orange); }

    .why-card h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 0.6rem;
      color: var(--white);
    }

    .why-card p {
      font-size: 1rem;
      color: var(--gray);
      line-height: 1.75;
    }

    .why-card-icon {
      font-size: 1.6rem;
      margin-bottom: 1rem;
    }

    /* ─── CONTACT ─── */
    #contact {
      background: var(--navy-deeper);
      border-top: 1px solid var(--border);
    }

    .contact-wrapper {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 5rem;
      align-items: flex-start;
    }

    .contact-info h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 800;
      text-transform: uppercase;
      line-height: 1.1;
    }

    .contact-info p {
      margin-top: 1rem;
      color: var(--gray);
      font-size: 0.92rem;
      line-height: 1.75;
    }

    .contact-details {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .contact-detail-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 0.88rem;
      color: var(--gray);
    }

    .contact-detail-item .icon {
      width: 36px; height: 36px;
      background: var(--orange-dim);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
      clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .form-group label {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      color: var(--orange);
      text-transform: uppercase;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      background: rgba(28,45,107,0.2);
      border: 1px solid rgba(138,149,184,0.2);
      color: var(--white);
      font-family: 'Public Sans', sans-serif;
      font-size: 1rem;
      padding: 0.85rem 1rem;
      outline: none;
      transition: border-color 0.2s;
      clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder { color: rgba(138,149,184,0.5); }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--orange);
      background: rgba(232,117,26,0.06);
    }

    .form-group select option { background: var(--navy-dark); }

    .form-group textarea { resize: vertical; min-height: 110px; }

    .form-submit {
      margin-top: 0.5rem;
    }

    .form-submit button {
      width: 100%;
      background: var(--orange);
      color: #fff;
      border: none;
      cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: 1rem 2rem;
      clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
      transition: background 0.2s, transform 0.2s;
    }

    .form-submit button:hover { background: var(--orange-light); transform: translateY(-2px); }

    /* ─── FOOTER ─── */
    footer {
      background: var(--navy-dark);
      border-top: 1px solid var(--border);
      padding: 2.5rem 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      z-index: 1;
      position: relative;
    }

    .footer-logo img { height: 40px; opacity: 0.8; }

    .footer-copy {
      font-size: 0.9rem;
      color: var(--gray);
      font-family: 'Share Tech Mono', monospace;
    }

    .footer-links {
      display: flex;
      gap: 1.5rem;
      list-style: none;
    }

    .footer-links a {
      text-decoration: none;
      color: var(--gray);
      font-size: 0.88rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: color 0.2s;
    }

    .footer-links a:hover { color: var(--orange); }

    /* ─── ANIMATIONS ─── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.8); }
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 900px) {
      .services-grid { grid-template-columns: 1fr; }
      .cmmc-inner { grid-template-columns: 1fr; gap: 2rem; }
      .why-grid { grid-template-columns: 1fr; }
      .contact-wrapper { grid-template-columns: 1fr; gap: 2.5rem; }
      .form-row { grid-template-columns: 1fr; }
      .nav-links { display: none; }
      .section-inner { padding: 64px 5%; }
    }

    @media (max-width: 600px) {
      body { font-size: 16px; }
      .section-inner { padding: 52px 5%; }
      .hero-stats { gap: 1.8rem; }
      .hero-title { line-height: 1.08; }
      .stat-number { font-size: 1.8rem; }
      /* Contact cards: stack on small screens */
      .contact-cards-grid { grid-template-columns: 1fr !important; }
    }

    /* ─── LARGE DESKTOP (1600px+) ─── */
    @media (min-width: 1600px) {
      nav { padding: 0 6%; }
      .section-inner { padding: 120px 6%; }
      .cmmc-inner { padding: 80px 6%; }
    }

    /* ─── COMPLIANCE BARRIER ─── */
    .barrier-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin-top: 2.5rem;
    }

    .barrier-card {
      padding: 2.2rem;
      border: 1px solid var(--border);
      position: relative;
      clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    }

    .barrier-problem { background: rgba(255,60,60,0.05); border-color: rgba(255,80,80,0.2); }
    .barrier-solution-card { background: rgba(28,45,107,0.3); border-color: var(--border); }

    .barrier-icon { font-size: 2rem; margin-bottom: 1rem; }

    .barrier-card h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.75rem;
    }

    .barrier-card p { font-size: 0.9rem; color: var(--gray); line-height: 1.7; }
    .barrier-card strong { color: var(--white); }

    .barrier-callout {
      margin-top: 1.2rem;
      background: rgba(255,80,80,0.08);
      border-left: 3px solid #ff5050;
      padding: 0.75rem 1rem;
      font-size: 0.85rem;
      color: var(--gray);
      line-height: 1.6;
    }

    .barrier-callout strong { color: var(--white); }

    .barrier-tags {
      margin-top: 1.5rem;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .btag {
      background: var(--orange-dim);
      border: 1px solid var(--border);
      color: var(--orange);
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      padding: 0.3rem 0.8rem;
      clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
    }

    /* ─── FLOW DIAGRAM ─── */
    .flow-diagram {
      margin: 3.5rem 0;
      background: rgba(28,45,107,0.2);
      border: 1px solid var(--border);
      padding: 2.5rem 2rem 2rem;
      position: relative;
    }

    .flow-label-top {
      text-align: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 2.5rem;
    }

    .flow-track {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
    }

    .flow-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      min-width: 120px;
    }

    .flow-node-icon { font-size: 2.2rem; }
    .flow-shield { font-size: 2.8rem; }

    .flow-node-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      text-align: center;
      letter-spacing: 0.05em;
    }

    .flow-node-sub {
      font-size: 0.72rem;
      color: var(--gray);
      text-align: center;
    }

    .flow-node-badge {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.65rem;
      color: var(--orange);
      background: var(--orange-dim);
      border: 1px solid var(--border);
      padding: 0.2rem 0.5rem;
      letter-spacing: 0.08em;
      margin-top: 0.3rem;
    }

    .flow-node-center {
      background: rgba(28,45,107,0.5);
      border: 2px solid var(--orange);
      border-radius: 2px;
      padding: 1rem 1.2rem;
    }

    .flow-node-cloud {
      background: rgba(0,120,215,0.1);
      border: 1px solid rgba(0,120,215,0.3);
      padding: 1rem 1.2rem;
    }

    .flow-arrow {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      padding: 0 0.5rem;
    }

    .flow-line {
      width: 100%;
      height: 3px;
      background: linear-gradient(90deg, rgba(138,149,184,0.3), var(--gray));
      position: relative;
    }

    .flow-line::after {
      content: '▶';
      position: absolute;
      right: -8px;
      top: -9px;
      color: var(--gray);
      font-size: 0.9rem;
    }

    .flow-line-orange {
      background: linear-gradient(90deg, var(--orange), var(--orange-light));
    }

    .flow-line-orange::after { color: var(--orange-light); }

    .flow-sub-line {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.15rem;
    }

    .flow-sub-line span {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.62rem;
      color: var(--gray);
      letter-spacing: 0.06em;
    }

    /* ─── PILLARS ─── */
    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      margin-bottom: 2.5rem;
    }

    .pillar-card {
      background: var(--navy-deeper);
      padding: 2rem 1.5rem;
      text-align: center;
      transition: background 0.3s;
      position: relative;
    }

    .pillar-card:hover { background: rgba(28,45,107,0.4); }

    .pillar-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: var(--orange);
      transform: scaleX(0);
      transition: transform 0.3s;
    }

    .pillar-card:hover::after { transform: scaleX(1); }

    .pillar-icon { font-size: 2rem; margin-bottom: 1rem; }

    .pillar-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--orange);
      margin-bottom: 0.75rem;
    }

    .pillar-card p { font-size: 0.82rem; color: var(--gray); line-height: 1.65; }

    /* ─── WHY 3-COL ─── */
    .why3-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 3rem;
    }

    .why3-card {
      border-left: 3px solid var(--orange);
      padding: 1.5rem 1.5rem 1.5rem 1.8rem;
      background: rgba(28,45,107,0.15);
    }

    .why3-num {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.7rem;
      color: var(--orange);
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
    }

    .why3-card h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }

    .why3-card p { font-size: 0.85rem; color: var(--gray); line-height: 1.65; }

    /* ─── CTA BANNER ─── */
    .cta-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(135deg, var(--navy) 0%, rgba(28,45,107,0.6) 100%);
      border: 1px solid var(--orange);
      padding: 2rem 2.5rem;
      gap: 2rem;
      flex-wrap: wrap;
      clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
    }

    .cta-banner-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .cta-banner-sub { font-size: 0.88rem; color: var(--gray); margin-top: 0.25rem; }

    /* ─── PUZZLE ─── */
    .puzzle-wrapper {
      margin-top: 3.5rem;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 0;
      align-items: stretch;
    }

    .puzzle-piece {
      padding: 2.5rem;
      border: 1px solid var(--border);
      position: relative;
    }

    .puzzle-client {
      background: rgba(28,45,107,0.15);
      border-right: none;
      border-radius: 2px 0 0 2px;
    }

    .puzzle-tranusa {
      background: rgba(28,45,107,0.35);
      border-left: none;
      border-radius: 0 2px 2px 0;
    }

    .puzzle-piece-header { margin-bottom: 1.5rem; }

    .puzzle-tag {
      display: inline-block;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 0.3rem 1rem;
      clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    }

    .puzzle-tag-light { background: rgba(138,149,184,0.15); color: var(--white); }
    .puzzle-tag-orange { background: var(--orange-dim); color: var(--orange); }

    .puzzle-piece-sub {
      font-size: 0.8rem;
      color: var(--gray);
      margin-top: 0.5rem;
      letter-spacing: 0.05em;
    }

    .puzzle-items { display: flex; flex-direction: column; gap: 0.65rem; }

    .puzzle-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.5rem 0.75rem;
      border: 1px solid rgba(138,149,184,0.1);
      font-size: 0.85rem;
      color: var(--white);
      background: rgba(255,255,255,0.02);
      transition: border-color 0.2s, background 0.2s;
    }

    .puzzle-item:hover { border-color: rgba(138,149,184,0.3); background: rgba(28,45,107,0.3); }

    .pi-icon { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; }

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

    .stack-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      padding: 1rem 0.5rem;
      background: rgba(232,117,26,0.06);
      border: 1px solid var(--border);
      text-align: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--white);
      transition: background 0.2s, border-color 0.2s;
      clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
    }

    .stack-item:hover { background: rgba(232,117,26,0.15); border-color: var(--orange); }

    .si-icon { font-size: 1.4rem; }

    .puzzle-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 1rem;
      background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
      border-top: 1px solid var(--orange);
      border-bottom: 1px solid var(--orange);
      min-width: 120px;
      gap: 0.75rem;
    }

    .puzzle-lock { font-size: 2.5rem; }

    .puzzle-center-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 0.82rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      text-align: center;
      color: var(--orange);
      line-height: 1.3;
    }

    @media (max-width: 900px) {
      .barrier-grid { grid-template-columns: 1fr; }
      .pillars-grid { grid-template-columns: 1fr 1fr; }
      .why3-grid { grid-template-columns: 1fr; }
      .puzzle-wrapper { grid-template-columns: 1fr; }
      .puzzle-center { flex-direction: row; min-width: unset; padding: 1rem; }
      .puzzle-client, .puzzle-tranusa { border: 1px solid var(--border); border-radius: 2px; }
      .flow-track { flex-direction: column; gap: 1rem; }
      .flow-arrow { width: 100%; }
    }

    /* ─── DIVIDER ─── */
    .section-divider {
      width: 60px; height: 3px;
      background: var(--orange);
      margin: 1.5rem 0;
      clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
    }

    /* ─── HAMBURGER NAV ─── */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--gray);
      transition: all 0.3s ease;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--orange); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--orange); }

    @media (max-width: 1120px) {
      .hamburger { display: flex; }
      .nav-links {
        display: none;
        position: fixed;
        top: 80px; left: 0; right: 0;
        background: rgba(8,15,40,0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 2rem 5%;
        gap: 0;
        border-bottom: 1px solid var(--border);
        z-index: 99;
      }
      .nav-links.open { display: flex; }
      .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.05); }
      .nav-links a {
        display: block;
        padding: 1rem 0;
        font-size: 1.05rem;
      }
      .nav-cta {
        clip-path: none !important;
        margin-top: 1rem;
        text-align: center;
        padding: 0.75rem !important;
      }
    }

    /* ─── TRUST BAR ─── */
    #trust-bar {
      background: rgba(14,26,66,0.8);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .trust-bar-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 1.2rem 5%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      flex-wrap: wrap;
    }
    .trust-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1.5rem;
      border-right: 1px solid rgba(232,117,26,0.15);
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.72rem;
      color: var(--gray);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .trust-item:last-child { border-right: none; }
    .trust-item-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--orange);
      flex-shrink: 0;
    }
    @media (max-width: 900px) {
      .trust-item { border-right: none; padding: 0.4rem 0.8rem; font-size: 0.65rem; }
    }

    /* ─── ABOUT / CREDENTIALS SECTION ─── */
    #about {
      background: var(--navy-deeper);
      border-top: 1px solid var(--border);
    }
    .about-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: flex-start;
    }
    .about-creds {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-top: 2.5rem;
    }
    .cred-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.2rem 1.5rem;
      background: var(--card-bg);
      border: 1px solid var(--border);
      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    }
    .cred-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.1rem; }
    .cred-label {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.7rem;
      color: var(--orange);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 0.25rem;
    }
    .cred-value {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--white);
      letter-spacing: 0.03em;
    }
    .cred-sub { font-size: 0.82rem; color: var(--gray); margin-top: 0.15rem; line-height: 1.5; }

    /* ─── CASE STUDY CARDS ─── */
    .case-studies { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
    .case-card {
      background: rgba(28,45,107,0.2);
      border: 1px solid var(--border);
      padding: 1.8rem 2rem;
      position: relative;
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
      transition: border-color 0.3s;
    }
    .case-card:hover { border-color: var(--orange); }
    .case-card-tag {
      display: inline-block;
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.68rem;
      color: var(--orange);
      background: var(--orange-dim);
      border: 1px solid var(--border);
      padding: 0.2rem 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 0.9rem;
      clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
    }
    .case-card h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--white);
      margin-bottom: 0.5rem;
    }
    .case-card p { font-size: 0.9rem; color: var(--gray); line-height: 1.7; }
    .case-outcome { margin-top: 1rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .case-metric { display: flex; flex-direction: column; }
    .case-metric-num {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--orange);
      line-height: 1;
    }
    .case-metric-label { font-size: 0.72rem; color: var(--gray); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.15rem; }
    @media (max-width: 900px) {
      .about-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    }

    /* ─── CALENDAR CTA ─── */
    .cal-cta-box {
      background: linear-gradient(135deg, rgba(28,45,107,0.4) 0%, rgba(14,26,66,0.6) 100%);
      border: 1px solid var(--orange);
      padding: 2rem 2.5rem;
      margin-bottom: 2rem;
      clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    }
    .cal-cta-label {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.72rem;
      color: var(--orange);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }
    .cal-cta-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.3rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--white);
      margin-bottom: 0.5rem;
    }
    .cal-cta-sub { font-size: 0.9rem; color: var(--gray); line-height: 1.6; margin-bottom: 1.2rem; }
    .cal-divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 1.5rem 0;
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.72rem;
      color: rgba(138,149,184,0.5);
      letter-spacing: 0.1em;
    }
    .cal-divider::before, .cal-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(138,149,184,0.2);
    }

    /* success message */
    .form-success {
      display: none;
      background: rgba(232,117,26,0.1);
      border: 1px solid var(--orange);
      padding: 1.5rem;
      text-align: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      letter-spacing: 0.05em;
      color: var(--orange);
      clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    }

    /* ─── LEGAL MODALS ─── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(8,15,40,0.92);
      backdrop-filter: blur(10px);
      align-items: flex-start;
      justify-content: center;
      padding: 2rem 1rem;
      overflow-y: auto;
    }
    .modal-overlay.active { display: flex; }

    .modal-box {
      background: var(--navy-dark);
      border: 1px solid var(--border);
      max-width: 820px;
      width: 100%;
      position: relative;
      clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
      animation: fadeUp 0.3s ease;
      margin: auto;
    }

    .modal-header {
      padding: 2rem 2.5rem 1.5rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .modal-header-text {}

    .modal-badge {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.72rem;
      color: var(--orange);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }

    .modal-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.8rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--white);
    }

    .modal-close {
      background: rgba(232,117,26,0.1);
      border: 1px solid var(--border);
      color: var(--gray);
      font-size: 1.4rem;
      width: 40px; height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s, color 0.2s;
    }
    .modal-close:hover { background: var(--orange); color: #fff; }

    .modal-body {
      padding: 2rem 2.5rem 2.5rem;
      overflow-y: auto;
      max-height: 70vh;
    }

    .modal-body h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--orange);
      margin: 1.8rem 0 0.6rem;
      padding-bottom: 0.3rem;
      border-bottom: 1px solid var(--border);
    }
    .modal-body h3:first-child { margin-top: 0; }

    .modal-body p {
      font-size: 0.95rem;
      color: var(--gray);
      line-height: 1.8;
      margin-bottom: 0.75rem;
    }

    .modal-body ul {
      margin: 0.5rem 0 0.75rem 1.2rem;
    }

    .modal-body ul li {
      font-size: 0.95rem;
      color: var(--gray);
      line-height: 1.75;
      margin-bottom: 0.3rem;
    }

    .modal-body strong { color: var(--white); }

    .modal-effective {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.78rem;
      color: var(--gray);
      letter-spacing: 0.08em;
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }


    /* ── FAQ ── */
    #faq { background: var(--navy-deeper); border-top: 1px solid var(--border); }
    .faq-list { max-width: 900px; margin: 2.5rem auto 0; }
    .faq-item {
      border: 1px solid var(--border);
      background: var(--card-bg);
      margin-bottom: 0.9rem;
      clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
    }
    .faq-q {
      width: 100%; text-align: left; cursor: pointer;
      background: none; border: none; color: var(--white);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em;
      padding: 1.15rem 3rem 1.15rem 1.4rem;
      position: relative; line-height: 1.3;
    }
    .faq-q::after {
      content: '+'; position: absolute; right: 1.3rem; top: 50%;
      transform: translateY(-50%); color: var(--orange);
      font-size: 1.5rem; font-weight: 400; line-height: 1;
    }
    .faq-item.open .faq-q::after { content: '\2212'; }
    .faq-a {
      display: none; padding: 0 1.4rem 1.3rem;
      color: var(--gray); font-size: 0.95rem; line-height: 1.75;
    }
    .faq-item.open .faq-a { display: block; }
    .faq-a strong { color: var(--white); }

    /* ── Mobile overflow guard (pre-existing horizontal scroll fix) ── */
    /* Mobile overflow guard. NOTE: `hidden` makes html/body a scroll
       container, which silently breaks every position:sticky descendant
       (the snapshot progress bar was the casualty). `clip` clips the same
       overflow WITHOUT creating a scroll container, so sticky keeps working.
       `hidden` stays first as the fallback for anything without clip. */
    html, body { overflow-x: hidden; max-width: 100%; }
    @supports (overflow-x: clip) {
      html, body { overflow-x: clip; }
    }
    @media (max-width: 900px) {
      .puzzle-wrapper, .puzzle-piece, .puzzle-items, .puzzle-items-grid,
      .flow-track, .flow-node, .section-inner, .cmmc-inner { min-width: 0; max-width: 100%; }
      .puzzle-piece { padding: 1.6rem; }
      .puzzle-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-glow, .hero-glow-navy { max-width: 100%; }
    }

    /* ── FOUNDER NOTE ── */
    .founder {
      border: 1px solid var(--border);
      background: var(--card-bg);
      padding: 2.6rem 2.8rem;
      margin-bottom: 3.5rem;
      position: relative;
      clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
    }
    .founder::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px; background: var(--orange);
    }
    .founder-grid {
      display: grid; grid-template-columns: 1fr 1.65fr; gap: 2.8rem; align-items: start;
    }
    .founder-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.9rem; font-weight: 800; color: var(--white);
      line-height: 1.1; margin-bottom: 0.3rem;
    }
    .founder-role {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.72rem; color: var(--orange);
      letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 1.1rem;
    }
    .founder-pullquote {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.35rem; font-weight: 600; line-height: 1.32;
      color: var(--white); border-top: 1px solid var(--border);
      padding-top: 1.1rem;
    }
    .founder-body p { color: var(--gray); font-size: 0.98rem; line-height: 1.78; margin-bottom: 1rem; }
    .founder-body p:last-child { margin-bottom: 0; }
    .founder-body strong { color: var(--white); }
    @media (max-width: 900px) {
      .founder { padding: 1.9rem 1.6rem; }
      .founder-grid { grid-template-columns: 1fr; gap: 1.6rem; }
      .founder-pullquote { font-size: 1.2rem; }
    }

/* ═══════════════════════════════════════════════════════
   MULTI-PAGE ADDITIONS — 2026-09-10
   ═══════════════════════════════════════════════════════ */

/* Interior page header */
.page-head {
  position: relative;
  padding: 150px 6% 64px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(232,117,26,0.10), transparent 60%),
    linear-gradient(180deg, var(--navy-dark) 0%, var(--navy-deeper) 100%);
  overflow: hidden;
}
.page-head::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(28,45,107,0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,45,107,0.30) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 75%);
}
.page-head-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }
.page-head h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.01em;
  color: var(--white); text-transform: uppercase; margin: 0.5rem 0 1rem;
  max-width: 20ch;
}
.page-head .lede {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.72; color: var(--gray); max-width: 68ch;
}
.page-head .lede strong { color: var(--white); }

/* Breadcrumbs */
.crumbs {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 0.2rem;
}
.crumbs a { color: var(--gray); text-decoration: none; }
.crumbs a:hover { color: var(--orange); }
.crumbs span { color: rgba(138,149,184,0.45); margin: 0 0.45rem; }

/* Generic interior section */
.page-section { padding: 76px 6%; }
.page-section.alt { background: var(--navy-deeper); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.page-section .section-inner { max-width: 1240px; margin: 0 auto; }
.narrow { max-width: 860px !important; }

/* Prose */
.prose p { color: var(--gray); font-size: 1rem; line-height: 1.82; margin-bottom: 1.15rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--white); }
.prose h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem; font-weight: 700; color: var(--white);
  margin: 2.2rem 0 0.85rem; letter-spacing: 0.005em;
}
.prose ul { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.prose ul li {
  color: var(--gray); font-size: 0.98rem; line-height: 1.7;
  padding: 0.42rem 0 0.42rem 1.5rem; position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}
.prose ul li::before {
  content: '›'; position: absolute; left: 0.25rem; top: 0.42rem;
  color: var(--orange); font-weight: 700;
}
.prose ul li strong { color: var(--white); }

/* Key-line callout */
.keyline {
  border-left: 3px solid var(--orange);
  background: var(--card-bg);
  padding: 1.4rem 1.6rem;
  margin: 1.6rem 0;
}
.keyline p { margin: 0; color: var(--gray); line-height: 1.75; font-size: 0.99rem; }
.keyline p + p { margin-top: 0.8rem; }
.keyline strong { color: var(--white); }

/* Definition rows */
.deftable { border: 1px solid var(--border); margin: 1.6rem 0; }
.defrow { display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--border); }
.defrow:last-child { border-bottom: none; }
.defrow > div { padding: 1.05rem 1.3rem; }
.defrow > div:first-child {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  color: var(--white); font-size: 1.05rem;
  background: rgba(28,45,107,0.22); border-right: 1px solid var(--border);
}
.defrow > div:last-child { color: var(--gray); font-size: 0.95rem; line-height: 1.68; }
.defrow > div:last-child strong { color: var(--white); }
@media (max-width: 700px) {
  .defrow { grid-template-columns: 1fr; }
  .defrow > div:first-child { border-right: none; border-bottom: 1px solid var(--border); }
}

/* Next-step cards */
.nextgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; margin-top: 2rem; }
.nextcard {
  display: block; text-decoration: none;
  border: 1px solid var(--border); background: var(--card-bg);
  padding: 1.5rem 1.6rem; transition: border-color 0.2s, transform 0.2s;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.nextcard:hover { border-color: var(--orange); transform: translateY(-2px); }
.nextcard-label {
  font-family: 'Share Tech Mono', monospace; font-size: 0.66rem;
  color: var(--orange); letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.nextcard-title {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.25rem;
  font-weight: 700; color: var(--white); margin-bottom: 0.4rem; line-height: 1.2;
}
.nextcard p { color: var(--gray); font-size: 0.9rem; line-height: 1.62; margin: 0; }

/* Active nav */
.nav-links a.active { color: var(--white); }
.nav-links a.active::after { width: 100%; }

/* Footer nav */
.footer-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem; max-width: 1240px; margin: 0 auto 2.4rem;
  padding-bottom: 2.2rem; border-bottom: 1px solid var(--border); text-align: left;
}
.footer-col h4 {
  font-family: 'Share Tech Mono', monospace; font-size: 0.66rem;
  color: var(--orange); letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 0.85rem; font-weight: 400;
}
.footer-col a {
  display: block; color: var(--gray); text-decoration: none;
  font-size: 0.9rem; padding: 0.3rem 0; transition: color 0.2s;
}
.footer-col a:hover { color: var(--orange); }

/* ── First-visit intro video ── */
#intro-modal {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  background: rgba(8,15,40,0.88); backdrop-filter: blur(6px);
  padding: 5vh 5vw;
}
#intro-modal.active { display: flex; }
.intro-box {
  width: min(384px, 100%);
  border: 1px solid var(--border);
  background: var(--navy-deeper);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.intro-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.intro-eyebrow {
  font-family: 'Share Tech Mono', monospace; font-size: 0.68rem;
  color: var(--orange); letter-spacing: 0.13em; text-transform: uppercase;
}
.intro-close {
  background: none; border: 1px solid var(--border); color: var(--gray);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  width: 34px; height: 34px; transition: color 0.2s, border-color 0.2s;
}
.intro-close:hover { color: var(--white); border-color: var(--orange); }
.intro-box video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 68vh; object-fit: contain; background: #000; }
.intro-bottom { flex-direction: column; align-items: stretch; text-align: center; }
.intro-actions { justify-content: center; }
.intro-btn { flex: 1; }
.intro-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-top: 1px solid var(--border);
}
.intro-bottom .intro-note { color: var(--gray); font-size: 0.85rem; }
.intro-actions { display: flex; gap: 0.6rem; align-items: center; }
.intro-btn {
  background: none; border: 1px solid var(--border); color: var(--gray);
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.55rem 1.1rem; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.intro-btn:hover { color: var(--white); border-color: var(--orange); }
#intro-trigger {
  background: none; border: none; color: var(--gray); cursor: pointer;
  font-size: 0.9rem; padding: 0.3rem 0; text-align: left; font-family: 'Public Sans', sans-serif;
}
#intro-trigger:hover { color: var(--orange); }

/* Founder portrait */
.founder-photo {
  display: block; width: 150px; height: 150px; object-fit: cover; object-position: center 18%;
  border: 1px solid var(--border); border-radius: 2px;
  margin-bottom: 1.05rem; filter: saturate(0.92) contrast(1.02);
}
.founder-creds {
  font-size: 0.83rem; line-height: 1.55; color: var(--gray);
  margin: -0.5rem 0 1.15rem; padding-bottom: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.founder-pullquote { border-top: none !important; padding-top: 0 !important; }
@media (max-width: 900px) { .founder-photo { width: 116px; height: 116px; } }

/* ── The Brief ── */
.brief-list { margin-top: 2.2rem; }
.brief-item {
  display: block; text-decoration: none;
  border: 1px solid var(--border); background: var(--card-bg);
  padding: 1.9rem 2rem; margin-bottom: 1.1rem;
  transition: border-color 0.2s, transform 0.2s;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}
.brief-item:hover { border-color: var(--orange); transform: translateY(-2px); }
.brief-meta {
  font-family: 'Share Tech Mono', monospace; font-size: 0.68rem;
  color: var(--orange); letter-spacing: 0.13em; text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.brief-meta .sep { color: rgba(138,149,184,0.4); margin: 0 0.5rem; }
.brief-item h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.75rem; font-weight: 700;
  color: var(--white); line-height: 1.15; margin: 0 0 0.6rem;
}
.brief-item p { color: var(--gray); font-size: 0.97rem; line-height: 1.7; margin: 0; }
.brief-more {
  display: inline-block; margin-top: 0.9rem;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange);
}

/* Download strip */
.dl {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--card-bg); border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  padding: 1.25rem 1.5rem; margin: 1.8rem 0;
}
.dl-icon { font-size: 1.6rem; line-height: 1; }
.dl-text { flex: 1; min-width: 200px; }
.dl-text .t {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem;
  font-weight: 700; color: var(--white); line-height: 1.2;
}
.dl-text .s { color: var(--gray); font-size: 0.86rem; margin-top: 0.15rem; }
.dl .btn-primary { padding: 0.7rem 1.5rem; font-size: 0.85rem; white-space: nowrap; }

/* Issue body */
.issue-body h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem;
  color: var(--white); margin: 2.3rem 0 0.8rem; font-weight: 700;
}
.issue-body h3:first-child { margin-top: 0; }
.issue-date {
  font-family: 'Share Tech Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray);
  padding: 0.9rem 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); margin: 0 0 2rem;
}
.issue-date b { color: var(--orange); font-weight: 400; }

/* ── Readiness fit check ── */
.fit-q { margin-bottom: 1.9rem; }
.fit-q > .qh {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; font-weight: 700;
  color: var(--white); margin-bottom: 0.15rem;
}
.fit-q > .qs { color: var(--gray); font-size: 0.87rem; margin-bottom: 0.85rem; }
.fit-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fit-opt {
  background: var(--card-bg); border: 1px solid var(--border); color: var(--gray);
  font-family: 'Public Sans', sans-serif; font-size: 0.9rem;
  padding: 0.6rem 1rem; cursor: pointer; text-align: left;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.fit-opt:hover { color: var(--white); border-color: rgba(232,117,26,0.5); }
.fit-opt.sel { border-color: var(--orange); color: var(--white); background: rgba(232,117,26,0.12); }
#fit-go {
  margin-top: 0.5rem; width: 100%; max-width: 340px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.95rem 1.6rem;
  background: var(--orange); color: #fff; border: none; cursor: pointer;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
#fit-go:disabled { background: var(--card-bg); color: var(--gray); cursor: not-allowed;
  border: 1px solid var(--border); }
#fit-result { margin-top: 2.4rem; border: 1px solid var(--orange);
  background: linear-gradient(160deg, rgba(232,117,26,0.10), transparent 60%), var(--card-bg);
  padding: 2rem 2.1rem; }
#fit-tag { font-family: 'Share Tech Mono', monospace; font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 0.6rem; }
#fit-head { font-family: 'Barlow Condensed', sans-serif; font-size: 1.9rem; font-weight: 700;
  color: var(--white); line-height: 1.15; margin-bottom: 0.9rem; }
#fit-body { color: var(--gray); font-size: 0.99rem; line-height: 1.75; }
#fit-body strong { color: var(--white); }
#fit-cta { color: var(--white); font-size: 0.95rem; line-height: 1.65;
  border-left: 3px solid var(--orange); padding-left: 1rem; margin: 1.3rem 0 1.5rem; }
.fit-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
.fit-actions .btn-primary { padding: 0.85rem 1.7rem; font-size: 0.9rem; }
.fit-copy { background: none; border: 1px solid var(--border); color: var(--gray);
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.85rem 1.4rem; cursor: pointer; }
.fit-copy:hover { color: var(--white); border-color: var(--orange); }
.fit-priv { margin-top: 1.2rem; font-size: 0.82rem; color: var(--gray); line-height: 1.6; }
.fit-priv b { color: var(--white); font-weight: 600; }
#fit-summary { display: block; white-space: pre-wrap; font-family: 'Share Tech Mono', monospace;
  font-size: 0.74rem; line-height: 1.6; color: var(--gray); background: var(--navy-deeper);
  border: 1px solid var(--border); padding: 1rem 1.1rem; margin-top: 1.1rem; overflow-x: auto; }
@media (max-width: 600px) { .fit-opts { flex-direction: column; } .fit-opt { width: 100%; } }

/* ── Fit check result modal ── */
#fit-modal {
  position: fixed; inset: 0; z-index: 500; display: none;
  align-items: center; justify-content: center;
  background: rgba(8,15,40,0.90); backdrop-filter: blur(7px);
  padding: 4vh 5vw;
}
#fit-modal.active { display: flex; }
.fitbox {
  width: min(620px, 100%); max-height: 92vh; overflow-y: auto;
  border: 1px solid var(--border); background: var(--navy-deeper);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  clip-path: polygon(16px 0%, 100% 0%, calc(100% - 16px) 100%, 0% 100%);
}
.fitbox-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.6rem; border-bottom: 1px solid var(--border);
}
.fitbox-top .eyebrow {
  font-family: 'Share Tech Mono', monospace; font-size: 0.66rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--orange);
}
.fitbox-close {
  background: none; border: 1px solid var(--border); color: var(--gray);
  width: 32px; height: 32px; font-size: 1rem; line-height: 1; cursor: pointer;
}
.fitbox-close:hover { color: var(--white); border-color: var(--orange); }
.fitbox-in { padding: 1.9rem 1.9rem 2rem; }

/* scan sequence */
.scanrow {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.62rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  opacity: 0.25; transform: translateX(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.scanrow.on { opacity: 1; transform: none; }
.scantick {
  width: 17px; height: 17px; flex: 0 0 17px; border: 1px solid var(--border);
  position: relative; transition: border-color 0.28s ease, background 0.28s ease;
}
.scanrow.on .scantick { border-color: #6FCF97; background: rgba(111,207,151,0.14); }
.scanrow.on .scantick::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #6FCF97;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.scanlbl {
  font-family: 'Share Tech Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray);
  flex: 0 0 128px;
}
.scanval { color: var(--white); font-size: 0.9rem; }
.scanwait {
  margin-top: 1.2rem; font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange);
}
.scanwait::after { content: '_'; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* verdict card */
#fit-card { opacity: 0; transform: translateY(14px); transition: opacity 0.42s ease, transform 0.42s ease; }
#fit-card.in { opacity: 1; transform: none; }
.verdict-stamp {
  display: inline-block; border: 1.5px solid var(--orange); color: var(--orange);
  font-family: 'Share Tech Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.38rem 0.8rem; margin-bottom: 1.1rem; transform: rotate(-1.2deg);
}
#fit-head {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  font-weight: 800; color: var(--white); line-height: 1.12; margin-bottom: 0.85rem;
}
#fit-body { color: var(--gray); font-size: 1rem; line-height: 1.72; margin-bottom: 1.2rem; }
#fit-bring {
  color: var(--white); font-size: 0.93rem; line-height: 1.6;
  border-left: 3px solid var(--orange); padding-left: 0.95rem; margin-bottom: 1.5rem;
}
.fit-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.fit-actions .btn-primary { padding: 0.85rem 1.6rem; font-size: 0.86rem; }
.fit-copy {
  background: none; border: 1px solid var(--border); color: var(--gray);
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.86rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.85rem 1.3rem; cursor: pointer;
}
.fit-copy:hover { color: var(--white); border-color: var(--orange); }
.fit-priv { margin-top: 1.3rem; font-size: 0.78rem; color: var(--gray); line-height: 1.6; }
.fit-priv b { color: var(--white); font-weight: 600; }
details.fit-det { margin-top: 0.9rem; }
details.fit-det summary {
  cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); list-style: none;
}
details.fit-det summary::-webkit-details-marker { display: none; }
details.fit-det summary::before { content: '+ '; }
details.fit-det[open] summary::before { content: '\2212 '; }
#fit-summary {
  display: block; white-space: pre-wrap; font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem; line-height: 1.6; color: var(--gray); background: var(--navy-dark);
  border: 1px solid var(--border); padding: 0.9rem 1rem; margin-top: 0.8rem; overflow-x: auto;
}
@media (max-width: 560px) {
  .fitbox-in { padding: 1.4rem 1.2rem 1.6rem; }
  .scanlbl { flex: 0 0 96px; font-size: 0.62rem; }
  .fit-actions .btn-primary, .fit-copy { width: 100%; text-align: center; }
}

/* ─── Hero: click-to-play intro ─────────────────────────────────── */
#intro-play{
  display:inline-flex; align-items:center; gap:.7rem;
  background:transparent; border:1px solid rgba(232,117,26,.35);
  color:var(--text,#F4F6FF); padding:.62rem 1.15rem .62rem .72rem;
  border-radius:2px; cursor:pointer; font-family:inherit;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
#intro-play:hover{ border-color:#E8751A; background:rgba(232,117,26,.07); transform:translateY(-1px); }
#intro-play:focus-visible{ outline:2px solid #E8751A; outline-offset:3px; }
#intro-play .play-tri{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:rgba(232,117,26,.14); border:1px solid rgba(232,117,26,.5);
  position:relative;
}
#intro-play .play-tri::after{
  content:''; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%);
  border-left:8px solid #E8751A; border-top:5px solid transparent; border-bottom:5px solid transparent;
}
#intro-play .play-txt{
  display:flex; flex-direction:column; align-items:flex-start; line-height:1.15;
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
}
#intro-play .play-txt em{
  font-style:normal; font-family:'Share Tech Mono',Consolas,monospace;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:#8A95B8; margin-top:.15rem;
}

/* ─── Fit check: timeline chart ─────────────────────────────────── */
#fit-chart{ margin:1.5rem 0 .25rem; }
.fc-h{
  font-family:'Share Tech Mono',Consolas,monospace; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:#E8751A; margin-bottom:.85rem;
}
.fc-row{ display:flex; align-items:center; gap:.75rem; margin-bottom:.55rem; }
.fc-lbl{
  flex:0 0 8.6rem; font-size:.74rem; color:#8A95B8; text-align:right; line-height:1.25;
}
.fc-track{
  flex:1 1 auto; position:relative; display:flex; align-items:stretch;
  height:30px; background:rgba(14,26,66,.55);
  border:1px solid rgba(28,45,107,.7); border-radius:2px; overflow:hidden;
}
.fc-bar{ height:100%; position:relative; transition:width .7s cubic-bezier(.2,.8,.25,1); }
.fc-cap{
  flex:0 0 7.6rem; font-family:'Share Tech Mono',Consolas,monospace;
  font-size:.63rem; letter-spacing:.06em; color:#C8D3F0; line-height:1.3;
}
.fc-cap.late{ color:#F08A80; }
.fc-cap.none{ color:#6E7A99; }
.fc-run{ background:linear-gradient(90deg,#E8751A,#F2913F); }
.fc-run.fc-late{ background:#F08A80; }
.fc-run.fc-none{ background:repeating-linear-gradient(135deg,rgba(138,149,184,.16) 0 6px,transparent 6px 12px); }
.fc-delay{ background:repeating-linear-gradient(135deg,rgba(138,149,184,.28) 0 5px,transparent 5px 10px); }
.fc-seg{ border-right:1px solid rgba(14,19,31,.55); }
.fc-seg0{ background:#3C5AA6; }
.fc-seg1{ background:#4A6CBF; }
.fc-seg2{ background:#5D80D1; }
.fc-seg3{ background:#7B9AE0; }
.fc-seg4{ background:#9DB6EC; }
.fc-axis{
  display:flex; justify-content:space-between; margin:.1rem 8.35rem .8rem 9.35rem;
  font-family:'Share Tech Mono',Consolas,monospace; font-size:.58rem;
  letter-spacing:.12em; text-transform:uppercase; color:#6E7A99;
}
.fc-key{ display:flex; flex-wrap:wrap; gap:.35rem .95rem; margin:0 0 .9rem 9.35rem; }
.fck{ display:inline-flex; align-items:center; gap:.35rem; font-size:.67rem; color:#8A95B8; }
.fck i{ width:9px; height:9px; border-radius:1px; display:inline-block; }
.fc-read{
  border-left:2px solid #E8751A; padding:.55rem 0 .55rem .85rem;
  font-size:.9rem; line-height:1.55; color:#C8D3F0;
}
.fc-read b{ color:#F4F6FF; }
.fc-note{ margin-top:.7rem; font-size:.68rem; line-height:1.5; color:#6E7A99; }

@media (max-width:640px){
  .fc-row{ flex-direction:column; align-items:stretch; gap:.3rem; }
  .fc-lbl{ flex:none; text-align:left; font-size:.7rem; }
  .fc-axis,.fc-key{ margin-left:0; margin-right:0; }
  .fc-cap{ flex:none; text-align:right; }
  #intro-play{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .fc-bar{ transition:none; }
  #intro-play{ transition:none; }
}

/* Keep the send button reachable once the chart lengthens the card. */
#fit-card .fit-actions{
  position:sticky; bottom:0; z-index:3;
  margin-top:1.4rem; padding:.95rem 0 .5rem;
  background:linear-gradient(180deg,rgba(11,17,38,0) 0%,var(--navy-deeper) 22%,var(--navy-deeper) 100%);
}

/* Hero secondary CTA with a sub-label */
.hero-actions .btn-outline em{
  display:block; font-style:normal;
  font-family:'Share Tech Mono',Consolas,monospace;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:#8A95B8; margin-top:.2rem; font-weight:400;
}

/* Seven nav items + the CTA need more room than six did. Between the
   hamburger breakpoint (1120px) and a roomy desktop, tighten the row so
   the Get Started button never clips off the right edge. */
@media (min-width: 1121px) and (max-width: 1420px){
  .nav-links{ gap: 1rem; }
  .nav-links a{ font-size: 0.8rem; letter-spacing: 0.055em; }
  .nav-links .nav-cta{ padding-left: 1rem; padding-right: 1rem; }
  .nav-logo img{ width: 210px; height: auto; }
}

/* ─── First-visit fit popup ─────────────────────────────────────── */
#fitpop{
  position:fixed; inset:0; z-index:600; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,15,40,.92); backdrop-filter:blur(8px);
  padding:3vh 4vw;
}
#fitpop.active{ display:flex; animation:fpIn .28s ease-out; }
@keyframes fpIn{ from{ opacity:0 } to{ opacity:1 } }
.fitpop-box{
  width:min(720px,100%); max-height:94vh; overflow-y:auto;
  border:1px solid var(--border); background:var(--navy-deeper);
  box-shadow:0 40px 100px rgba(0,0,0,.65);
  clip-path:polygon(18px 0%,100% 0%,calc(100% - 18px) 100%,0% 100%);
}
.fitpop-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.7rem; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--navy-deeper); z-index:2;
}
.fitpop-top .eyebrow{
  font-family:'Share Tech Mono',monospace; font-size:.64rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--orange);
}
.fitpop-in{ padding:1.7rem 1.9rem 2rem; }
.fitpop-h{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.08;
  color:var(--white); margin:0 0 .75rem; letter-spacing:-.005em;
}
.fitpop-sub{ font-size:.93rem; line-height:1.6; color:var(--gray); margin:0 0 .7rem; }
.fitpop-sub strong{ color:var(--white); font-weight:600; }
.fitpop-priv{
  font-family:'Share Tech Mono',monospace; font-size:.68rem; line-height:1.6;
  letter-spacing:.03em; color:#6E7A99; margin:0 0 1.5rem;
  border-left:2px solid rgba(232,117,26,.4); padding-left:.8rem;
}
/* The submit button rides along at the bottom of the popup. The wrapper
   carries the solid ground so it never floats over the questions. */
.fitpop-go{
  position:sticky; bottom:0; z-index:4;
  margin-top:1.5rem; padding:.9rem 0 .35rem;
  background:linear-gradient(180deg,rgba(11,17,38,0) 0%,var(--navy-deeper) 30%,var(--navy-deeper) 100%);
}
.fitpop-go #fit-go{ margin-top:0; max-width:none; }
.fitpop-skip{
  display:block; margin:1rem auto 0; background:none; border:none;
  color:#6E7A99; font-family:inherit; font-size:.78rem;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.fitpop-skip:hover{ color:var(--gray); }
@media (max-width:600px){
  #fitpop{ padding:0; }
  .fitpop-box{ max-height:100vh; height:100vh; clip-path:none; border:none; }
  .fitpop-in{ padding:1.3rem 1.2rem 2rem; }
}
@media (prefers-reduced-motion: reduce){ #fitpop.active{ animation:none; } }

/* ─── Mobile modal behaviour + a close button you cannot miss ─────── */

/* A bigger, higher-contrast close control. 44px is the minimum reliable
   touch target; on a phone it also carries the word "Close". */
.fitbox-close{
  display:inline-flex; align-items:center; gap:.4rem;
  width:auto; min-width:44px; height:44px; padding:0 .85rem;
  background:rgba(232,117,26,.14); border:1px solid rgba(232,117,26,.65);
  color:var(--white); font-size:1.35rem; line-height:1; cursor:pointer;
  border-radius:2px; flex:0 0 auto;
}
.fitbox-close:hover,.fitbox-close:focus-visible{
  background:rgba(232,117,26,.28); border-color:var(--orange); color:#fff;
}
.fitbox-close:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.fitbox-close .cw{
  font-family:'Barlow Condensed',sans-serif; font-size:.86rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; position:relative; top:1px;
}
.fitbox-close.big .cw{ display:none; }

/* Modal scrollers: keep the gesture inside the box, never chain to the
   page behind it, and use dvh so the iOS address bar cannot hide the
   bottom of the sheet. */
#fitpop, #fit-modal{ overscroll-behavior:contain; }
.fitpop-box, .fitbox{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  max-height:94dvh;
}

/* The skip link lives in the sticky bar with the submit button, so there
   is always a visible way out without scrolling to the end. */
.fitpop-go{ display:flex; flex-direction:column; align-items:stretch; gap:.55rem; }
.fitpop-go .fitpop-skip{ margin:0; padding:.35rem 0; }

@media (max-width:600px){
  .fitpop-box{ height:100dvh; max-height:100dvh; }
  .fitbox-close.big .cw{ display:inline; }
  .fitbox-close{ height:46px; }
  .fitpop-top{ padding:.7rem .9rem .7rem 1.1rem; gap:.6rem; }
  .fitpop-top .eyebrow{ font-size:.58rem; letter-spacing:.1em; }
  .fitpop-skip{ font-size:.85rem; padding:.5rem 0; }
}

/* The sticky bar must fully hide what passes under it — a gradient that
   starts transparent lets headings show through the button. */
.fitpop-go{
  background:var(--navy-deeper);
  border-top:1px solid var(--border);
  padding:.85rem 0 .5rem;
  box-shadow:0 -10px 16px 4px var(--navy-deeper);
}
#fit-card .fit-actions{
  background:var(--navy-deeper);
  border-top:1px solid var(--border);
  box-shadow:0 -10px 16px 4px var(--navy-deeper);
}
@media (max-width:600px){
  .fitpop-h{ font-size:1.42rem; line-height:1.14; }
  .fitpop-sub{ font-size:.88rem; }
  .fitpop-priv{ font-size:.64rem; margin-bottom:1.2rem; }
}

/* Sticky bars were solving a desktop problem and creating a mobile one:
   on a phone they sat on top of the next question and on the chart. The
   submit button belongs directly after question five anyway, and the big
   CLOSE control at the top is the always-visible way out. */
.fitpop-go{
  position:static; box-shadow:none;
  border-top:1px solid var(--border); margin-top:1.6rem; padding-top:1.3rem;
}
@media (max-width:600px){
  #fit-card .fit-actions{
    position:static; box-shadow:none; background:none;
    border-top:1px solid var(--border); padding-top:1.2rem;
  }
}

/* The verdict's own next step — highlighted, since it is the one action
   that matches what the read just told them to do. */
.fit-extra{
  border-color:rgba(232,117,26,.55) !important;
  color:var(--white) !important;
  background:rgba(232,117,26,.1) !important;
}
.fit-extra:hover{ background:rgba(232,117,26,.22) !important; border-color:var(--orange) !important; }

/* Every overlay must be a direct child of <body>. A .page-section is
   position:relative with z-index:1, which makes it a stacking context — an
   overlay nested inside one is trapped in it, and the NEXT section paints
   straight over the bottom of the modal. The fit page used to render its
   result modal inside the widget section; it now goes through the same
   end-of-body slot every other page uses. */

/* ═══════════════════════════════════════════════════════════════════
   MOBILE LAYOUT REPAIRS
   ───────────────────────────────────────────────────────────────────
   html/body carry overflow-x:hidden, which HIDES horizontal overflow
   rather than preventing it — so a block wider than the screen just gets
   silently clipped and looks broken. These are the blocks that were
   spilling on a phone, found by measuring element rects against the
   viewport rather than trusting scrollWidth.
   ═══════════════════════════════════════════════════════════════════ */

/* <footer> is a flex row, so .footer-nav was sized shrink-to-fit and laid
   itself out at its max-content width (4 x 160px + gaps = 736px) on a
   390px screen. It needs to claim a full row of the flex container. */
.footer-nav{
  flex:1 1 100%;
  width:100%;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
@media (max-width:560px){
  .footer-nav{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.6rem 1.1rem; }
  .footer-col a{ font-size:.85rem; }
}
@media (max-width:360px){
  .footer-nav{ grid-template-columns:1fr; }
}

/* Hard column counts with no fallback — each one overflowed on a phone. */
@media (max-width:860px){
  .pillars-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .services-grid,
  .why3-grid,
  .puzzle-items-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .why-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .pillars-grid,
  .services-grid,
  .why3-grid,
  .puzzle-items-grid{ grid-template-columns:1fr; }
}

/* Decorative hero glow was painting past the right edge. */
.hero-glow, .hero-glow-navy{ max-width:100%; pointer-events:none; }

/* Bottom footer link row: a flex line that could not wrap. */
.footer-links{
  flex:1 1 100%; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4rem 1.1rem; padding:0; margin:1rem 0 0; list-style:none;
}
.footer-links li{ margin:0; }

/* The decorative hero glows are positioned past the right edge by design;
   clip them to the section so they cannot widen the page on a phone. */
#hero{ overflow:hidden; }

/* Mobile spacing: the desktop rhythm leaves large empty bands on a phone. */
@media (max-width:560px){
  .page-section{ padding:52px 6%; }
  footer{ padding:2rem 6% 1.7rem; gap:.6rem; }
  .footer-nav{ margin-bottom:1.4rem; padding-bottom:1.4rem; }
  .footer-logo img{ height:32px; }
  .footer-copy{ font-size:.68rem; line-height:1.6; }
  .footer-links{ margin-top:.6rem; }
  .section-title{ line-height:1.08; }
}

/* ─── Case study metric row ─────────────────────────────────────── */
.cm-row{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px; background:var(--border); border:1px solid var(--border);
  margin:0 0 1.8rem;
}
.cm{ background:var(--navy-deeper); padding:1.15rem 1rem; text-align:center; }
.cm-n{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:1.6rem; line-height:1; color:var(--orange); margin-bottom:.35rem;
}
.cm-l{ font-size:.72rem; line-height:1.4; color:var(--gray); }
.prose p.tiny{ font-size:.75rem; line-height:1.6; color:#6E7A99; }
@media (max-width:760px){ .cm-row{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:400px){ .cm-row{ grid-template-columns:1fr; } }

/* ─── Boundary diagram: tappable tiles ──────────────────────────── */
.puzzle-item[role="button"], .stack-item[role="button"]{
  cursor:pointer; position:relative;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.puzzle-item[role="button"]:hover, .stack-item[role="button"]:hover,
.puzzle-item[role="button"]:focus-visible, .stack-item[role="button"]:focus-visible{
  border-color:var(--orange); transform:translateY(-2px);
}
.puzzle-item[role="button"]:focus-visible, .stack-item[role="button"]:focus-visible{
  outline:2px solid var(--orange); outline-offset:2px;
}
.si-more{
  position:absolute; top:.45rem; right:.55rem;
  font-family:'Share Tech Mono',monospace; font-size:.8rem; line-height:1;
  color:var(--orange); opacity:.4; transition:opacity .18s ease, transform .18s ease;
}
.puzzle-item[role="button"]:hover .si-more,
.stack-item[role="button"]:hover .si-more{ opacity:1; transform:rotate(90deg); }

/* ─── Tile definition modal ─────────────────────────────────────── */
#stack-modal{
  position:fixed; inset:0; z-index:620; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,15,40,.92); backdrop-filter:blur(7px); padding:4vh 5vw;
  overscroll-behavior:contain;
}
#stack-modal.active{ display:flex; }
.sm-box{
  width:min(560px,100%); max-height:92vh; max-height:92dvh; overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); background:var(--navy-deeper);
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  clip-path:polygon(16px 0%,100% 0%,calc(100% - 16px) 100%,0% 100%);
}
.sm-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.5rem; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--navy-deeper); z-index:2;
}
.sm-fam{
  font-family:'Share Tech Mono',monospace; font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--orange); line-height:1.5;
}
.sm-in{ padding:1.5rem 1.7rem 1.9rem; }
.sm-in h3{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(1.35rem,3vw,1.75rem); line-height:1.1; color:var(--white);
  margin:0 0 .7rem;
}
.sm-what{ font-size:.95rem; line-height:1.65; color:#C8D3F0; margin:0 0 1.2rem; }
.sm-why{ border-left:2px solid var(--orange); padding-left:1rem; }
.sm-why-h{
  display:block; font-family:'Share Tech Mono',monospace; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:.45rem;
}
.sm-why p{ margin:0; font-size:.9rem; line-height:1.68; color:var(--gray); }
.sm-why em{ color:var(--white); font-style:normal; font-weight:600; }
@media (max-width:600px){
  #stack-modal{ padding:0; }
  .sm-box{ height:100dvh; max-height:100dvh; clip-path:none; border:none; }
  .sm-in{ padding:1.3rem 1.2rem 2rem; }
  .si-more{ opacity:.85; }
}

/* ─── Asset categorization rows: respond to the cursor ──────────── */
.deftable .defrow{ transition:background .18s ease, border-color .18s ease; }
.deftable .defrow:hover{ background:rgba(232,117,26,.06); }
.deftable .defrow:hover > div:first-child{ color:var(--orange); }
.deftable .defrow > div:first-child{ transition:color .18s ease; }

/* ─── About page: one-time entrance ─────────────────────────────── */
/* The portrait resolves in behind a glow that blooms and fades, then the
   name settles under it with a brief highlight. Runs once and stops. */
.founder .founder-photo{ will-change:opacity, transform, filter; }

.founder.intro-run .founder-photo{
  animation:fPhoto 1.4s cubic-bezier(.2,.8,.25,1) both,
            fGlow 2.2s ease-out .35s both;
}
.founder.intro-run .founder-name{
  animation:fName 1s cubic-bezier(.2,.8,.25,1) .55s both,
            fNameGlow 2.1s ease-out .9s both;
}
.founder.intro-run .founder-role{ animation:fName .9s ease .85s both; }
.founder.intro-run .founder-creds{ animation:fName .9s ease 1.05s both; }
.founder.intro-run .founder-pullquote{ animation:fName 1s ease 1.25s both; }

@keyframes fPhoto{
  0%{ opacity:0; transform:scale(1.06); filter:saturate(.25) contrast(1.18); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1); filter:none; }
}
/* the bloom: a white-into-orange halo that swells once and dies away */
@keyframes fGlow{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(232,117,26,0); }
  22%{ box-shadow:0 0 34px 6px rgba(255,255,255,.42), 0 0 68px 18px rgba(232,117,26,.34); }
  55%{ box-shadow:0 0 22px 3px rgba(255,255,255,.16), 0 0 48px 12px rgba(232,117,26,.20); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(232,117,26,0); }
}
@keyframes fName{
  0%{ opacity:0; transform:translateY(10px); }
  100%{ opacity:1; transform:translateY(0); }
}
@keyframes fNameGlow{
  0%{ text-shadow:none; }
  25%{ text-shadow:0 0 18px rgba(255,255,255,.6), 0 0 34px rgba(232,117,26,.45); }
  100%{ text-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  .founder.intro-run .founder-photo,
  .founder.intro-run .founder-name,
  .founder.intro-run .founder-role,
  .founder.intro-run .founder-creds,
  .founder.intro-run .founder-pullquote{ animation:none; }
}

/* ─── Nav: Fit Check as the outlined, secondary CTA ─────────────── */
.nav-links a.nav-fit{
  border:1px solid rgba(232,117,26,.55);
  padding:.5rem .85rem;
  border-radius:2px;
  color:var(--white);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.nav-links a.nav-fit:hover,
.nav-links a.nav-fit.active{
  background:rgba(232,117,26,.13);
  border-color:var(--orange);
  color:#fff;
}
/* the underline animation belongs to plain nav links, not to a boxed one */
.nav-links a.nav-fit::after{ display:none; }

@media (min-width:1121px) and (max-width:1420px){
  .nav-links a.nav-fit{ padding:.42rem .6rem; }
}
@media (max-width:1120px){
  /* in the drawer it is a full-width row like everything else */
  .nav-links a.nav-fit{
    display:inline-block; padding:.45rem .9rem; margin:.2rem 0;
  }
}

/* ─── Hero diagram: one-time build-up ───────────────────────────── */
/* The domains arrive one at a time around the ring, the shield lands and
   pulses twice, then the spokes draw out to connect them. It runs once on
   load and then stops — a hero that keeps moving becomes a tic. */
.arch-svg .dib-node,
.arch-svg .dib-core,
.arch-svg .ring,
.arch-svg .dib-frameworks{ opacity:0; }
.arch-svg .spoke{ opacity:0; stroke-dasharray:4 4; stroke-dashoffset:96; }

.arch-svg.play .ring{ animation:archFade 1s ease .1s forwards; }
.arch-svg.play .dib-node{
  transform-box:fill-box; transform-origin:center;
  animation:archNode .52s cubic-bezier(.2,.8,.25,1) both;
}
.arch-svg.play .n1{ animation-delay:.20s; }
.arch-svg.play .n2{ animation-delay:.38s; }
.arch-svg.play .n3{ animation-delay:.56s; }
.arch-svg.play .n4{ animation-delay:.74s; }
.arch-svg.play .n5{ animation-delay:.92s; }
.arch-svg.play .n6{ animation-delay:1.10s; }
.arch-svg.play .n7{ animation-delay:1.28s; }

.arch-svg.play .dib-core{
  transform-box:fill-box; transform-origin:center;
  animation:archCore .7s cubic-bezier(.2,1.3,.35,1) 1.52s both;
}
.arch-svg.play .core-pulse{
  transform-box:fill-box; transform-origin:center;
  animation:archPulse 1.05s ease-out 2.2s 2 both;
}
.arch-svg.play .spoke{ animation:archSpoke .6s ease-out both; }
.arch-svg.play .s1{ animation-delay:2.00s; }
.arch-svg.play .s2{ animation-delay:2.09s; }
.arch-svg.play .s3{ animation-delay:2.18s; }
.arch-svg.play .s4{ animation-delay:2.27s; }
.arch-svg.play .s5{ animation-delay:2.36s; }
.arch-svg.play .s6{ animation-delay:2.45s; }
.arch-svg.play .s7{ animation-delay:2.54s; }
.arch-svg.play .dib-frameworks{ animation:archFade .8s ease 2.75s forwards; }

@keyframes archFade{ to{ opacity:1; } }
@keyframes archNode{
  0%{ opacity:0; transform:scale(.82) translateY(8px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes archCore{
  0%{ opacity:0; transform:scale(.6); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes archPulse{
  0%{ transform:scale(1); opacity:1; }
  55%{ transform:scale(1.16); opacity:.55; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes archSpoke{
  0%{ opacity:0; stroke-dashoffset:96; }
  100%{ opacity:.45; stroke-dashoffset:0; }
}

/* Anyone who skips the animation still gets the finished diagram. */
.arch-svg.done .dib-node, .arch-svg.done .dib-core,
.arch-svg.done .ring, .arch-svg.done .dib-frameworks{ opacity:1; animation:none; }
.arch-svg.done .spoke{ opacity:.45; stroke-dashoffset:0; animation:none; }
@media (prefers-reduced-motion: reduce){
  .arch-svg .dib-node, .arch-svg .dib-core,
  .arch-svg .ring, .arch-svg .dib-frameworks{ opacity:1 !important; animation:none !important; }
  .arch-svg .spoke{ opacity:.45 !important; stroke-dashoffset:0 !important; animation:none !important; }
}

/* ─── Same row-highlight treatment, everywhere it earns its place ── */
/* Repeating rows and cards get the faint orange wash and an accented
   label. Applied only where the element is a discrete item in a set —
   not to body copy, and not to anything already carrying its own hover. */
.cred-item, .trust-item, .cm, .defrow,
.faq-item .faq-q, .dl{
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.cred-item:hover, .trust-item:hover, .cm:hover, .dl:hover{
  background:rgba(232,117,26,.06);
}
.cred-item:hover .cred-label, .cm:hover .cm-n{ color:var(--orange); }
.cred-item .cred-label, .cm .cm-n{ transition:color .18s ease; }
.faq-item .faq-q:hover{ background:rgba(232,117,26,.06); color:#fff; }
.dl:hover{ border-color:rgba(232,117,26,.4); }

/* Cards that already lift keep lifting; they just gain the same wash. */
.nextcard, .brief-item{ transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.nextcard:hover, .brief-item:hover{ background:rgba(232,117,26,.05); }

@media (prefers-reduced-motion: reduce){
  .cred-item, .trust-item, .cm, .defrow, .faq-item .faq-q, .dl,
  .nextcard, .brief-item{ transition:none; }
}

/* ─── Control Coverage Snapshot ─────────────────────────────────── */
/* ── Launcher block on /snapshot/ ── */
.snap-launch{ border:1px solid var(--border); background:var(--card-bg); border-left:2px solid var(--orange); }
.snap-launch-in{ display:flex; gap:2rem; align-items:center; padding:1.8rem 2rem; flex-wrap:wrap; }
.snap-launch-copy{ flex:1 1 320px; min-width:0; }
.snap-launch-title{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.42rem;
  color:var(--white); line-height:1.2; margin-bottom:.5rem;
}
.snap-launch-copy p{ color:var(--gray); font-size:.94rem; line-height:1.7; margin:0 0 .9rem; }
.snap-launch-facts{ list-style:none; margin:0; padding:0; }
.snap-launch-facts li{
  position:relative; padding:.24rem 0 .24rem 1.2rem;
  color:var(--gray); font-size:.87rem; line-height:1.6;
}
.snap-launch-facts li::before{ content:'\203A'; position:absolute; left:.1rem; color:var(--orange); font-weight:700; }
.snap-start{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  background:var(--orange); color:#fff; border:none; cursor:pointer; text-align:left;
  padding:1.1rem 2rem; font-family:'Barlow Condensed',sans-serif;
  clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);
  transition:transform .18s ease, box-shadow .18s ease;
}
.snap-start:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(232,117,26,.85); }
.snap-start-k{ font-weight:800; font-size:1.5rem; letter-spacing:.06em; text-transform:uppercase; line-height:1; }
.snap-start-s{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; opacity:.9; }
@media (max-width:640px){
  .snap-launch-in{ padding:1.4rem 1.3rem; gap:1.3rem; }
  .snap-start{ width:100%; align-items:center; text-align:center; }
}

/* ── The quiz modal ── */
#snap-quiz{
  position:fixed; inset:0; z-index:620; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,15,40,.93); backdrop-filter:blur(7px); padding:4vh 5vw;
  overscroll-behavior:contain;
}
#snap-quiz.active{ display:flex; }
/* The modal box itself must NOT be the scroller — if it is, the header with
   the Close button scrolls away with the questions, and the sticky progress
   bar sticks to a scrollport nobody can see. Pin the header, let only the
   question list scroll, and the bar sticks to the top of THAT. */
.snap-quizbox{
  width:min(760px,100%); max-height:92vh; overflow:hidden;
  display:flex; flex-direction:column;
}
.snap-quizbox > .fitbox-top{ flex:0 0 auto; }
.snap-quizbox > #snap-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  position:relative;
  /* No top padding: sticky top:0 resolves against the scrollport's PADDING
     edge, so any padding-top here leaves a gap above the bar that question
     text scrolls through. The bar supplies its own breathing room instead. */
  padding-top:0;
}
/* Full-bleed the bar across the scroller's side padding. */
.snap-quizbox .snap-progress{ margin-left:-1.9rem; margin-right:-1.9rem; padding-left:1.9rem; padding-right:1.9rem; }
@media (max-width:600px){
  .snap-quizbox .snap-progress{ margin-left:-1.2rem; margin-right:-1.2rem; padding-left:1.2rem; padding-right:1.2rem; }
}
.snap-foot{ margin-top:1.4rem; padding-top:1.3rem; border-top:1px solid var(--border); }
#snap-go{
  width:100%; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; padding:.95rem 1.6rem;
  background:var(--orange); color:#fff; border:none; cursor:pointer;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
#snap-go:hover{ filter:brightness(1.08); }
.snap-foot-note{
  margin-top:.7rem; font-size:.8rem; line-height:1.55; color:#6E7A99; text-align:center;
  transition:color .2s ease;
}
.snap-foot-note.warn{ color:#F08A80; }
.snap-q.missing{
  border-left-color:#F08A80;
  animation:snapShake .5s ease-out;
}
.snap-q.missing .snap-num{ color:#F08A80; }
@keyframes snapShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  45%{ transform:translateX(5px); }
  70%{ transform:translateX(-3px); }
}
@media (prefers-reduced-motion: reduce){ .snap-q.missing{ animation:none; } }

.snap-progress{
  position:sticky; top:0; z-index:20;
  background:var(--navy-deeper);
  border-bottom:1px solid var(--border);
  padding:.85rem 0 .8rem; margin:0 0 1.8rem;
  /* the scroller has side padding; pull the bar out to the edges so the
     segments span the full width and nothing shows through beside it */
  box-shadow:0 12px 22px -18px rgba(0,0,0,1);
  transition:border-bottom-color .3s ease;
}
/* Twenty segments, one per question. Seeing them fill is the point —
   a smooth bar hides how few are left; twenty ticks make it countable. */
.snap-track{ display:flex; gap:3px; height:7px; }
.snap-seg{
  flex:1 1 0; min-width:0; background:rgba(255,255,255,.08);
  border-radius:1px; transition:background .25s ease, transform .25s ease;
}
.snap-seg.on{ background:var(--orange); }
.snap-seg.pop{ animation:snapPop .42s ease-out; }
@keyframes snapPop{
  0%{ transform:scaleY(1); }
  35%{ transform:scaleY(2.3); }
  100%{ transform:scaleY(1); }
}
.snap-read{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.9rem; margin-top:.55rem;
}
.snap-count{
  font-family:'Share Tech Mono',monospace; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gray);
}
.snap-count b{ color:var(--white); font-weight:400; font-size:.92rem; letter-spacing:.04em; }
.snap-nudge{
  font-family:'Share Tech Mono',monospace; font-size:.62rem;
  letter-spacing:.09em; text-transform:uppercase; color:#6E7A99;
  text-align:right; transition:color .3s ease;
}
.snap-progress.close{ border-bottom-color:rgba(232,180,90,.6); }
.snap-progress.close .snap-nudge{ color:#E8B45A; }
.snap-progress.done{ border-bottom-color:rgba(127,212,160,.6); }
.snap-progress.done .snap-nudge{ color:#7FD4A0; }
.snap-progress.done .snap-seg.on{ background:#7FD4A0; }
.snap-progress.warn{ border-bottom-color:rgba(240,138,128,.65); }
.snap-progress.warn .snap-nudge{ color:#F08A80; }
.snap-q.missing{ background:rgba(240,138,128,.055); }
.snap-q.missing .snap-opt{ border-color:rgba(240,138,128,.45); }
@media (prefers-reduced-motion: reduce){
  .snap-seg, .snap-seg.pop{ animation:none; transition:background .2s ease; }
}
.snap-q{
  border-left:2px solid rgba(255,255,255,.08); padding:0 0 1.6rem 1.1rem; margin-bottom:1.6rem;
  transition:border-color .2s ease;
}
.snap-q.done{ border-left-color:rgba(232,117,26,.55); }
/* .qh/.qs were only ever scoped to .fit-q, so on /snapshot/ the helper line
   rendered at the same size and colour as the question and read as part of
   it. Give the snapshot its own pair. */
.snap-q > .qh{
  font-family:'Barlow Condensed',sans-serif; font-size:1.32rem; font-weight:700;
  line-height:1.22; color:var(--white); margin-bottom:.3rem;
}
.snap-q > .qs{ color:#8A95B8; font-size:.85rem; line-height:1.55; }
.snap-meta{ display:flex; gap:.8rem; align-items:baseline; margin-bottom:.45rem; flex-wrap:wrap; }
.snap-num{ font-family:'Share Tech Mono',monospace; font-size:.62rem; letter-spacing:.12em; color:var(--orange); }
.snap-fam{ font-family:'Share Tech Mono',monospace; font-size:.62rem; letter-spacing:.08em; color:#6E7A99; text-transform:uppercase; }
.snap-opts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.snap-opt{
  background:var(--card-bg); border:1px solid var(--border); color:var(--gray);
  font-family:inherit; font-size:.86rem; padding:.55rem 1.1rem; cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.snap-opt:hover{ border-color:rgba(232,117,26,.55); color:var(--white); }
.snap-opt.sel{ background:rgba(232,117,26,.15); border-color:var(--orange); color:#fff; }
#snap-go{
  margin-top:0; width:100%; max-width:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.05rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.95rem 1.6rem;
  background:var(--orange); color:#fff; border:none; cursor:pointer;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
#snap-go:disabled{ background:var(--card-bg); color:var(--gray); cursor:not-allowed; }

#snap-modal{
  position:fixed; inset:0; z-index:640; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,15,40,.93); backdrop-filter:blur(7px); padding:4vh 5vw;
  overscroll-behavior:contain;
}
#snap-modal.active{ display:flex; }
#snap-head{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.1; color:var(--white); margin-bottom:.7rem;
}
#snap-lede{ font-size:.95rem; line-height:1.65; color:var(--gray); margin-bottom:1.5rem; }
.snap-grid{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:1.4rem; }
.snap-row{ background:var(--navy-deeper); padding:.85rem 1rem; }
.snap-row-top{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.3rem; }
.snap-code{ font-family:'Share Tech Mono',monospace; font-size:.68rem; letter-spacing:.1em; color:var(--orange); flex:0 0 auto; }
.snap-name{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.02rem; color:var(--white); flex:1 1 auto; }
.snap-chip{
  flex:0 0 auto; font-family:'Share Tech Mono',monospace; font-size:.6rem;
  letter-spacing:.11em; text-transform:uppercase; padding:.22rem .55rem; border:1px solid;
}
.snap-row.covered .snap-chip{ color:#7FD4A0; border-color:rgba(127,212,160,.5); background:rgba(127,212,160,.09); }
.snap-row.partial .snap-chip{ color:#E8B45A; border-color:rgba(232,180,90,.5); background:rgba(232,180,90,.09); }
.snap-row.gap     .snap-chip{ color:#F08A80; border-color:rgba(240,138,128,.5); background:rgba(240,138,128,.09); }
.snap-row.unknown .snap-chip{ color:#8A95B8; border-color:rgba(138,149,184,.45); background:rgba(138,149,184,.08); }
.snap-what{ font-size:.84rem; line-height:1.6; color:var(--gray); }
.snap-what em{ color:#C8D3F0; font-style:normal; }
.snap-n{ font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.06em; color:#6E7A99; margin-top:.35rem; }
.snap-warn{
  border:1px solid rgba(240,138,128,.35); background:rgba(240,138,128,.05);
  padding:.9rem 1.05rem; font-size:.82rem; line-height:1.65; color:var(--gray); margin-bottom:1.2rem;
}
.snap-warn strong{ color:#F08A80; }
@media (max-width:600px){
  #snap-quiz{ padding:0; }
  .snap-quizbox{ height:100dvh; max-height:100dvh; width:100%; clip-path:none; border:none; }
  #snap-modal{ padding:0; }
  #snap-modal .fitbox{ height:100dvh; max-height:100dvh; clip-path:none; border:none; }
  .snap-opts{ flex-direction:column; }
  .snap-opt{ width:100%; text-align:left; }
}

/* ─── Intern Readiness Check (/intern-check/) ────────────────────
   Shares the modal shell and progress bar with the Twenty Questions,
   but nothing else — this one scores, that one must never. */
#quiz-modal, #quiz-result{
  position:fixed; inset:0; z-index:620; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,15,40,.93); backdrop-filter:blur(7px); padding:4vh 5vw;
  overscroll-behavior:contain;
}
#quiz-result{ z-index:640; }
#quiz-modal.active, #quiz-result.active{ display:flex; }
#quiz-modal .snap-quizbox > #quiz-scroll,
#quiz-result .snap-quizbox > #quiz-rscroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  position:relative; padding-top:0;
}
#quiz-modal .snap-progress{ margin-left:-1.9rem; margin-right:-1.9rem; padding-left:1.9rem; padding-right:1.9rem; }

.quiz-q{
  border-left:2px solid rgba(255,255,255,.08); padding:0 0 1.6rem 1.1rem; margin-bottom:1.6rem;
  transition:border-color .2s ease, background .2s ease;
}
.quiz-q.done{ border-left-color:rgba(232,117,26,.55); }
.quiz-q.missing{ border-left-color:#F08A80; background:rgba(240,138,128,.055); animation:snapShake .5s ease-out; }
.quiz-q.missing .quiz-num{ color:#F08A80; }
@media (prefers-reduced-motion: reduce){ .quiz-q.missing{ animation:none; } }
.quiz-meta{ display:flex; gap:.8rem; align-items:baseline; margin-bottom:.45rem; flex-wrap:wrap; }
.quiz-num{ font-family:'Share Tech Mono',monospace; font-size:.62rem; letter-spacing:.12em; color:var(--orange); }
.quiz-sec{ font-family:'Share Tech Mono',monospace; font-size:.62rem; letter-spacing:.08em; color:#6E7A99; text-transform:uppercase; }
.quiz-q > .qh{
  font-family:'Barlow Condensed',sans-serif; font-size:1.32rem; font-weight:700;
  line-height:1.22; color:var(--white); margin-bottom:.85rem;
}
.quiz-opts{ display:flex; flex-direction:column; gap:.5rem; }
.quiz-opt{
  display:flex; align-items:flex-start; gap:.75rem; text-align:left; width:100%;
  background:var(--card-bg); border:1px solid var(--border); color:var(--gray);
  font-family:inherit; font-size:.9rem; line-height:1.55; padding:.7rem .95rem; cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.quiz-opt:hover{ border-color:rgba(232,117,26,.55); color:var(--white); }
.quiz-opt.sel{ background:rgba(232,117,26,.15); border-color:var(--orange); color:#fff; }
.quiz-letter{
  flex:0 0 auto; font-family:'Share Tech Mono',monospace; font-size:.7rem;
  color:var(--orange); padding-top:.15rem; min-width:1ch;
}
.quiz-opt.sel .quiz-letter{ color:#fff; }
.quiz-otext{ flex:1 1 auto; min-width:0; }
#quiz-go{
  width:100%; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; padding:.95rem 1.6rem;
  background:var(--orange); color:#fff; border:none; cursor:pointer;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
}
#quiz-go:hover{ filter:brightness(1.08); }

/* result */
.quiz-scorebox{
  border:1px solid var(--border); border-left:3px solid var(--orange);
  background:var(--card-bg); padding:1.5rem 1.7rem; margin-bottom:1.8rem;
}
.quiz-scorebox.perfect{ border-left-color:#7FD4A0; }
.quiz-scorebox.pass{ border-left-color:#7FD4A0; }
.quiz-scorebox.under{ border-left-color:#E8B45A; }
.quiz-score{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(2.2rem,6vw,3.1rem); line-height:1; color:var(--white);
}
.quiz-pct{
  font-family:'Share Tech Mono',monospace; font-size:.8rem; letter-spacing:.12em;
  color:var(--orange); margin-top:.3rem;
}
.quiz-scorebox.perfect .quiz-pct, .quiz-scorebox.pass .quiz-pct{ color:#7FD4A0; }
.quiz-scorebox.under .quiz-pct{ color:#E8B45A; }
.quiz-verdict{ color:var(--gray); font-size:.95rem; line-height:1.65; margin-top:.7rem; }
.quiz-rh{
  font-family:'Barlow Condensed',sans-serif; font-size:1.35rem; font-weight:700;
  color:var(--white); margin:0 0 1rem;
}
.quiz-rev{ border:1px solid var(--border); background:var(--navy-deeper); padding:1.1rem 1.25rem; margin-bottom:1rem; }
.quiz-rev-n{ font-family:'Share Tech Mono',monospace; font-size:.62rem; letter-spacing:.1em; color:#6E7A99; text-transform:uppercase; margin-bottom:.4rem; }
.quiz-rev-q{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.1rem; color:var(--white); line-height:1.25; margin-bottom:.8rem; }
.quiz-rev-row{ display:flex; gap:.7rem; align-items:flex-start; font-size:.87rem; line-height:1.55; margin-bottom:.35rem; }
.quiz-rev-tag{
  flex:0 0 74px; font-family:'Share Tech Mono',monospace; font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; padding-top:.22rem;
}
.quiz-rev-row.wrong{ color:#C3A0A0; } .quiz-rev-row.wrong .quiz-rev-tag{ color:#F08A80; }
.quiz-rev-row.right{ color:var(--white); } .quiz-rev-row.right .quiz-rev-tag{ color:#7FD4A0; }
.quiz-rev-why{ color:var(--gray); font-size:.85rem; line-height:1.65; margin-top:.7rem; padding-top:.7rem; border-top:1px solid rgba(255,255,255,.06); }
.quiz-rev-src{
  display:inline-block; margin-top:.6rem; color:var(--orange); text-decoration:none;
  font-family:'Share Tech Mono',monospace; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
}
.quiz-rev-src:hover{ text-decoration:underline; }
.quiz-allright{
  border:1px solid rgba(127,212,160,.4); background:rgba(127,212,160,.07);
  color:#7FD4A0; padding:1rem 1.2rem; font-size:.92rem; margin-bottom:1.6rem;
}
.quiz-send{ border-top:1px solid var(--border); padding-top:1.5rem; margin-top:1.6rem; }
.quiz-send h3{ font-family:'Barlow Condensed',sans-serif; font-size:1.3rem; font-weight:700; color:var(--white); margin:0 0 .4rem; }
.quiz-send > p{ color:var(--gray); font-size:.9rem; line-height:1.6; margin:0 0 1.1rem; }
.quiz-field{ display:block; margin-bottom:.9rem; }
.quiz-field > span{
  display:block; font-family:'Share Tech Mono',monospace; font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:#6E7A99; margin-bottom:.35rem;
}
.quiz-field input{
  width:100%; background:var(--card-bg); border:1px solid var(--border);
  color:var(--white); font-family:inherit; font-size:.95rem; padding:.7rem .9rem;
}
.quiz-field input:focus{ outline:none; border-color:var(--orange); }
.quiz-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#quiz-submit{ width:100%; margin-top:.4rem; text-align:center; }
#quiz-submit:disabled{ opacity:.6; cursor:wait; }
.quiz-msg{ margin-top:.8rem; font-size:.88rem; line-height:1.6; }
.quiz-msg.good{ color:#7FD4A0; }
.quiz-msg.bad{ color:#F08A80; }
.quiz-msg a{ color:var(--orange); }
.quiz-retake{ margin-top:1.1rem; text-align:center; }
@media (max-width:600px){
  #quiz-modal, #quiz-result{ padding:0; }
  #quiz-modal .snap-quizbox, #quiz-result .snap-quizbox{
    height:100dvh; max-height:100dvh; width:100%; clip-path:none; border:none;
  }
  #quiz-modal .snap-progress{ margin-left:-1.2rem; margin-right:-1.2rem; padding-left:1.2rem; padding-right:1.2rem; }
  .quiz-rev-tag{ flex:0 0 100%; }
  .quiz-rev-row{ flex-direction:column; gap:.15rem; }
}

/* ── Completion record (the thing they screenshot) ──
   Deliberately self-contained: everything a reader needs is inside the
   card's own border, so a cropped screenshot still makes sense. */
.quiz-receipt{
  border:1px solid var(--border); border-top:3px solid var(--orange);
  background:linear-gradient(180deg, rgba(28,45,107,.28), var(--navy-deeper) 62%);
  padding:1.6rem 1.7rem 1.4rem; margin-top:1.5rem;
}
.quiz-receipt.perfect, .quiz-receipt.pass{ border-top-color:#7FD4A0; }
.quiz-receipt.under{ border-top-color:#E8B45A; }
.qr-head{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:1.1rem;
  padding-bottom:.8rem; border-bottom:1px solid rgba(255,255,255,.08); }
.qr-mark{
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.15rem;
  letter-spacing:.16em; color:var(--white); text-transform:uppercase;
}
.qr-kind{
  font-family:'Share Tech Mono',monospace; font-size:.62rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--orange);
}
.qr-name{
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:clamp(1.5rem,4vw,2rem); line-height:1.1; color:var(--white); margin-bottom:1.1rem;
}
.qr-big{ display:flex; gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:1.1rem; }
.qr-big-item{ flex:1 1 0; background:var(--navy-deeper); padding:.95rem 1.1rem; text-align:center; }
.qr-big-v{
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(1.7rem,5vw,2.4rem); line-height:1; color:var(--white);
}
.quiz-receipt.perfect .qr-big-v, .quiz-receipt.pass .qr-big-v{ color:#7FD4A0; }
.quiz-receipt.under .qr-big-v{ color:#E8B45A; }
.qr-big-l{
  font-family:'Share Tech Mono',monospace; font-size:.58rem; letter-spacing:.13em;
  text-transform:uppercase; color:#6E7A99; margin-top:.35rem;
}
.qr-rows{ border-top:1px solid rgba(255,255,255,.07); }
.qr-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.qr-row span{
  font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; color:#6E7A99; flex:0 0 auto;
}
.qr-row b{ color:var(--white); font-weight:400; font-size:.9rem; text-align:right; word-break:break-word; }
.qr-mono{ font-family:'Share Tech Mono',monospace !important; letter-spacing:.08em; color:var(--orange) !important; }
.qr-foot{
  margin-top:.9rem; font-size:.78rem; line-height:1.55; color:var(--gray);
  border-left:2px solid var(--orange); padding-left:.7rem;
}
/* once sent, the form collapses and the record stands in its place */
.quiz-send.done .quiz-field,
.quiz-send.done #quiz-submit,
.quiz-send.done > p{ display:none; }
.quiz-after{ margin-top:1.4rem; }
@media (max-width:600px){
  .quiz-receipt{ padding:1.2rem 1.1rem 1.1rem; }
  .qr-row{ flex-direction:column; gap:.1rem; }
  .qr-row b{ text-align:left; }
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--orange);color:#fff;padding:0.7rem 1.2rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;}
.skip-link:focus{left:0;}