/* Landing page base — extracted verbatim from the live index.html inline <style> blocks.
   The directions' skin.css is linked AFTER this: it overrides, it does not start from zero. */

@layer reset, tokens, base, layout, components, utilities, responsive, legacy;

/* ---------------------------------------------------------------------------
   Libertas AI Solutions — stylesheet structure
   Generated by tools/structure.py from the production index.html.
   Cascade order is decided by the @layer line above and nowhere else.
   Regions: 1 reset · 2 tokens · 3 base · 4 layout · 5 components · 6 responsive · 7 keyframes
   --------------------------------------------------------------------------- */

/* ==================================================
   1. RESET      — box model + media defaults
   ================================================== */

@layer reset {

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

/* ======================================================================================
   2. TOKENS     — tier 1 primitives, tier 2 semantic; components use tier 2 only
   ====================================================================================== */

@layer tokens {

    :root {
      /* Libertas palette */
      --navy:      #1B3A6B;  /* Liberty Navy — leads */
      --red:       #C8102E;  /* Signal Red — punctuation only */
      --ink:       #0A1628;  /* Dark surfaces */
      --midnight:  #0F2547;
      --steel:     #5A6783;
      --mist:      #C9D1E0;
      --paper:     #F4F5F8;
      --grey:      #EAEDF1;  /* page background */
      --white:     #ffffff;

      --text:        var(--ink);
      --text-secondary: var(--steel);
      --border:      rgba(27,58,107,0.14);
      --border-light:rgba(27,58,107,0.08);
      --radius: 10px;
      --max-w: 1140px;

      --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
      --body: 'Barlow', system-ui, -apple-system, sans-serif;
    }
}

/* ===========================================================================
   3. BASE       — element defaults, focus ring, reduced-motion escape
   =========================================================================== */

@layer base {

    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

    body {
      font-family: var(--body);
      color: var(--text);
      background: var(--grey);
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
      font-size: 17px;
    }


    /* ---- TYPE ---- */
    h1, h2, h3, .eyebrow, .price-range, .step h3, .logo .word, .stat-num {
      font-family: var(--display);
    }


    /* NAV */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--ink); border-bottom: 1px solid rgba(255,255,255,0.10) }


    /* FOOTER */
    footer { background: var(--ink); color: #fff; padding: 72px 0 36px; }

/* Focus ring, restored. v3 ships no :focus-visible rule anywhere, so a keyboard user cannot see where
   they are on any control. It paints only for keyboard focus, so no mouse-driven layout moves. */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
}

/* =========================================================
   4. LAYOUT     — containers, section rhythm, grids
   ========================================================= */

@layer layout {

    .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

    nav .container { display: grid; grid-template-columns: minmax(150px,1fr) auto minmax(405px,1fr); align-items: center; column-gap: 16px; height: 72px; }

    section[id] { scroll-margin-top: 88px; }


    /* baseline device — thick navy underline from the L's base stroke */
    .baseline { display: inline-block; width: 56px; height: 5px; border-radius: 3px; background: var(--navy); margin-top: 22px; }

    .baseline.center { margin-left: auto; margin-right: auto; }

    .industries-grid { display: flex; justify-content: center; gap: 14px 40px; flex-wrap: wrap; align-items: center; }

    .industries-grid .item { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.62; }

    .usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }


    /* SECTION COMMON */
    section { padding: 104px 0; }

    .section-title { font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 56px); letter-spacing: 0; line-height: 1.0; color: var(--ink); }

    .section-desc { font-size: 18px; color: var(--text-secondary); max-width: 600px; line-height: 1.6; }

    .section-header { text-align: center; margin-bottom: 64px; display: flex; flex-direction: column; align-items: center; }

    .section-header .section-desc { margin: 18px auto 0; }

    .steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }

    .security-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }

    .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }

    .footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 52px; }


    /* AGENTIC */
    .agentic { margin-top: 88px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 48px; align-items: stretch; }

    .agentic h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: #fff; margin: 14px 0 16px; letter-spacing: 0.3px; }
@media (max-width: 880px) {
  .usecase-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  nav .container { grid-template-columns: auto minmax(0,1fr) auto; }
}
@media (max-width: 880px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .security-grid { grid-template-columns: 1fr; }
  .agentic { grid-template-columns: 1fr; margin-top: 64px; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  section { padding: 64px 0; }
  .steps { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }  }
}

/* ==========================================================================================
   5. COMPONENTS — one namespace per component (.btn, .step, .uc-*, .price-*, .cta-*)
   ========================================================================================== */

