/*
Theme Name: ADVAIRA
Theme URI: https://advaira.com
Author: ADVAIRA
Author URI: https://advaira.com
Description: Premium B2B enterprise theme for ADVAIRA — Global Workforce Compliance Intelligence. Built around the ADVAIRA Control Tower concept: Detect, Understand, Prioritize, Coordinate, Track. Every section, text, image and toggle is editable from the WordPress Customizer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: advaira
Tags: business, corporate, saas, compliance, enterprise, responsive-layout, custom-menu, custom-logo, full-width-template
*/

/* =========================================================
   ADVAIRA DESIGN SYSTEM
   Restrained enterprise palette taken from the logo:
   deep navy wordmark + the blue orbit swoosh.
   ========================================================= */

:root {
  /* Brand — from the ADVAIRA logo */
  --av-navy:        #0b1e3d;
  --av-navy-2:      #11294f;
  --av-navy-3:      #1a3a6a;
  --av-blue:        #1d6fc4;
  --av-blue-dark:   #14528f;
  --av-blue-light:  #4a9fe8;
  --av-blue-wash:   #eaf2fb;

  /* Neutrals */
  --av-text:        #1f2937;
  --av-muted:       #5b6675;
  --av-faint:       #8a94a3;
  --av-white:       #ffffff;
  --av-bg:          #ffffff;
  --av-bg-alt:      #f6f8fb;
  --av-bg-deep:     #0b1e3d;
  --av-border:      #e3e8ef;
  --av-border-soft: #eef2f7;

  /* Status system — used consistently sitewide */
  --av-critical:      #d92d20;
  --av-critical-bg:   #fef3f2;
  --av-critical-bd:   #fbd3ce;
  --av-attention:     #e07b00;
  --av-attention-bg:  #fff7ea;
  --av-attention-bd:  #fbdfb4;
  --av-ontrack:       #0f9250;
  --av-ontrack-bg:    #eefaf3;
  --av-ontrack-bd:    #bfe8d2;

  /* Effects — subtle, no heavy gradients */
  --av-radius:      14px;
  --av-radius-sm:   9px;
  --av-radius-lg:   20px;
  --av-shadow-xs:   0 1px 2px rgba(11, 30, 61, .06);
  --av-shadow:      0 6px 24px rgba(11, 30, 61, .07);
  --av-shadow-md:   0 14px 40px rgba(11, 30, 61, .10);
  --av-shadow-lg:   0 28px 64px rgba(11, 30, 61, .14);
  --av-ring:        0 0 0 4px rgba(29, 111, 196, .16);

  /* Layout */
  --av-maxw:        1240px;
  --av-maxw-wide:   1320px;
  --av-maxw-prose:  760px;
  --av-gap:         28px;
  --av-header-h:    86px;

  /* Type */
  --av-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --av-head: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --av-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--av-header-h) + 20px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--av-font);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--av-text);
  background: var(--av-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--av-blue); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--av-blue-dark); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--av-blue-light); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--av-head);
  color: var(--av-navy);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 .55em;
}
h1 { font-size: clamp(2.05rem, 4.4vw, 3.4rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.62rem, 3vw, 2.45rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.18rem, 1.7vw, 1.5rem); }
h4 { font-size: 1.06rem; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
hr { border: 0; border-top: 1px solid var(--av-border); margin: 40px 0; }

/* ---------- Layout ---------- */
.av-container      { width: 100%; max-width: var(--av-maxw); margin: 0 auto; padding: 0 24px; }
.av-container-wide { width: 100%; max-width: var(--av-maxw-wide); margin: 0 auto; padding: 0 24px; }
.av-section    { padding: 96px 0; }
.av-section-sm { padding: 60px 0; }
.av-section-lg { padding: 118px 0; }
.av-alt   { background: var(--av-bg-alt); }
.av-deep  { background: var(--av-navy); color: #cfd9e6; }
.av-deep h1, .av-deep h2, .av-deep h3, .av-deep h4 { color: #fff; }
.av-center { text-align: center; }
.av-narrow { max-width: 780px; margin-left: auto; margin-right: auto; }

/* ---------- Section heading ---------- */
.av-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--av-blue); margin-bottom: 14px;
}
.av-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--av-blue); border-radius: 2px; }
.av-deep .av-eyebrow { color: var(--av-blue-light); }
.av-deep .av-eyebrow::before { background: var(--av-blue-light); }
.av-head { margin-bottom: 52px; }
.av-head.av-center { max-width: 780px; margin-left: auto; margin-right: auto; }
.av-head p { color: var(--av-muted); font-size: 1.08rem; margin: 0; }
.av-deep .av-head p { color: #a9b8cc; }
.av-lead { font-size: 1.14rem; color: var(--av-muted); }

/* ---------- Buttons ---------- */
.av-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: .97rem; line-height: 1; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
  white-space: nowrap; font-family: var(--av-font);
}
.av-btn svg { flex: none; }
.av-btn:hover { transform: translateY(-1px); }
.av-btn-primary { background: var(--av-blue); color: #fff; box-shadow: 0 8px 22px rgba(29,111,196,.24); }
.av-btn-primary:hover { background: var(--av-blue-dark); color: #fff; box-shadow: 0 12px 28px rgba(29,111,196,.3); }
.av-btn-navy { background: var(--av-navy); color: #fff; }
.av-btn-navy:hover { background: var(--av-navy-2); color: #fff; }
.av-btn-outline { background: transparent; color: var(--av-navy); border-color: var(--av-border); }
.av-btn-outline:hover { border-color: var(--av-blue); color: var(--av-blue); background: var(--av-blue-wash); }
.av-btn-light { background: #fff; color: var(--av-navy); }
.av-btn-light:hover { background: var(--av-blue-wash); color: var(--av-navy); }
.av-btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.av-btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.av-btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.av-btn-block { width: 100%; }

/* ---------- Skip link ---------- */
.av-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--av-navy); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.av-skip:focus { left: 0; color: #fff; }

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--av-border-soft);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.site-header.scrolled { box-shadow: 0 2px 18px rgba(11,30,61,.08); border-color: var(--av-border); }
.site-header > .av-container-wide {
  min-height: var(--av-header-h);
  display: flex; align-items: center; gap: 28px;
}
.site-branding { flex: none; display: flex; align-items: center; }
.site-branding img, .site-branding .custom-logo { max-height: 56px; width: auto; }
.site-branding .av-wordmark {
  font-family: var(--av-head); font-weight: 700; font-size: 1.42rem;
  letter-spacing: .14em; color: var(--av-navy); line-height: 1;
}

.main-navigation { margin-left: auto; }
.av-menu { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.av-menu > li > a {
  display: block; padding: 10px 15px; border-radius: 8px;
  color: var(--av-navy); font-weight: 500; font-size: .96rem;
}
.av-menu > li > a:hover { background: var(--av-blue-wash); color: var(--av-blue-dark); }
.av-menu > li.current-menu-item > a,
.av-menu > li.av-current > a { color: var(--av-blue); font-weight: 600; }

.header-cta { flex: none; display: flex; align-items: center; gap: 12px; }

/* Hamburger */
.menu-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--av-border);
  background: #fff; border-radius: 9px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-toggle span { display: block; width: 19px; height: 2px; background: var(--av-navy); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   PAGE HERO (inner pages)
   ========================================================= */
.av-page-hero {
  position: relative; overflow: hidden;
  background: var(--av-navy);
  background-size: cover; background-position: center;
  color: #cfd9e6; padding: 84px 0 76px;
}
.av-page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(29,111,196,.42), transparent 62%),
    radial-gradient(620px 380px at 8% 120%, rgba(74,159,232,.18), transparent 66%);
}
.av-page-hero > .av-container { position: relative; z-index: 1; }
.av-page-hero h1 { color: #fff; max-width: 20ch; }
.av-page-hero p { color: #a9b8cc; font-size: 1.1rem; max-width: 62ch; margin-bottom: 0; }
.av-page-hero-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

.av-breadcrumb { font-size: .84rem; color: #8fa2ba; margin-bottom: 20px; }
.av-breadcrumb a { color: #b7c6d8; }
.av-breadcrumb a:hover { color: #fff; }
.av-breadcrumb .sep { margin: 0 8px; opacity: .5; }
.av-breadcrumb .current { color: #fff; }

/* =========================================================
   HOME HERO
   ========================================================= */
.av-hero {
  position: relative; overflow: hidden;
  background: var(--av-navy);
  background-size: cover; background-position: center;
  color: #c6d3e3;
  padding: 92px 0 96px;
}
.av-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1000px 520px at 78% -6%, rgba(29,111,196,.46), transparent 60%),
    radial-gradient(700px 420px at 4% 108%, rgba(74,159,232,.16), transparent 64%);
}
.av-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center;
}
.av-hero h1 { color: #fff; margin-bottom: 22px; }
.av-hero .av-hero-sub {
  font-size: 1.14rem; color: #b9c8dc; font-weight: 500; margin-bottom: 16px;
}
.av-hero p { color: #93a6bf; font-size: 1.01rem; }
.av-hero-actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.av-hero-note { margin-top: 22px; font-size: .86rem; color: #7f92ac; display: flex; align-items: center; gap: 8px; }

.av-hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 9px; border-radius: 100px; margin-bottom: 24px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  font-size: .81rem; color: #cddcee; font-weight: 500;
}
.av-hero-badge b {
  background: var(--av-blue); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 100px;
}

/* =========================================================
   CONTROL TOWER DIAGRAM  ⭐ signature visual
   ========================================================= */
.av-tower { --tw-fg: var(--av-navy); }
.av-tower-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--av-faint); text-align: center; margin-bottom: 14px;
}
.av-tower-eco {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
}
.av-tower-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 100px;
  background: #fff; border: 1px solid var(--av-border);
  font-size: .89rem; font-weight: 500; color: var(--av-navy);
  box-shadow: var(--av-shadow-xs);
}
.av-tower-chip svg { color: var(--av-blue); }
.av-tower-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 20px 0; color: var(--av-blue);
}
.av-tower-arrow::before { content: ""; width: 2px; height: 26px; background: linear-gradient(180deg, transparent, var(--av-blue)); }
.av-tower-core {
  background: var(--av-navy); color: #fff; border-radius: var(--av-radius-lg);
  padding: 30px 28px; text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--av-shadow-lg);
}
.av-tower-core::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 260px at 80% -20%, rgba(29,111,196,.55), transparent 62%);
}
.av-tower-core > * { position: relative; z-index: 1; }
.av-tower-core .tw-name {
  font-family: var(--av-head); font-size: clamp(1.05rem, 2.1vw, 1.42rem); font-weight: 700;
  letter-spacing: .1em; color: #fff; margin: 0 0 6px;
}
.av-tower-core .tw-sub { font-size: .87rem; color: #9db3cd; margin: 0; }
.av-tower-flow {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
  margin-top: 22px;
}
.av-tower-step {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 9px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  font-size: .85rem; font-weight: 600; color: #fff; white-space: nowrap;
}
.av-tower-step svg { color: var(--av-blue-light); }
.av-tower-sep { color: var(--av-blue-light); flex: none; opacity: .8; }
.av-tower-out {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
}
.av-tower-out .av-tower-chip { border-color: rgba(29,111,196,.28); background: var(--av-blue-wash); }
.av-deep .av-tower-chip, .av-on-dark .av-tower-chip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); color: #dbe6f3; box-shadow: none; }
.av-deep .av-tower-label, .av-on-dark .av-tower-label { color: #8fa2ba; }
.av-deep .av-tower-core, .av-on-dark .av-tower-core { box-shadow: none; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); }

