/* ============================================================
   page-av.css — AV Solutions top-level single page (lists_av.htm)
   Prefix: .av_   Depends on global-new.css for .layout and the
   brand variables. No image assets: every "tech" surface here is
   CSS, so the page looks finished before any photography exists.
   ============================================================ */

.av_hero,
.av_chain,
.av_cta {
  --av-ink: #060c16;
  --av-ink-2: #0c1626;
  --av-line: rgba(255, 255, 255, 0.084);
  --av-dim: #8fa3ba;
}

/* ---------- shared section headers ---------- */
.av_sec_head { max-width: 720px; margin: 0 0 44px; }
.av_sec_tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px;
  padding-left: 26px; position: relative;
}
.av_sec_tag::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 2px;
  background: var(--accent); border-radius: 1px;
}
.av_sec_head h2 {
  margin: 0; font-size: 34px; font-weight: 800; color: var(--text-dark);
  letter-spacing: -0.025em; line-height: 1.2;
}
.av_sec_head p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.75; color: #5f6b7a; }
.av_sec_head_dark h2 { color: #fff; }
.av_sec_head_dark p { color: var(--av-dim); }

/* ---------- buttons ---------- */
.av_btn_primary, .av_btn_ghost {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 15px 30px; border-radius: 50px; font-size: 14.5px; font-weight: 700;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s, border-color 0.25s;
}
.av_btn_primary {
  background: var(--primary-gradient); color: #fff !important;
  box-shadow: 0 10px 28px rgba(10, 14, 23, 0.18);
}
.av_btn_primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(10, 14, 23, 0.18); }
.av_btn_ghost {
  color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.04);
}
.av_btn_ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); transform: translateY(-2px); }

/* ============================================================
   1. HERO
   ============================================================ */
.av_hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, var(--av-ink) 0%, var(--av-ink-2) 55%, #0a1a2c 100%);
  padding: 86px 0 0;
}
/* engineering-drawing grid, fading out downward */
.av_hero_grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--av-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--av-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(115% 85% at 72% 0%, #000 25%, transparent 78%);
          mask-image: radial-gradient(115% 85% at 72% 0%, #000 25%, transparent 78%);
}
.av_hero_glow {
  position: absolute; z-index: -1; pointer-events: none;
  right: -180px; top: -220px; width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(200, 169, 106, 0.3), transparent 62%);
  filter: blur(10px);
}
.av_hero_inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  column-gap: 40px; align-items: center;
}
.av_hero_copy { min-width: 0; }
.av_hero_kpis { grid-column: 1 / -1; }
.av_eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #c8a96a; background: rgba(200, 169, 106, 0.12);
  border: 1px solid rgba(200, 169, 106, 0.3); border-radius: 50px; padding: 8px 18px;
}
.av_hero_title {
  margin: 24px 0 0; color: #fff; font-size: 58px; font-weight: 900;
  letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance;
}
.av_hero_title::after {
  content: ''; display: block; width: 68px; height: 4px; border-radius: 2px;
  margin-top: 22px; background: var(--primary-gradient);
}
.av_hero_lead {
  margin: 24px 0 0; max-width: 660px;
  font-size: 16.5px; line-height: 1.8; color: #b3c2d3;
}
.av_hero_btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.av_hero_kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 62px; border-top: 1px solid var(--av-line);
}
.av_kpi { padding: 26px 24px 30px; border-left: 1px solid var(--av-line); }
.av_kpi:first-child { border-left: 0; padding-left: 0; }
.av_kpi b {
  display: block; font-size: 34px; font-weight: 900; color: #fff;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.av_kpi b span { color: var(--accent-text); }
.av_kpi_l {
  display: block; margin-top: 9px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #71829a;
}

/* ---------- 3D signal cube (hero right) ---------- */
.av_stage {
  position: relative; height: 380px; display: flex;
  align-items: center; justify-content: center;
  perspective: 1100px; perspective-origin: 50% 45%;
}
.av_stage_ring {
  position: absolute; width: 330px; height: 330px; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.132);
  box-shadow: 0 0 60px rgba(10, 14, 23, 0.072) inset;
  animation: av_ring 26s linear infinite;
}
.av_stage_ring::after {
  content: ''; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px;
  margin-left: -3px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px rgba(10, 14, 23, 0.18);
}
@keyframes av_ring { to { transform: rotate(360deg); } }

