/* ==========================================================================
   Light theme for inner-page heroes (managed, tech, industry, about, contact,
   solutions, 404). Mirrors the homepage: soft blue background, drifting waves
   along the bottom, gently moving orange dots and a slow light sweep on the
   orange phrase of the headline.
   Generated; the homepage keeps its own treatment in css/style.css.
   ========================================================================== */

/* --- Hero surface ------------------------------------------------------- */
html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 84% 18%, rgba(59, 130, 246, 0.2), transparent 36%),
    radial-gradient(circle at 12% 82%, rgba(14, 165, 233, 0.14), transparent 32%),
    linear-gradient(180deg, #f5f9ff 0%, #e4eefb 100%);
}

html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero) > .container {
  position: relative;
  z-index: 2;
}

/* Waves along the bottom edge (drift slowly) */
html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22900%22 viewBox=%220 0 1440 900%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%233b82f6%22 stop-opacity=%220.16%22/%3E%3Cstop offset=%221%22 stop-color=%22%233b82f6%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M0 797L30 801L60 804L90 804L120 802L150 797L180 791L210 784L240 775L270 766L300 758L330 750L360 743L390 739L420 736L450 736L480 738L510 743L540 749L570 756L600 765L630 774L660 782L690 790L720 797L750 801L780 804L810 804L840 802L870 797L900 791L930 784L960 775L990 766L1020 758L1050 750L1080 743L1110 739L1140 736L1170 736L1200 738L1230 743L1260 749L1290 756L1320 765L1350 774L1380 782L1410 790L1440 797L1440 900L0 900Z%22 fill=%22url(%23g)%22/%3E%3Cpath d=%22M0 797L30 801L60 804L90 804L120 802L150 797L180 791L210 784L240 775L270 766L300 758L330 750L360 743L390 739L420 736L450 736L480 738L510 743L540 749L570 756L600 765L630 774L660 782L690 790L720 797L750 801L780 804L810 804L840 802L870 797L900 791L930 784L960 775L990 766L1020 758L1050 750L1080 743L1110 739L1140 736L1170 736L1200 738L1230 743L1260 749L1290 756L1320 765L1350 774L1380 782L1410 790L1440 797%22 fill=%22none%22 stroke=%22%230ea5e9%22 stroke-opacity=%220.4%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M0 812L30 815L60 816L90 814L120 811L150 805L180 797L210 789L240 780L270 771L300 763L330 757L360 752L390 749L420 748L450 750L480 753L510 759L540 767L570 775L600 784L630 793L660 801L690 807L720 812L750 815L780 816L810 814L840 811L870 805L900 797L930 789L960 780L990 771L1020 763L1050 757L1080 752L1110 749L1140 748L1170 750L1200 753L1230 759L1260 767L1290 775L1320 784L1350 793L1380 801L1410 807L1440 812%22 fill=%22none%22 stroke=%22%230ea5e9%22 stroke-opacity=%220.34%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M0 827L30 828L60 827L90 824L120 818L150 811L180 803L210 794L240 785L270 777L300 770L330 765L360 761L390 760L420 761L450 764L480 770L510 777L540 785L570 794L600 803L630 811L660 818L690 823L720 827L750 828L780 827L810 824L840 818L870 811L900 803L930 794L960 785L990 777L1020 770L1050 765L1080 761L1110 760L1140 761L1170 764L1200 770L1230 777L1260 785L1290 794L1320 803L1350 811L1380 818L1410 823L1440 827%22 fill=%22none%22 stroke=%22%230ea5e9%22 stroke-opacity=%220.28%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M0 840L30 839L60 837L90 832L120 825L150 817L180 808L210 800L240 791L270 784L300 778L330 774L360 772L390 773L420 775L450 780L480 787L510 795L540 804L570 812L600 821L630 828L660 834L690 838L720 840L750 839L780 837L810 832L840 825L870 817L900 808L930 800L960 791L990 784L1020 778L1050 774L1080 772L1110 773L1140 775L1170 780L1200 787L1230 795L1260 804L1290 812L1320 821L1350 828L1380 834L1410 838L1440 840%22 fill=%22none%22 stroke=%22%230ea5e9%22 stroke-opacity=%220.22%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M0 852L30 849L60 845L90 839L120 831L150 822L180 814L210 805L240 797L270 791L300 787L330 784L360 784L390 787L420 791L450 797L480 805L510 814L540 822L570 831L600 839L630 845L660 849L690 852L720 852L750 849L780 845L810 839L840 831L870 822L900 814L930 805L960 797L990 791L1020 787L1050 784L1080 784L1110 787L1140 791L1170 797L1200 805L1230 814L1260 822L1290 831L1320 839L1350 845L1380 849L1410 852L1440 852%22 fill=%22none%22 stroke=%22%230ea5e9%22 stroke-opacity=%220.16%22 stroke-width=%221.6%22/%3E%3C/svg%3E");
  background-size: 1440px 900px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  animation: themeWaveDrift 90s linear infinite;
}