/* =========================================================
   CARDS & GRIDS
   ========================================================= */
.av-grid { display: grid; gap: 24px; }
.av-grid-2 { grid-template-columns: repeat(2, 1fr); }
.av-grid-3 { grid-template-columns: repeat(3, 1fr); }
.av-grid-4 { grid-template-columns: repeat(4, 1fr); }
.av-grid-5 { grid-template-columns: repeat(5, 1fr); }

.av-card {
  background: #fff; border: 1px solid var(--av-border);
  border-radius: var(--av-radius); padding: 28px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}
.av-card:hover { transform: translateY(-3px); box-shadow: var(--av-shadow-md); border-color: #d3ddea; }
.av-card h3 { margin-bottom: 8px; font-size: 1.11rem; }
.av-card p { color: var(--av-muted); font-size: .96rem; margin: 0; }
.av-card-ic {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  background: var(--av-blue-wash); color: var(--av-blue); margin-bottom: 18px;
}
.av-deep .av-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.av-deep .av-card p { color: #a9b8cc; }
.av-deep .av-card-ic { background: rgba(29,111,196,.24); color: var(--av-blue-light); }
.av-deep .av-card:hover { border-color: rgba(255,255,255,.24); box-shadow: none; }

/* Numbered / step cards */
.av-step {
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius);
  padding: 30px; position: relative; height: 100%;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.av-step:hover { box-shadow: var(--av-shadow-md); border-color: #d3ddea; }
.av-step-n {
  font-family: var(--av-mono); font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  color: var(--av-blue); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.av-step-n::after { content: ""; width: 26px; height: 1px; background: var(--av-border); }
.av-step h3 { font-size: 1.16rem; margin-bottom: 10px; }
.av-step p { color: var(--av-muted); font-size: .96rem; }
.av-step p:last-child { margin-bottom: 0; }

/* Problem / trigger list */
.av-trigger-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.av-trigger-list li {
  display: flex; align-items: flex-start; gap: 13px;
  background: #fff; border: 1px solid var(--av-border); border-left: 3px solid var(--av-blue);
  border-radius: var(--av-radius-sm); padding: 15px 18px;
  font-weight: 500; color: var(--av-navy);
}
.av-trigger-list li svg { color: var(--av-blue); flex: none; margin-top: 3px; }

/* Check / bullet lists */
.av-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.av-check li { display: flex; align-items: flex-start; gap: 11px; color: var(--av-text); font-size: .98rem; }
.av-check li > svg { flex: none; margin-top: 4px; color: var(--av-blue); }
.av-check.av-check-cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px 28px; }
.av-deep .av-check li { color: #cfd9e6; }
.av-deep .av-check li > svg { color: var(--av-blue-light); }

.av-dot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.av-dot-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--av-muted); font-size: .96rem; }
.av-dot-list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--av-blue);
  flex: none; margin-top: 10px;
}

