/**
 * DealerPro Elite — Homepage page styles
 *
 * Source mockup(s):
 *   - mockups/heavy-equipment/mockup-1A-homepage.html
 *   - mockups/cars/mockup-2A-car-homepage.html
 * Loaded conditionally on the front page (page-home.php / front-page.php) via wp_enqueue_style.
 *
 * @package DealerPro_Elite
 * @since 2.0.0
 */

/* ─── HERO ─────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: var(--s-20) 0 var(--s-16);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1200px 600px at 80% 0%, var(--accent-glow), transparent 60%),
    radial-gradient(ellipse 800px 400px at 10% 100%, var(--cta-soft), transparent 60%);
  z-index: -1;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
  z-index: -1;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.hero__title {
  margin: var(--s-3) 0 var(--s-5);
  /* Avoid orphan words on narrow viewports — engine redistributes
     break-points for visual balance. Modern Chrome/FF/Safari support;
     older browsers gracefully ignore. */
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, white));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  font-size: var(--t-md);
  color: var(--text-soft);
  max-width: 540px;
  margin-bottom: var(--s-8);
  line-height: 1.7;
  text-wrap: pretty;
}
.hero__cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}
.hero__trust {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--text-soft);
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  white-space: nowrap;
}
.hero__trust-item svg {
  width: 14px;
  height: 14px;
  color: var(--success);
}
/* v2.1.19 — keep all hero trust pills on ONE row on desktop (the 2-column hero's
   left column was wrapping them 3+1). Compact sizing above + nowrap here. Below
   1024px the single-column hero still wraps + centers them. */
@media (min-width: 1024px) {
  .hero__trust { flex-wrap: nowrap; }
}
.hero__visual {
  position: relative;
  aspect-ratio: 1.05;
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, var(--accent-soft), transparent 70%),
    linear-gradient(135deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--border-strong);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Photo variant — hero now leads with a real-equipment image instead of
   the brand card. The image fills the visual; tagline + new-arrivals
   tag float over it with a backdrop-blur card. */
.hero__visual--photo {
  background: var(--bg-2); /* fallback while image decodes */
}
.hero__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}
.hero__visual-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.0) 30%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(135deg, rgba(0, 0, 0, 0.15), transparent 50%);
  pointer-events: none;
}
.hero__visual-caption {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  max-width: 60%;
  background: rgba(var(--bg-rgb), 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--text);
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.hero__visual-caption-mark {
  display: inline-block;
  margin-right: 4px;
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 0;
  vertical-align: -2px;
  font-style: normal;
}
.hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-8);
  text-align: center;
}
.hero__brand-mark {
  width: 96px;
  height: 96px;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px var(--accent-glow);
}
.hero__brand-mark svg {
  width: 56px;
  height: 56px;
}
.hero__brand-mark img {
  max-width: 70%;
  max-height: 70%;
}
.hero__brand-name {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.hero__brand-name-sub {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--s-2);
}
.hero__brand-tagline {
  font-size: var(--t-md);
  font-style: italic;
  color: var(--text-soft);
  max-width: 280px;
  line-height: 1.4;
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  position: relative;
}
.hero__brand-tagline::before {
  content: "\201C"; /* Curly opening double-quote */
  position: absolute;
  top: var(--s-3);
  left: -8px;
  font-size: 24px;
  color: var(--accent);
  font-style: normal;
  line-height: 1;
}
.hero__brand-tagline::after {
  content: "\201D"; /* Closing curly quote so the opener doesn't look orphaned. */
  display: inline;
  margin-left: 2px;
  color: var(--accent);
  font-style: normal;
}
.hero__visual-tag {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  background: rgba(var(--bg-rgb), 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  gap: var(--s-3);
  align-items: center;
  font-size: var(--t-sm);
}
.hero__visual-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse-dot 2s ease-in-out infinite;
}

@media (max-width: 900px) {
  .hero { padding: var(--s-12) 0 var(--s-10); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-10); }
}
@media (max-width: 720px) {
  /* Old .hero__brand sizing kept for any legacy renders. */
  .hero__brand { padding: var(--s-6); gap: var(--s-4); }
  .hero__brand-mark { width: 72px; height: 72px; }
  .hero__brand-mark svg { width: 40px; height: 40px; }
  /* Photo variant — caption pill resizes too on small viewports
     so it doesn't crowd the new-arrivals tag. */
  .hero__visual--photo .hero__visual-caption {
    max-width: 75%;
    padding: var(--s-3) var(--s-4);
    font-size: var(--t-xs);
  }
  /* Cap mobile reading width to ~32ch so the subhead doesn't dense-block
     into 4 edge-to-edge lines on a 360-393px viewport. */
  .hero__sub { max-width: 32ch; }
}
@media (max-width: 540px) {
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}
@media (max-width: 1024px) {
  .hero__grid { text-align: center; }
  .hero__title { margin-left: auto; margin-right: auto; max-width: 580px; }
  .hero__sub { margin-left: auto; margin-right: auto; max-width: 500px; }
  .hero__cta { justify-content: center; }
  .hero__trust { justify-content: center; }
}

