/* ============================================
   Round 5, final-detail polish
============================================ */

/* ── 1) ADU panels 2–5: push the iso drawing UP more so it stops
   hugging the bottom of the section. ────────────────────────────── */
.adu-panel:not(.adu-panel--intro) .adu-panel-design {
  align-items: flex-start !important;
  padding-top: clamp(1.5rem, 3vh, 2.5rem) !important;
  padding-bottom: clamp(8rem, 18vh, 14rem) !important;
}
.adu-panel:not(.adu-panel--intro) .adu-panel-design svg.adu-panel:not(.adu-panel--intro) .adu-panel-design img {
  transform: translateY(-12%);
}

/* ── 2) About, logo cut to about half its size and nudged right ── */
.about-badge-logo {
  width: clamp(150px, 13vw, 230px) !important;
}
.about-col-logo {
  justify-content: flex-end !important;
  padding-right: 0 !important;
  margin-left: clamp(1rem, 3vw, 3rem);
}
.about-badge { gap: 1rem !important; }
.about-badge-line { width: 50px !important; }
.about-badge-caption { font-size: 0.62rem !important; letter-spacing: 0.26em !important; }

/* ── 3) ADU Guide FAQ, single-open with BLUR on the rest, answer
   floats over the list (no push), last 2 questions open UPWARDS. ── */
.adu-faq {
  max-height: none !important;        /* natural height, answers float, list never scrolls */
  overflow: visible !important;
}
.adu-faq .faq-list { position: relative; }
.faq-item { position: relative; }

/* Answer flows as an absolutely-positioned overlay so it doesn't push siblings */
.faq-item .faq-a {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid rgba(240, 168, 0, 0.55);
  border-radius: 4px;
  padding: 0 0.85rem;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, padding 0.25s ease;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7), 0 0 24px -8px rgba(240,168,0,0.35);
}
.faq-item.open .faq-a {
  max-height: 340px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 0.85rem 0.95rem 1rem !important;
}
.faq-a p {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
  color: var(--text-light);
  opacity: 0.9;
}

/* Last 2 questions open UPWARDS (above the question instead of below) */
.faq-item.opens-up .faq-a {
  top: auto;
  bottom: 100%;
  margin-bottom: 0.35rem;
}
.faq-item:not(.opens-up) .faq-a {
  margin-top: 0.35rem;
}

/* When any item is open, the others get blurred + dimmed */
.adu-faq.faq-has-open .faq-item:not(.open) {
  filter: blur(2.5px);
  opacity: 0.28;
  transition: filter 0.32s ease, opacity 0.32s ease;
  pointer-events: none;
}
.adu-faq .faq-item {
  transition: filter 0.32s ease, opacity 0.32s ease;
}

/* ── 4) Where do I begin, wider boxes + slightly bigger text ── */
.begin-section {
  padding-left: clamp(1.5rem, 3vw, 3rem) !important;
  padding-right: clamp(3rem, 4vw, 4.5rem) !important;
}
.begin-cards {
  max-width: none !important;              /* fill the section's content width */
  width: 100% !important;
  gap: clamp(1rem, 1.6vw, 1.75rem) !important;
  height: clamp(320px, 42vh, 400px) !important;
  height: clamp(320px, 42dvh, 400px) !important;
}
.begin-card { padding: 1.8rem 1.7rem 1.4rem !important; gap: 0.65rem !important; }
.begin-card h3 { font-size: clamp(0.98rem, 1.15vw, 1.12rem) !important; line-height: 1.32 !important; }
.begin-card p {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
}
.begin-card-bullets li {
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}
.begin-card .btn-ghost {
  font-size: 0.7rem !important;
  padding: 0.75rem 1.2rem !important;
}