/* Pill row (countries, areas, stakeholders) */
.av-pills { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; list-style: none; }
.av-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 100px; font-size: .9rem; font-weight: 500;
  background: var(--av-blue-wash); color: var(--av-blue-dark); border: 1px solid rgba(29,111,196,.2);
}
.av-pill svg { color: var(--av-blue); }
.av-deep .av-pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #dbe6f3; }

/* =========================================================
   STATUS SYSTEM - Critical / Attention / On Track
   ========================================================= */
.av-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 100px; font-size: .83rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.av-status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.av-status-critical  { background: var(--av-critical-bg);  color: var(--av-critical);  border-color: var(--av-critical-bd); }
.av-status-critical  .dot { background: var(--av-critical); }
.av-status-attention { background: var(--av-attention-bg); color: var(--av-attention); border-color: var(--av-attention-bd); }
.av-status-attention .dot { background: var(--av-attention); }
.av-status-ontrack   { background: var(--av-ontrack-bg);   color: var(--av-ontrack);   border-color: var(--av-ontrack-bd); }
.av-status-ontrack   .dot { background: var(--av-ontrack); }

.av-status-card {
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius);
  padding: 26px; border-top: 3px solid var(--av-border); height: 100%;
}
.av-status-card.is-critical  { border-top-color: var(--av-critical); }
.av-status-card.is-attention { border-top-color: var(--av-attention); }
.av-status-card.is-ontrack   { border-top-color: var(--av-ontrack); }
.av-status-card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.06rem; margin-bottom: 8px; }
.av-status-card p { color: var(--av-muted); font-size: .95rem; margin: 0; }

/* =========================================================
   EVENT FLOW (UK to Germany example)
   ========================================================= */
