/* Hide the default unstyled block-theme header/footer entirely.
         Belt-and-suspenders: the render_block_core/template-part filter
         below already strips this markup from the DOM outright, but this
         stays in place in case any template ever renders it without going
         through that filter. */
      .wp-site-blocks > header.wp-block-template-part,
      .wp-site-blocks > footer.wp-block-template-part {
        display: none !important;
      }
      .wp-site-blocks > main.wp-block-group {
        padding-top: 0 !important;
      }

      /* ===== Sticky header — matches the live armorstack.ai nav spec:
         white bg, navy text, orange hover/CTA, fixed 72px bar. Logo is a
         real chroma-keyed transparent PNG, so it blends cleanly on this
         white header AND on the dark footer below — no background box
         regardless of what color surface it sits on. ===== */
      #as-header {
        position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
        display: flex; align-items: center; justify-content: space-between;
        height: 72px; padding: 0 32px;
        background: #FFFFFF;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      }
      body { padding-top: 72px; }
      #as-header .as-logo { display: flex; align-items: center; flex-shrink: 0; height: 100%; }
      #as-header .as-logo img { height: 40px; width: auto; display: block; }
      /* Nav font 2026-07-21: matches live armorstack.ai's actual body font
         (Inter, loaded via premium-typography.php) per explicit instruction
         -- scoped to the header only, sitewide headings stay on Fraunces. */
      #as-header, #as-header * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
      #as-nav { display: flex; align-items: center; gap: 22px; height: 100%; }
      /* Color tokens corrected 2026-07-20: sampled the actual logo asset
         files (7 exports: shield icon, horizontal lockup, signature
         wordmark, etc.) pixel-for-pixel rather than trusting the
         documented "brand token" doc, which turned out to be drifted from
         the real logo (#E8571F/#1A1A2E were noticeably duller/more purple
         than the logo's true, highly-saturated #F74E00 orange and
         blue-teal #002846 navy — near-zero red in the real navy, unlike
         the token's purple-leaning value). Confirmed against 194K+ of
         204K qualifying pixels in the shield icon alone for orange, and a
         tight cluster in the signature wordmark for navy. */
      #as-nav a, #as-nav button.as-nav-trigger {
        color: #002846; text-decoration: none; font-size: 14px; font-weight: 500;
        transition: color .15s ease; white-space: nowrap;
        background: none; border: none; cursor: pointer; padding: 0;
        display: flex; align-items: center; gap: 4px;
      }
      #as-nav a:hover, #as-nav button.as-nav-trigger:hover { color: #F74E00; }
      #as-nav .as-caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s ease; }

      /* Dropdown 2026-07-21: rebuilt to match live's exact mechanism --
         click-to-toggle (not hover), instant show/hide (no fade/slide --
         live's panel has no opacity or transform transition, it just
         appears), driven by the .is-open class + JS in wp_footer below.
         Confirmed by inspecting live's actual DOM/computed-styles, not
         guessed: live's trigger is a real <button aria-haspopup="menu">,
         clicking it flips aria-expanded and adds .is-open to the panel
         wrapper; getComputedStyle on the open panel showed animationName:
         none and no opacity transition in its class list. */
      .as-dropdown { position: relative; height: 100%; display: flex; align-items: center; }
      .as-dropdown-menu {
        position: absolute; top: 100%; left: 0; margin-top: 12px;
        background: #FFFFFF; border: 1px solid #F3F4F6; border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
        min-width: 288px; display: none; flex-direction: column;
        overflow: hidden; z-index: 10000;
      }
      .as-dropdown.is-open .as-dropdown-menu { display: flex; }
      .as-dropdown.is-open .as-caret { transform: rotate(180deg); }
      .as-dropdown-menu .as-menu-inner { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
      .as-dropdown-menu a {
        display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 12px;
        font-size: 14px; font-weight: 500; color: #002846; white-space: normal;
      }
      .as-dropdown-menu a:hover { background: #F9FAFB; }
      .as-item-badge {
        flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; margin-top: 2px;
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 700; letter-spacing: 0.01em; line-height: 1;
      }
      .as-item-badge.c-orange { background: #FFF7ED; color: #F74E00; }
      .as-item-badge.c-blue   { background: #EFF6FF; color: #2563EB; }
      .as-item-badge.c-purple { background: #FAF5FF; color: #9333EA; }
      .as-item-badge.c-red    { background: #FEF2F2; color: #DC2626; }
      .as-item-badge.c-green  { background: #F0FDF4; color: #16A34A; }
      .as-item-badge.c-amber  { background: #FFFBEB; color: #D97706; }
      .as-item-badge.c-sky    { background: #F0F9FF; color: #0284C7; }
      .as-item-badge.c-gray   { background: #F9FAFB; color: #6B7280; }
      /* 2026-07-21: as-item-title/category/desc are <span>s, and inline
         elements (a) don't stack onto their own line and (b) ignore
         vertical margin entirely per spec -- that's why title/category/
         desc were running together on one line with no gap regardless of
         the margin-top rules below. display:block fixes both at once. */
      .as-item-body { min-width: 0; display: flex; flex-direction: column; }
      .as-item-title { display: block; font-size: 14px; font-weight: 600; color: #002846; }
      .as-dropdown-menu a:hover .as-item-title { color: #F74E00; }
      .as-item-category { display: block; font-size: 11px; color: #6B7280; font-weight: 500; margin-top: 3px; }
      .as-item-desc { display: block; font-size: 12px; font-weight: 400; color: #6B7280; line-height: 1.4; margin-top: 3px; }
      .as-item-tag {
        font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
        color: #F74E00; margin-left: auto; padding-left: 8px; white-space: nowrap;
      }

      /* Solutions mega-menu: matches live's 520px, center-aligned, two-section
         2-column grid + two highlighted full-width rows + footer CTA bar. */
      .as-dropdown-menu.as-solutions-menu { left: 50%; transform: translateX(-50%); min-width: 520px; }
      .as-solutions-menu .as-menu-section { padding: 12px 12px 8px; }
      .as-solutions-menu .as-menu-label {
        font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
        color: #9CA3AF; padding: 0 4px 8px;
      }
      /* 2026-07-21: single column, confirmed against a real live screenshot
         after the earlier headless DOM read wrongly suggested grid-cols-2.
         Follow-up pass same day: pulled exact getComputedStyle() values off
         live's real DOM (not class-name guesses) for title/badge/category/
         desc sizing and color -- live's portfolio-item title+badge text is
         near-black/uppercase, NOT navy/per-category-color as first built,
         and the badge is not a fixed square -- align-items:normal (stretch)
         on live lets it stretch to the row's full height. */
      .as-solutions-menu .as-menu-grid { display: flex; flex-direction: column; gap: 4px; }
      .as-solutions-menu .as-menu-grid a { padding: 12px; align-items: stretch !important; }
      .as-solutions-menu .as-menu-grid .as-item-badge {
        height: auto; align-items: center; text-transform: uppercase; color: #0A0A0A;
      }
      .as-solutions-menu .as-menu-grid .as-item-title {
        text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 700; color: #0A0A0A;
      }
      .as-solutions-menu .as-menu-grid a:hover .as-item-title { color: #F74E00; }
      .as-solutions-menu .as-menu-grid .as-item-desc { font-size: 10px; line-height: 1.625; }
      .as-solutions-menu .as-menu-highlight { padding: 0 12px 8px; }
      .as-solutions-menu .as-menu-highlight a {
        align-items: center; border-radius: 12px; border: 1px solid; padding: 10px 12px;
      }
      .as-solutions-menu .as-menu-highlight a:hover { background: inherit; }
      .as-solutions-menu .as-menu-highlight .as-item-title { font-size: 12px; font-weight: 700; }
      .as-solutions-menu .as-menu-highlight.hl-orange a { border-color: #FED7AA; background: #FFF7ED; }
      .as-solutions-menu .as-menu-highlight.hl-orange .as-item-title,
      .as-solutions-menu .as-menu-highlight.hl-orange .as-item-tag { color: #F74E00; }
      .as-solutions-menu .as-menu-highlight.hl-orange .as-item-desc { color: #C2410C; }
      .as-solutions-menu .as-menu-highlight.hl-orange .as-item-badge { background: #F74E00; color: #fff; }
      .as-solutions-menu .as-menu-highlight.hl-green a { border-color: #BBF7D0; background: #F0FDF4; }
      .as-solutions-menu .as-menu-highlight.hl-green .as-item-title,
      .as-solutions-menu .as-menu-highlight.hl-green .as-item-desc { color: #15803D; }
      .as-solutions-menu .as-menu-highlight.hl-green .as-item-tag { color: #F74E00; }
      .as-solutions-menu .as-menu-highlight.hl-green .as-item-badge { background: #16A34A; color: #fff; }
      .as-dropdown-cta {
        display: flex; align-items: center; justify-content: space-between; gap: 6px;
        background: #F9FAFB; border-top: 1px solid #F3F4F6; padding: 14px 20px !important;
        border-radius: 0 !important; font-size: 13px; color: #6B7280; font-weight: 400 !important;
      }
      .as-dropdown-cta:hover { background: #F9FAFB !important; }
      .as-dropdown-cta .as-cta-link { color: #F74E00 !important; font-weight: 600 !important; font-size: 13px !important; }

      #as-header .as-cta {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 10px 22px; border-radius: 8px;
        background: #F74E00;
        color: #fff !important; font-weight: 700; font-size: 14px;
        transition: background .15s ease, transform .15s ease;
        margin-left: 8px;
      }
      #as-header .as-cta:hover { background: #CA4000; transform: translateY(-1px); color:#fff !important; }
      #as-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
      #as-mobile-toggle span { display: block; width: 24px; height: 2px; background: #002846; margin: 5px 0; transition: .2s; }

      @media (max-width: 980px) {
        #as-nav { position: fixed; top: 72px; left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch;
          background: #FFFFFF; padding: 20px 28px; gap: 4px; height: auto; overflow-y: auto;
          transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
          box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        }
        #as-nav.as-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
        #as-nav > a, #as-nav .as-dropdown > button.as-nav-trigger { padding: 12px 4px; border-bottom: 1px solid #F1F3F7; width: 100%; justify-content: space-between; }
        .as-dropdown { flex-direction: column; align-items: stretch; height: auto; }
        .as-dropdown-menu {
          position: static; box-shadow: none; border: none; border-radius: 0;
          margin: 0 0 0 12px; min-width: 0; transform: none; left: auto;
        }
        #as-header .as-cta { margin: 12px 0 0; justify-content: center; }
        #as-mobile-toggle { display: block; }
      }

      /* ===== Footer ===== */
      #as-footer { background: #080c18; padding: 64px 32px 32px; border-top: 1px solid rgba(255,255,255,0.06); }
      #as-footer-inner { max-width: 1200px; margin: 0 auto; }
      #as-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
      @media (max-width: 800px) { #as-footer-grid { grid-template-columns: 1fr 1fr; } }
      #as-footer .as-logo img { height: 26px; margin-bottom: 14px; }
      #as-footer p.as-tagline { color: rgba(249,250,251,0.5); font-size: 13.5px; line-height: 1.6; max-width: 280px; }
      #as-footer h4 { color: #fff; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 16px; }
      #as-footer ul { list-style: none; margin: 0; padding: 0; }
      #as-footer li { margin-bottom: 11px; }
      #as-footer a { color: rgba(249,250,251,0.62); text-decoration: none; font-size: 14px; transition: color .15s ease; }
      #as-footer a:hover { color: #FF8A5C; }
      #as-footer-bottom {
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
        padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06);
        color: rgba(249,250,251,0.4); font-size: 13px;
      }
      #as-footer-bottom a { color: rgba(249,250,251,0.4); }

      /* ===== WPForms default submit button -> Armorstack primary-button
         pattern. WPForms "Modern" markup renders a plain <button
         class="wpforms-submit"> and drives its look off inline CSS custom
         properties (--wpforms-button-background-color etc, default a flat
         blue #066aab) set per-form-instance in <head>. We override the
         rendered properties directly on the class (which wins over the
         var() indirection since we set the properties themselves) so this
         holds regardless of which page/instance the [wpforms id="..."]
         shortcode appears on. ===== */
      .wpforms-container .wpforms-submit,
      button.wpforms-submit,
      input.wpforms-submit {
        background: linear-gradient(135deg, #F74E00 0%, #CA4000 100%) !important;
        border: none !important;
        border-radius: 8px !important;
        color: #fff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        padding: 13px 30px !important;
        min-height: 0 !important;
        box-shadow: none !important;
        cursor: pointer;
        transition: transform 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out;
      }
      .wpforms-container .wpforms-submit:hover,
      button.wpforms-submit:hover,
      input.wpforms-submit:hover {
        background: linear-gradient(135deg, #CA4000 0%, #A83600 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(20,25,43,0.16) !important;
      }
      .wpforms-container .wpforms-submit:focus-visible,
      button.wpforms-submit:focus-visible,
      input.wpforms-submit:focus-visible {
        outline: 2px solid #0EA5E9 !important;
        outline-offset: 2px;
      }

      /* ===== Motion polish =====
         Content is visible by default (never hidden pending JS) -- the
         reveal class only adds a subtle entrance transition when JS
         successfully marks it .as-in; if JS fails for any reason the
         content simply has no animation, it is never invisible. Duration/
         distance is a restrained 180ms / 8px per the site-wide motion spec
         (previously 600ms / 18px). */
      .as-reveal, .as-reveal-card { transition: opacity 180ms ease-out, transform 180ms ease-out; }
      .as-reveal.as-pending, .as-reveal-card.as-pending { opacity: 0; transform: translateY(8px); }
      .as-reveal.as-in, .as-reveal-card.as-in { opacity: 1; transform: translateY(0); }