@layer components {
  /* footer heading pinned to the exact h4 declarations it replaces */
  footer h3 { font-family: var(--display); font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--mist); text-transform: uppercase; letter-spacing: 1.5px }


    /* faint engineering-grid texture for dark surfaces (<=6% opacity) */
    .grid-bg { position: relative; }

    .grid-bg::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000 40%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000 40%, transparent 100%);
    }

    /* faint engineering-grid texture for light surfaces */
    .grid-bg-light { position: relative; }

    .grid-bg-light::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(27,58,107,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27,58,107,0.06) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000 40%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000 40%, transparent 100%);
    }

    /* beacon rings — concentric light-signal motif */
    .beacon-decor { position: absolute; pointer-events: none; z-index: -1; }

    .beacon-decor svg { display: block; }

    .beacon-decor.beacon-pulse circle.ring { transform-origin: 100px 100px; animation: beaconPulse 3.6s ease-out infinite; }

    .beacon-decor.beacon-pulse circle.ring2 { animation-delay: 1.2s; }

    .beacon-decor.beacon-pulse circle.ring3 { animation-delay: 2.4s; }

    /* small beacons flanking the header CTA */
    .beacon-mini { width: 34px; height: 34px; pointer-events: none; flex: none; position: relative; z-index: 5; }

    .beacon-mini svg { display: block; overflow: visible; }

    .beacon-mini circle.ring { transform-origin: 100px 100px; animation: beaconPulse 3.6s ease-out infinite; }

    .beacon-mini circle.ring2 { animation-delay: 1.2s; }

    .beacon-mini circle.ring3 { animation-delay: 2.4s; }

    .beacon-inline { display: inline-flex; width: 15px; height: 15px; vertical-align: middle; margin-right: 6px; margin-top: -2px; pointer-events: none; }

    .beacon-inline svg { display: block; overflow: visible; }

    .beacon-inline circle.ring { transform-origin: 100px 100px; animation: beaconPulse 3.6s ease-out infinite; }

    .beacon-inline circle.ring2 { animation-delay: 1.2s; }

    .beacon-inline circle.ring3 { animation-delay: 2.4s; }

    /* fixed beacon in the hero's top-left corner */
    .beacon-corner { position: absolute; top: 40px; left: 40px; z-index: 0; pointer-events: none; opacity: 0.5; }

    .beacon-corner svg { display: block; }


    /* ---- LOGO MARK ---- */
    .mark { display: block; flex: none; }

    .logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }

    .logo .word { display: flex; flex-direction: column; line-height: 0.92; }

    .logo .word b { font-weight: 800; font-size: 22px; letter-spacing: 0.5px; color: var(--navy); text-transform: uppercase; }

    .logo .word small { font-weight: 600; font-size: 10px; letter-spacing: 3.5px; color: var(--steel); text-transform: uppercase; margin-top: 2px; }

    .logo { justify-self: start; }

    .nav-cta { justify-self: center; display: flex; align-items: center; gap: 10px; }

    .beacon-nav { width: 22px; height: 22px; pointer-events: none; flex: none; position: relative; z-index: 5; }

    .beacon-nav svg { display: block; overflow: visible; }

    .beacon-nav circle.ring { transform-origin: 100px 100px; animation: beaconPulse 3.6s ease-out infinite; }

    .beacon-nav circle.ring2 { animation-delay: 1.2s; }

    .beacon-nav circle.ring3 { animation-delay: 2.4s; }

    .nav-cta .btn { font-size: 14px; padding: 10px 18px; white-space: normal; text-align: center; line-height: 1.25; max-width: 280px; }

    .nav-links { justify-self: end; display: flex; gap: 16px; align-items: center; }

    .nav-links a { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; white-space: nowrap; }

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

    .nav-links a.btn-red { color: #fff; }

    .nav-links a.btn-red:hover { color: #fff; }


    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 11px 20px; border-radius: 7px;
      font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: 0.4px;
      text-transform: uppercase; text-decoration: none; cursor: pointer;
      transition: all 0.15s; border: 1.5px solid transparent; white-space: nowrap;
    }

    .btn-primary { background: var(--navy); color: #fff; }

    .btn-primary:hover { background: var(--midnight); }

    .btn-secondary { background: transparent; color: var(--navy); border-color: var(--border); }

    .btn-secondary:hover { border-color: var(--navy); background: var(--paper); }

    .btn-red { background: var(--red); color: #fff; }

    .btn-red:hover { background: #a50d26; }

    .btn-large { padding: 15px 28px; font-size: 18px; border-radius: 8px; }


    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 15px; font-weight: 700; color: var(--navy);
      text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px;
    }

    .eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
 /* beacon */

    /* HERO */
    .hero { padding: 110px 0 96px; text-align: center; background: var(--white); position: relative; overflow: hidden; z-index: 0; }

    .hero .tagline {
      font-family: var(--display); font-weight: 700; text-transform: uppercase;
      font-size: clamp(15px, 2.2vw, 19px); letter-spacing: 3px; color: var(--navy);
      margin-bottom: 26px;
    }

    .hero .tagline .free { color: var(--red); }

    .hero h1 {
      font-weight: 800; text-transform: uppercase;
      font-size: clamp(46px, 7vw, 86px); letter-spacing: 0px; line-height: 0.95;
      max-width: 900px; margin: 0 auto 26px; color: var(--ink);
    }

    .hero p {
      font-size: 20px; color: var(--text-secondary);
      max-width: 660px; margin: 0 auto 40px; line-height: 1.55; text-wrap: pretty;
    }

    /* Pull-out line: the sentence that used to end the lede, given its own line in the hero's
       display idiom (uppercase Condensed, navy, the three nouns in signal red) so it reads as
       the payoff instead of the tail of a paragraph. Selector must out-specify `.hero p`. */
    .hero p.hero-lede { margin-bottom: 14px; }
    .hero p.hero-punch {
      font-family: var(--display); font-weight: 700; text-transform: uppercase;
      letter-spacing: 1.6px; line-height: 1.3; font-size: clamp(19px, 2.6vw, 28px);
      color: var(--navy); max-width: 900px; margin: 0 auto 40px;
    }
    /* Underline the three nouns. Em-based so it scales with the clamp; skip-ink (the
       default) breaks the rule around the descenders in productivity/margin/revenue.
       Line-height is 1.3 rather than 1.15 so the rule cannot touch the cap-tops of the
       second line when the line wraps at phone width. */
    .hero p.hero-punch span {
      color: var(--red); text-decoration: underline; text-decoration-color: var(--red);
      text-decoration-thickness: 0.075em; text-underline-offset: 0.22em;
    }

    .hero-actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: nowrap; }
    .hero-actions .btn { min-width: 0; }
    @media (max-width: 560px) {
      .hero-actions { flex-direction: column; }
      .hero-actions .btn { width: 100%; }
    }


    /* INDUSTRIES STRIP */
    .industries { padding: 52px 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); background: transparent; }

    .industries > .container > p { text-align: center; font-size: 13px; font-weight: 600; color: var(--steel); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 28px; display: flex; align-items: center; justify-content: center; gap: 9px; }

    .industries > .container > p::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }


    /* USE-CASE PANEL */
    .usecase-panel { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border-light); }

    .amplify-word { position: relative; color: var(--red); display: inline-flex; align-items: baseline; gap: 8px; }

    .amp-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 0.6em; transform: translateY(2px); }

    .amp-bars span { display: block; width: 4px; background: var(--red); border-radius: 2px; animation: ampBar 1.1s ease-in-out infinite; }

    .amp-bars span:nth-child(1) { animation-delay: 0s; }

    .amp-bars span:nth-child(2) { animation-delay: 0.15s; }

    .amp-bars span:nth-child(3) { animation-delay: 0.3s; }

    .amp-bars span:nth-child(4) { animation-delay: 0.45s; }

    .usecase-head { text-align: center; max-width: 820px; margin: 0 auto 36px; }

    .usecase-head h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3vw, 34px); color: var(--ink); letter-spacing: 0.3px; }

    .usecase-head p { font-size: 16px; color: var(--text-secondary); line-height: 1.6; margin-top: 14px; }

    .uc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px 26px; box-shadow: 0 2px 8px rgba(15,23,42,0.05); display: flex; flex-direction: column; }

    .uc-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 21px; color: var(--navy); }

    .uc-rule { margin: 12px 0 16px; }

    .uc-bn { margin-bottom: 14px; }

    .uc-oc { margin-top: auto; }

    .usecase-rule { display: block; width: 32px; height: 3px; background: var(--navy); border-radius: 2px; }

    .usecase-line { font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); }

    .usecase-line b { color: var(--ink); font-weight: 700; }

    .usecase-outcome { color: var(--text-secondary); font-weight: 400; }

    .usecase-outcome b { color: var(--red); font-weight: 700; }


    /* HOW IT WORKS */
    .how-it-works { background: var(--navy); position: relative; overflow: hidden; z-index: 0; }

    .how-it-works .section-title { color: #fff; }

    .how-it-works .section-desc { color: var(--mist); }

    .how-it-works .eyebrow { color: #fff; }

    .flow-dots { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }

    .flow-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: 0.25; animation: flowDot 1.4s ease-in-out infinite; }

    .flow-dots span:nth-child(1) { animation-delay: 0s; }

    .flow-dots span:nth-child(2) { animation-delay: 0.2s; }

    .flow-dots span:nth-child(3) { animation-delay: 0.4s; }

    .shield-pulse { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; width: 16px; height: 18px; }

    .shield-pulse svg { position: relative; z-index: 1; display: block; }

    .shield-pulse .check { stroke-dasharray: 10; stroke-dashoffset: 10; animation: shieldCheck 2.4s ease-in-out infinite; }

    .shield-ring { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--red); opacity: 0; animation: shieldRing 2.4s ease-out infinite; }

    .flatline { display: inline-flex; align-items: center; margin-left: 6px; }

    .amplifying-text { color: var(--red); font-weight: 700; }

    .amplifying-text span { display: inline-block; animation: letterWave 1.8s ease-in-out 2; animation-play-state: paused; }

    .amplifying-text.play span { animation-play-state: running; }

    .amplifying-text span:nth-child(1) { animation-delay: 0.00s; }

    .amplifying-text span:nth-child(2) { animation-delay: 0.06s; }

    .amplifying-text span:nth-child(3) { animation-delay: 0.12s; }

    .amplifying-text span:nth-child(4) { animation-delay: 0.18s; }

    .amplifying-text span:nth-child(5) { animation-delay: 0.24s; }

    .amplifying-text span:nth-child(6) { animation-delay: 0.30s; }

    .amplifying-text span:nth-child(7) { animation-delay: 0.36s; }

    .amplifying-text span:nth-child(8) { animation-delay: 0.42s; }

    .amplifying-text span:nth-child(9) { animation-delay: 0.48s; }

    .amplifying-text span:nth-child(10) { animation-delay: 0.54s; }

    .flatline .fl-spiky { animation: flSpiky 3s ease-in-out infinite; }

    .flatline .fl-flat { opacity: 0; animation: flFlat 3s ease-in-out infinite; }

    .how-it-works .baseline.center { background: var(--red); }

    .step {
      padding: 26px 18px; background: #fff; border: 1px solid var(--border);
      border-right: none; position: relative;
    }

    .step:first-child { border-radius: var(--radius) 0 0 var(--radius); }

    .step:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }

    .step-num { font-family: var(--display); font-size: 30px; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: 14px; opacity: 0.22; }

    .step h3 { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 8px; color: var(--navy); line-height: 1.05; }

    .step p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

    /* animated beacon connector dots between steps */
    .step-beacon { position: absolute; right: -9px; top: 50%; z-index: 2; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }

    .step-beacon svg { display: block; overflow: visible; }

    .step-beacon circle.ring { transform-origin: 100px 100px; animation: beaconPulse 3.6s ease-out infinite; }

    .step-beacon circle.ring2 { animation-delay: 1.2s; }

    .step-beacon circle.ring3 { animation-delay: 2.4s; }


    /* SECURITY */
    .security-section { background: var(--white); position: relative; overflow: hidden; }

    .cost-section { background: var(--navy); position: relative; overflow: hidden; z-index: 0; }

    .cost-section .section-title { color: #fff; }

    .cost-section .section-desc { color: rgba(255,255,255,0.85); }

    .cost-section .eyebrow { color: #fff; }

    .cost-section .eyebrow::before { background: var(--red); }

    .cost-section .baseline.center { background: #fff; }

    .sec-card {
      padding: 32px 28px; border-radius: 12px;
      border: 1px solid var(--border); background: var(--white);
      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
      text-align: center;
    }

    .sec-card:hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: 0 16px 40px -22px rgba(27,58,107,0.45); }

    .sec-icon { margin-bottom: 18px; display: flex; justify-content: center; }

    .sec-card h3 { font-family: var(--display); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; color: var(--navy); }

    .sec-card p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; text-wrap: pretty; }


    /* PRICING */
    .pricing { background: var(--paper); }

    .price-card {
      padding: 30px 24px; border-radius: 14px;
      border: 1px solid var(--border);
      background: #fff; position: relative;
      display: flex; flex-direction: column;
    }

    .price-card.featured { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }

    .price-card .tag {
      position: absolute; top: -12px; left: 24px;
      background: var(--red); color: #fff;
      font-family: var(--display); font-size: 12px; font-weight: 700; padding: 4px 12px;
      border-radius: 999px; text-transform: uppercase; letter-spacing: 1px;
    }

    .price-card h3 { font-family: var(--display); font-size: 23px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; color: var(--navy); }

    .price-range { font-size: 34px; font-weight: 800; margin: 14px 0 6px; letter-spacing: 0; color: var(--ink); line-height: 1; }

    .price-range span { font-size: 16px; color: var(--steel); font-weight: 600; }

    .price-desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 18px; }

    .price-card ul { list-style: none; margin-bottom: 24px; flex-grow: 1; }

    .price-card ul li { font-size: 14px; color: var(--text-secondary); padding: 7px 0 7px 24px; position: relative; border-bottom: 1px solid var(--border-light); }

    .price-card ul li:last-child { border: none; }

    .price-card ul li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }

    .price-card.featured ul li::before { background: var(--red); }

    .price-card .btn { width: 100%; justify-content: center; }


    /* CTA */
    .cta { padding: 104px 0; position: relative; overflow: hidden; z-index: 0; background: var(--white); }

    .cta > .container { position: relative; z-index: 1; }

    .beacon-corner.br { top: auto; left: auto; bottom: 40px; right: 40px; }

    .cta-box {
      padding: 84px 40px; border-radius: 18px;
      background: var(--ink); color: #fff; text-align: center;
      overflow: hidden; z-index: 0;
    }

    .cta-box .tagline { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; font-size: clamp(14px,2vw,18px); color: var(--mist); margin-bottom: 18px; position: relative; }

    .cta-box .tagline .free { color: var(--red); }

    .cta-box h2 { font-family: var(--display); font-size: clamp(34px, 5vw, 60px); font-weight: 800; text-transform: uppercase; letter-spacing: 0; line-height: 0.98; margin-bottom: 18px; position: relative; }

    .cta-box p { font-size: 19px; color: rgba(255,255,255,0.72); max-width: 520px; margin: 0 auto 36px; position: relative; }

    .cta-box .btn { position: relative; }

    .cta-box.cta-red { background: var(--navy); box-shadow: 0 30px 60px -30px rgba(15,37,71,0.6); }

    .cta-red.grid-bg::before { background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px); }

    .cta-red .tagline { color: #fff; }

    .cta-red .tagline .free { color: #fff; background: var(--red); padding: 3px 10px; border-radius: 5px; white-space: nowrap; }

    .cta-red h2 { color: #fff; }

    .cta-red p { color: #fff; }

    .cta-red .tagline { color: var(--mist); }

    .cta-red .btn-cta { background: var(--red); color: #fff; border-color: var(--red); }

    .cta-red .btn-cta:hover { background: #a50d26; color: #fff; border-color: #a50d26; }

    .cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .cta-or { color: rgba(255,255,255,0.75); font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .nav-cta .cta-or { font-size: 13px; letter-spacing: .06em; }
  /* The hero action row sits on the LIGHT hero panel, where the default white
     separator is white on white (contrast 1.00) - invisible. Solid navy is 11.2:1
     there, matching the header instance's legibility (10.44) exactly. The CTA box
     keeps the white default: it is navy. */
    .hero .cta-or { color: #1B3A6B; }
  .cta-actions { flex-wrap: nowrap; }
  .cta-actions .btn { min-width: 0; }
  @media (max-width: 560px) {
    .cta-actions { flex-direction: column; gap: 10px; }
    .cta-actions .beacon-mini { display: flex; }
    .cta-actions .btn { width: 100%; }
  }

    .footer-brand .logo .word b { color: #fff; }

    .footer-brand .logo .word small { color: var(--mist); }

    .footer-brand p { font-size: 15px; color: rgba(255,255,255,0.62); margin-top: 16px; line-height: 1.65; max-width: 340px; }

    .footer-col h4 { font-family: var(--display); font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--mist); text-transform: uppercase; letter-spacing: 1.5px; }

    .footer-col a { display: block; font-size: 15px; color: rgba(255,255,255,0.66); text-decoration: none; padding: 5px 0; transition: color 0.15s; }

    .footer-col a:hover { color: #fff; }

    .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 13px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 8px; }

    .footer-bottom .tag-line { font-family: var(--display); text-transform: uppercase; letter-spacing: 2px; }

    .agentic-kicker { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 10px; }

    .agentic-kicker::before { content: ''; width: 22px; height: 2px; background: var(--red); }

    .agentic-intro { font-size: 17px; line-height: 1.6; color: var(--mist); max-width: 560px; text-wrap: pretty; }

    .principles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 30px; }

    .principle { border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); border-radius: var(--radius); padding: 18px 18px 16px; }

    .principle h4 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; font-size: 18px; color: #fff; display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }

    .principle h4::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }

    .principle p { font-size: 14px; line-height: 1.55; color: var(--mist); text-wrap: pretty; }

    .orch { background: #fff; border-radius: var(--radius); padding: 28px 26px 22px; box-shadow: 0 24px 50px -24px rgba(0,0,0,0.5); display: flex; flex-direction: column; }

    .orch-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; color: var(--steel); margin-bottom: 18px; }

    .orch-flow { position: relative; display: flex; flex-direction: column; gap: 18px; flex: 1; justify-content: space-between; }

    .orch-rail { position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--grey); }

    .orch-pulse { position: absolute; left: 11px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(200,16,46,0.18); animation: orchTravel 7.5s cubic-bezier(.55,0,.45,1) infinite; }

    .orch-stage { position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 14px; align-items: start; }

    .orch-node { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--mist); background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--navy); position: relative; z-index: 1; animation: orchNode 7.5s ease-in-out infinite; }

    .orch-stage:nth-child(3) .orch-node { animation-delay: 0s; }

    .orch-stage:nth-child(4) .orch-node { animation-delay: 1.5s; }

    .orch-stage:nth-child(5) .orch-node { animation-delay: 3s; }

    .orch-stage:nth-child(6) .orch-node { animation-delay: 4.5s; }

    .orch-stage:nth-child(7) .orch-node { animation-delay: 6s; }

    .orch-stage h5 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-size: 18px; color: var(--navy); line-height: 1.1; margin-top: 5px; }

    .orch-stage p { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin-top: 3px; text-wrap: pretty; }

    .orch-agents { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

    .orch-agents span { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; color: var(--navy); border: 1px solid var(--mist); border-radius: 999px; padding: 3px 10px; animation: orchAgent 7.5s ease-in-out infinite; }

    .orch-agents span:nth-child(1) { animation-delay: 1.5s; }

    .orch-agents span:nth-child(2) { animation-delay: 1.75s; }

    .orch-agents span:nth-child(3) { animation-delay: 2s; }
@media (prefers-reduced-motion: reduce) {
  .orch-pulse, .orch-node, .orch-agents span { animation: none; }
}
@media (max-width: 560px) {
  .beacon-nav { display: none; }
  .nav-cta .btn { font-size: 12px; padding: 8px 12px; max-width: 190px; }
  .btn, .btn-large { white-space: normal; text-align: center; }
  .hero-actions, .cta-actions { gap: 8px; }
  .beacon-mini { flex: none; }
  .hc-callout > * { min-width: 0; }
}

    .hero.grid-bg-light::before { mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%); }

    .hero .sec-card { background: #fff; }

    .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--navy); align-items: center; justify-content: center; cursor: pointer; justify-self: end; padding: 0; }