.av-event {
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow); overflow: hidden;
}
.av-event-head {
  padding: 22px 26px; border-bottom: 1px solid var(--av-border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--av-bg-alt);
}
.av-event-route { display: flex; align-items: center; gap: 12px; font-family: var(--av-head); font-weight: 600; font-size: 1.14rem; color: var(--av-navy); }
.av-event-route .flag { font-size: 1.5rem; line-height: 1; }
.av-event-route .to { color: var(--av-blue); display: inline-flex; }
.av-event-body { padding: 26px; }
.av-event-body > h4 {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--av-faint); margin-bottom: 14px; font-weight: 700;
}
.av-event-areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.av-event-area {
  border: 1px solid var(--av-border); border-radius: var(--av-radius-sm);
  padding: 15px 12px; text-align: center; background: #fff;
}
.av-event-area svg { margin: 0 auto 9px; color: var(--av-blue); }
.av-event-area span { font-size: .88rem; font-weight: 600; color: var(--av-navy); }
.av-event-foot {
  padding: 15px 26px; border-top: 1px solid var(--av-border-soft);
  font-size: .82rem; color: var(--av-faint); background: var(--av-bg-alt);
}

/* =========================================================
   DISCLAIMER + ILLUSTRATIVE LABEL
   ========================================================= */
.av-note {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--av-faint); background: var(--av-bg-alt);
  border: 1px dashed var(--av-border); border-radius: 100px; padding: 5px 12px;
}
.av-deep .av-note { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #94a7c0; }
.av-disclaimer {
  border: 1px solid var(--av-border); border-left: 3px solid var(--av-blue);
  background: var(--av-bg-alt); border-radius: var(--av-radius-sm);
  padding: 18px 22px; font-size: .93rem; color: var(--av-muted); display: flex; gap: 13px;
}
.av-disclaimer svg { flex: none; color: var(--av-blue); margin-top: 3px; }
.av-disclaimer strong { color: var(--av-navy); }
.av-disclaimer p:last-child { margin-bottom: 0; }
.av-deep .av-disclaimer { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); border-left-color: var(--av-blue-light); color: #a9b8cc; }
.av-deep .av-disclaimer strong { color: #fff; }

/* =========================================================
   PRODUCT MOCKUPS - conceptual UI, never a real screenshot
   ========================================================= */
.av-mock {
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-md); overflow: hidden; position: relative;
}
.av-mock-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; background: var(--av-navy); border-bottom: 1px solid rgba(255,255,255,.08);
}
.av-mock-dots { display: flex; gap: 6px; flex: none; }
.av-mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); display: block; }
.av-mock-title {
  font-family: var(--av-head); font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  color: #fff; text-transform: uppercase;
}
.av-mock-title small { display: block; font-family: var(--av-font); font-size: .7rem; letter-spacing: .02em; text-transform: none; color: #8fa6c2; font-weight: 500; margin-top: 2px; }
.av-mock-body { padding: 24px; background: var(--av-bg-alt); }
.av-mock-sub {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--av-faint); margin: 0 0 12px;
}
.av-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.av-mock-stat {
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius-sm);
  padding: 16px; border-top: 3px solid var(--av-border);
}
.av-mock-stat.is-critical  { border-top-color: var(--av-critical); }
.av-mock-stat.is-attention { border-top-color: var(--av-attention); }
.av-mock-stat.is-ontrack   { border-top-color: var(--av-ontrack); }
.av-mock-stat b { display: flex; align-items: center; gap: 8px; font-family: var(--av-head); font-size: .95rem; color: var(--av-navy); margin-bottom: 5px; }
.av-mock-stat b .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.av-mock-stat.is-critical  b .dot { background: var(--av-critical); }
.av-mock-stat.is-attention b .dot { background: var(--av-attention); }
.av-mock-stat.is-ontrack   b .dot { background: var(--av-ontrack); }
.av-mock-stat span { font-size: .82rem; color: var(--av-muted); line-height: 1.45; display: block; }

.av-mock-rows { display: grid; gap: 8px; }
.av-mock-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius-sm);
  padding: 13px 16px; font-size: .91rem; color: var(--av-navy); font-weight: 500;
}
.av-mock-row svg { color: var(--av-blue); flex: none; }
.av-mock-row .av-status { margin-left: auto; }

.av-mock-meta { display: grid; gap: 9px; margin-bottom: 20px; }
.av-mock-meta div { display: flex; justify-content: space-between; gap: 16px; font-size: .89rem; padding-bottom: 9px; border-bottom: 1px dashed var(--av-border); }
.av-mock-meta div:last-child { border-bottom: 0; padding-bottom: 0; }
.av-mock-meta dt, .av-mock-meta .k { color: var(--av-muted); }
.av-mock-meta dd, .av-mock-meta .v { color: var(--av-navy); font-weight: 600; margin: 0; text-align: right; }

.av-mock-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.av-mock-checks li {
  display: flex; align-items: center; gap: 11px; font-size: .91rem; color: var(--av-navy);
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius-sm); padding: 11px 15px;
}
.av-mock-checks li .box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #c3cede; flex: none;
  display: grid; place-items: center; color: transparent;
}
.av-mock-checks li.done { color: var(--av-muted); }
.av-mock-checks li.done .box { background: var(--av-ontrack); border-color: var(--av-ontrack); color: #fff; }
.av-mock-foot {
  padding: 12px 24px; background: #fff; border-top: 1px solid var(--av-border);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* =========================================================
   COMPARISON (Instead of asking / ADVAIRA answers)
   ========================================================= */
.av-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; }
.av-compare-box {
  border: 1px solid var(--av-border); border-radius: var(--av-radius); padding: 30px; background: #fff; height: 100%;
}
.av-compare-box.is-old { background: var(--av-bg-alt); border-style: dashed; }
.av-compare-box h4 {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--av-faint); margin-bottom: 16px;
}
.av-compare-box.is-new h4 { color: var(--av-blue); }
.av-compare-q { font-family: var(--av-head); font-size: 1.24rem; color: var(--av-muted); font-weight: 500; margin: 0; }
.av-compare-arrow { color: var(--av-blue); flex: none; }