/* ─── STATS ────────────────────────────────────────────── */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
.stat {
  text-align: center;
  padding: var(--s-3);
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat__num .accent { color: var(--accent); }
.stat__num.is-counted { transition: color 600ms ease; }
.stat__lbl {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: var(--s-5) var(--s-3);
  }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ─── INDUSTRIES SERVED (heavy-equipment vertical) ────── */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.industry-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-4);
  text-align: center;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.industry-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
  background: var(--bg-3);
}
.industry-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.industry-card__icon svg {
  width: 26px;
  height: 26px;
}
.industry-card__title {
  font-size: var(--t-base);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
@media (max-width: 1024px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .industries-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── STORY ────────────────────────────────────────────── */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.story__visual {
  aspect-ratio: 1.1;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  position: relative;
  overflow: hidden;
  background-color: var(--bg-2);
}
/* The story image is now an actual <img loading="lazy"> instead of a CSS
   background — defers the 300+ KB asset until the user scrolls there. */
.story__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 75%;
}
.story__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.story__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.story__visual:has(.story__visual-img) ::before { display: none; }

/* Logo variant — story section displays the brand mark + wordmark
   (the equipment photo that used to live here was promoted to the hero
   right column). Quote pill stays anchored at the bottom-left. */
.story__visual--logo {
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, var(--accent-soft), transparent 70%),
    linear-gradient(135deg, var(--bg-2), var(--bg-1));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-8);
}
.story__visual--logo::before { display: none; } /* kill the dark gradient overlay */
.story__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
}
.story__brand-mark {
  width: 144px;
  height: 144px;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px var(--accent-glow);
  overflow: hidden;
}
.story__brand-mark svg {
  width: 72px;
  height: 72px;
}
/* When user uploaded a custom logo, drop the yellow tile so the artwork
   shows on its own (matches the existing .logo--custom pattern). */
.story__brand-mark--custom {
  background: transparent;
  box-shadow: none;
  /* v2.1.9: bigger custom logo to match the larger header/footer treatment.
     SVG fallback keeps the 144px square tile (set on .story__brand-mark). */
  width: 220px;
  height: 148px;
}
.story__brand-mark-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.story__brand-name {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.05;
}
.story__brand-name-sub {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--s-2);
}
@media (max-width: 720px) {
  .story__visual--logo { padding: var(--s-6); }
  .story__brand-mark { width: 112px; height: 112px; }
  .story__brand-mark svg { width: 56px; height: 56px; }
  .story__brand-mark--custom { width: 170px; height: 114px; } /* v2.1.9: ~bigger custom logo */
}
.story__quote {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  right: var(--s-5);
  background: rgba(var(--bg-rgb), 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--text);
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.story__quote-mark {
  position: absolute;
  top: -16px;
  left: var(--s-4);
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.story__title { margin: var(--s-3) 0 var(--s-5); }
.story__lead {
  font-size: var(--t-md);
  color: var(--text-soft);
  line-height: 1.7;
  margin-bottom: var(--s-8);
}
.story__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}
.story__feature {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.story__feature-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.story__feature-icon svg { width: 18px; height: 18px; }
.story__feature-text { line-height: 1.4; }
.story__feature-title {
  font-size: var(--t-sm);
  font-weight: 700;
  margin-bottom: 2px;
}
.story__feature-desc {
  font-size: var(--t-xs);
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .story > div:last-child { text-align: center; }
  .story__lead { margin-left: auto; margin-right: auto; max-width: 540px; }
  .story__features { text-align: left; }
  .story__feature { justify-content: center; text-align: left; }
}

/* Why-grid styles consolidated to components.css (homepage's version was
   the canonical look and is now used everywhere). Legacy mobile-only override
   kept below for backwards compat with any homepage-specific behavior. */
@media (max-width: 540px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ─── MEET THE TEAM (single-team highlight block) ─────── */
.team {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg-1);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  padding: var(--s-12);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-12);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.team::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 240px;
  background: var(--accent);
  filter: blur(140px);
  opacity: 0.18;
  pointer-events: none;
}
.team__photo {
  width: 240px;
  height: 240px;
  border-radius: var(--r-full);
  background:
    linear-gradient(135deg, var(--accent-soft), transparent),
    linear-gradient(45deg, var(--bg-3), var(--bg-4));
  border: 4px solid var(--accent);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: var(--shadow-glow);
}
.team__content {
  position: relative;
  z-index: 1;
}
.team__role {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: var(--s-3);
}
.team__name {
  font-size: clamp(28px, 3vw, 36px);
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
}
.team__quote {
  font-size: var(--t-md);
  color: var(--text-soft);
  font-style: italic;
  line-height: 1.7;
  margin-bottom: var(--s-6);
  border-left: 3px solid var(--accent);
  padding-left: var(--s-4);
}
.team__contact-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
}
.team__phone-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: var(--s-4);
}
.team__phone-num {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--text);
}
.team__phone-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .team {
    grid-template-columns: 1fr;
    padding: var(--s-8);
    text-align: center;
  }
  .team__quote { text-align: left; }
  .team__contact-row { justify-content: center; }
  .team__phone-info { margin-left: 0; align-items: center; }
}

