/* Auto Injury and No-Fault Medical Billing page (v2/services/auto-injury-billing.blade.php,
   sections in v2/services/auto-injury/*.blade.php).
   Figma: Meds Nexus Design, node 12183:10 (1440 wide). Everything is scoped to .ai-v2 and
   uses ai-* classes, so no other page is affected.

   Animation: script-v2.js arms every [data-bh-reveal] section (.is-armed hides the pieces)
   and adds .is-in when it scrolls into view, which plays the entrances. [data-bh-count]
   numbers count up at the same time. Without JS, or with prefers-reduced-motion, nothing
   is hidden and nothing moves. */

/* ============================================================= */
/* Base: tokens, container, section rhythm, shared keyframes     */
/* ============================================================= */
.ai-v2 {
  --ai-blue: #273775;
  --ai-orange: #fc5d61;
  --ai-text: #3d3d3d;
  --ai-white: #ffffff;
  --ai-muted: #5e6888;
  --ai-line: #e3e8f3;
  --ai-soft: #f5f7fc;
  --ai-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: "Poppins", sans-serif;
  color: var(--ai-text);
  overflow-x: clip;
}

.ai-v2 *,
.ai-v2 *::before,
.ai-v2 *::after {
  box-sizing: border-box;
}

.ai-v2 :is(h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote) {
  margin: 0;
}

/* style-v2.css capitalizes every heading site-wide; this page keeps Figma's casing. */
.ai-v2 :is(h1, h2, h3, h4, h5, h6) {
  text-transform: none;
}

.ai-v2 :is(ul, ol) {
  padding: 0;
  list-style: none;
}

.ai-v2 img {
  max-width: 100%;
}

/* Figma content column: 1240px inside the 1440 frame (100px gutters). */
.ai-container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* In-text links to other service pages (same treatment as .wc-inline-link). */
.ai-inline-link {
  color: var(--ai-orange);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.ai-inline-link:hover,
.ai-inline-link:focus-visible {
  color: var(--ai-blue);
}

/* Section rhythm: every section carries 60px top and bottom padding (no margins).
   This is the only place section spacing is set. */
.ai-v2 > section {
  position: relative;
  margin: 0;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Shared Core Strengths band: style-v2.css gives it a fixed 350px height with 40px
   padding; 390px keeps its 270px content box with the 60px padding. */
.ai-v2 > .strengths {
  height: 390px;
}

@media (max-width: 768px) {
  .ai-v2 > .strengths {
    height: auto;
  }
}

/* Shared entrance keyframes (sections may add their own, prefixed with their name). */
@keyframes ai-rise {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes ai-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ai-pop {
  from { opacity: 0; scale: 0.85; }
  to   { opacity: 1; scale: 1; }
}

@keyframes ai-slide-left {
  from { opacity: 0; translate: -40px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes ai-slide-right {
  from { opacity: 0; translate: 40px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes ai-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-v2 *,
  .ai-v2 *::before,
  .ai-v2 *::after {
    animation: none !important;
    transition: none !important;
  }
}