/* =========================================================
   FEATURE ROW (image / diagram beside text)
   ========================================================= */
.av-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.av-feat + .av-feat { margin-top: 84px; }
.av-feat-rev .av-feat-media { order: 2; }
.av-feat-body h2 { margin-bottom: 14px; }
.av-feat-body > p { color: var(--av-muted); }

/* =========================================================
   CTA BANNER
   ========================================================= */
.av-cta {
  position: relative; overflow: hidden;
  background: var(--av-navy); border-radius: var(--av-radius-lg);
  padding: 54px 52px; color: #b9c8dc;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.av-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 320px at 88% -30%, rgba(29,111,196,.5), transparent 62%);
}
.av-cta > * { position: relative; z-index: 1; }
.av-cta h2 { color: #fff; margin-bottom: 8px; }
.av-cta p { margin: 0; color: #a9b8cc; max-width: 56ch; }
.av-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }

/* =========================================================
   FORMS
   ========================================================= */
.av-form-wrap {
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-md); padding: 40px;
}
.av-form { display: grid; gap: 20px; }
.av-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.av-field { display: grid; gap: 7px; }
.av-field label { font-size: .89rem; font-weight: 600; color: var(--av-navy); }
.av-field label .req { color: var(--av-critical); }
.av-field input, .av-field select, .av-field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--av-border); border-radius: 10px;
  font: inherit; font-size: .96rem; color: var(--av-text); background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.av-field textarea { min-height: 118px; resize: vertical; }
.av-field input:focus, .av-field select:focus, .av-field textarea:focus {
  outline: none; border-color: var(--av-blue); box-shadow: var(--av-ring);
}
.av-field input::placeholder, .av-field textarea::placeholder { color: #a9b3c0; }
.av-form-note { font-size: .85rem; color: var(--av-muted); display: flex; gap: 10px; align-items: flex-start; }
.av-form-note svg { flex: none; color: var(--av-blue); margin-top: 3px; }
.av-hp { position: absolute !important; left: -9999px !important; }

.av-alert { border-radius: var(--av-radius-sm); padding: 16px 20px; font-size: .95rem; display: flex; gap: 12px; align-items: flex-start; }
.av-alert svg { flex: none; margin-top: 3px; }
.av-alert-ok  { background: var(--av-ontrack-bg);  border: 1px solid var(--av-ontrack-bd);  color: #0a6b3b; }
.av-alert-err { background: var(--av-critical-bg); border: 1px solid var(--av-critical-bd); color: #a4231a; }

/* =========================================================
   FOUNDER
   ========================================================= */
.av-founder {
  display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: start;
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius-lg);
  padding: 44px; box-shadow: var(--av-shadow);
}
.av-founder-photo {
  border-radius: var(--av-radius); overflow: hidden; background: var(--av-blue-wash);
  aspect-ratio: 1/1; display: grid; place-items: center; color: var(--av-blue);
}
.av-founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.av-founder-photo .av-initials { font-family: var(--av-head); font-size: 3.4rem; font-weight: 700; letter-spacing: .04em; }
.av-founder h3 { margin-bottom: 2px; font-size: 1.5rem; }
.av-founder .role { color: var(--av-blue); font-weight: 600; font-size: .95rem; margin-bottom: 18px; }
.av-founder p { color: var(--av-muted); }

/* =========================================================
   FOOTER — light, to keep the page ending on white
   ========================================================= */
.site-footer {
  background: #fff;
  color: var(--av-muted);
  padding: 72px 0 0;
  border-top: 1px solid var(--av-border);
}
.av-footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 46px; padding-bottom: 52px;
}
.av-footer-brand .av-footer-logo { display: inline-block; margin-bottom: 18px; }
.av-footer-brand .av-footer-logo img { max-height: 84px; width: auto; }
.av-footer-brand .av-wordmark {
  color: var(--av-navy); font-family: var(--av-head); font-weight: 700;
  font-size: 1.5rem; letter-spacing: .16em;
}
.av-footer-cat { font-size: .84rem; color: var(--av-faint); letter-spacing: .04em; margin: 0 0 10px; }
.av-footer-tag {
  font-size: .95rem; color: var(--av-navy); font-weight: 500;
  margin: 0 0 20px; max-width: 34ch;
}
.av-footer-col h4 {
  color: var(--av-navy); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 18px;
}
.av-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.av-footer-links a { color: var(--av-muted); font-size: .94rem; }
.av-footer-links a:hover { color: var(--av-blue); }
.av-footer-social { display: flex; gap: 10px; }
.av-footer-social a {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: #fff; color: var(--av-navy); border: 1px solid var(--av-border);
}
.av-footer-social a:hover { background: var(--av-blue); color: #fff; border-color: var(--av-blue); }
.av-footer-bottom {
  border-top: 1px solid var(--av-border); padding: 22px 0 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: .87rem; color: var(--av-faint);
}
.av-footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.av-footer-bottom nav a { color: var(--av-faint); }
.av-footer-bottom nav a:hover { color: var(--av-blue); }
.av-footer-bottom ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; flex-wrap: wrap; }
.av-footer-legal-note {
  border-top: 1px solid var(--av-border); padding: 18px 0 26px;
  font-size: .8rem; color: var(--av-faint); line-height: 1.6;
}

/* =========================================================
   SUB-NAV (in-page jump links for long pages)
   ========================================================= */
.av-subnav {
  position: sticky; top: var(--av-header-h); z-index: 90;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--av-border-soft);
}
.av-subnav-track {
  display: flex; gap: 6px; overflow-x: auto; padding: 11px 0; scrollbar-width: thin;
}
.av-subnav-track::-webkit-scrollbar { height: 4px; }
.av-subnav-track::-webkit-scrollbar-thumb { background: var(--av-border); border-radius: 4px; }
.av-subnav a {
  white-space: nowrap; padding: 8px 15px; border-radius: 100px;
  font-size: .89rem; font-weight: 500; color: var(--av-muted); border: 1px solid transparent;
}
.av-subnav a:hover, .av-subnav a.is-active {
  background: var(--av-blue-wash); color: var(--av-blue-dark); border-color: rgba(29,111,196,.2);
}