@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  nav.open .nav-links { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 14px 28px -14px rgba(15,23,42,0.3); padding: 6px 0; }
  nav.open .nav-links a { padding: 14px 24px; font-size: 16px; }
}
@media (max-width: 560px) {
  nav .logo .word { display: none; } .footer-brand .logo .word { display: flex; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
}
@media (max-width: 880px) {
  .nav-links { gap: 18px; }
  .step:nth-child(3) { border-right: 1px solid var(--border); }
  .step:nth-child(-n+3) { border-bottom: none; }
}
@media (max-width: 560px) {
  .hero { padding: 72px 0 56px; }
  .cta-box { padding: 56px 24px; }
}

/* --- recovered from inline style attributes; GENERATED, not retyped --- */
.explore-block { margin-top: 72px; text-align: left; }
.explore-grid { position: relative; z-index: 1; }
.sec-card { text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
.sec-card h3 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.amp-bars { margin-left: 6px; height: 0.75em; }
.sec-card > span { margin-top: auto; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; font-size: 15px; color: var(--red); }
.flow-dots { margin-left: 8px; } .sector-orbit { margin-left: 8px; }
.shield-pulse { margin-left: 8px; }
.flatline { margin-left: 8px; }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.22); border-radius: 8px; color: rgba(255,255,255,0.8); transition: color .15s, border-color .15s, background .15s; }
}