.av_cube {
  --av-aim: rotateX(0deg) rotateY(0deg);
  --av-park: 0deg;
  width: 180px; height: 180px; transform-style: preserve-3d;
  transform: var(--av-aim); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.av_cube_in {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: av_spin 22s linear infinite;
}
.av_cube_held .av_cube_in {
  animation: none;
  transform: rotateX(-12deg) rotateY(var(--av-park));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes av_spin {
  from { transform: rotateX(-14deg) rotateY(0deg); }
  to   { transform: rotateX(-14deg) rotateY(360deg); }
}
.av_face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  background: linear-gradient(150deg, rgba(12, 28, 48, 0.92), rgba(6, 14, 26, 0.92));
  border: 1px solid rgba(200, 169, 106, 0.35);
  box-shadow: 0 0 24px rgba(10, 14, 23, 0.072) inset;
  backface-visibility: visible;
}
.av_face i { font-size: 30px; color: var(--accent-text); }
.av_face b {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: #cfe2f3;
}
.av_face:hover { border-color: rgba(200, 169, 106, 0.8); }
.av_face_fr { transform: translateZ(90px); }
.av_face_bk { transform: rotateY(180deg) translateZ(90px); }
.av_face_rt { transform: rotateY(90deg) translateZ(90px); }
.av_face_lf { transform: rotateY(-90deg) translateZ(90px); }
.av_face_tp { transform: rotateX(90deg) translateZ(90px); }
.av_face_bt { transform: rotateX(-90deg) translateZ(90px); }
.av_stage_hint {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #5c7186; white-space: nowrap;
}

/* ---------- scroll reveal + pointer tilt ---------- */
.av_anim .av_cap, .av_anim .av_app, .av_anim .av_step,
.av_anim .av_node, .av_anim .av_sec_head {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.av_anim .av_in { opacity: 1; transform: none; }
[data-av-tilt] { transform-style: preserve-3d; will-change: transform; }
/* the pointer writes --av-mx/--av-my, so the sheen tracks the cursor */
[data-av-tilt]::before { transition: opacity 0.3s; }
.av_cap, .av_app { position: relative; }

/* ---------- sub-category page (lists_avsub.htm) ---------- */
.av_hero_sub { padding: 70px 0 0; }
.av_hero_sub .av_hero_inner { grid-template-columns: 1fr; }
.av_hero_sub .av_hero_copy { padding-bottom: 66px; }
.av_hero_sub .av_hero_title { font-size: 46px; }
.av_hero_sub .av_hero_lead { max-width: 720px; font-size: 16px; }
.av_sub_body { padding-top: 56px; }
/* the card for the page you are already on: marked, still clickable */
.av_cap.av_cap_now { border-color: rgba(200, 169, 106, 0.55); background: var(--accent-soft-solid); }
.av_cap.av_cap_now::after { width: 100%; }

/* ============================================================
   2. CMS COPY
   ============================================================ */
.av_intro { padding: 70px 0 0; }
.av_intro_card {
  background: #fff; border: 1px solid #e9edf3; border-radius: 18px;
  padding: 44px 48px; box-shadow: var(--shadow-card);
  font-size: 15.5px; line-height: 1.85; color: #4a5464;
}
.av_intro_card h2, .av_intro_card h3 { color: var(--text-dark); font-weight: 800; margin: 26px 0 12px; }
.av_intro_card h2:first-child, .av_intro_card h3:first-child { margin-top: 0; }
.av_intro_card img { border-radius: 10px; }

/* ============================================================
   3. CAPABILITIES  (the CMS sub-categories)
   ============================================================ */
.av_caps { padding: 84px 0; }
.av_cap_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.av_cap {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  background: #fff; border: 1px solid #e7ebf1; border-radius: 16px;
  padding: 32px 28px 28px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
/* corner bracket — the one ornament that says "instrument", not "brochure" */
.av_cap::before {
  content: ''; position: absolute; right: 18px; top: 18px; width: 16px; height: 16px;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent);
  opacity: 0.25; transition: opacity 0.3s, transform 0.3s;
}
.av_cap::after {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--primary-gradient); transition: width 0.4s ease;
}
.av_cap:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); border-color: rgba(200, 169, 106, 0.3); }
.av_cap:hover::before { opacity: 1; transform: translate(2px, -2px); }
.av_cap:hover::after { width: 100%; }
.av_cap_no {
  position: absolute; right: 24px; bottom: 18px;
  font-size: 44px; font-weight: 900; line-height: 1; color: #f1f4f8;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em; pointer-events: none;
}
.av_cap_ico {
  width: 54px; height: 54px; border-radius: 14px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--accent-text); background: rgba(200, 169, 106, 0.1);
  transition: background 0.3s, color 0.3s;
}
.av_cap:hover .av_cap_ico { background: var(--accent); color: #5f6b7a; }
.av_cap h3 { margin: 0 0 9px; font-size: 17.5px; font-weight: 800; color: var(--text-dark); }
.av_cap p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #5f6b7a; position: relative; }
.av_cap_go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-text); position: relative;
}
.av_cap_go i { transition: transform 0.25s; }
.av_cap:hover .av_cap_go i { transform: translateX(5px); }

/* ============================================================
   4. SIGNAL CHAIN
   ============================================================ */