/* =========================================================
   USE CASE BLOCK
   ========================================================= */
.av-usecase { padding: 74px 0; border-top: 1px solid var(--av-border-soft); }
.av-usecase:first-of-type { border-top: 0; }
.av-usecase-n {
  font-family: var(--av-mono); font-size: .8rem; font-weight: 600; letter-spacing: .12em;
  color: var(--av-blue); text-transform: uppercase; margin-bottom: 10px; display: block;
}
.av-outcome {
  margin-top: 24px; padding: 18px 22px; border-radius: var(--av-radius-sm);
  background: var(--av-blue-wash); border: 1px solid rgba(29,111,196,.18);
  display: flex; gap: 13px; align-items: flex-start;
}
.av-outcome svg { flex: none; color: var(--av-blue); margin-top: 3px; }
.av-outcome b { display: block; color: var(--av-navy); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.av-outcome p { margin: 0; color: var(--av-navy); font-weight: 500; }

.av-chain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 20px; border: 1px dashed var(--av-border); border-radius: var(--av-radius-sm);
  background: var(--av-bg-alt);
}
.av-chain span {
  padding: 8px 15px; border-radius: 8px; background: #fff; border: 1px solid var(--av-border);
  font-weight: 600; font-size: .9rem; color: var(--av-navy);
}
.av-chain svg { color: var(--av-blue); flex: none; }

/* =========================================================
   PROSE (editor content)
   ========================================================= */
.av-prose { max-width: var(--av-maxw-prose); }
.av-prose.is-wide { max-width: none; }
.av-prose h2 { margin-top: 1.8em; }
.av-prose h3 { margin-top: 1.5em; }
.av-prose > *:first-child { margin-top: 0; }
.av-prose ul, .av-prose ol { padding-left: 1.3em; }
.av-prose li { margin-bottom: .5em; color: var(--av-muted); }
.av-prose blockquote {
  margin: 1.6em 0; padding: 18px 26px; border-left: 3px solid var(--av-blue);
  background: var(--av-bg-alt); border-radius: 0 var(--av-radius-sm) var(--av-radius-sm) 0;
  color: var(--av-navy); font-size: 1.06rem;
}
.av-prose img { border-radius: var(--av-radius); }
.av-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.av-prose th, .av-prose td { padding: 12px 14px; border: 1px solid var(--av-border); text-align: left; }
.av-prose th { background: var(--av-bg-alt); color: var(--av-navy); font-weight: 600; }
.av-table-scroll { overflow-x: auto; }

/* =========================================================
   BLOG / ARCHIVE
   ========================================================= */
.av-post-card {
  background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius);
  overflow: hidden; display: flex; flex-direction: column; height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.av-post-card:hover { transform: translateY(-3px); box-shadow: var(--av-shadow-md); }