/* Orange dots that drift while they glow */
html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #f57f20 0 3.5px, rgba(245, 127, 32, 0.28) 4.5px, transparent 10px),
    radial-gradient(circle, #f57f20 0 3.5px, rgba(245, 127, 32, 0.28) 4.5px, transparent 10px),
    radial-gradient(circle, #f57f20 0 3.5px, rgba(245, 127, 32, 0.28) 4.5px, transparent 10px),
    radial-gradient(circle, #f57f20 0 3.5px, rgba(245, 127, 32, 0.28) 4.5px, transparent 10px);
  background-size: 30px 30px, 30px 30px, 30px 30px, 30px 30px;
  background-repeat: no-repeat;
  background-position: 54% 42%, 70% 14%, 4% 98%, 94% 94%;
  animation: themeDotsDrift 22s ease-in-out infinite;
}

@keyframes themeWaveDrift {
  from { background-position: 0 100%; }
  to { background-position: -1440px 100%; }
}

@keyframes themeDotsDrift {
  0%, 100% { background-position: 54% 42%, 70% 14%, 4% 98%, 94% 94%; }
  25% { background-position: 56% 50%, 67% 18%, 7% 97%, 91% 96%; }
  50% { background-position: 53% 58%, 72% 12%, 10% 98%, 88% 94%; }
  75% { background-position: 57% 46%, 68% 10%, 6% 96%, 92% 97%; }
}

@media (max-width: 767.98px) {
  html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero)::before {
    background-size: 900px 562px;
    animation-name: themeWaveDriftMobile;
    opacity: 0.75;
  }
}

@keyframes themeWaveDriftMobile {
  from { background-position: 0 100%; }
  to { background-position: -900px 100%; }
}

/* On phones the content spans the full width, so keep only the two dots in the bottom wave band. */
@media (max-width: 767.98px) {
  html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero)::after {
    background-image:
      radial-gradient(circle, #f57f20 0 3.5px, rgba(245, 127, 32, 0.28) 4.5px, transparent 10px),
      radial-gradient(circle, #f57f20 0 3.5px, rgba(245, 127, 32, 0.28) 4.5px, transparent 10px);
    background-size: 30px 30px, 30px 30px;
    background-position: 8% 99%, 90% 99%;
    animation-name: themeDotsDriftMobile;
  }
}

@keyframes themeDotsDriftMobile {
  0%, 100% { background-position: 8% 99%, 90% 99%; }
  33% { background-position: 18% 97%, 78% 98%; }
  66% { background-position: 30% 99%, 64% 96%; }
}

/* --- Headline ------------------------------------------------------------ */
/* HEADLINE STANDARD: every hero title is exactly three lines.
   Markup: <h1 class="...-title"> three <span class="title-line"> blocks,
   with <em> around the words that should be orange. See HEADLINES.md. */
html body.theme-light .managed-hero-title,
html body.theme-light .tech-hero-title,
html body.theme-light .industry-title,
html body.theme-light .about-title,
html body.theme-light .contact-title,
html body.theme-light .solutions-default-title,
html body.theme-light .error-title {
  max-width: none;
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  word-spacing: 0.08em;
}

html body.theme-light .managed-hero-title .title-line,
html body.theme-light .tech-hero-title .title-line,
html body.theme-light .industry-title .title-line,
html body.theme-light .about-title .title-line,
html body.theme-light .contact-title .title-line,
html body.theme-light .solutions-default-title .title-line,
html body.theme-light .error-title .title-line {
  display: block;
  color: inherit;
}

@media (min-width: 768px) {
  html body.theme-light .managed-hero-title .title-line,
html body.theme-light .tech-hero-title .title-line,
html body.theme-light .industry-title .title-line,
html body.theme-light .about-title .title-line,
html body.theme-light .contact-title .title-line,
html body.theme-light .solutions-default-title .title-line,
html body.theme-light .error-title .title-line {
    white-space: nowrap;
  }
}

@media (max-width: 575.98px) {
  html body.theme-light .managed-hero-title,
html body.theme-light .tech-hero-title,
html body.theme-light .industry-title,
html body.theme-light .about-title,
html body.theme-light .contact-title,
html body.theme-light .solutions-default-title,
html body.theme-light .error-title {
    font-size: clamp(1.45rem, 6.3vw, 2.2rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html body.theme-light .managed-hero-title .title-line,
html body.theme-light .tech-hero-title .title-line,
html body.theme-light .industry-title .title-line,
html body.theme-light .about-title .title-line,
html body.theme-light .contact-title .title-line,
html body.theme-light .solutions-default-title .title-line,
html body.theme-light .error-title .title-line {
    animation: heroTitleLineIn 1s cubic-bezier(0.22, 0.7, 0.2, 1) both;
  }

  html body.theme-light .managed-hero-title .title-line:nth-child(1),
html body.theme-light .tech-hero-title .title-line:nth-child(1),
html body.theme-light .industry-title .title-line:nth-child(1),
html body.theme-light .about-title .title-line:nth-child(1),
html body.theme-light .contact-title .title-line:nth-child(1),
html body.theme-light .solutions-default-title .title-line:nth-child(1),
html body.theme-light .error-title .title-line:nth-child(1) {
    animation-delay: 0.12s;
  }

  html body.theme-light .managed-hero-title .title-line:nth-child(2),
html body.theme-light .tech-hero-title .title-line:nth-child(2),
html body.theme-light .industry-title .title-line:nth-child(2),
html body.theme-light .about-title .title-line:nth-child(2),
html body.theme-light .contact-title .title-line:nth-child(2),
html body.theme-light .solutions-default-title .title-line:nth-child(2),
html body.theme-light .error-title .title-line:nth-child(2) {
    animation-delay: 0.3s;
  }

  html body.theme-light .managed-hero-title .title-line:nth-child(3),
html body.theme-light .tech-hero-title .title-line:nth-child(3),
html body.theme-light .industry-title .title-line:nth-child(3),
html body.theme-light .about-title .title-line:nth-child(3),
html body.theme-light .contact-title .title-line:nth-child(3),
html body.theme-light .solutions-default-title .title-line:nth-child(3),
html body.theme-light .error-title .title-line:nth-child(3) {
    animation-delay: 0.48s;
  }
}

html body.theme-light .managed-hero-title,
html body.theme-light .tech-hero-title,
html body.theme-light .industry-title,
html body.theme-light .about-title,
html body.theme-light .contact-title,
html body.theme-light .solutions-default-title,
html body.theme-light .error-title {
  color: var(--dark);
}

html body.theme-light .managed-hero-title em,
html body.theme-light .tech-hero-title em,
html body.theme-light .industry-title em,
html body.theme-light .about-title em,
html body.theme-light .contact-title em,
html body.theme-light .solutions-default-title em,
html body.theme-light .error-title em {
  font-style: italic;
  color: var(--brand-orange-ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html body.theme-light .managed-hero-title em,
html body.theme-light .tech-hero-title em,
html body.theme-light .industry-title em,
html body.theme-light .about-title em,
html body.theme-light .contact-title em,
html body.theme-light .solutions-default-title em,
html body.theme-light .error-title em {
    padding: 0 0.06em 0.06em 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, #f57f20 0%, #f57f20 40%, #f57f20 50%, #f57f20 60%, #f57f20 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
  }

  @media (prefers-reduced-motion: no-preference) {
    html body.theme-light .managed-hero-title em,
html body.theme-light .tech-hero-title em,
html body.theme-light .industry-title em,
html body.theme-light .about-title em,
html body.theme-light .contact-title em,
html body.theme-light .solutions-default-title em,
html body.theme-light .error-title em {
      animation: heroTitleShimmer 9s ease-in-out 1.6s infinite;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html body.theme-light .managed-hero-title em,
html body.theme-light .tech-hero-title em,
html body.theme-light .industry-title em,
html body.theme-light .about-title em,
html body.theme-light .contact-title em,
html body.theme-light .solutions-default-title em,
html body.theme-light .error-title em {
      background: none;
      color: var(--brand-orange-ink);
      -webkit-text-fill-color: currentColor;
    }
  }
}

html body.theme-light .managed-hero-copy,
html body.theme-light .tech-hero-copy,
html body.theme-light .industry-hero-copy > p,
html body.theme-light .about-copy,
html body.theme-light .contact-copy,
html body.theme-light .solutions-default-copy,
html body.theme-light .error-copy {
  color: #4a4446;
}

/* --- Eyebrows ------------------------------------------------------------ */
html body.theme-light .industry-hero-eyebrow {
  color: var(--brand-orange-ink);
  background: #f6f5f6;
  border: 1px solid rgba(30, 64, 120, 0.14);
  box-shadow: 0 6px 16px rgba(30, 64, 120, 0.08);
}

/* --- Buttons / pills ----------------------------------------------------- */
html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero) .btn-outline-light {
  color: var(--dark);
  background: #f6f5f6;
  border-color: rgba(30, 64, 120, 0.18);
  box-shadow: 0 6px 16px rgba(30, 64, 120, 0.08);
}

html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero) .btn-outline-light:hover,
html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero) .btn-outline-light:focus {
  color: var(--dark);
  background: #f1f7ff;
  border-color: rgba(245, 127, 32, 0.45);
}

html body.theme-light .managed-hero-pill,
html body.theme-light .tech-hero-pill,
html body.theme-light .industry-badge,
html body.theme-light .about-pill,
html body.theme-light .contact-pill,
html body.theme-light .error-pill {
  color: #342e30;
  background: #f6f5f6;
  border: 1px solid rgba(30, 64, 120, 0.14);
  box-shadow: 0 4px 12px rgba(30, 64, 120, 0.06);
}

html body.theme-light .managed-hero-pill *,
html body.theme-light .tech-hero-pill *,
html body.theme-light .industry-badge *,
html body.theme-light .about-pill *,
html body.theme-light .contact-pill *,
html body.theme-light .error-pill * {
  color: inherit;
}

html body.theme-light .contact-pill i,
html body.theme-light .about-pill i,
html body.theme-light .error-pill i,
html body.theme-light .industry-badge i,
html body.theme-light .managed-hero-pill i,
html body.theme-light .tech-hero-pill i {
  color: var(--brand-orange-ink);
}

/* --- Right-hand glass panel ---------------------------------------------- */
html body.theme-light .managed-hero-card,
html body.theme-light .tech-hero-card,
html body.theme-light .industry-hero-card,
html body.theme-light .about-hero-card,
html body.theme-light .contact-hero-card,
html body.theme-light .solutions-hero-card,
html body.theme-light .error-hero-card {
  background: #f6f5f6;
  border: 1px solid rgba(30, 64, 120, 0.12);
  box-shadow: 0 22px 46px rgba(30, 64, 120, 0.14);
}

html body.theme-light .managed-hero-card h6,
html body.theme-light .tech-hero-card h6,
html body.theme-light .industry-hero-card h6,
html body.theme-light .about-hero-card h6,
html body.theme-light .contact-hero-card h6,
html body.theme-light .solutions-hero-card h6,
html body.theme-light .error-hero-card h6 {
  color: var(--dark);
}

html body.theme-light .managed-hero-card > p,
html body.theme-light .tech-hero-card > p,
html body.theme-light .industry-hero-card > p,
html body.theme-light .about-hero-card > p,
html body.theme-light .contact-hero-card > p,
html body.theme-light .solutions-hero-card > p,
html body.theme-light .error-hero-card > p {
  color: #5f595b;
}

html body.theme-light .managed-mini-item,
html body.theme-light .tech-mini-item,
html body.theme-light .solutions-mini-item,
html body.theme-light .about-hero-grid > div,
html body.theme-light .contact-hero-grid > div,
html body.theme-light .error-hero-grid > a,
html body.theme-light .industry-hero-list li {
  background: #f3f8ff;
  border: 1px solid rgba(30, 64, 120, 0.1);
  color: #342e30;
}

html body.theme-light .managed-hero-card small,
html body.theme-light .tech-hero-card small,
html body.theme-light .industry-hero-card small,
html body.theme-light .about-hero-card small,
html body.theme-light .contact-hero-card small,
html body.theme-light .solutions-hero-card small,
html body.theme-light .error-hero-card small {
  color: var(--brand-orange-ink);
}

html body.theme-light .managed-hero-card strong,
html body.theme-light .tech-hero-card strong,
html body.theme-light .industry-hero-card strong,
html body.theme-light .about-hero-card strong,
html body.theme-light .contact-hero-card strong,
html body.theme-light .solutions-hero-card strong,
html body.theme-light .error-hero-card strong {
  color: var(--dark);
}

html body.theme-light .managed-hero-card span,
html body.theme-light .tech-hero-card span,
html body.theme-light .industry-hero-card span,
html body.theme-light .about-hero-card span,
html body.theme-light .contact-hero-card span,
html body.theme-light .solutions-hero-card span,
html body.theme-light .error-hero-card span,
html body.theme-light .managed-mini-item span,
html body.theme-light .tech-mini-item span,
html body.theme-light .solutions-mini-item span,
html body.theme-light .about-hero-grid > div span,
html body.theme-light .contact-hero-grid > div span,
html body.theme-light .error-hero-grid > a span,
html body.theme-light .industry-hero-list li span {
  color: #5f595b;
}

html body.theme-light .error-hero-grid > a:hover {
  border-color: rgba(245, 127, 32, 0.4);
  background: #fff1e4;
}

@media (prefers-reduced-motion: reduce) {
  html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero)::before,
  html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero)::after {
    animation: none;
  }
}

/* --- Brand colours: small orange text on the light hero surfaces ----------
   Rules written for the old dark heroes set --brand-orange-ink to the bright
   orange (right for dark surfaces). The heroes and their cards are light now,
   so use the deeper orange shade for small text there. */
html body.theme-light :is(.managed-hero, .tech-hero, .industry-hero, .about-hero, .contact-hero, .solutions-default-hero, .error-hero),
html body.theme-light :is(.managed-hero-card, .tech-hero-card, .industry-hero-card, .about-hero-card, .contact-hero-card, .solutions-hero-card, .error-hero-card),
html body.theme-light :is(.managed-mini-item, .tech-mini-item, .solutions-mini-item, .industry-hero-list li, .about-hero-grid > div, .contact-hero-grid > div, .error-hero-grid > a),
html body.theme-light :is(.managed-hero-pill, .tech-hero-pill, .industry-badge, .about-pill, .contact-pill, .error-pill, .industry-hero-eyebrow) {
  --brand-orange-ink: var(--orange-700);
}