/* ─── SHIPPING SECTION (compact banner on homepage) ───── */
.shipping {
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, var(--accent-soft), transparent 70%),
    var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-10);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-10);
  align-items: center;
}
.shipping__title {
  margin: var(--s-3) 0 var(--s-3);
  font-size: clamp(24px, 3vw, 32px);
}
.shipping__lead {
  font-size: var(--t-sm);
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: var(--s-5);
  max-width: 480px;
}
.shipping__features {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.shipping__feature {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-soft);
}
.shipping__feature svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.shipping__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding-left: var(--s-8);
  border-left: 1px solid var(--border);
}
.shipping__time {
  font-family: var(--font-mono);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
}
.shipping__time span {
  font-size: 0.5em;
  color: var(--text-muted);
  margin-left: 4px;
}
.shipping__time-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--s-3);
}
@media (max-width: 900px) {
  .shipping {
    grid-template-columns: 1fr;
    padding: var(--s-8);
    text-align: center;
  }
  .shipping__features { justify-content: center; }
  .shipping__right {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: var(--s-6);
  }
  .shipping__lead { margin-left: auto; margin-right: auto; }
}

/* Testimonials styles consolidated to components.css to eliminate cross-page
   drift (was redefined here with different padding/hover). All testimonial
   classes are styled there. */

/* Bottom-cta styles consolidated to components.css. */

/* ─── STICKY MOBILE BAR (homepage CTA on mobile) ──────── */
.sticky-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(var(--bg-rgb), 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-strong);
  /* iPhone home indicator: extend bottom padding into the safe area so the
     buttons clear the gesture bar instead of being clipped under it. */
  padding: var(--s-3) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  display: none;
  gap: var(--s-2);
  z-index: var(--z-sticky);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}
.sticky-mobile .btn {
  flex: 1;
  padding: 12px 16px;
}
@media (max-width: 1024px) {
  .sticky-mobile { display: flex; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ─── STAGGER FADE-IN (homepage grids) ────────────────── */
.industries-grid > .industry-card,
.stats__grid > .stat,
.story__features > .story__feature,
.why-grid > .why-card {
  animation: fade-in-up 500ms ease-out backwards;
}
.industries-grid > .industry-card:nth-child(1),
.stats__grid > .stat:nth-child(1),
.story__features > .story__feature:nth-child(1),
.why-grid > .why-card:nth-child(1) { animation-delay: 0ms; }
.industries-grid > .industry-card:nth-child(2),
.stats__grid > .stat:nth-child(2),
.story__features > .story__feature:nth-child(2),
.why-grid > .why-card:nth-child(2) { animation-delay: 80ms; }
.industries-grid > .industry-card:nth-child(3),
.stats__grid > .stat:nth-child(3),
.story__features > .story__feature:nth-child(3),
.why-grid > .why-card:nth-child(3) { animation-delay: 160ms; }
.industries-grid > .industry-card:nth-child(4),
.stats__grid > .stat:nth-child(4),
.story__features > .story__feature:nth-child(4),
.why-grid > .why-card:nth-child(4) { animation-delay: 240ms; }
.industries-grid > .industry-card:nth-child(5) { animation-delay: 320ms; }
.industries-grid > .industry-card:nth-child(6) { animation-delay: 400ms; }
.industries-grid > .industry-card:nth-child(7) { animation-delay: 480ms; }
.industries-grid > .industry-card:nth-child(8) { animation-delay: 560ms; }
@media (prefers-reduced-motion: reduce) {
  .industries-grid > .industry-card,
  .stats__grid > .stat,
  .story__features > .story__feature,
  .why-grid > .why-card { animation-delay: 0ms !important; }
}

/* ─── HERO BRAND MARK: when user's custom logo is rendered, drop the
   yellow square fallback so the actual logo art shows clearly. Keep
   96×96 sizing locked so the brand card layout stays in the mockup grid. */
.hero__brand-mark:has(img) {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.hero__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}