/* =====================================================================================================
   6. RESPONSIVE — every media-query override; last in order so it wins on layer, not !important
   ===================================================================================================== */

@layer responsive {
@media (max-width: 880px) {
  .uc-bn { min-height: 0; }
}
@media (max-width: 560px) {
  .hc-callout { grid-template-columns: minmax(0,1fr); padding: 24px 20px; }
  .hc-callout a { min-width: 0; }
  .hc-callout p { font-size: 16px; }
}

    .explore-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) {
  .explore-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .explore-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 880px) {
  .step { border-radius: 0; }
}
}

/* =====================================================
   7. KEYFRAMES   — not style rules, not layered
   ===================================================== */


    @keyframes beaconPulse {
      0% { transform: scale(0.5); opacity: 0.9; }
      100% { transform: scale(5); opacity: 0; }
    }

    @keyframes ampBar {
      0%, 100% { height: 30%; }
      50% { height: 100%; }
    }

    @keyframes flowDot {
      0%, 60%, 100% { opacity: 0.25; transform: scale(1); }
      30% { opacity: 1; transform: scale(1.3); }
    }

    @keyframes shieldCheck {
      0%, 40% { stroke-dashoffset: 10; }
      60%, 100% { stroke-dashoffset: 0; }
    }

    @keyframes shieldRing {
      0% { transform: scale(0.6); opacity: 0; }
      45% { opacity: 0.6; }
      100% { transform: scale(1.4); opacity: 0; }
    }

    @keyframes letterWave {
      0%, 60%, 100% { transform: scale(1); }
      30% { transform: scale(1.5); }
    }

    @keyframes flSpiky {
      0%, 55% { opacity: 1; }
      70%, 100% { opacity: 0; }
    }

    @keyframes flFlat {
      0%, 55% { opacity: 0; }
      70%, 100% { opacity: 1; }
    }

    @keyframes orchTravel {
      0% { top: 12px; opacity: 0; } 4% { opacity: 1; }
      92% { top: calc(100% - 22px); opacity: 1; } 100% { top: calc(100% - 22px); opacity: 0; }
    }

    @keyframes orchNode {
      0%, 18%, 100% { border-color: var(--mist); background: #fff; color: var(--navy); }
      3%, 12% { border-color: var(--red); background: var(--red); color: #fff; }
    }

    @keyframes orchAgent {
      0%, 20%, 100% { background: transparent; border-color: var(--mist); }
      4%, 14% { background: var(--paper); border-color: var(--navy); }
    }

/* ==============================================================================================
   98. LEGACY     — pre-refactor rules not yet reimplemented (empty = migration complete)
   ============================================================================================== */

@layer utilities {
.accent-signal { color: var(--red); }
.nowrap-flex { white-space: nowrap; display: inline-flex; align-items: center; }
.u-pretty { text-wrap: pretty; }
.u-underline-thin { text-decoration-thickness: 1px; }
}

/* Steps grid: one card per row on phones (<=560px). Every card is then row-ending, so every card needs its
   own right border and only the last keeps a bottom edge; internal lines come from the next card's top.
   Replaces the 2-column rules, where card 3's right border doubled against card 4's left. */
@media (max-width: 560px) {
  .step { border-right: 1px solid var(--border); border-bottom: none; }
  .step:last-child { border-bottom: 1px solid var(--border); }
}

/* ---- TOP BAR MATCHED TO THE FOOTER (2026-09-27) -----------------------------------------------
   The footer is ink with white/mist text and a white/10 divider. The bar was translucent white with
   navy/steel text, which cannot sit on an ink background: navy on ink is ~1.5:1, and the beacon's navy
   ring would vanish. These overrides mirror the footer's palette exactly. Unlayered and last, so they
   beat the base rules on specificity and on order. */
nav .logo .word b      { color: #fff }                      /* footer-brand equivalent */
nav .logo .word small  { color: var(--mist) }
nav .nav-links a       { color: rgba(255,255,255,0.72) }
nav .nav-links a:hover { color: #fff }
nav .menu-toggle       { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: #fff }
@media (max-width: 960px) {   /* the dropdown panel only exists at mobile width */
@media (max-width: 960px) {   /* the dropdown panel only exists at mobile width */
nav.open .nav-links    { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,0.10); box-shadow: 0 16px 34px rgba(10,22,40,0.38) }
}
}
nav :focus-visible     { outline-color: #fff }              /* brand red measures 3.08:1 on ink — at the 3:1 floor, so the ring goes white (18.13:1) */

/* ---- HEADER PRESENCE (2026-09-27) -------------------------------------------------------------
   1. Brand: mark 40 -> 46px and wordmark 22 -> 26px (subtitle 10 -> 11px). The 72px bar is unchanged,
      so this costs no vertical space; at 46px the mark fills 64% of the bar instead of 56%.
   2. Layout above the mobile breakpoint: flex with space-between, so the 186px hole that sat between
      the logo and the centred CTA is shared evenly (about 96px either side) instead of pooling in one
      place. The nav-cta now comes after the nav-links in the markup, so DOM order matches visual order.
   3. Links 13.5 -> 15px so they hold their own next to the larger brand.
   4. Beacons: a 22px box with stroke-width 3 in a 200-unit viewBox renders a 0.33px stroke — which is
      why they vanished on ink (only 7 of 960 pixels in their box read as anything but background).
      Strokes are now 9 units (1.26px at 28px), the paint is solid white because the pulse animation owns
      opacity (0.9 -> 0) and would override any opacity set here, the core dot is brand red at 3.08:1 on
      ink, and a soft glow makes it read as a light. */
nav .logo svg.mark { width: 46px; height: 46px }
nav .logo          { gap: 12px }
nav .logo .word b  { font-size: 26px }
/* Company-name lockup, 2026-09-30: "LIBERTAS AI" is the big line and "SOLUTIONS" sits underneath - the
   name reads as Libertas AI first, Solutions as the descriptor. "AI" keeps its red (.accent-signal). The
   small line keeps the footer's proportions (10px with 3.5 tracking under a 22px wordmark, here raised to
   the header's 26px). width:0 + overflow:visible keeps the second line's ink out of the lockup's layout
   width, so the lockup measures the big line only. */
  nav .logo .word small { font-size: 12px; letter-spacing: 4px; white-space: nowrap;
                          display: block; width: 0; max-width: 0; overflow: visible }
nav .nav-links a   { font-size: 15px }
nav .nav-links     { gap: 20px }
.beacon-nav        { width: 34px; height: 34px; }
.beacon-nav svg    { width: 100%; height: 100%; display: block;   /* the SVG carried width/height="22" while
                       the box is 30px, so its ink sat top-left: left gap 18px vs right gap 10px, and 4px high */
                       filter: drop-shadow(0 0 7px rgba(255,255,255,0.45)) }
/* rings come from the markup: red, blue, white - see the standard beacon */
/* the core is the markup's red dot */   /* white signal, red rim */
@media (min-width: 961px) {
  nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px }
}
@media (min-width: 961px) and (max-width: 1120px) {
  .beacon-nav { display: none }   /* links + CTA + beacons do not all fit comfortably in this band */
}

/* ---- NAV LINK HOVER (2026-09-27) ---------------------------------------------------------------
   Links grow and turn red on hover and on keyboard focus. The growth is a transform, not a font-size:
   the links are flex items, and a size change would reflow the row — at 961px the header has only 24px
   of slack before the bar overflows. Brand red #C8102E measures 3.08:1 on ink, under the 4.5:1 that 15px
   text needs, so the hover uses the same hue lifted to 4.94:1. Swapping in the literal token is one line. */
nav .nav-links a { transition: color 0.15s, transform 0.18s ease; transform-origin: center }
nav .nav-links a:hover, nav .nav-links a:focus-visible { color: #F0455F; transform: scale(1.1) }
/* The current page's nav title. The markup already carried aria-current="page", but the colour came from a
   design-tool utility, `.r-color-var-navy.r-color-var-navy { color: var(--navy) }` — specificity (0,2,0), which
   outranks the nav link rule at (0,1,2) and painted the current page's title navy on an ink bar (1.61:1, all but
   invisible). This selector is (0,2,2), so it wins on specificity without an !important, and it keys off the
   aria attribute rather than a visual class, so semantics and styling cannot drift apart. */
nav .nav-links a[aria-current="page"] { color: #F0455F }
@media (prefers-reduced-motion: reduce) {
  nav .nav-links a, nav .nav-links a:hover, nav .nav-links a:focus-visible { transition: none; transform: none }
}

/* ---- FOOTER LINK HOVER (2026-09-27) — same treatment as the nav titles ----------------------------
   Nine page links in three columns: grow and go red on hover, and on keyboard focus. transform-origin
   is left rather than centre so the column stays flush-left; a centre origin would slide the text 9px
   sideways on hover and break the alignment of the list. The link is display:block, so transform
   applies without changing display. Same red and same reason as the nav: #C8102E is 3.08:1 on ink,
   #F0455F is 4.94:1. */
.footer-col a { transition: color 0.15s, transform 0.18s ease; transform-origin: left center }
.footer-col a:hover, .footer-col a:focus-visible { color: #F0455F; transform: scale(1.1) }
@media (prefers-reduced-motion: reduce) {
  .footer-col a, .footer-col a:hover, .footer-col a:focus-visible { transition: none; transform: none }
}

/* ---- DESKTOP FRAME (2026-09-27) ----------------------------------------------------------------
   The header and footer were locked to the 1140px content column, so on a desktop they sat in the middle of
   the bar with 150px of empty space either side — 225px at 1600, 390px at 1920. Both now use a wider frame
   of up to 1440px, which takes those margins down to 40px, and the brand tagline moves into the header to
   fill the extra width. It is the same line the footer already carries, so no new copy is introduced.
   The frame change starts at 1400px because below that the extra element will not fit without crowding the
   nav links against the CTA. Body content is untouched: text columns and card grids keep the 1140px
   measure, so line lengths do not change. */
/* Base rule first: without it the tagline is an inline span and shows at EVERY width, taking a grid column in
   the mobile header and squeezing the CTA. Hidden until the frame is wide enough to hold it. */
.nav-tagline { display: none }
/* "Your Freedom." in the header tagline. #F0455F is the same lifted red the nav links use on hover and
   when active: the brand red #C8102E is only 3.08:1 on the ink bar, below the floor for 11px text. */
.nav-tagline .free { color: #F0455F }
   /* AMPLIFY in the CTA box's heading. The box is the navy #1B3A6B, where the brand red is only 1.91:1;
      this lifted red is 3.07:1 - enough for a heading this size, and the same on-dark red the nav, the
      header tagline and the beacons already use. */
   .cta-amplify { color: #F0455F }
@media (min-width: 1420px) {
  nav .container, footer .container { max-width: 1440px; padding-left: 40px; padding-right: 40px }
  .nav-tagline {
    display: block; flex: none; white-space: nowrap;
    font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: 1.6px;
    text-transform: uppercase; color: rgba(255,255,255,0.55);
    border-left: 1px solid rgba(255,255,255,0.16); border-right: 1px solid rgba(255,255,255,0.16); padding-left: 22px; padding-right: 22px;
  }
}

/* ---- ORCHESTRATION FLOW PACING (2026-09-27) -----------------------------------------------------
   The red dot on the rail ran a 7.5s cycle with a 1.5s beat per stage — roughly 1,000 words a minute,
   which is why it read as a blur. The cycle is now the time it takes an average adult to READ the five
   stages, each stage getting its own dwell:

     stage      words   dwell     starts at
     Plan        33     10.5s       0.0s
     Execute     26      8.4s      10.5s   (includes the Retrieve / Draft / Reconcile chips)
     Verify      23      7.5s      18.9s
     Approve     23      7.5s      26.4s
     Record      22      7.2s      33.9s
     total      127     41.1s

   127 words at 200 words per minute is 38.1s, plus a 0.6s settle per stage so the highlight does not snap
   away the instant the last word lands. 200 wpm is deliberately conservative — the measured adult average
   for English non-fiction is nearer 238, which would give a 35.0s cycle — so this errs on the slow side.

   Each node needed its own keyframes rather than the shared `orchNode` plus a delay: a delay shifts a
   whole animation, so a shared window would only ever light for the same slice of time and could not give
   Plan its longer dwell. The node and chip colours are copied unchanged from the original keyframes, so
   the look is identical — only the timing moved. The dot reaches the last node as Record opens and then
   holds, instead of finishing early. */
@keyframes orchNode1 { 0.00%, 24.75% { border-color: var(--red); background: var(--red); color: #fff } 26.35%, 100.00% { border-color: var(--mist); background: #fff; color: var(--navy) } }
.orch-stage:nth-child(3) .orch-node { animation: orchNode1 41.1s linear infinite; animation-delay: 0s }
@keyframes orchNode2 { 0.00%, 24.75% { border-color: var(--mist); background: #fff; color: var(--navy) } 26.35%, 45.19% { border-color: var(--red); background: var(--red); color: #fff } 46.79%, 100.00% { border-color: var(--mist); background: #fff; color: var(--navy) } }
.orch-stage:nth-child(4) .orch-node { animation: orchNode2 41.1s linear infinite; animation-delay: 0s }
@keyframes orchNode3 { 0.00%, 45.19% { border-color: var(--mist); background: #fff; color: var(--navy) } 46.79%, 63.43% { border-color: var(--red); background: var(--red); color: #fff } 65.03%, 100.00% { border-color: var(--mist); background: #fff; color: var(--navy) } }
.orch-stage:nth-child(5) .orch-node { animation: orchNode3 41.1s linear infinite; animation-delay: 0s }
@keyframes orchNode4 { 0.00%, 63.43% { border-color: var(--mist); background: #fff; color: var(--navy) } 65.03%, 81.68% { border-color: var(--red); background: var(--red); color: #fff } 83.28%, 100.00% { border-color: var(--mist); background: #fff; color: var(--navy) } }
.orch-stage:nth-child(6) .orch-node { animation: orchNode4 41.1s linear infinite; animation-delay: 0s }
@keyframes orchNode5 { 0.00%, 81.68% { border-color: var(--mist); background: #fff; color: var(--navy) } 83.28%, 99.20% { border-color: var(--red); background: var(--red); color: #fff } }
.orch-stage:nth-child(7) .orch-node { animation: orchNode5 41.1s linear infinite; animation-delay: 0s }
@keyframes orchAgentSlow { 0%, 24.75% { background: transparent; border-color: var(--mist) } 26.35%, 45.19% { background: var(--paper); border-color: var(--navy) } 46.79%, 100% { background: transparent; border-color: var(--mist) } }
.orch-agents span { animation: orchAgentSlow 41.1s linear infinite }
.orch-agents span:nth-child(1) { animation-delay: 0s }
.orch-agents span:nth-child(2) { animation-delay: 0.25s }
.orch-agents span:nth-child(3) { animation-delay: 0.5s }
@keyframes orchTravelSlow {
  0%   { top: 12px; opacity: 0 }
  2%   { top: 12px; opacity: 1 }
  82.48% { top: calc(100% - 22px); opacity: 1 }
  99%  { top: calc(100% - 22px); opacity: 0.9 }
  100% { top: calc(100% - 22px); opacity: 0 }
}
.orch-pulse { animation: orchTravelSlow 41.1s linear infinite }
@media (prefers-reduced-motion: reduce) {
  .orch-pulse, .orch-node, .orch-agents span { animation: none }
}

    /* Who We Serve ornament - fourth of the family, alongside .flow-dots / .shield-pulse / .flatline.
       A dashed ring stands for the set of sectors and functions we serve; one marker travels it
       continuously (7s) while the centre beats on the site's 2.4s beacon beat. The ring is
       currentColor so it takes the heading's own colour on any surface; the marker and centre are
       the brand red accent, same as .flow-dots. Chosen 2026-10-01 over the previous bullseye, which
       read as "targeting a market" rather than "serving one". No echo ring: two counters are
       already reading on this card, a third would be noise. */
    .sector-orbit { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; width: 18px; height: 18px; flex: none; }
    .sector-orbit svg { position: relative; z-index: 1; display: block; }
    .sector-orbit .orbit-mark { transform-box: view-box; transform-origin: 12px 12px; animation: orbitTravel 7s linear infinite; }
    .sector-orbit .sector-dot { transform-box: view-box; transform-origin: 12px 12px; animation: scopeBeat 2.4s ease-in-out infinite; }
    @keyframes orbitTravel { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
    @keyframes scopeBeat { 0%, 70%, 100% { transform: scale(1) } 35% { transform: scale(1.35) } }
    @media (prefers-reduced-motion: reduce) { .sector-orbit .orbit-mark, .sector-orbit .sector-dot { animation: none } }