.av-post-card .thumb { aspect-ratio: 16/9; background: var(--av-blue-wash); overflow: hidden; }
.av-post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.av-post-card .body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.av-post-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.av-post-card .meta { font-size: .82rem; color: var(--av-faint); margin-bottom: 10px; }
.av-post-card p { color: var(--av-muted); font-size: .94rem; flex: 1; }
.av-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.av-pagination .page-numbers {
  padding: 10px 16px; border-radius: 9px; border: 1px solid var(--av-border);
  color: var(--av-navy); font-weight: 500; background: #fff;
}
.av-pagination .page-numbers.current, .av-pagination .page-numbers:hover { background: var(--av-blue); color: #fff; border-color: var(--av-blue); }

.av-content-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 52px; align-items: start; }
.av-sticky { position: sticky; top: calc(var(--av-header-h) + 24px); display: grid; gap: 20px; }
.av-side-box { background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius); padding: 26px; }
.av-side-box h4 { font-size: 1rem; margin-bottom: 14px; }
.av-side-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.av-side-box ul a { display: flex; gap: 9px; align-items: center; color: var(--av-muted); font-size: .93rem; }
.av-side-box ul a:hover { color: var(--av-blue); }
.av-side-box.is-cta { background: var(--av-navy); border-color: var(--av-navy); }
.av-side-box.is-cta h4 { color: #fff; }
.av-side-box.is-cta p { color: #a9b8cc; font-size: .92rem; }

.widget { background: #fff; border: 1px solid var(--av-border); border-radius: var(--av-radius); padding: 24px; margin-bottom: 20px; }
.widget-title { font-size: 1rem; margin-bottom: 14px; }
.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.widget ul a { color: var(--av-muted); font-size: .93rem; }

/* =========================================================
   REVEAL ANIMATION - restrained
   ========================================================= */
.av-js .av-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.av-js .av-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .av-reveal { opacity: 1; transform: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .av-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .av-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .av-event-areas { grid-template-columns: repeat(3, 1fr); }
  .av-footer-top { grid-template-columns: 1fr 1fr; gap: 38px; }
  .av-content-layout { grid-template-columns: 1fr; }
  .av-sticky { position: static; }
}

@media (max-width: 1024px) {
  .av-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .av-feat, .av-feat + .av-feat { grid-template-columns: 1fr; gap: 34px; }
  .av-feat-rev .av-feat-media { order: 0; }
  .av-feat + .av-feat { margin-top: 60px; }
  .av-compare { grid-template-columns: 1fr; gap: 18px; }
  .av-compare-arrow { transform: rotate(90deg); margin: 0 auto; }
  .av-founder { grid-template-columns: 1fr; gap: 30px; padding: 32px; }
  .av-founder-photo { max-width: 220px; }
}

@media (max-width: 900px) {
  .main-navigation {
    position: fixed; inset: var(--av-header-h) 0 auto 0; background: #fff;
    border-bottom: 1px solid var(--av-border); box-shadow: var(--av-shadow-md);
    max-height: 0; overflow: hidden; transition: max-height .3s ease; margin-left: 0;
  }
  .main-navigation.toggled { max-height: calc(100vh - var(--av-header-h)); overflow-y: auto; }
  .av-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 20px; }
  .av-menu > li > a { padding: 14px 12px; border-radius: 9px; font-size: 1rem; }
  .av-menu > li + li { border-top: 1px solid var(--av-border-soft); }
  .menu-toggle { display: flex; }
  .header-cta .av-btn { display: none; }
  .site-header > .av-container-wide { justify-content: space-between; }
  .av-section { padding: 68px 0; }
  .av-section-lg { padding: 76px 0; }
  .av-grid-3, .av-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .av-cta { padding: 38px 30px; }
  .av-form-wrap { padding: 28px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .av-container, .av-container-wide { padding: 0 18px; }
  .av-grid-2, .av-grid-3, .av-grid-4, .av-grid-5 { grid-template-columns: 1fr; }
  .av-event-areas { grid-template-columns: repeat(2, 1fr); }
  .av-mock-stats { grid-template-columns: 1fr; }
  .av-check.av-check-cols { grid-template-columns: 1fr; }
  .av-footer-top { grid-template-columns: 1fr; gap: 32px; }
  .av-form-row { grid-template-columns: 1fr; }
  .av-hero { padding: 62px 0 66px; }
  .av-page-hero { padding: 56px 0 52px; }
  .av-section { padding: 56px 0; }
  .av-head { margin-bottom: 34px; }
  .av-cta { padding: 32px 22px; }
  .av-tower-flow { flex-direction: column; }
  .av-tower-sep { transform: rotate(90deg); }
  .av-founder { padding: 24px; }
  .av-form-wrap { padding: 22px; }
  .av-usecase { padding: 48px 0; }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .site-header, .site-footer, .av-subnav, .av-cta, .menu-toggle { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .av-section { padding: 20px 0; }
}

/* =========================================================
   PHOTOGRAPHY
   ========================================================= */

/* With a photo behind the hero the radial glow muddies the image, so it is
   dialled right back and the navy scrim in the inline style does the work. */
.av-hero.has-bg::after,
.av-page-hero.has-bg::after {
  background: radial-gradient(880px 420px at 86% -12%, rgba(29,111,196,.26), transparent 64%);
}

/* Wide photo band between sections. */
.av-band {
  margin: 64px 0 0;
  border-radius: var(--av-radius-lg);
  overflow: hidden;
  box-shadow: var(--av-shadow);
  background: var(--av-blue-wash);
}
.av-band img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  display: block;
}
.av-band figcaption {
  padding: 13px 20px;
  background: #fff;
  border-top: 1px solid var(--av-border);
  font-size: .85rem;
  color: var(--av-muted);
}
.av-deep .av-band figcaption {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: #a9b8cc;
}

/* Photo sized for a feature row. */
.av-figure {
  margin: 0;
  border-radius: var(--av-radius);
  overflow: hidden;
  box-shadow: var(--av-shadow);
  background: var(--av-blue-wash);
}
.av-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .av-band { margin-top: 40px; }
  .av-band img { aspect-ratio: 16 / 10; }
}

/* =========================================================
   MODERN SECTION TREATMENTS
   Patterns taken from the reference site the client supplied
   (papayaglobal.com): a tinted pill eyebrow, a two-tone headline,
   a faint grid on dark sections, and a live-looking flow diagram.
   Deliberately without its fake-proof furniture — no logo marquee,
   no headline statistics, no testimonial carousel.
   ========================================================= */

/* ---- Pill eyebrow ---- */
.av-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 100px;
  background: var(--av-blue-wash); border: 1px solid rgba(29,111,196,.18);
  font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--av-blue-dark); margin-bottom: 18px;
}
.av-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--av-blue); flex: none;
}
.av-deep .av-eyebrow {
  background: rgba(74,159,232,.14); border-color: rgba(74,159,232,.3); color: #9ecbf5;
}
.av-deep .av-eyebrow::before { background: var(--av-blue-light); }