.av_chain {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #071019 0%, #0b1a2a 100%);
  padding: 84px 0 90px;
}
.av_chain_grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--av-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--av-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(100% 70% at 50% 40%, #000 20%, transparent 80%);
          mask-image: radial-gradient(100% 70% at 50% 40%, #000 20%, transparent 80%);
}

.av_chain_flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.av_node {
  position: relative; padding: 28px 20px 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
/* the link between stages — a hairline with a travelling pulse */
.av_node:not(:last-child)::after {
  content: ''; position: absolute; right: -17px; top: 50%; width: 18px; height: 1px;
  background: rgba(200, 169, 106, 0.45);
}
.av_node:not(:last-child)::before {
  content: ''; position: absolute; right: -17px; top: calc(50% - 2px);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px rgba(10, 14, 23, 0.18);
  animation: av_pulse 2.6s linear infinite;
}
.av_node:nth-child(2)::before { animation-delay: 0.35s; }
.av_node:nth-child(3)::before { animation-delay: 0.7s; }
.av_node:nth-child(4)::before { animation-delay: 1.05s; }
@keyframes av_pulse {
  0%   { transform: translateX(0);    opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(14px); opacity: 0; }
}
.av_node:hover { background: rgba(200, 169, 106, 0.08); border-color: rgba(200, 169, 106, 0.4); transform: translateY(-4px); }
.av_node_step {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
  color: #8591a3; margin-bottom: 16px;
}
.av_node > i {
  display: block; font-size: 24px; color: var(--accent-text); margin-bottom: 14px;
}
.av_node h4 { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; color: #fff; }
.av_node p { margin: 0; font-size: 12.5px; line-height: 1.65; color: #8fa3ba; }
.av_node_key { background: rgba(200, 169, 106, 0.1); border-color: rgba(200, 169, 106, 0.36); }

/* ============================================================
   5. APPLICATIONS
   ============================================================ */
.av_apps { padding: 84px 0; background: #f4f6f9; }
.av_app_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.av_app {
  background: #fff; border: 1px solid #e7ebf1; border-radius: 14px; padding: 28px 26px;
  transition: box-shadow 0.3s, transform 0.3s;
}
.av_app:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.av_app i { font-size: 20px; color: var(--accent-text); }
.av_app h4 { margin: 14px 0 8px; font-size: 16px; font-weight: 800; color: var(--text-dark); }
.av_app p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #5f6b7a; }

/* ============================================================
   6. DELIVERY
   ============================================================ */
.av_deliver { padding: 84px 0; }
.av_steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.av_step { position: relative; padding-top: 26px; border-top: 2px solid #e7ebf1; transition: border-color 0.3s; }
.av_step:hover { border-top-color: var(--accent); }
.av_step span {
  display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.12em;
  color: var(--accent-text); margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.av_step h4 { margin: 0 0 9px; font-size: 17px; font-weight: 800; color: var(--text-dark); }
.av_step p { margin: 0; font-size: 13.5px; line-height: 1.72; color: #5f6b7a; }

/* ============================================================
   7. CTA
   ============================================================ */
.av_cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #071019 0%, #10243a 100%);
  padding: 76px 0 80px; text-align: center;
}
.av_cta_glow {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -260px; width: 760px; height: 560px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(200, 169, 106, 0.28), transparent 65%);
}
.av_cta_inner h2 {
  margin: 0; color: #fff; font-size: 32px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance;
}
.av_cta_inner p {
  margin: 16px auto 0; max-width: 680px;
  font-size: 15.5px; line-height: 1.8; color: #a9bacd;
}
.av_cta_btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .av_hero_inner { grid-template-columns: 1fr; row-gap: 10px; }
  .av_stage { order: 2; height: 320px; }
  .av_hero_kpis { order: 3; }
  .av_cap_grid, .av_app_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av_steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av_chain_flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* connectors only make sense in an unbroken row */
  .av_node::before, .av_node::after { display: none; }
}

@media (max-width: 768px) {
  .av_hero { padding-top: 56px; }
  .av_hero_title { font-size: 36px; }
  .av_hero_lead { font-size: 15px; }
  .av_hero_kpis { grid-template-columns: repeat(2, 1fr); margin-top: 44px; }
  .av_kpi { padding: 20px 14px; }
  .av_kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .av_kpi:nth-child(n + 3) { border-top: 1px solid var(--av-line); }
  .av_kpi b { font-size: 27px; }

  .av_sec_head { margin-bottom: 32px; }
  .av_sec_head h2 { font-size: 26px; }
  .av_sec_head p { font-size: 14.5px; }

  .av_intro { padding-top: 48px; }
  .av_intro_card { padding: 28px 22px; }

  .av_caps, .av_apps, .av_deliver { padding: 56px 0; }
  .av_chain { padding: 56px 0 60px; }
  .av_cta { padding: 56px 0 60px; }

  .av_cap_grid, .av_app_grid, .av_steps, .av_chain_flow { grid-template-columns: 1fr; }
  .av_stage { height: 260px; }
  .av_cube { width: 130px; height: 130px; }
  .av_face_fr, .av_face_bk, .av_face_rt, .av_face_lf, .av_face_tp, .av_face_bt { --z: 65px; }
  .av_face_fr { transform: translateZ(65px); }
  .av_face_bk { transform: rotateY(180deg) translateZ(65px); }
  .av_face_rt { transform: rotateY(90deg) translateZ(65px); }
  .av_face_lf { transform: rotateY(-90deg) translateZ(65px); }
  .av_face_tp { transform: rotateX(90deg) translateZ(65px); }
  .av_face_bt { transform: rotateX(-90deg) translateZ(65px); }
  .av_stage_ring { width: 220px; height: 220px; }
  .av_cta_inner h2 { font-size: 24px; }
  .av_btn_primary, .av_btn_ghost { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .av_cube_in, .av_stage_ring { animation: none; }
  .av_anim .av_cap, .av_anim .av_app, .av_anim .av_step,
  .av_anim .av_node, .av_anim .av_sec_head { opacity: 1; transform: none; }
  .av_node::before { animation: none; opacity: 1; }
  .av_cap:hover, .av_app:hover, .av_node:hover,
  .av_btn_primary:hover, .av_btn_ghost:hover { transform: none; }
}

/* ============================================================
   6. PHOTO HERO  (added when real photography landed)
   The dark gradient stays underneath, so a missing / slow image
   degrades to exactly the old look instead of a white flash.
   ============================================================ */
.av_hero_photo { isolation: isolate; }
.av_hero_ph {
  position: absolute; inset: -8% 0 -8%; z-index: -4; pointer-events: none;
  background-size: cover; background-position: center 42%;
  will-change: transform;
}
.av_hero_photo_soft .av_hero_ph { opacity: 0.42; }
.av_hero_scrim {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,12,22,0.82) 0%, rgba(6,12,22,0.52) 34%, rgba(6,12,22,0.90) 100%),
    linear-gradient(100deg, rgba(6,12,22,0.92) 0%, rgba(6,12,22,0.34) 58%, rgba(6,12,22,0.10) 100%);
}
.av_hero_photo .av_hero_grid { opacity: 0.5; }
.av_hero_sub.av_hero_photo { padding: 96px 0 0; }
.av_hero_sub.av_hero_photo .av_hero_copy { padding-bottom: 86px; }

/* ============================================================
   7. CMS BODY  (.avb)
   These rules used to live in a <style> block inside the article
   itself. They are here so the copy in the CMS is markup only and
   the look can be changed without re-pasting three pages.
   ============================================================ */
.avb { font-size: 15.5px; line-height: 1.85; color: #4a5464; }
.avb h2 {
  font-size: 25px; font-weight: 800; color: var(--text-dark);
  letter-spacing: -0.02em; margin: 52px 0 16px; line-height: 1.25;
}
.avb h2:first-child { margin-top: 0; }
.avb h3 { font-size: 16.5px; font-weight: 800; color: var(--text-dark); margin: 26px 0 8px; }
.avb p { margin: 0 0 16px; }
.avb strong { color: var(--text-dark); font-weight: 700; }
.avb em { font-style: normal; color: var(--accent-text); font-weight: 700; }
.avb a { color: var(--accent-text); }
.avb_lead { font-size: 17px; line-height: 1.8; color: #55606f; }
.avb_rule {
  width: 56px; height: 3px; border-radius: 2px; margin: 26px 0 6px;
  background: var(--primary-gradient);
}

/* --- the two-up card grid --- */
.avb_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0 8px; }
.avb_card {
  position: relative; overflow: hidden; padding: 18px 20px 18px 22px;
  border: 1px solid #e6ebf2; border-radius: 12px; background: #fbfcfe;
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.3s, border-color 0.3s;
}
.avb_card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary-gradient);
}
.avb_card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(13,21,32,0.4); border-color: #d6e3ef; }
.avb_card b { display: block; font-size: 14.5px; color: var(--text-dark); margin-bottom: 5px; }
.avb_card span { display: block; font-size: 13.5px; line-height: 1.65; color: #6d7887; }

/* --- tables --- */
.avb table { width: 100%; border-collapse: collapse; margin: 20px 0 8px; font-size: 14.5px; }
.avb th {
  text-align: left; padding: 11px 14px; background: #f4f8fc; color: var(--text-dark);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid #e3eaf2;
}
.avb td { padding: 14px; border-bottom: 1px solid #eef2f7; vertical-align: top; line-height: 1.7; }
.avb td:first-child { white-space: nowrap; font-weight: 700; color: var(--text-dark); }

/* --- lists --- */
.avb ul { list-style: none; padding: 0; margin: 18px 0; }
.avb ul li { position: relative; padding-left: 24px; margin-bottom: 11px; }
.avb ul li::before {
  content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent);
}
.avb ol.avb_steps {
  list-style: none; counter-reset: s; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0 8px;
}
.avb ol.avb_steps li {
  counter-increment: s; position: relative; padding: 18px 20px 18px 58px;
  border: 1px solid #e6ebf2; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.7;
}
.avb ol.avb_steps li::before {
  content: '0' counter(s); position: absolute; left: 18px; top: 16px;
  font-size: 15px; font-weight: 900; color: var(--accent-text); letter-spacing: -0.02em;
}
.avb ol.avb_steps li b { display: block; color: var(--text-dark); margin-bottom: 3px; }

/* --- the closing blue note --- */
.avb_note {
  margin: 30px 0 4px; padding: 20px 24px; border-radius: 14px;
  background: var(--accent-soft-solid); border: 1px solid #cfe9f8; font-size: 14.5px; line-height: 1.75;
}
.avb_note b { display: block; color: var(--ink); margin-bottom: 6px; font-size: 15px; }

/* ============================================================
   8. FIGURES — photography
   ============================================================ */
.avb_fig { margin: 28px 0 10px; }
.avb_shot {
  position: relative; overflow: hidden; border-radius: 16px; background: var(--av-ink, #060c16);
  box-shadow: 0 26px 54px -28px rgba(13,21,32,0.6);
}
.avb_shot img {
  display: block; width: 100%; height: auto;
  transform: scale(1.02); transition: transform 1.1s cubic-bezier(0.2,0.7,0.2,1);
}
.avb_shot:hover img { transform: scale(1.06); }
/* a thin brand rule along the bottom edge, drawn on reveal */
.avb_shot::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--primary-gradient); transform: scaleX(0); transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.2,0.7,0.2,1) 0.2s;
}
.avb_fig.av_in .avb_shot::after { transform: scaleX(1); }
.avb_cap { margin: 12px 2px 0; font-size: 13px; line-height: 1.65; color: #77838f; }
.avb_cap b { color: #4a5464; font-weight: 700; }

/* ============================================================
   9. DIAGRAMS — the parts a photograph cannot say
   Numbers, coverage and signal flow. Everything animates off the
   .av_in class the reveal observer adds, so nothing moves until
   it is actually on screen.
   ============================================================ */

/* ---------- 9a. pixel pitch <-> viewing distance (Led wall) ---------- */
.lw_scale {
  position: relative; padding: 26px 0 10px; border-radius: 16px;
  background: linear-gradient(170deg, #f7fafd, #eef4fa); border: 1px solid #e3ebf3;
}
.lw_bar {
  position: relative; height: 10px; margin: 0 26px; border-radius: 5px; overflow: hidden;
  background: #dfe8f1;
}
.lw_bar::before {
  content: ''; position: absolute; inset: 0; border-radius: 5px;
  background: linear-gradient(90deg, #1f2633, #1f2633 52%, #0c1626);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.2,0.8,0.2,1);
}
.lw_scale.av_in .lw_bar::before { transform: scaleX(1); }
.lw_ticks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 20px 14px 8px; }
.lw_tick {
  position: relative; text-align: center; padding: 14px 6px 12px; border-radius: 12px;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.lw_tick::before {
  content: ''; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px;
  background: #b9cfe2; transform: translateX(-50%) scaleY(0); transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1);
}
.lw_scale.av_in .lw_tick::before { transform: translateX(-50%) scaleY(1); }
.lw_scale.av_in .lw_tick:nth-child(2)::before { transition-delay: 0.10s; }
.lw_scale.av_in .lw_tick:nth-child(3)::before { transition-delay: 0.20s; }
.lw_scale.av_in .lw_tick:nth-child(4)::before { transition-delay: 0.30s; }
.lw_scale.av_in .lw_tick:nth-child(5)::before { transition-delay: 0.40s; }
.lw_tick:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(13,21,32,0.45); }
.lw_tick b {
  display: block; font-size: 17px; font-weight: 900; color: var(--ink);
  letter-spacing: -0.02em; margin-bottom: 6px;
}
.lw_tick span { display: block; font-size: 12.5px; line-height: 1.55; color: #6d7887; }
.lw_tick span.lw_room { color: #97a3b1; font-size: 11.5px; margin-top: 4px; }

/* ---------- 9b. loudspeaker coverage plan (Audio) ---------- */
.au_room {
  position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden;
  background: linear-gradient(165deg, #060c16, #0c1626); border: 1px solid #dfe7ef;
  box-shadow: 0 26px 54px -30px rgba(13,21,32,0.6);
}
.au_grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.au_stage {
  position: absolute; left: 8%; top: 50%; transform: translateY(-50%);
  width: 5%; height: 56%; border-radius: 4px; background: rgba(200, 169, 106, 0.18);
  border: 1px solid rgba(200, 169, 106, 0.5);
}
.au_stage_l {
  position: absolute; left: 7%; top: 8%; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #c8a96a;
}
.au_sp {
  position: absolute; width: 13px; height: 13px; border-radius: 3px; background: var(--accent);
  box-shadow: 0 0 12px rgba(10, 14, 23, 0.18); transform: translate(-50%, -50%);
}
.au_sp::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px;
  margin: -130px 0 0 -130px; border-radius: 50%; border: 1px solid rgba(200, 169, 106, 0.22);
  background: radial-gradient(circle, rgba(200, 169, 106, 0.3), rgba(200, 169, 106, 0.07) 55%, transparent 72%);
  transform: scale(0.2); opacity: 0;
  transition: transform 0.9s cubic-bezier(0.2,0.8,0.2,1), opacity 0.7s ease;
}
.au_fig.av_in .au_sp::before { transform: scale(1); opacity: 1; }
.au_fig.av_in .au_p2::before { transition-delay: 0.09s; }
.au_fig.av_in .au_p3::before { transition-delay: 0.18s; }
.au_fig.av_in .au_p4::before { transition-delay: 0.27s; }
.au_fig.av_in .au_p5::before { transition-delay: 0.36s; }
.au_fig.av_in .au_p6::before { transition-delay: 0.45s; }
.au_p1 { left: 26%; top: 26%; } .au_p2 { left: 26%; top: 74%; }
.au_p3 { left: 52%; top: 26%; } .au_p4 { left: 52%; top: 74%; }
.au_p5 { left: 78%; top: 26%; } .au_p6 { left: 78%; top: 74%; }

/* ---------- 9c. zone levels (Audio) ---------- */
.au_zones { display: grid; gap: 12px; margin: 24px 0 8px; }
.au_zone {
  display: grid; grid-template-columns: 156px 1fr 92px; align-items: center; gap: 14px;
  padding: 14px 18px; border: 1px solid #e6ebf2; border-radius: 12px; background: #fbfcfe;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.au_zone:hover { border-color: #cfe0ee; box-shadow: 0 12px 26px -18px rgba(13,21,32,0.4); }
.au_zone b { font-size: 14.5px; color: var(--text-dark); }
.au_meter { height: 8px; border-radius: 4px; background: #e6edf4; overflow: hidden; }
.au_fill {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #1f2633, #1f2633);
  transition: width 1.1s cubic-bezier(0.2,0.8,0.2,1);
}
.au_l1 { width: 32%; } .au_l2 { width: 48%; } .au_l3 { width: 62%; } .au_l4 { width: 84%; }
.av_anim .au_zones:not(.av_in) .au_fill { width: 0; }
.au_val { font-size: 13px; color: #6d7887; text-align: right; white-space: nowrap; }

/* ---------- 9d. interactive room control panel (AV Control) ---------- */
.cs_demo { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; margin: 28px 0 10px; }
.cs_panel {
  border-radius: 22px; padding: 16px; user-select: none;
  background: linear-gradient(165deg, #0c1626, #060c16);
  border: 1px solid rgba(255, 255, 255, 0.132);
  box-shadow: 0 24px 52px -24px rgba(13,21,32,0.6);
}
.cs_bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 4px 6px 14px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.cs_bar b { color: #c8a96a; font-weight: 800; }
.cs_bar span { color: #7d8ea1; text-align: right; }
.cs_btns { display: grid; gap: 9px; }
.cs_btn {
  position: relative; overflow: hidden; cursor: pointer; padding: 13px 16px; border-radius: 13px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255, 255, 255, 0.096);
  transition: background 0.25s, border-color 0.25s, transform 0.18s;
}
.cs_btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(200, 169, 106, 0.4); }
.cs_btn:active { transform: scale(0.985); }
.cs_btn b { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.cs_btn span { display: block; font-size: 11.5px; line-height: 1.5; color: #8fa3ba; }
.cs_btn.cs_btn_on, .cs_btn.cs_btn_on:hover {
  background: linear-gradient(135deg, rgba(31, 38, 51, 0.92), rgba(31, 38, 51, 0.92));
  border-color: rgba(200, 169, 106, 0.9); box-shadow: 0 10px 24px -12px rgba(10, 14, 23, 0.18);
}
.cs_btn.cs_btn_on span { color: rgba(255,255,255,0.86); }
.cs_vol { display: flex; align-items: center; gap: 12px; padding: 16px 6px 4px; }
.cs_vol i { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #7d8ea1; font-style: normal; }
.cs_track { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.cs_track em {
  display: block; height: 100%; border-radius: 3px; width: 46%;
  background: linear-gradient(90deg, #1f2633, #c8a96a);
  transition: width 0.5s cubic-bezier(0.2,0.8,0.2,1);
}

/* the room that answers the panel */
.cs_room {
  position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden;
  background: linear-gradient(175deg, #0c1626, #060c16); border: 1px solid #dfe7ef;
  box-shadow: 0 24px 52px -28px rgba(13,21,32,0.6);
}
.cs_screen {
  position: absolute; left: 14%; right: 14%; top: 13%; height: 34%; border-radius: 5px;
  background: #0a121e; border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.55s, box-shadow 0.55s, border-color 0.55s;
}
.cs_screen::after {
  content: ''; position: absolute; inset: 3px; border-radius: 3px; opacity: 0;
  background: linear-gradient(125deg, #1f2633, #1f2633 48%, #0a2d52);
  transition: opacity 0.55s;
}
.cs_lights { position: absolute; left: 12%; right: 12%; top: 6%; display: flex; justify-content: space-between; }
.cs_lights em {
  width: 34px; height: 5px; border-radius: 3px; background: #f0c98a; opacity: 0.22;
  transition: opacity 0.55s, box-shadow 0.55s;
}
.cs_blind {
  position: absolute; right: 0; top: 0; bottom: 0; width: 11%;
  background: linear-gradient(180deg, rgba(150,180,210,0.32), rgba(150,180,210,0.12));
  transform-origin: top; transform: scaleY(0.14); transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
.cs_tables { position: absolute; left: 12%; right: 18%; bottom: 26%; display: grid; gap: 7px; }
.cs_tables em { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.096); transition: background 0.5s; }
.cs_state {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
  font-size: 12px; line-height: 1.55; color: #9fb2c6;
  background: linear-gradient(0deg, rgba(6,12,22,0.95), rgba(6,12,22,0));
}
.cs_state b { color: #fff; font-weight: 700; }

/* the four states, set by page-av.js on click */
.cs_m1 .cs_screen { border-color: rgba(200, 169, 106, 0.6); box-shadow: 0 0 40px rgba(10, 14, 23, 0.18); }
.cs_m1 .cs_screen::after { opacity: 1; }
.cs_m1 .cs_lights em { opacity: 0.4; }
.cs_m1 .cs_blind { transform: scaleY(1); }

.cs_m2 .cs_screen { border-color: rgba(200, 169, 106, 0.6); box-shadow: 0 0 40px rgba(10, 14, 23, 0.18); }
.cs_m2 .cs_screen::after { opacity: 1; }
.cs_m2 .cs_lights em { opacity: 0.85; box-shadow: 0 0 16px rgba(240,201,138,0.5); }
.cs_m2 .cs_blind { transform: scaleY(0.55); }
.cs_m2 .cs_tables em { background: rgba(255, 255, 255, 0.18); }

.cs_m3 .cs_screen { border-color: rgba(200, 169, 106, 0.45); box-shadow: 0 0 30px rgba(10, 14, 23, 0.132); }
.cs_m3 .cs_screen::after { opacity: 0.7; }
.cs_m3 .cs_lights em { opacity: 0.55; box-shadow: 0 0 20px rgba(240,201,138,0.4); }
.cs_m3 .cs_blind { transform: scaleY(1); }
.cs_m3 .cs_tables em { background: rgba(240,201,138,0.22); }

.cs_m4 .cs_screen::after { opacity: 0; }
.cs_m4 .cs_lights em { opacity: 0.12; }
.cs_m4 .cs_blind { transform: scaleY(0.14); }

/* ---------- 9e. control topology (AV Control) ---------- */
.cs_topo { padding: 26px 22px 24px; border-radius: 16px; background: linear-gradient(170deg, #f7fafd, #eef4fa); border: 1px solid #e3ebf3; }
.cs_hub {
  max-width: 300px; margin: 0 auto; text-align: center; padding: 15px 18px; border-radius: 13px;
  background: var(--primary-gradient); color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 14px 30px -14px rgba(10, 14, 23, 0.18);
}
.cs_stem { width: 2px; height: 22px; margin: 0 auto; background: #c6dcec; transform: scaleY(0); transform-origin: top; transition: transform 0.5s ease; }
.cs_topo.av_in .cs_stem { transform: scaleY(1); }
.cs_leafs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs_leaf {
  position: relative; padding: 15px 14px; border-radius: 12px; background: #fff;
  border: 1px solid #e3ebf3; text-align: center;
  transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.28s, border-color 0.28s;
}
.cs_leaf:hover { transform: translateY(-4px); border-color: #bcd9ee; box-shadow: 0 16px 32px -18px rgba(13,21,32,0.45); }
.cs_leaf::before {
  content: ''; position: absolute; left: 50%; top: -13px; width: 2px; height: 13px; background: #c6dcec;
  transform: translateX(-50%) scaleY(0); transform-origin: bottom; transition: transform 0.4s ease 0.35s;
}
.cs_topo.av_in .cs_leaf::before { transform: translateX(-50%) scaleY(1); }
.cs_leaf:nth-child(n+4)::before { display: none; }
.cs_leaf b { display: block; font-size: 13.5px; color: var(--text-dark); margin-bottom: 3px; }
.cs_leaf span { display: block; font-size: 12px; line-height: 1.5; color: #6d7887; }

/* ============================================================
   10. RESPONSIVE + MOTION for sections 6-9
   ============================================================ */
@media (max-width: 1100px) {
  .cs_demo { grid-template-columns: 1fr; }
  .cs_panel { max-width: 380px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .lw_ticks { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lw_tick:nth-child(n+3)::before { display: none; }
  .cs_leafs { grid-template-columns: repeat(2, 1fr); }
  .cs_leaf:nth-child(n+3)::before { display: none; }
}
@media (max-width: 768px) {
  .av_hero_sub.av_hero_photo { padding: 64px 0 0; }
  .av_hero_sub.av_hero_photo .av_hero_copy { padding-bottom: 56px; }
  .avb_grid, .avb ol.avb_steps { grid-template-columns: 1fr; }
  .avb h2 { font-size: 20px; margin-top: 38px; }
  .avb table { display: block; overflow-x: auto; }
  .avb td:first-child { white-space: normal; }
  .au_room { aspect-ratio: 4/3; }
  .au_sp::before { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
  .au_zone { grid-template-columns: 1fr; gap: 8px; }
  .au_val { text-align: left; }
  .cs_leafs { grid-template-columns: 1fr; }
  .cs_leaf::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .av_hero_ph { transform: none !important; }
  .avb_shot img, .avb_shot::after, .lw_bar::before, .lw_tick::before,
  .au_sp::before, .au_fill, .cs_stem, .cs_leaf::before {
    transition: none !important;
  }
  .avb_shot::after, .lw_bar::before { transform: scaleX(1) !important; }
  .lw_tick::before, .cs_leaf::before { transform: translateX(-50%) scaleY(1) !important; }
  .cs_stem { transform: scaleY(1) !important; }
  .au_sp::before { transform: scale(1) !important; opacity: 1 !important; }
}

/* ============================================================
   11. REVEAL for the body targets in sections 7-9
   page-av.js adds .av_in; when it cannot run (reduced motion,
   no IntersectionObserver) it adds .av_in to everything at once,
   so :not(.av_in) is the whole guard needed here.
   ============================================================ */
.av_anim .avb h2:not(.av_in),
.av_anim .avb_card:not(.av_in),
.av_anim .avb_fig:not(.av_in),
.av_anim .avb_note:not(.av_in),
.av_anim .avb table:not(.av_in),
.av_anim .avb ol.avb_steps:not(.av_in),
.av_anim .lw_scale:not(.av_in),
.av_anim .au_fig:not(.av_in),
.av_anim .au_zones:not(.av_in),
.av_anim .cs_demo:not(.av_in),
.av_anim .cs_topo:not(.av_in) {
  opacity: 0; transform: translateY(16px);
}
.av_anim .avb h2, .av_anim .avb_card, .av_anim .avb_fig,
.av_anim .avb_note, .av_anim .avb table, .av_anim .avb ol.avb_steps,
.av_anim .lw_scale, .av_anim .au_fig, .av_anim .au_zones,
.av_anim .cs_demo, .av_anim .cs_topo {
  transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
}
/* the cards also lift on hover, so they need both transitions in one rule */
.av_anim .avb_card {
  transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1),
              transform 0.28s cubic-bezier(0.2,0.7,0.2,1),
              box-shadow 0.28s, border-color 0.28s;
}
.av_anim .avb_card:not(.av_in) { transition-duration: 0.7s; }

/* Primary button on a dark panel: light button so it reads (was blue, now ink-on-ink after the palette change) */
.av_hero .av_btn_primary, .av_cta .av_btn_primary { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; box-shadow: none !important; }
.av_hero .av_btn_primary *, .av_cta .av_btn_primary * { color: inherit !important; }
.av_hero .av_btn_primary:hover, .av_cta .av_btn_primary:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; }

/* ===== 2026-10-24: quick summary bar above the LED / Audio 3D experience ===== */
.avx_quickbar { background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #aab4c3; }
.avx_quickbar_inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.avx_quickbar_text { margin: 0; font-size: 14px; line-height: 1.55; max-width: 760px; }
.avx_quickbar_text strong { color: #fff; font-weight: 600; margin-right: 6px; }
.avx_quickbar_btns { display: flex; gap: 10px; flex-shrink: 0; }
.avx_qb_primary, .avx_qb_ghost { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: 0.2s; }
.avx_qb_primary { background: #fff; color: var(--ink) !important; }
.avx_qb_primary:hover { background: var(--gold); }
.avx_qb_ghost { border: 1px solid rgba(255, 255, 255, 0.35); color: #fff !important; }
.avx_qb_ghost:hover { background: rgba(255, 255, 255, 0.08); }
#ey_procon { scroll-margin-top: 100px; }
@media (max-width: 767px) {
  .avx_quickbar_inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .avx_quickbar_text span { display: none; }
}
/* LED / Audio pages: something in the 3D layer is wider than a phone screen,
   so the browser zoomed the whole page out (432px wide on a 390px phone).
   clip (not hidden) keeps position:sticky working for the scroll scenes. */
html:has(#ledwall-root), html:has(#audio-root) { overflow-x: clip; }
html:has(#ledwall-root) body, html:has(#audio-root) body { overflow-x: clip; }