/* ==========================================================================
   HERO TEXT PANEL — added alongside each industry's existing coded Hero
   inside hero-fragments/<industry>.html (headline, description, CTA, feature
   list, matching the industry's own accent color). This file only wraps the
   existing .fc-hero markup with a flex layout; it never edits the per-
   industry hero-<industry>-chrome.css/js files themselves — overrides here
   win purely on selector specificity (.dh-hero-layout .fc-hero), so each
   Hero's internal composite/animation logic is untouched.
   ========================================================================== */

.dh-hero-layout {
  display: flex;
  align-items: center;
  min-height: 100svh;
  /* Defaults to opaque (standalone visit, or embedded as the small laptop-
     screen preview on websites.html, which needs its own solid page look).
     hero-timeline.js loads this fragment with ?bg=transparent when it's the
     full-bleed Hero inside the site's own hero-timeline — the inline script
     in each hero-fragments/<industry>.html head sets --dh-hero-bg to
     transparent in that case, so the shared global site background shows
     through instead of a separate black box. */
  background: var(--dh-hero-bg, #050606);
}

/* When embedded in the site hero timeline, the fragment's own root should
   stop painting a black box and let the site-wide background show through.
   The per-industry glow / accent layers remain untouched. */
.dh-hero-layout .fc-hero {
  background: transparent;
}

.dh-hero-layout .fc-hero {
  flex: 1 1 60%;
  min-height: auto;
  padding: 0 2vw 0 0;
}
.dh-hero-layout .fc-stage {
  width: 100%;
}

.dh-hero-text {
  flex: 0 0 40%;
  max-width: 460px;
  padding: 0 3vw 0 5vw;
  font-family: 'Inter', sans-serif;
}
.dh-hero-text__eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 233, 235, 0.55);
  margin: 0 0 18px;
}
.dh-hero-text__title {
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.2;
  color: #f2f2f2;
  font-weight: 500;
  margin: 0 0 18px;
}
.dh-hero-text__accent { color: rgb(var(--accent-rgb, 255, 122, 50)); }
.dh-hero-text__desc {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(232, 233, 235, 0.68);
  margin: 0 0 28px;
  max-width: 40ch;
}
.dh-hero-text__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb, 255, 122, 50), 0.55);
  color: #f2f2f2;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
  margin-bottom: 34px;
}
.dh-hero-text__cta:hover {
  background: rgba(var(--accent-rgb, 255, 122, 50), 0.12);
  transform: translateY(-1px);
}
.dh-hero-text__cta-arrow { transition: transform 0.25s ease; }
.dh-hero-text__cta:hover .dh-hero-text__cta-arrow { transform: translateX(3px); }

.dh-hero-text__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dh-hero-text__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(232, 233, 235, 0.6);
  line-height: 1.3;
}
.dh-hero-text__features li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb, 255, 122, 50));
}

@media (max-width: 1100px) {
  .dh-hero-text { flex-basis: 44%; padding-right: 2vw; }
}

@media (max-width: 900px) {
  .dh-hero-layout { flex-direction: column; min-height: auto; padding-top: 0; }
  .dh-hero-layout .fc-hero { flex: none; width: 100%; min-height: 58vh; padding: 0; order: 0; }
  .dh-hero-text { flex: none; max-width: 100%; padding: 28px 6vw 20px; order: 1; text-align: center; }
  .dh-hero-text__desc { margin-left: auto; margin-right: auto; }
  .dh-hero-text__cta { margin-left: auto; margin-right: auto; }
  .dh-hero-text__features { justify-content: center; }
  .dh-hero-text__features li { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dh-hero-text__cta, .dh-hero-text__cta-arrow { transition: none; }
}