/* The step/use-case numbers keep the older rule-and-mono treatment. */
.av-step-n, .av-usecase-n { margin-bottom: 14px; }

/* ---- Two-tone headline ---- */
.av-accent { color: var(--av-blue); }
.av-deep .av-accent, .av-hero .av-accent, .av-page-hero .av-accent { color: var(--av-blue-light); }

/* ---- Faint grid on dark sections ---- */
.av-deep { position: relative; }
.av-deep::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1000px 560px at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(1000px 560px at 50% 0%, #000 0%, transparent 78%);
}
.av-deep > .av-container,
.av-deep > .av-container-wide { position: relative; z-index: 1; }

/* ---- Scroll progress ---- */
.av-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; pointer-events: none;
}
.av-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--av-blue), var(--av-blue-light));
  transition: width .12s linear;
}

/* =========================================================
   ANIMATION
   Restrained by design brief. Everything here is suppressed by
   prefers-reduced-motion and by the "Minimal"/"Off" setting in
   Customize -> Motion.
   ========================================================= */

/* ---- Staggered reveal ----
   Scoped to .is-staggered, which JS adds, so the items stay visible without
   JavaScript. */
.av-js .av-stagger.is-staggered > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.av-js .av-stagger.is-staggered > *.in { opacity: 1; transform: none; }

/* ---- Hero: very slow drift on the background photo ---- */
.av-hero.has-bg { animation: av-drift 42s ease-in-out infinite alternate; }
@keyframes av-drift {
  from { background-position: 50% 48%; }
  to   { background-position: 52% 54%; }
}

/* ---- Control Tower: flowing connectors ---- */
.av-tower-arrow { position: relative; }
.av-tower-arrow::before {
  background: none;
  border-left: 2px dashed rgba(29,111,196,.42);
  width: 0;
  height: 30px;
}
.av-deep .av-tower-arrow::before,
.av-on-dark .av-tower-arrow::before { border-left-color: rgba(122,183,242,.5); }

/* The travelling pulse that shows the direction of flow. */
.av-tower-arrow::after {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: var(--av-blue-light);
  box-shadow: 0 0 0 4px rgba(74,159,232,.22);
  opacity: 0;
}
.js-anim .av-tower-arrow::after { animation: av-pulse-down 2.4s ease-in-out infinite; }
@keyframes av-pulse-down {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(30px); }
}

/* ---- Control Tower: the flow steps light up in sequence ---- */
.av-tower-step {
  transition: background .4s ease, border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.av-tower-step.is-live {
  background: var(--av-blue);
  border-color: var(--av-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(29,111,196,.34);
}
.av-tower-step.is-live svg { color: #fff; }
.av-tower-sep { transition: opacity .4s ease, transform .4s ease; opacity: .45; }
.av-tower-sep.is-live { opacity: 1; transform: translateX(2px); }

/* Hover-to-trace, as on the reference diagram. */
.av-tower:hover .av-tower-chip { transition: border-color .3s ease, box-shadow .3s ease; }
.av-tower-chip:hover {
  border-color: var(--av-blue);
  box-shadow: 0 0 0 3px rgba(29,111,196,.12);
}

/* ---- Status: the critical dot breathes ---- */
.js-anim .av-status-critical .dot,
.js-anim .av-mock-stat.is-critical b .dot {
  animation: av-breathe 2.6s ease-in-out infinite;
}
@keyframes av-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,45,32,.42); }
  55%      { box-shadow: 0 0 0 5px rgba(217,45,32,0); }
}

/* ---- Mockups: the tracker checks itself off when scrolled into view ---- */
.av-mock-checks li .box svg { transition: opacity .3s ease, transform .3s ease; }
.js-anim .av-mock-checks li.will-check .box {
  background: transparent; border-color: #c3cede; color: transparent;
}
.js-anim .av-mock-checks li.will-check.is-checked .box {
  background: var(--av-ontrack); border-color: var(--av-ontrack); color: #fff;
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

/* ---- Cards: a quieter, more deliberate lift ---- */
.av-card, .av-step, .av-post-card {
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s cubic-bezier(.22,.61,.36,1),
              border-color .28s ease;
}
.av-card::after {
  content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--av-blue), var(--av-blue-light));
  border-radius: 0 0 2px 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.av-card { position: relative; overflow: hidden; }
.av-card:hover::after { transform: scaleX(1); }

/* ---- Buttons: arrow nudges on hover ---- */
.av-btn svg { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.av-btn:hover svg { transform: translateX(3px); }

/* ---- Sub-nav: the active pill slides rather than snapping ---- */
.av-subnav a { transition: background .28s ease, color .28s ease, border-color .28s ease; }

/* ---- Motion settings ---- */
/* "Minimal": keep reveals, drop the looping animations. */
.av-motion-minimal .av-hero.has-bg,
.av-motion-minimal .av-tower-arrow::after,
.av-motion-minimal .av-status-critical .dot,
.av-motion-minimal .av-mock-stat.is-critical b .dot { animation: none; }
.av-motion-minimal .av-tower-arrow::after { opacity: 0; }

/* "Off": no motion at all. */
.av-motion-off .av-reveal,
.av-motion-off .av-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.av-motion-off * { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .av-reveal, .av-stagger > * { opacity: 1 !important; transform: none !important; }
  .av-hero.has-bg, .av-tower-arrow::after,
  .av-status-critical .dot, .av-mock-stat.is-critical b .dot { animation: none !important; }
  .av-tower-arrow::after { opacity: 0; }
}