:root {
  /* ═══ DIGITAL GROWTHSCALE FRAMEWORK 3.0 - STRUCTURAL TOKENS ═══
     Palette architecture (60 / 15 / 10, remainder = neutrals):
       60%  Deep Navy     #0A1F33  structural backgrounds and surfaces
       15%  Growth Teal   #00B39F  brand accent, hovers, secondary emphasis
       10%  Electric Blue #2D7FF9  interactive and informational accents
       CTA  Signal Amber  #F5A623  reserved for primary conversion CTAs only.
            Never decorative, never a general accent. */

  /* Primitives */
  --dgs-navy: #0A1F33;
  --dgs-teal: #00B39F;
  --dgs-blue: #2D7FF9;
  --dgs-amber: #F5A623;
  --dgs-steel: #5B6670;

  /* Deep Navy structural ramp (60% layer) */
  --dgs-navy-950: color-mix(in srgb, var(--dgs-navy) 78%, black 22%);
  --dgs-navy-900: var(--dgs-navy);
  --dgs-navy-800: color-mix(in srgb, var(--dgs-navy) 92%, white 8%);
  --dgs-navy-700: color-mix(in srgb, var(--dgs-navy) 84%, white 16%);

  /* Growth Teal accent ramp (15% layer) */
  --dgs-teal-hover: color-mix(in srgb, var(--dgs-teal) 82%, white 18%);
  --dgs-teal-deep: color-mix(in srgb, var(--dgs-teal) 78%, black 22%);
  --dgs-teal-soft: color-mix(in srgb, var(--dgs-teal) 14%, transparent);

  /* Electric Blue interactive ramp (10% layer) */
  --dgs-blue-hover: color-mix(in srgb, var(--dgs-blue) 82%, white 18%);
  --dgs-blue-soft: color-mix(in srgb, var(--dgs-blue) 14%, transparent);

  /* Signal Amber conversion ramp (primary conversion CTAs ONLY) */
  --dgs-amber-hover: color-mix(in srgb, var(--dgs-amber) 86%, black 14%);

  /* Readability measure: running copy is capped between 60ch and 68ch */
  --measure-min: 60ch;
  --measure-max: 68ch;

  /* Navigation glass: scrolled header blur strength */
  --nav-blur: 12px;

  /* ── Legacy aliases (kept so existing page sheets keep resolving) ── */
  --bg-white: #FFFFFF;
  --bg-deep-navy: var(--dgs-navy-900);
  --gradient-dark-section: var(--bg-deep-navy);
  --bg-dark-navy: var(--dgs-navy-900);
  --bg-teal: var(--dgs-teal);

  /* Card / darker surfaces = Deep Navy shaded, never a different blue hue */
  --surface-navy-card: var(--dgs-navy-800);
  --bg-navy-darkest: var(--dgs-navy-950);
  --action-teal: var(--dgs-teal);

  /* Hover state = same Growth Teal, simply lightened */
  --action-mint-hover: var(--dgs-teal-hover);

  /* Legacy name, now Signal Amber. Apply to primary conversion CTAs only. */
  --accent-yellow: var(--dgs-amber);

  --text-dark-primary: var(--dgs-navy-900);
  --text-dark-muted: #334155;
  --text-muted: #334155;
  --text-light-primary: #FFFFFF;
  --text-light-muted: #E2E8F0;
  --text-white: #FFFFFF;
  --text-light: #FFFFFF;

  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-border-light: rgba(255, 255, 255, 0.12);
  --surface-glass: color-mix(in srgb, var(--dgs-navy-900) 86%, transparent);
  --surface-hover: rgba(255, 255, 255, 0.04);

  /* Secondary/tertiary text on dark = Steel Gray lightened, no blue cast */
  --text-secondary: color-mix(in srgb, var(--dgs-steel) 30%, white 70%);
  --text-tertiary: color-mix(in srgb, var(--dgs-steel) 65%, white 35%);
  /* Neutral light border/surface = Steel Gray tinted into white, used on light sections */
  --surface-border-neutral: color-mix(in srgb, var(--dgs-steel) 12%, white 88%);

  --font-display: 'Sora', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Sora', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 6.5rem;
  --space-2xl: 9.5rem;

  /* ═══ SHAPE SCALE (one documented radius system) ═══
     Every border-radius on the site resolves to one of these steps.
     Two documented exceptions, both deliberate and not scale steps:
       - 50%  reserved for true circles (avatars, icon bubbles)
       - asymmetric one-sided radii (e.g. 0 12px 12px 0) for
         directional shapes such as tabs and left-edge markers */
  --radius-xs: 2px;     /* hairline chips, progress fills */
  --radius-sm: 3px;     /* small controls, tags */
  --radius-md: 4px;     /* inputs, small cards */
  --radius-lg: 6px;     /* buttons, standard cards */
  --radius-xl: 8px;     /* large cards, panels */
  --radius-full: 999px; /* pills, fully rounded */

  --max-width: 97.5rem;
  --max-width-narrow: 64rem;

  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.4s;

  /* ═══ TYPOGRAPHY SYSTEM 3.1 ═══════════════════════════════════
     One fluid modular scale (~1.2 ratio) shared by every page.
     Sizes are tuned to the existing design so nothing jumps; they
     only give the previously un-sized elements (h3–h6, captions,
     labels) a single consistent source of truth. Components that
     already tune a value keep winning via source order / specificity. */

  /* Fluid type scale (min, preferred, max) */
  --fs-display: clamp(2.8rem, 6vw, 4.8rem);
  --fs-h1:      clamp(2.8rem, 6vw, 4.8rem);
  --fs-h2:      clamp(2.2rem, 4.5vw, 3.2rem);
  --fs-h3:      clamp(1.5rem, 2.4vw, 1.85rem);
  --fs-h4:      clamp(1.2rem, 1.7vw, 1.4rem);
  --fs-h5:      clamp(1.05rem, 1.3vw, 1.15rem);
  --fs-h6:      1rem;
  --fs-lead:    clamp(1.1rem, 1.5vw, 1.25rem); /* intro / subhead copy */
  --fs-body-lg: 1.1rem;
  --fs-body:    1.05rem;   /* default running copy */
  --fs-body-sm: 0.95rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.8125rem;
  --fs-label:   0.78rem;   /* uppercase eyebrows / meta labels */

  /* Line-height set (unitless, so they scale with font-size) */
  --line-tight:   1.05;  /* display headings */
  --line-heading: 1.2;   /* h2–h6 */
  --line-snug:    1.35;  /* short subheads, card titles that wrap */
  --line-normal:  1.5;   /* dense UI text, lists */
  --line-body:    1.65;  /* running paragraphs */
  --line-relaxed: 1.75;  /* airy lead copy */

  /* Letter-spacing set */
  --tracking-tighter: -0.03em; /* large display */
  --tracking-tight:   -0.02em; /* headings */
  --tracking-heading: -0.01em; /* smaller headings */
  --tracking-normal:  0em;     /* body */
  --tracking-wide:    0.02em;  /* buttons / small caps */
  --tracking-label:   0.08em;  /* uppercase eyebrows / labels */

  /* Vertical rhythm — paragraph & stack spacing */
  --flow-tight: 0.5rem;
  --flow:       0.85rem;
  --flow-loose: 1.25rem;

  /* Icon sizing (keeps glyphs aligned to the type scale) */
  --icon-xs: 1rem;
  --icon-sm: 1.25rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;

  /* Depth, glass, gradients (visual layer only) */
  --gradient-teal: linear-gradient(135deg, #00C3AD 0%, #00B39F 55%, #008F7F 100%);
  --gradient-teal-soft: linear-gradient(135deg, rgba(0, 179, 159, 0.16) 0%, rgba(0, 179, 159, 0.05) 100%);
  --gradient-mesh-dark: transparent;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-teal-glow: none;
  --glass-blur: blur(var(--nav-blur));
}

.dgs-page,
.dgs-page *,
.dgs-page *::before,
.dgs-page *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: initial !important;
  scroll-padding-top: 100px;
  background-color: #0A1F33 !important;
  min-height: 100%;
  height: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.dgs-page {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-light);
  background: var(--bg-deep-navy) !important;
  background-color: #0A1F33 !important;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  background-color: #0A1F33 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* --- MOBILE ONLY TEXT HELPERS --- */

.dgs-desktop-only {
  display: inline !important;
}

@media (max-width: 768px) {

  .dgs-desktop-only {
    display: none !important;
  }
}

.dgs-page img {
  max-width: 100%;
  display: block;
}

.dgs-page a {
  color: inherit;
  text-decoration: none;
}

.dgs-page ul,
.dgs-page ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dgs-page button {
  font-family: inherit;
  cursor: pointer;
}

.dgs-page h1 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.dgs-page h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* h3/h4 gain a scale size they previously lacked; any component that
   sizes its own headings via a descendant selector still wins (equal
   specificity, defined later in source order). */
.dgs-page h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.dgs-page h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  margin: 0;
  font-size: var(--fs-h4);
  line-height: var(--line-snug);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.dgs-page h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
  font-size: var(--fs-h5);
  line-height: var(--line-snug);
  letter-spacing: var(--tracking-heading);
}

.dgs-page h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
  font-size: var(--fs-h6);
  line-height: var(--line-normal);
  letter-spacing: var(--tracking-normal);
}

.dgs-page h1,
.dgs-page h2,
.dgs-page h3,
.dgs-page h4,
.dgs-page p {
  overflow-wrap: break-word;
  word-break: break-word;
}

.dgs-page p {
  margin: 0;
  line-height: var(--line-body);
}

/* Consistent paragraph rhythm: stacked *prose* paragraphs get one rhythm
   unit of separation. Scoped to unclassed <p> so component-styled
   paragraphs (stats, labels, meta) keep their own tight spacing. */
.dgs-page p:not([class]) + p:not([class]) {
  margin-top: var(--flow);
}

/* Emphasis + inline meta text kept on-scale */
.dgs-page strong,
.dgs-page b {
  font-weight: 700;
}

.dgs-page small {
  font-size: var(--fs-small);
  line-height: var(--line-normal);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .dgs-page * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.dgs-page a:focus-visible,
.dgs-page button:focus-visible,
.dgs-page input:focus-visible,
.dgs-page textarea:focus-visible,
.dgs-page select:focus-visible {
  outline: 3px solid var(--accent-yellow);
  outline-offset: 2px;
}

/* Global grid: the navbar (.dgs-nav) is the master horizontal alignment
   reference for the whole site. These gutters and breakpoints are copied
   exactly from .dgs-nav's own padding steps (1rem / 2rem / 3.5rem), and the
   cap is intentionally removed to match .dgs-nav's own max-width: 100% —
   every section's content edges land on the same vertical lines as the
   logo/nav links at every viewport width. */
.dgs-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .dgs-container {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-container {
    padding: 0 3.5rem;
  }
}

.dgs-container--narrow {
  max-width: var(--max-width-narrow);
}

.dgs-section {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.dgs-hero:not(.dgs-service-hero) {
  padding-top: clamp(9.5rem, 13vw, 12rem) !important;
}

/* ─── DUOTONE HERO BACKDROP ─── */
.dgs-hero-duotone {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 70%, transparent 98%);
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 70%, transparent 98%);
}

.dgs-hero-duotone::before,
.dgs-hero-duotone::after {
  content: '';
  position: absolute;
  inset: 0;
}

.dgs-hero-duotone::before {
  background-image: var(--dgs-duotone-img);
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.15) brightness(0.72);
  opacity: 0.5;
}

.dgs-hero-duotone::after {
  background: linear-gradient(135deg, #0A1F33 0%, #0d5f70 55%, #00B39F 100%);
  mix-blend-mode: color;
}

.dgs-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 31, 51, 0.72) 0%, rgba(10, 31, 51, 0.55) 45%, rgba(10, 31, 51, 0.92) 100%);
}

/* ─── SERVICE HERO BADGE ─── */
.dgs-service-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display, var(--font-heading));
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1affeb; /* brighter teal for dark mode contrast, matches .dgs-pill--teal */
  background: rgba(0, 179, 159, 0.15);
  border: 1px solid rgba(0, 179, 159, 0.4);
  border-radius: var(--radius-full, 9999px);
  padding: 0.45rem 1rem;
  margin-bottom: 1.25rem;
}

.dgs-section--dark,
.dgs-section--darker {
  background: #0A1F33 !important; /* Solid Deep Navy */
  color: var(--text-light-primary);
  position: relative;
  overflow: clip; /* clips decorative overflow without creating a scroll container, so position: sticky descendants (e.g. .dgs-csr-sticky) still work */
}

.dgs-section--dark::after,
.dgs-section--darker::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(circle at 50% 100%, rgba(0, 179, 159, 0.08) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

.dgs-section--dark > .dgs-container,
.dgs-section--darker > .dgs-container {
  position: relative;
  z-index: 2;
}

.dgs-section--light {
  background: var(--bg-white);
  color: var(--text-dark-primary);
}

.dgs-section--light p,
.dgs-section--light h2,
.dgs-section--light h3,
.dgs-section--light h4,
.dgs-section--light span,
.dgs-section--light li {
  color: var(--text-dark-primary);
}

.dgs-text-center {
  text-align: center;
}

.dgs-eyebrow {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: var(--line-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--action-teal);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-xs);
}

/* Eyebrow icon/marker sits on the text baseline-center at a fixed size */
.dgs-eyebrow svg,
.dgs-eyebrow img,
.dgs-eyebrow i {
  flex-shrink: 0;
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.dgs-section-head {
  max-width: 56.25rem;
  margin-bottom: var(--space-lg);
}

.dgs-section-head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.dgs-section-head h2 {
  font-size: clamp(1.85rem, 4vw, 2.8rem);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-sm);
  color: var(--text-light-primary);
}

.dgs-section--light .dgs-section-head h2 {
  color: var(--text-dark-primary);
}

.dgs-section-head h2 .dgs-text-accent {
  color: var(--action-teal);
}

.dgs-section-head p {
  color: var(--text-light-muted);
  font-size: var(--fs-body);
  line-height: var(--line-relaxed);
}

.dgs-section--light .dgs-section-head p {
  color: var(--text-dark-muted);
}

.dgs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-lg);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  margin: 0.5rem 0;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}

.dgs-btn:hover {
  transform: translateY(-2px);
}

.dgs-btn--outline-dark {
  background: transparent;
  border-color: var(--bg-deep-navy);
  color: var(--bg-deep-navy);
}

.dgs-btn--outline-dark:hover {
  background: var(--bg-deep-navy);
  color: var(--bg-white);
}

.dgs-btn--lg {
  padding: 0.8rem 1.9rem;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

.dgs-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  color: currentColor !important;
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out);
}

.dgs-nav-cta-group .dgs-btn {
  margin: 0 !important;
}

.dgs-btn-icon svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-out);
}

@keyframes dgs-btn-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-3px);
  }

  50% {
    transform: translateY(-3px);
  }

  70% {
    transform: translateY(0);
  }
}

@keyframes dgs-btn-icon-bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-3px);
  }

  50% {
    transform: translateY(-3px);
  }

  70% {
    transform: translateY(0);
  }
}

.dgs-btn:hover>* {
  animation: dgs-btn-bounce 0.45s ease-in-out;
}

.dgs-btn:hover .dgs-btn-icon svg {
  animation: dgs-btn-icon-bounce 0.45s ease-in-out;
}

@media (max-width: 640px) {
  .dgs-btn {
    font-size: 0.9rem;
    padding: 0.6rem 1.3rem;
  }

  .dgs-btn--lg {
    padding: 0.6rem 1.5rem;
    font-size: 0.94rem;
  }

  .dgs-btn-icon {
    width: auto;
    height: auto;
  }

  .dgs-btn-icon svg {
    width: 15px;
    height: 15px;
  }
}

.dgs-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-slow) var(--ease-out);
  /* Entrance on page load, same on mobile and desktop. Animates
     opacity + margin-top (not transform) deliberately — the scroll
     hide/reveal behavior further down (.dgs-header--hidden) already owns
     `transform`, and a forwards-filling animation on that same property
     would keep overriding it after this animation finishes. */
  animation: dgsHeaderIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dgsHeaderIn {
  from {
    opacity: 0;
    margin-top: -18px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dgs-header {
    animation: none;
  }
}

.dgs-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle at 0% 0%, rgba(0, 179, 159, 0.10) 0%, transparent 55%);
  pointer-events: none;
}

.dgs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  gap: var(--space-sm);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  transition: all 0.4s var(--ease-out);
}

@media (min-width: 768px) {
  .dgs-nav {
    padding: 1rem 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-nav {
    padding: 1.15rem 3.5rem;
  }
}

.dgs-header:hover,
.dgs-header.is-scrolled {
  background-color: #0A1F33 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ─── Premium Dropdown Megamenu (Linear App Style) ─── */
.dgs-nav-item {
  position: relative;
  display: inline-block;
}

.dgs-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.dgs-dropdown-arrow {
  width: 10px;
  height: 10px;
  stroke-width: 3px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.dgs-dropdown-trigger:hover .dgs-dropdown-arrow {
  transform: rotate(180deg);
}

.dgs-dropdown-megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--radius-xl) !important;
  padding: 1.25rem !important;
  display: grid;
  grid-template-columns: repeat(3, max-content) !important;
  gap: 1.5rem !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  z-index: 1000;
  width: max-content !important; /* Hug its content! */
}

/* 2 column variant layout */
.dgs-dropdown-megamenu.dgs-dropdown-2-col {
  grid-template-columns: repeat(2, max-content) !important;
}

.dgs-dropdown-trigger:hover .dgs-dropdown-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
}

.dgs-dropdown-column {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}

.dgs-dropdown-column:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding-right: 1.5rem;
}

.dgs-dropdown-col-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(5, 17, 36, 0.45) !important; /* Muted gray for white background */
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.dgs-dropdown-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.6rem 0.75rem !important;
  border-radius: var(--radius-lg) !important;
  transition: background 0.2s var(--ease-out);
  border: none !important;
  text-decoration: none !important;
}

.dgs-dropdown-item::after {
  display: none !important;
}

.dgs-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

.item-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dgs-dropdown-item .item-title {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500 !important; /* Muted boldness */
  color: #0A1F33 !important; /* Deep navy text */
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* Icon Container Box: default muted teal, hover solid navy */
.item-icon-box {
  width: 36px; /* Matched to height of nav links title + desc */
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(0, 179, 159, 0.08) !important; /* Muted teal background by default */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.dgs-dropdown-item:hover .item-icon-box {
  background: #0A1F33 !important; /* Navy background on hover */
}

.item-icon-box svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #00B39F !important; /* Growth Teal icon color by default */
  stroke-width: 2px !important;
  fill: none !important;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

.dgs-dropdown-item:hover .item-icon-box svg {
  stroke: #00B39F !important; /* Remains Teal icon color on hover */
}

.dgs-dropdown-item:hover .item-title {
  color: #00B39F !important; /* Growth Teal hover */
}

.dgs-dropdown-item .item-desc {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(5, 17, 36, 0.6) !important;
  line-height: 1.25;
  padding-left: 0 !important; /* Sits naturally inside text wrapper */
}

.dgs-logo {
  order: 1;
}

.dgs-nav-links {
  order: 2;
}

.dgs-nav-cta-group {
  order: 3;
}

.dgs-nav-toggle {
  order: 4;
  display: none; /* hidden by default — shown only below 1024px via media query */
}

.dgs-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-white) !important;
  letter-spacing: -0.01em;
  text-decoration: none;
  flex-shrink: 0;
}

/* Replace text logo with DGS LOGO.png in header and mobile menu */
.dgs-header .dgs-logo,
.dgs-mobile-menu-head .dgs-logo {
  gap: 0;
  width: 10rem;
  height: 2.75rem;
  background: url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a5f1fbc9c9b37b5fd51bdd5.png') no-repeat left center / contain;
  color: transparent !important;
  font-size: 0;
  overflow: hidden;
}

.dgs-header .dgs-logo .dgs-logo-mark,
.dgs-mobile-menu-head .dgs-logo .dgs-logo-mark {
  display: none;
}

.dgs-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text-white);
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 179, 159, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.dgs-nav-links {
  display: none;
  gap: 2.25rem;
  align-items: center;
}

.dgs-nav-links a,
.dgs-dropdown-toggle,
.dgs-dropdown-item,
.dgs-mobile-links a {
  font-family: var(--font-body) !important;
  color: var(--text-white);
  font-size: 0.95rem; /* Slightly larger navigations */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: color var(--duration-fast) var(--ease-out);
  text-decoration: none;
  position: relative;
  padding: 0.55rem 0;
  border: 2px solid transparent;
}

.dgs-nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--action-teal);
  border-radius: var(--radius-xs);
  transition: width 0.3s var(--ease-out);
}

.dgs-nav-links a:hover::after,
.dgs-nav-links a.is-active::after {
  width: 100%;
}

.dgs-nav-links a:hover,
.dgs-nav-links a.is-active {
  color: var(--action-teal);
}

.dgs-nav-cta {
  display: none;
}

.dgs-nav-cta-group {
  display: none;
}

@media (min-width: 1024px) {
  .dgs-nav-cta-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
  }
}

.dgs-nav-toggle {
  background: none;
  border: none;
  color: var(--text-white);
  padding: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 201;
}

/* ─── ANIMATED HAMBURGER ↔ X ICON ─── */
.dgs-nav-toggle-bars {
  position: relative;
  width: 22px;
  height: 15px;
  display: inline-block;
}

.dgs-nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-xs);
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out),
    top var(--duration-base) var(--ease-out);
}

.dgs-nav-toggle-bars span:nth-child(1) {
  top: 0;
}

.dgs-nav-toggle-bars span:nth-child(2) {
  top: 6.5px;
}

.dgs-nav-toggle-bars span:nth-child(3) {
  top: 13px;
}

.dgs-nav-toggle[aria-expanded="true"] .dgs-nav-toggle-bars span:nth-child(1) {
  top: 6.5px;
  transform: rotate(45deg);
}

.dgs-nav-toggle[aria-expanded="true"] .dgs-nav-toggle-bars span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.dgs-nav-toggle[aria-expanded="true"] .dgs-nav-toggle-bars span:nth-child(3) {
  top: 6.5px;
  transform: rotate(-45deg);
}

/* ─── OFF-CANVAS BACKDROP ─── */
.dgs-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 20, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-out), visibility var(--duration-slow) var(--ease-out);
  z-index: 150;
}

.dgs-mobile-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* ─── PREMIUM OFF-CANVAS MOBILE DRAWER ─── */
.dgs-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh; /* fallback for browsers without dvh support */
  height: 100dvh;
  width: 100%;
  touch-action: pan-y;
  background: linear-gradient(180deg, #0d1630 0%, #080e21 100%);
  /* Wipe reveal: the panel stays put and its visible region expands
     top-down (clip-path), rather than the whole panel sliding into
     place — a curtain dropping, not a slide. */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
  /* Slow-start, settle-at-the-end curve (easeInOutQuint-ish) instead of a
     fast-out-slow-in ease — the wipe holds back for a beat before it
     commits, rather than shooting down immediately. */
  transition: clip-path 0.55s cubic-bezier(0.83, 0, 0.17, 1), visibility 0.55s cubic-bezier(0.83, 0, 0.17, 1);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.dgs-mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  pointer-events: auto;
}

/* Nav items animate in one by one, not all at once — hidden by default,
   only staggered (via transition-delay, set below) once the drawer opens.
   Closing skips the delay entirely (base rule has none) so it doesn't
   linger on the way out. */
.dgs-mobile-links > a,
.dgs-mobile-links > button.dgs-mobile-link-toggle,
.dgs-mobile-links > .dgs-mobile-nav-buttons {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.dgs-mobile-menu.is-open .dgs-mobile-links > a,
.dgs-mobile-menu.is-open .dgs-mobile-links > button.dgs-mobile-link-toggle,
.dgs-mobile-menu.is-open .dgs-mobile-links > .dgs-mobile-nav-buttons {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger by fixed DOM position: Home, About, [submenu], Solutions,
   [submenu], Industries, [submenu], Growth Hub, [submenu], Contact,
   CTA button — same structure on every page (includes/navbar.html). */
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(1)  { transition-delay: 0.08s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(2)  { transition-delay: 0.14s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(4)  { transition-delay: 0.20s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(6)  { transition-delay: 0.26s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(8)  { transition-delay: 0.32s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(10) { transition-delay: 0.38s; }
.dgs-mobile-menu.is-open .dgs-mobile-links > :nth-child(11) { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .dgs-mobile-menu,
  .dgs-mobile-links > a,
  .dgs-mobile-links > button.dgs-mobile-link-toggle,
  .dgs-mobile-links > .dgs-mobile-nav-buttons {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

.dgs-mobile-menu-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1.5rem 1.25rem;
  border-bottom: 1px solid var(--surface-border);
  flex-shrink: 0;
  background: #0d1630;
  position: sticky;
  top: 0;
  z-index: 2;
}

.dgs-mobile-menu-head .dgs-logo {
  order: 1 !important;
}

.dgs-mobile-close {
  order: 2 !important;
  background: transparent;
  border: none;
  color: var(--text-white);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.dgs-mobile-close:hover {
  color: var(--action-teal);
  transform: rotate(90deg);
}

.dgs-mobile-close svg {
  width: 20px;
  height: 20px;
}

.dgs-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 1.5rem 1rem;
}

.dgs-mobile-links>a,
.dgs-mobile-links>button.dgs-mobile-link-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  color: var(--text-light);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.8rem 0.15rem;
  border-bottom: 1px solid var(--surface-border);
  text-decoration: none;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out), padding-left var(--duration-base) var(--ease-out);
}

.dgs-mobile-links>a:last-of-type {
  border-bottom: none;
}

.dgs-mobile-link-arrow {
  width: 16px;
  height: 16px;
  color: var(--action-teal);
  opacity: 0;
  transform: translateX(-6px);
  flex-shrink: 0;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.dgs-mobile-links>a:focus-visible,
.dgs-mobile-links>a.is-active,
.dgs-mobile-links>button.dgs-mobile-link-toggle:focus-visible,
.dgs-mobile-links>button.dgs-mobile-link-toggle.is-active {
  color: var(--action-teal);
  padding-left: 0.5rem;
}

.dgs-mobile-links>a:focus-visible .dgs-mobile-link-arrow,
.dgs-mobile-links>a.is-active .dgs-mobile-link-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* :hover only for pointers that can actually hover (mouse/trackpad).
   On touch devices, :hover has no "unhover" moment — a tapped link stays
   painted in this same teal until something else is tapped, which reads
   as if the tap had marked it the current page. Real current-page state
   is .is-active (set by updateActiveNavLinks in main.js), untouched by
   this query. */
@media (hover: hover) {
  .dgs-mobile-links>a:hover,
  .dgs-mobile-links>button.dgs-mobile-link-toggle:hover {
    color: var(--action-teal);
    padding-left: 0.5rem;
  }

  .dgs-mobile-links>a:hover .dgs-mobile-link-arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── Mobile nav accordion (About / Solutions / Industries / Growth Hub) ─── */
.dgs-mobile-links>button.dgs-mobile-link-toggle .dgs-dropdown-arrow {
  width: 14px;
  height: 14px;
  color: var(--action-teal);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

.dgs-mobile-links>button.dgs-mobile-link-toggle[aria-expanded="true"] .dgs-dropdown-arrow {
  transform: rotate(180deg);
}

.dgs-mobile-submenu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.dgs-mobile-submenu.is-open {
  grid-template-rows: 1fr;
}

.dgs-mobile-submenu>div {
  min-height: 0;
  overflow: hidden;
}

.dgs-mobile-submenu a {
  display: block;
  color: var(--text-light-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.6rem 0.15rem 0.6rem 1rem;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.dgs-mobile-submenu a:focus-visible,
.dgs-mobile-submenu a.is-active {
  color: var(--action-teal);
}

@media (hover: hover) {
  .dgs-mobile-submenu a:hover {
    color: var(--action-teal);
  }
}

/* Category label inside a mobile submenu (e.g. Transform / Enable /
   Elevate under Solutions) — same role as .dgs-dropdown-col-title in
   the desktop megamenu, restyled for the dark drawer background. */
.dgs-mobile-submenu-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--action-teal);
  opacity: 0.8;
  padding-left: 1rem;
  margin: 0.85rem 0 0.3rem;
}

.dgs-mobile-nav-buttons {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.dgs-mobile-nav-buttons .dgs-btn {
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0.85rem 1.5rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-lg) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
}

.dgs-mobile-nav-buttons .dgs-btn-saas {
  width: 100% !important;
  padding: 0.65rem 1.5rem !important;
  font-weight: 700 !important;
}

html.dgs-menu-open,
body.dgs-menu-open {
  overflow: hidden;
}

/* Safety net for the fixed-inside-transformed-header bug (see
   openMobileMenu/updateHeaderScroll in main.js): even if the hide
   transform ever lands on .dgs-header while the drawer is open, it's
   neutralized here so the "fixed" .dgs-mobile-menu can't be dragged
   off the viewport with it. */
html.dgs-menu-open .dgs-header.dgs-header--hidden {
  transform: none !important;
}

@media (max-width: 1023px) {
  .dgs-nav-links,
  .dgs-nav-cta-group {
    display: none !important;
  }

  .dgs-nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    z-index: 205 !important;
    cursor: pointer !important;
  }

  .dgs-nav-toggle-bars span {
    background-color: #ffffff !important;
  }

  .dgs-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100vh !important; /* fallback for browsers without dvh support */
    height: 100dvh !important;
    width: 100% !important;
    z-index: 9999 !important;
  }

  .dgs-mobile-backdrop {
    z-index: 9998 !important;
  }
}

@media (min-width: 1024px) {
  .dgs-nav-links {
    display: flex !important;
  }

  .dgs-nav-cta-group {
    display: flex !important;
  }

  .dgs-nav-toggle {
    display: none !important;
  }

  /* Do NOT set display:none on .dgs-mobile-menu — it uses
     clip-path+visibility for its open/close animation. Setting
     display:none would break .is-open and lock the drawer shut.
     The drawer is visually absent because clip-path: inset(0 0 100% 0)
     clips it to nothing on all viewports; only .is-open reveals it. */
  .dgs-mobile-backdrop {
    display: none !important;
  }
}

.dgs-hero {
  background: var(--bg-white);
  color: var(--bg-deep-navy);
  padding: 6rem 0 7rem;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--surface-border-neutral);
}

@media (min-width: 768px) {
  .dgs-hero {
    padding: 10rem 0 13rem;
  }
}

.dgs-hero::after {
  display: none;
}

.dgs-hero-content {
  position: relative;
  z-index: 2;
}

.dgs-hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  margin-bottom: var(--space-sm);
  max-width: 62.5rem;
  color: var(--bg-deep-navy);
}

.dgs-hero-gradient-text {
  background: linear-gradient(135deg, #0A1F33 0%, #00B39F 35%, #2D7FF9 48%, #2D7FF9 52%, #00B39F 65%, #0A1F33 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: dgs-gradient-rotation 8s linear infinite;
  display: inline-block;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

@keyframes dgs-gradient-rotation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.dgs-hero-sub {
  font-size: 1.08rem;
  color: var(--text-dark-muted);
  max-width: 45rem;
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.dgs-testimonial-card {
  background: var(--surface-navy-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* --- PREMIUM FAQ LAYOUT (sticky left rail) --- */
.dgs-premium-faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 900px) {
  .dgs-premium-faq-layout {
    grid-template-columns: 1fr 1.6fr;
    gap: 4.5rem;
  }

  .dgs-faq-sticky {
    position: sticky;
    top: 8.75rem;
  }
}

/* --- FAQ ACCORDION --- */
.dgs-faq-list {
  width: 100%;
}

.dgs-faq-item {
  border-bottom: 1px solid var(--surface-border);
}

.dgs-section--light .dgs-faq-item {
  border-bottom-color: #E4E8EA;
}

.dgs-faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1.35rem 0;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-white);
  transition: color var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.dgs-faq-question:hover {
  color: var(--action-mint-hover);
}

.dgs-section--light .dgs-faq-question {
  color: var(--bg-deep-navy);
}

.dgs-faq-question-text {
  flex-grow: 1;
}

.dgs-faq-number {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: #4a5568;
  transition:
    border-color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.dgs-section--darker .dgs-faq-number {
  border-color: rgba(255,255,255,0.12);
  color: var(--action-teal);
}

.dgs-faq-item.is-open .dgs-faq-number {
  background: #f5a623 !important;
  border-color: #f5a623 !important;
  color: #ffffff !important;
}

.dgs-faq-item.is-open .dgs-faq-question {
  color: var(--action-mint-hover);
}

.dgs-section--light .dgs-faq-item.is-open .dgs-faq-question {
  color: var(--bg-deep-navy);
}

.dgs-faq-toggle {
  font-family: var(--font-body);
  color: #4a5568;
  font-size: 1.3rem;
  margin-left: auto;
  transition: transform var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
  flex-shrink: 0;
}

.dgs-section--darker .dgs-faq-toggle {
  color: var(--action-teal);
}

.dgs-faq-item.is-open .dgs-faq-toggle {
  transform: rotate(45deg);
  color: #000000 !important;
}

.dgs-section--darker .dgs-faq-item.is-open .dgs-faq-toggle {
  color: var(--action-teal) !important;
}

.dgs-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding-left: 2.95rem;
  transition: max-height var(--duration-base) var(--ease-out);
}

.dgs-faq-answer p {
  padding-bottom: var(--space-sm);
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.7;
}

.dgs-section--light .dgs-faq-answer p {
  color: var(--text-dark-muted) !important;
}

.dgs-cta-banner {
  text-align: center;
  padding: calc(var(--space-2xl) * 0.85) 3.5rem;
  background:
    radial-gradient(circle at 8% 30%, rgba(0, 179, 159, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 92% 70%, rgba(245, 166, 35, 0.12) 0%, transparent 45%),
    var(--bg-deep-navy) !important;
  background-color: var(--bg-deep-navy) !important;
  position: relative;
  overflow: hidden;
}

.dgs-cta-banner::before {
  display: none;
}

.dgs-cta-banner h2 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: var(--space-md);
  color: var(--text-white);
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.dgs-cta-banner h2 .dgs-text-accent {
  color: var(--action-teal);
}

.dgs-cta-banner p {
  color: var(--text-secondary);
  max-width: 35rem;
  margin: 0 auto var(--space-md);
  font-size: 1rem;
}

@media (max-width: 640px) {
  .dgs-cta-banner {
    padding: 2.5rem 1.5rem;
  }
}

.dgs-footer {
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    #0A1F33;
  color: var(--text-tertiary);
  padding: 5rem 0 3rem;
  font-size: 0.88rem;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--surface-border);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.dgs-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 179, 159, 0.55) 50%, transparent 100%);
}

.dgs-footer::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  aspect-ratio: 1 / 0.5;
  background: radial-gradient(ellipse at center, rgba(245, 166, 35, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.dgs-footer>.dgs-container {
  position: relative;
  z-index: 2;
}

.dgs-page main {
  position: relative;
  background: var(--bg-deep-navy);
  margin-bottom: 0 !important;
}

.dgs-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}

.dgs-footer-brand-col {
  flex: 1.2;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dgs-footer-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 1.5rem 0 0 0;
  max-width: 440px;
}

.dgs-footer-newsletter {
  flex: 1.5;
  min-width: 280px;
  max-width: 540px;
  align-self: flex-start;
}

.dgs-footer-newsletter-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  line-height: 1.4;
}

.dgs-footer-newsletter-sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem 0;
  font-family: var(--font-body);
}

.dgs-footer-newsletter-iframe {
  width: 100%;
  border: none;
  border-radius: 8px;
  display: block;
}

.dgs-footer-grid {
  display: grid;
  gap: var(--space-lg) var(--space-md);
  margin-bottom: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dgs-footer-col a.dgs-footer-link--sm {
  padding: 0.15rem 0;
  font-size: 0.82rem;
}

.dgs-footer-legal-copy {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-tertiary);
  line-height: 1.6;
  display: inline-block;
}

.dgs-footer-brand {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0.85rem;
  width: 10.5rem;
  height: 2.75rem;
  background: url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a5f1fbc9c9b37b5fd51bdd5.png') no-repeat left center / contain;
  overflow: hidden;
}

.dgs-footer-brand .dgs-logo-mark {
  display: none;
}

.dgs-footer-brand span {
  display: none;
}

.dgs-footer-desc {
  max-width: 18.75rem;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  line-height: 1.6;
}

.dgs-footer-col h4 {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.dgs-footer-col a {
  display: block;
  padding: 0.3rem 0;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  text-decoration: none;
  position: relative;
  width: fit-content;
}

.dgs-footer-col a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.1rem;
  width: 0;
  height: 1px;
  background: var(--action-teal);
  transition: width var(--duration-base) var(--ease-out);
}

.dgs-footer-col a:hover {
  color: var(--text-white);
  transform: translateX(2px);
}

.dgs-footer-col a:hover::after {
  width: 100%;
}

.dgs-footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}

.dgs-footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all var(--duration-base) var(--ease-out);
  padding: 0;
}

.dgs-footer-social a:hover {
  border-color: var(--action-teal);
  color: var(--action-teal);
  background: rgba(0, 179, 159, 0.1);
  box-shadow: 0 4px 16px rgba(0, 179, 159, 0.22);
  transform: translateY(-2px);
}

.dgs-footer-social svg {
  width: 16px;
  height: 16px;
}

.dgs-footer-bottom {
  border-top: 1px solid var(--surface-border);
  padding-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.dgs-footer-bottom a {
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.dgs-footer-bottom a:hover {
  color: var(--text-white);
}

.dgs-footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.dgs-footer-watermark {
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  right: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 13.5vw, 13.5rem);
  line-height: 1;
  text-align: center;
  letter-spacing: -0.03em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-transform: none;
  z-index: 1;
  max-width: 100%;
  -webkit-text-stroke: 1px rgba(245, 166, 35, 0.035);
  background: linear-gradient(180deg, rgba(245, 166, 35, 0.06) 0%, transparent 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

@media (max-width: 768px) {
  .dgs-footer-watermark {
    display: none !important;
  }
}

/* thank-you.html only: the hero runs straight into the footer on that
   page (no section in between), so the sitewide top hairline just reads
   as a stray line between two navy blocks, drop it there only. Kept as
   a scoped exception here rather than in dgs-thank-you.css, so every
   rule touching the shared footer lives in this one global sheet. */
.dgs-thankyou-page .dgs-footer {
  border-top: none;
}

/* .dgs-reveal is visible by default (no rule here sets opacity/visibility).
   The hidden-until-scrolled-into-view treatment is a progressive enhancement
   that only activates once html.dgs-js confirms main.js actually ran (set as
   the very first line of its IIFE) — so on a page where main.js never loads
   or executes (a GHL blog template that doesn't include it, a blocked
   script, a render race), Growth Hub cards/images marked .dgs-reveal are
   never silently stuck invisible waiting on a JS class that isn't coming. */
html.dgs-js .dgs-reveal {
  opacity: 0;
  transform: translateY(28px);
  visibility: hidden;
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  /* Auto-stagger: main.js sets --dgs-reveal-i on grouped siblings so a grid or
     list cascades in sequence instead of appearing all at once. */
  transition-delay: calc(var(--dgs-reveal-i, 0) * 0.08s);
}

html.dgs-js .dgs-reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  /* Drop the compositor hint once settled so long pages don't keep hundreds of
     promoted layers alive (keeps scrolling smooth). */
  will-change: auto;
}

/* Reusable reveal directions — opt in with data-reveal="fade|left|right|scale".
   Defaults (no attribute) keep the existing rise-up motion. Prefixed with
   html.dgs-js to match the base rule's specificity (html type + 2 classes) —
   without it these attribute-selector overrides would be LOWER specificity
   than "html.dgs-js .dgs-reveal" above and silently stop overriding it. */
html.dgs-js .dgs-reveal[data-reveal="fade"]  { transform: none; }
html.dgs-js .dgs-reveal[data-reveal="left"]  { transform: translateX(-28px); }
html.dgs-js .dgs-reveal[data-reveal="right"] { transform: translateX(28px); }
html.dgs-js .dgs-reveal[data-reveal="scale"] { transform: scale(0.965); }

/* Respect users who ask for less motion: show everything, no slide/blur. */
@media (prefers-reduced-motion: reduce) {
  html.dgs-js .dgs-reveal,
  html.dgs-js .dgs-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    visibility: visible !important;
    transition: none !important;
  }
}

/* ============================================================
   INTERACTION POLISH — consistent, GPU-friendly micro-motion.
   Additive only: unifies focus + form-focus timing across the
   site without changing any component's resting appearance.
   ============================================================ */

/* Unified, accessible focus ring for keyboard users (mouse clicks are
   unaffected thanks to :focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--action-teal);
  outline-offset: 2px;
}

/* Smooth form-field focus feedback — only paints/composites (border, shadow,
   background), never properties that force layout. */
input,
textarea,
select {
  transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  input,
  textarea,
  select {
    transition: none;
  }
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* NOTE: this block appears to be legacy/duplicate of the token-driven
   .dgs-page h1/h2 rules near the top of this file (pre-dates the
   --fs-h1/--fs-h2 type-scale system; same computed font-size, different
   weight/line-height/letter-spacing, and its own !important). Left as-is —
   untangling it is a sitewide typography question, out of scope here. */
.dgs-page h1 {
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-size: clamp(2.8rem, 6vw, 4.8rem) !important;
}

.dgs-page h2 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
}

/* ─── MODULAR GRID PATTERN OVERLAYS ─── */

/* ─── SERVICES: PREMIUM ANIMATED CLICKABLE ROW LIST (Shared Component) ─── */
.dgs-services-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  border-top: none;
}

@media (min-width: 768px) {
  .dgs-services-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dgs-services-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dgs-service-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2.25rem 2rem;
  border: 1px solid var(--surface-border-neutral);
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-xl) var(--radius-xl);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-white);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.dgs-service-row:hover {
  transform: translateY(-5px);
  border-color: var(--bg-deep-navy);
  box-shadow: 0 16px 36px rgba(11, 19, 62, 0.08);
}

/* Sweep background on hover */
.dgs-service-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-deep-navy);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}

.dgs-service-row:hover::before,
.dgs-service-row:focus-visible::before {
  transform: scaleY(1);
}

.dgs-service-row-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 3.25rem;
  display: flex;
  align-items: center;
  color: var(--action-teal);
  transition: color var(--duration-base) var(--ease-out), transform 0.4s var(--ease-out);
}

.dgs-service-row-icon svg {
  stroke: var(--action-teal);
  transition: stroke var(--duration-base) var(--ease-out);
  width: 28px;
  height: 28px;
}

.dgs-service-row:hover .dgs-service-row-icon,
.dgs-service-row:focus-visible .dgs-service-row-icon {
  color: var(--action-mint-hover);
  transform: scale(1.08);
}

.dgs-service-row:hover .dgs-service-row-icon svg,
.dgs-service-row:focus-visible .dgs-service-row-icon svg {
  stroke: var(--action-mint-hover);
}

.dgs-service-row-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dgs-service-row-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.3;
  color: var(--bg-deep-navy);
  transition: color var(--duration-base) var(--ease-out);
}

.dgs-service-row:hover .dgs-service-row-title,
.dgs-service-row:focus-visible .dgs-service-row-title {
  color: var(--text-white);
}

.dgs-service-row-benefit {
  font-size: 0.9rem;
  color: var(--text-dark-muted);
  line-height: 1.45;
  transition: color var(--duration-base) var(--ease-out);
}

.dgs-service-row:hover .dgs-service-row-benefit,
.dgs-service-row:focus-visible .dgs-service-row-benefit {
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 640px) {
  .dgs-service-row {
    padding: 1.75rem 1.5rem;
  }

  .dgs-hero-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .dgs-hero-actions .dgs-btn {
    width: auto !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 0 !important;
    display: inline-flex !important;
  }
}

/* Timeline step content card (audit.html CSR timeline ONLY) — teal
   outline at every breakpoint; the connector line (mobile: vertical,
   desktop: horizontal) is drawn on .dgs-timeline-step itself and sits
   behind this box (z-index 1 vs 2). Scoped to .dgs-timeline-step (its
   actual parent on audit.html) rather than the bare class name: index.html's
   CSR Framework section reuses the SAME class name (.dgs-timeline-content)
   for a visually different, border-free card, and the unscoped version of
   this rule was leaking its teal border onto that section too. */
.dgs-timeline-step .dgs-timeline-content {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(0, 179, 159, 0.45);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

@media (max-width: 767px) {
  .dgs-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3.5rem !important;
  }

  .dgs-timeline-step {
    position: relative;
    text-align: center;
  }

  .dgs-timeline-step:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    top: calc(var(--space-lg) + 22px) !important;
    bottom: calc(-3.5rem - var(--space-lg) - 22px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 2px !important;
    background: rgba(0, 179, 159, 0.4) !important;
    z-index: 1 !important;
    border: none !important;
  }
}

/* Center-aligned subtle breathing gradients for narrative flow sections */
#dgs-audit-why {
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 179, 159, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(245, 166, 35, 0.05) 0%, transparent 40%),
    var(--bg-navy-darkest) !important;
}

/* ─────────────────────────────────────────────
   THREE ENGINES SECTION (shared across pages)
   ───────────────────────────────────────────── */
.dgs-engines-section {
  background: var(--bg-white);
  padding: var(--space-xl) 0;
}

.dgs-engines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .dgs-engines-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
}

.dgs-engines-heading h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.55rem);
  color: var(--bg-deep-navy);
  margin-bottom: var(--space-sm);
  line-height: 1.15;
}

.dgs-engines-heading h2 .dgs-text-accent {
  color: var(--action-teal);
}

.dgs-engines-rule {
  width: 3.25rem;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--accent-yellow);
  margin-bottom: var(--space-md);
}

.dgs-engines-explore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bg-deep-navy);
}

.dgs-engines-explore svg {
  width: 15px;
  height: 15px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.dgs-engines-explore:hover {
  color: var(--action-teal);
}

.dgs-engines-explore:hover svg {
  transform: translateX(3px);
}

.dgs-engine-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  position: relative;
}

.dgs-engine-icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--action-teal);
}

.dgs-engine-icon svg {
  width: 100%;
  height: 100%;
}

.dgs-engine-card h3 {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bg-deep-navy);
}

.dgs-engine-card p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-dark-muted);
}

/* Dividers between engine cards (desktop) */
.dgs-engines-grid .dgs-engine-card:nth-of-type(2)::after,
.dgs-engines-grid .dgs-engine-card:nth-of-type(3)::after {
  content: '';
  position: absolute;
  top: 1rem;
  bottom: 0.25rem;
  right: -1.5rem;
  width: 1px;
  background: rgba(10, 31, 51, 0.18);
}

@media (max-width: 1024px) {
  .dgs-engines-grid .dgs-engine-card::after {
    display: none;
  }
}

/* ─── TEXT LINK WITH UNDERLINE (secondary CTA style) ─── */
.dgs-launch-link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  color: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}

.dgs-launch-link span.dgs-underline {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--action-teal);
  transition: background var(--duration-base) var(--ease-out);
}

.dgs-launch-link:hover {
  color: var(--action-teal);
}

.dgs-launch-link:hover span.dgs-underline {
  background: var(--action-teal);
}

/* --- MOBILE MENU SOCIALS --- */
.dgs-mobile-socials {
  display: flex;
  gap: 1rem;
  /* env(safe-area-inset-bottom) keeps this last-in-scroll row clear of the
     iOS home-indicator strip; falls back to 0px on devices without one. */
  padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--surface-border);
  margin-top: 1.25rem;
}

.dgs-mobile-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all var(--duration-base) var(--ease-out);
}

.dgs-mobile-socials a:hover {
  border-color: var(--action-teal);
  color: var(--action-teal);
  background: rgba(0, 179, 159, 0.1);
}

.dgs-mobile-socials svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   FRAMEWORK 3.0 - NAVIGATION GLASS STATE + READABILITY MEASURE
   Appended layer: these rules intentionally resolve last.
   ============================================================ */

/* Scrolled navigation state (toggled by js/modules/nav.js at 50px):
   at rest the header is solid Deep Navy (heroes are white, so the bar
   must always carry its own contrast); once scrolled it becomes a
   translucent navy glass with a 12px backdrop blur. Only paint-level
   properties transition (background-color, border-color, box-shadow),
   and the header is promoted to its own compositor layer, so the
   effect runs at 60fps with zero layout shift. */
.dgs-header {
  background-color: transparent;
  border-bottom: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translateY(0);
  transition: background-color 0.3s var(--ease-out), transform 0.4s var(--ease-out);
  will-change: transform;
}

/* Scroll-direction reveal: slide the header up out of view */
.dgs-header--hidden {
  transform: translateY(-100%) !important;
}

.dgs-header:hover,
.dgs-header.is-scrolled {
  background-color: #0A1F33 !important; /* Solid Navy Dark */
  border-bottom: none !important; /* Remove the white line/border */
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.dgs-header::before,
.dgs-header::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {

  .dgs-header,
  .dgs-header::before,
  .dgs-header::after {
    transition: none;
  }
}

/* Readability measure: running copy capped at 60-68ch (tokens in :root) */
.dgs-page :where(p) {
  max-inline-size: var(--measure-max);
}

/* Centered compositions keep their axis when the cap applies */
.dgs-page :where(.dgs-text-center, .dgs-section-head--center, .dgs-cta-banner, .dgs-year-step, .dgs-timeline-step, [class*="--center"], [style*="text-align: center"], [style*="text-align:center"]) p,
.dgs-page :where(.dgs-cta-banner)>p {
  margin-inline: auto;
}

/* ── Framework 3.0 button system: accent text link (reference: "Explore Solutions →") ── */
.dgs-launch-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: var(--dgs-amber);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}

.dgs-launch-link span.dgs-underline {
  display: none;
}

.dgs-launch-link::after {
  content: '\2192';
  transition: transform var(--duration-fast) var(--ease-out);
}

.dgs-launch-link:hover {
  color: var(--dgs-amber-hover);
}

.dgs-launch-link:hover::after {
  transform: translateX(3px);
}

/* On light (white hero) sections amber text fails contrast: navy label, amber arrow */
.dgs-hero .dgs-launch-link {
  color: var(--text-dark-primary);
}


/* ============================================================
   SAAS CTA BUTTON (canonical) — moved here from dgs-index.css so
   every page (solutions, etc.) shares the exact homepage button.
   Reference: index.html hero + nav + final CTA.
   ============================================================ */
.dgs-btn-saas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-xl);
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
  box-sizing: border-box;
}

/* Larger size for hero / final CTA */
.dgs-btn-saas.dgs-btn-saas--lg {
  padding: 1rem 2rem;
  font-size: 1.02rem;
  border-radius: var(--radius-lg);
}

/* Stopwatch / slot-machine label flip on hover */
.dgs-btn-flip {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  overflow: hidden;
  height: 1.4em;
  line-height: var(--line-tight);
}

/* Global reset to remove drop-shadow / filter / heavy box shadows on photos and images */
img,
[role="img"] {
  filter: none !important;
  box-shadow: none !important;
}

/* ─── IMAGE LOAD FADE-IN (site-wide) ───
   Images are visible by default (opacity:1). The fade-from-hidden treatment
   is a progressive enhancement that only activates once html.dgs-js confirms
   main.js actually ran (that class is set as the very first line of its
   IIFE) — so on any page where main.js never loads/executes (a GHL blog
   template that doesn't include it, a blocked/slow script, a render race),
   images are never silently stuck invisible waiting on JS that isn't coming.
   Opt out per-image with .dgs-no-fade. */
img {
  opacity: 1;
}

html.dgs-js img:not(.dgs-img-loaded):not(.dgs-no-fade) {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-img-loaded,
.dgs-no-fade {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  img {
    opacity: 1 !important;
    transition: none !important;
  }
}

.dgs-btn-flip-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}

.dgs-btn-flip-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 1.4em;
  white-space: nowrap;
}

.dgs-btn-saas:hover .dgs-btn-flip-track,
.dgs-btn-saas:focus-visible .dgs-btn-flip-track {
  transform: translateY(-50%);
}

.dgs-btn-saas:hover .dgs-btn-flip-line .dgs-btn-icon svg {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .dgs-btn-flip-track {
    transition: none;
  }
  .dgs-btn-saas:hover .dgs-btn-flip-track,
  .dgs-btn-saas:focus-visible .dgs-btn-flip-track {
    transform: none;
  }
}

.dgs-btn-saas--primary {
  background-color: var(--dgs-amber) !important;
  color: #0A1F33 !important;
  border: 1px solid var(--dgs-amber) !important;
}

.dgs-btn-saas--primary:hover {
  background-color: #e0961f !important;
  border-color: #e0961f !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245, 166, 35, 0.28);
}

.dgs-btn-saas--secondary {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.dgs-btn-saas--secondary:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* ============================================================
   GLOBAL BRAND PROMISE LINK STYLE (.dgs-promise-link)
   Teal underline text link component with animated arrow icon
   ============================================================ */
.dgs-promise-link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--action-teal) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  align-self: flex-start;
  transition: color var(--duration-base, 0.2s) var(--ease-out, ease);
}

.dgs-promise-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--action-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base, 0.2s) var(--ease-out, ease);
}

.dgs-promise-link:hover::after {
  transform: scaleX(1);
}

.dgs-promise-link .dgs-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: currentColor;
  transition: transform var(--duration-base, 0.2s) var(--ease-out, ease);
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.dgs-promise-link .dgs-btn-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5px;
}

.dgs-promise-link:hover .dgs-btn-icon {
  transform: translateX(4px);
}

/* ============================================================
   GLOBAL WHY DIGITAL GROWTHSCALE CARD SYSTEM (.dgs-why-card)
   Balanced line-height and tight spacing to eliminate awkward wraps
   ============================================================ */
.dgs-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
}

@media (min-width: 600px) {
  .dgs-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dgs-why-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem 2rem;
  }
}

.dgs-why-card {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  transition: transform 0.4s var(--ease-out, ease);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dgs-why-card:hover {
  transform: translateY(-5px);
}

.dgs-why-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(0, 179, 159, 0.16) 0%, rgba(45, 127, 249, 0.1) 100%);
  border: 1px solid rgba(0, 179, 159, 0.22);
  color: var(--action-teal, #00B39F);
  margin-bottom: 1.15rem;
  transition: all 0.35s ease;
}

.dgs-why-icon-box svg {
  width: 26px;
  height: 26px;
  transition: transform 0.35s ease;
}

.dgs-why-card:hover .dgs-why-icon-box {
  border-color: rgba(0, 179, 159, 0.5);
  box-shadow: 0 0 18px rgba(0, 179, 159, 0.22);
}

.dgs-why-card:hover .dgs-why-icon-box svg {
  transform: scale(1.08);
}

.dgs-why-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-white, #ffffff);
  margin: 0 0 0.65rem 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.dgs-why-desc {
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-light-muted, rgba(255, 255, 255, 0.68));
  margin: 0;
}

.dgs-case-note {
  margin-top: 3.25rem !important;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
  text-align: center;
}

/* ─────────────────────────────────────────
   GLOBAL: Modernized reduced border-radius & zero drop-shadows sitewide
   ───────────────────────────────────────── */

/* 1. All cards, panels, containers, and modules: sharp modern radius (8-10px max) */
.dgs-challenge-card,
.dgs-resource-card,
.dgs-next-step-card,
.dgs-diff-card,
.dgs-fsol-card,
.dgs-hero-stats-panel,
.dgs-contact-form-single,
[class*="-card"],
[class*="-panel"]:not(nav):not(.dgs-ghl-panel) {
  border-radius: var(--radius-xl) !important;
  box-shadow: none !important;
}

/* 2. All images, photo frames, and media containers */
img,
.dgs-fsol-card-bg img {
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

/* 3. Sitewide shadow removal for all components, hover states, and overlays */
*,
*::before,
*::after {
  box-shadow: none !important;
}

/* ============================================================
   DESIGN SYSTEM 3.1 — ICON ALIGNMENT, RHYTHM & RESPONSIVE POLISH
   Appended last so it resolves after component sheets, but kept
   low-specificity and additive (`:where()` = 0 specificity) so
   every tuned component keeps its identity. Covers the genuinely
   global concerns: inline-icon alignment, opt-in text roles, and
   responsive rhythm step-downs.
   ============================================================ */

/* ── Inline icon alignment ──────────────────────────────────
   An inline SVG that accompanies text now sits optically centered
   on that text instead of dropping to the baseline. Ignored inside
   flex rows (where components already center their icons), so this
   only corrects stray inline glyphs in prose, links, and pills. */
.dgs-page :where(p, span, a, li, h1, h2, h3, h4, h5, h6) > svg {
  vertical-align: -0.125em;
}

/* Icons inside buttons / links never shrink away from their label. */
.dgs-page :where(a, button) svg {
  flex-shrink: 0;
}

/* ── Opt-in text-role utilities ─────────────────────────────
   New markup can adopt the system without inventing new sizes;
   existing markup is unaffected (these classes aren't in use yet). */

/* ── Responsive rhythm step-downs ───────────────────────────
   Keep vertical rhythm proportional as the viewport narrows:
   tighten section-head spacing and scale the eyebrow down. */
@media (max-width: 768px) {
  .dgs-section-head {
    margin-bottom: var(--space-md);
  }

  .dgs-eyebrow {
    font-size: 0.95rem;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .dgs-eyebrow {
    font-size: 0.85rem;
  }
}

/* ============================================================
   GLOBAL SERVICE HERO LAYOUT
   ============================================================ */

.dgs-service-hero > .dgs-container {
  position: relative;
  z-index: 5;
}

.dgs-svc-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.dgs-service-hero .dgs-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}

.dgs-service-hero h1 {
  font-family: var(--font-heading, "Manrope", sans-serif);
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 auto 1.5rem;
  max-width: 1140px;
  text-align: center;
}

@media (max-width: 480px) {
  .dgs-service-hero h1,
  .dgs-hero--premium-split h1 {
    font-size: clamp(1.8rem, 7.5vw, 2.25rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
  }
}

.dgs-service-hero .dgs-hero-sub {
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
  font-size: 1.125rem;
  line-height: 1.75;
  margin: 0 auto;
  text-align: center;
}

.dgs-service-hero .dgs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ============================================================
   GLOBAL HERO TYPOGRAPHY & PILLS
   ============================================================ */

.dgs-hero-title-main {
  background: linear-gradient(to bottom, #ffffff 55%, #cfd8e3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.dgs-hero-teal-text {
  color: var(--action-teal, #00b39f) !important;
  -webkit-text-fill-color: var(--action-teal, #00b39f) !important;
  background: none !important;
  display: inline;
}

.dgs-hero-dot {
  color: var(--action-teal, #00b39f) !important;
  -webkit-text-fill-color: var(--action-teal, #00b39f) !important;
  display: inline;
}

.dgs-value-pills {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 0.6rem; 
  margin-top: 1.5rem; 
  margin-bottom: 0.5rem;
}

.dgs-pill {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.dgs-pill.dgs-pill--teal {
  background: rgba(0, 179, 159, 0.15);
  border: 1px solid rgba(0, 179, 159, 0.4);
  color: #1affeb; /* brighter teal for dark mode contrast */
}

/* Global removal of background grids across hero sections and CTA sections */
.dgs-hero-mesh-overlay,
.dgs-service-hero .dgs-hero-mesh-overlay,
.final-cta-bg-grid {
  display: none !important;
  background-image: none !important;
}

/* ============================================================
   GLOBAL FINAL CTA BLOCK (.dgs-sol-final-cta)
   ============================================================ */
.dgs-sol-final-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-navy-darkest, #0A1F33) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  padding: clamp(5rem, 11vw, 9.5rem) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dgs-sol-final-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.38;
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black 75%, transparent 98%);
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black 75%, transparent 98%);
  pointer-events: none;
}

.dgs-sol-final-cta::before {
  content: none;
}

.final-cta-giant-bg-text {
  font-family: var(--font-heading);
  font-size: 22vw;
  line-height: 0.85;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 166, 35, 0.035);
  background: linear-gradient(180deg, rgba(245, 166, 35, 0.05) 0%, transparent 60%);
  -webkit-background-clip: text;
  background-clip: text;
  position: absolute !important;
  top: 78%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  display: none;
}

/* Only show on index — JS adds .dgs-scale-enabled on homepage sections */
.dgs-scale-enabled .final-cta-giant-bg-text {
  display: block;
}

.dgs-sol-final-cta.has-dom-giant-text::before,
.cinematic-cta-wrapper.has-dom-giant-text::before {
  display: none !important;
}

.dgs-sol-final-cta::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 50vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 179, 159, 0.12) 0%,
    rgba(45, 127, 249, 0.12) 40%,
    transparent 70%);
  animation: dgs-sol-cta-breathe 8s ease-in-out infinite alternate;
}

@keyframes dgs-sol-cta-breathe {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.85; }
}

.dgs-sol-final-cta > *:not(.dgs-sol-final-bg) {
  position: relative;
  z-index: 2;
}

.dgs-sol-final-cta h2 {
  max-width: 66rem;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
  line-height: 1.22;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.12));
  margin: 0 auto 1.5rem auto;
}

.dgs-sol-final-cta h2 .dgs-text-accent {
  -webkit-text-fill-color: var(--action-teal);
  filter: none;
}

.dgs-sol-final-cta p {
  max-width: 42rem;
  margin: 0 auto 3rem auto;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
}

.dgs-sol-final-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .dgs-sol-final-cta {
    padding: 3.5rem 1.25rem !important;
  }

  .dgs-sol-final-cta h2 {
    font-size: clamp(1.4rem, 5vw, 1.85rem) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    margin-bottom: 1rem !important;
  }

  .dgs-sol-final-cta p {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
    padding: 0 0.5rem !important;
  }

  .dgs-sol-final-cta::before {
    font-size: 35vw !important;
  }
}

@media (max-width: 480px) {
  .dgs-sol-final-ctas,
  .dgs-hero-actions,
  .dgs-mobile-nav-buttons {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .dgs-sol-final-ctas > a,
  .dgs-sol-final-ctas > .dgs-btn-saas,
  .dgs-sol-final-ctas > .dgs-btn,
  .dgs-hero-actions > a,
  .dgs-hero-actions > .dgs-btn-saas,
  .dgs-hero-actions > .dgs-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ════════════════════════════════════════════════════════════
   UNIFIED BUTTON CORNER ROUNDING (Matches solutions.html)
   Enforces consistent 8px corner rounding (var(--radius-lg))
   across all button variants, navbar CTAs, forms, and footer.
   ════════════════════════════════════════════════════════════ */
.dgs-btn,
.dgs-btn-saas,
.dgs-btn-saas--primary,
.dgs-btn-saas--secondary,
.dgs-btn-saas--lg,
.dgs-btn--outline-dark,
.dgs-btn--lg,
#dgs-nav-cta,
.dgs-mobile-nav-buttons .dgs-btn,
.dgs-mobile-nav-buttons .dgs-btn-saas,
button.dgs-btn-saas,
a.dgs-btn-saas,
a.dgs-btn,
.dgs-header .dgs-btn-saas,
.dgs-footer .dgs-btn-saas {
  border-radius: var(--radius-lg, 6px) !important;
}

/* ════════════════════════════════════════════════════════════
   MOBILE NAVBAR COMPACT PADDING
   Reduces left/right inset space on mobile viewports.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dgs-header .dgs-nav,
  .dgs-container.dgs-nav,
  header .dgs-nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

/* ════════════════════════════════════════════════════════════
   CLIENT SUCCESS — "What this looks like in practice."
   Side-by-side text-based metric showcase with clean top rules,
   bold stat figures, teal units, and editorial description copy.
   Shared across all solution and industry detail pages.
   ════════════════════════════════════════════════════════════ */
/* Sizes/margins matched to the industries-page Client Success grid
   (.dgs-cs-* in dgs-industries-detail.css) so both templates read the
   same scale. */
.dgs-case-carousel {
  position: relative;
  width: 100%;
  max-width: 84rem;
  margin: 3rem auto 2.25rem;
}

.dgs-case-carousel-card {
  position: relative;
  z-index: 1;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .dgs-case-carousel-card {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
}

.dgs-case-carousel-slide {
  display: flex !important;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 2rem;
  opacity: 1 !important;
  transform: none !important;
}

.dgs-section--light .dgs-case-carousel-slide {
  border-top-color: rgba(10, 31, 51, 0.15);
}

.dgs-case-carousel-stat {
  min-width: 0;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.dgs-case-carousel-figure {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3.25rem, 6vw, 4.5rem);
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
}

.dgs-section--light .dgs-case-carousel-figure {
  color: var(--bg-deep-navy);
}

.dgs-case-carousel-figure small {
  display: inline-block;
  /* Independent size (matches .dgs-cs-unit on industries pages), not a
     relative em off the big number — keeps the label the same visual
     weight regardless of how long/short the figure itself is. */
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  font-weight: 700;
  color: var(--action-teal, #00B39F);
  letter-spacing: -0.01em;
}

.dgs-case-carousel-caption {
  display: block;
  margin-top: 0;
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--action-teal, #00B39F);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dgs-case-carousel-quote {
  min-width: 0;
  padding: 0;
  border: none;
}

.dgs-case-carousel-text {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2.5rem !important;
  max-width: 42ch;
}

.dgs-section--light .dgs-case-carousel-text {
  color: var(--text-dark-muted);
}

/* Dedicated Scope Pill Tag */
.dgs-case-scope {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1.05rem 0.4rem 0.4rem;
  border: 1px solid rgba(0, 179, 159, 0.35);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}

.dgs-case-scope-label {
  display: inline-block;
  background: var(--action-teal, #00B39F);
  color: #0A1F33;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  flex-shrink: 0;
  line-height: 1;
}

.dgs-case-scope-val {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
}

.dgs-section--light .dgs-case-scope {
  border-color: rgba(0, 179, 159, 0.35);
}

.dgs-section--light .dgs-case-scope-val {
  color: var(--text-dark-primary);
}

.dgs-case-carousel-nav {
  display: none !important;
}

/* ============================================================
   CAREER DETAIL HERO GLOW
   Same soft radial teal/blue glow used on the legal and growth
   article hero sections. Apply `.dgs-career-hero` alongside the
   existing inline navy hero on /careers/*.html detail pages.
   ============================================================ */
.dgs-career-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.dgs-career-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18%;
  width: 56vw;
  height: 22rem;
  min-width: 26rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 45%, transparent 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.dgs-career-hero > .dgs-container {
  position: relative;
  z-index: 1;
}

/* NAV TYPOGRAPHY: Inter, not Sora (2026-08-24 user request) — every
   element inside the header/nav (desktop links, dropdown megamenu,
   mobile drawer, buttons) reads in the body font, not the display font. */
.dgs-header,
.dgs-header * {
  font-family: var(--font-body) !important;
}


/* ============================================================
   PART B. DESIGN SYSTEM 4.0 ADDITIONS
   Tokens and shared components added on top of the Framework 3.0
   foundation above. Nothing here overrides an existing selector;
   every rule is new (motion/layer tokens, an a11y utility, and the
   engagement-journey strip used by the solution pages).
   ============================================================ */

/* B1. Tokens: motion + layering ------------------------------ */
:root {
  /* Motion. One easing family site-wide:
       out  = entrances, state changes (the existing reveal curve)
       draw = SVG stroke drawing, connectors, anything that "travels"
       soft = small UI feedback (hover, focus, pressed) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-1: 160ms;  /* feedback */
  --dur-2: 280ms;  /* state change */
  --dur-3: 520ms;  /* entrance */
  --dur-4: 900ms;  /* choreographed sequence step */

  /* Layering scale. Header stays at 100 (set in the foundation);
     page widgets must sit below it. */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 90;
  --z-header: 100;
  --z-overlay: 1000;
}

/* B2. Accessibility utility ---------------------------------- */
.dgs-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* B3. Engagement journey sync (#dgs-sol-csr, solution pages) ------
   main.js adds .dgs-sol-journey to the section. On first view the
   connectors draw left to right and each stage lights as the line
   reaches it, together with its step card. Afterwards hovering a card
   lights its stage and vice versa. Resting state = the static strip. */
.dgs-sol-journey .dgs-csr-graphic-line { transform-origin: left center; }
.dgs-sol-journey .dgs-csr-graphic-step .dgs-csr-graphic-icon {
  transition: border-color var(--dur-2, 0.3s) var(--ease-out-expo), background-color var(--dur-2, 0.3s) var(--ease-out-expo),
    box-shadow var(--dur-3, 0.5s) var(--ease-out-expo), transform var(--dur-2, 0.3s) var(--ease-out-expo);
}
.dgs-sol-journey .dgs-csr-graphic-step.is-lit .dgs-csr-graphic-icon {
  border-color: var(--csr-accent);
  background: color-mix(in srgb, var(--csr-accent) 16%, #0A1F33);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--csr-accent) 14%, transparent), 0 10px 28px -6px color-mix(in srgb, var(--csr-accent) 45%, transparent);
  transform: translateY(-3px);
}
.dgs-sol-journey .dgs-csr-step.is-linked {
  border-color: rgba(0, 179, 159, 0.35);
  background: rgba(255, 255, 255, 0.03);
}
.dgs-sol-journey .dgs-csr-step.is-linked .dgs-csr-step-num {
  background: var(--dgs-teal);
  color: var(--dgs-navy, #0A1F33);
}
.dgs-sol-journey .dgs-csr-step-num {
  transition: background-color var(--dur-2, 0.3s) var(--ease-out-expo), color var(--dur-2, 0.3s) var(--ease-out-expo);
}
.dgs-csr-graphic.is-armed .dgs-csr-graphic-icon,
.dgs-csr-graphic.is-armed .dgs-csr-graphic-label,
.dgs-csr-graphic.is-armed .dgs-csr-graphic-line { opacity: 0; }



/* ============================================================
   PART C. PAGE SECTIONS
   Each block below is scoped to pages carrying its .dgs-css-* body class.
   ============================================================ */

/* ============================================================
   C01. 404  (scope: .dgs-css-404)
   Formerly css/dgs-404.css. Used by:
     404.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — 404 PAGE SPECIFIC STYLES
   ============================================================ */

/* Same navy + teal/amber radial-glow recipe as .dgs-cta-banner
   (dgs-common.css), the site's standard "premium navy" background. */
.dgs-error-section:where(.dgs-css-404,.dgs-css-404 *) {
  min-height: 80vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 8% 24%, rgba(0, 179, 159, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 92% 76%, rgba(245, 166, 35, 0.12) 0%, transparent 45%),
    var(--bg-deep-navy);
  padding: 9rem 0 5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
  .dgs-error-section:where(.dgs-css-404,.dgs-css-404 *) {
    padding: 8rem 0 4rem;
  }
}

.dgs-error-actions:where(.dgs-css-404,.dgs-css-404 *) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Console Window styling */

/* Syntax Highlighting */

/* Fluid layout — relative units for zoom resilience */
.dgs-error-section .dgs-container:where(.dgs-css-404,.dgs-css-404 *) {
  max-width: 45rem;
}

.dgs-error-section .dgs-error-desc:where(.dgs-css-404,.dgs-css-404 *) {
  max-width: 36.25rem;
}

.dgs-error-actions .dgs-btn:where(.dgs-css-404,.dgs-css-404 *) {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}

.dgs-error-actions .dgs-btn:hover:where(.dgs-css-404,.dgs-css-404 *) {
  background: #ffffff;
  color: var(--bg-deep-navy);
  border-color: #ffffff;
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-5f715ef85f:where(.dgs-css-404,.dgs-css-404 *) {
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 75vh !important;
}

.dgs-il-e201497c6a:where(.dgs-css-404,.dgs-css-404 *) {
  max-width: 720px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.dgs-il-512ab6f48b:where(.dgs-css-404,.dgs-css-404 *) {
  margin-bottom: var(--space-md) !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  font-size: clamp(2.8rem, 5vw, 4.2rem) !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
}

.dgs-il-b999a15f59:where(.dgs-css-404,.dgs-css-404 *) {
  max-width: 580px !important;
  text-align: center !important;
  margin-bottom: var(--space-lg) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
}

.dgs-il-43bcf13663:where(.dgs-css-404,.dgs-css-404 *) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-top: var(--space-md) !important;
}


/* ============================================================
   C02. ABOUT  (scope: .dgs-css-about)
   Formerly css/dgs-about.css. Used by:
     about.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — ABOUT PAGE-SPECIFIC STYLES
   Split from dgs-styles.css for per-page editing in GHL.
   Load order: dgs-common.css FIRST, then this file.
   ============================================================ */

.dgs-section--dark:where(.dgs-css-about,.dgs-css-about *) {
  background: var(--bg-dark-navy);
  color: var(--text-light-primary);
}

.dgs-stat-label:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Why Digital GrowthScale Section - 2x2 Grid Layout */

/* PREMIUM 'OUR STORY' ASYMMETRICAL LAYOUT */
.dgs-premium-story-layout:where(.dgs-css-about,.dgs-css-about *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 900px) {
  .dgs-premium-story-layout:where(.dgs-css-about,.dgs-css-about *) {
    grid-template-columns: 4fr 6fr;
    gap: 6rem;
  }

  .dgs-story-sticky:where(.dgs-css-about,.dgs-css-about *) {
    position: sticky;
    top: 8.75rem;
  }
}

.dgs-story-text-flow p:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--text-dark-muted);
  margin-bottom: 2rem;
}

/* CORE DIFFERENTIATORS - Split Header (photo + floating stat chip) */
.dgs-diff-header-grid:where(.dgs-css-about,.dgs-css-about *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 5rem;
}

@media (min-width: 900px) {
  .dgs-diff-header-grid:where(.dgs-css-about,.dgs-css-about *) {
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
  }
}

.dgs-diff-header-media:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
}

.dgs-diff-header-media img:where(.dgs-css-about,.dgs-css-about *) {
  width: 100%;
  display: block;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(10, 31, 51, 0.15);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* "Mist" chip: soft frosted glass floating over the photo edge */

/* Floating UI Overlay Elements around Core Differentiators Media */

@keyframes dgs-pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* CORE DIFFERENTIATORS - Icon Card Grid (borderless, matches the
   Industries selector grid treatment, minus its "Explore" link row) */
/* Horizontal-scroll carousel: fixed-width cards in a row, a peek of the
   next card at the edge, prev/next arrows to page through — same idea as
   most "perks/benefits" strips, in our own card styling. */
.dgs-diff-carousel:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
}

.dgs-diff-grid:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1px;
}

.dgs-diff-grid:where(.dgs-css-about,.dgs-css-about *)::-webkit-scrollbar {
  display: none;
}

.dgs-diff-card:where(.dgs-css-about,.dgs-css-about *) {
  flex: 0 0 auto;
  width: 78vw;
  max-width: 300px;
  scroll-snap-align: start;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(10, 31, 51, 0.1);
  border-radius: 0;
  padding: 0.5rem 1.75rem 1.5rem;
  transition: background-color 0.35s var(--ease-out);
}

.dgs-diff-card:first-child:where(.dgs-css-about,.dgs-css-about *) {
  border-left: none;
  padding-left: 0;
}

@media (min-width: 640px) {
  .dgs-diff-card:where(.dgs-css-about,.dgs-css-about *) {
    width: 42vw;
  }
}

@media (min-width: 1024px) {
  .dgs-diff-card:where(.dgs-css-about,.dgs-css-about *) {
    width: 25%;
    max-width: none;
  }
}

.dgs-diff-nav:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.dgs-diff-arrow:where(.dgs-css-about,.dgs-css-about *) {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(10, 31, 51, 0.18);
  background: #ffffff;
  color: #0A1F33;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.dgs-diff-arrow svg:where(.dgs-css-about,.dgs-css-about *) {
  width: 20px;
  height: 20px;
}

.dgs-diff-arrow:hover:not(:disabled):where(.dgs-css-about,.dgs-css-about *) {
  background: var(--action-teal);
  border-color: var(--action-teal);
  color: #ffffff;
}

.dgs-diff-arrow:disabled:where(.dgs-css-about,.dgs-css-about *) {
  opacity: 0.35;
  cursor: default;
}

.dgs-diff-card .dgs-diff-icon-box:where(.dgs-css-about,.dgs-css-about *) {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: linear-gradient(145deg, #e3f7f5 0%, #e7f2fe 100%);
  border: 1px solid rgba(0, 179, 159, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A1F33;
  margin-bottom: 1.15rem;
  transition: all 0.35s var(--ease-out);
}

.dgs-diff-card:hover .dgs-diff-icon-box:where(.dgs-css-about,.dgs-css-about *) {
  background: var(--action-teal);
  color: #ffffff;
  border-color: var(--action-teal);
  box-shadow: 0 6px 18px rgba(0, 179, 159, 0.28);
}

.dgs-diff-icon-box svg:where(.dgs-css-about,.dgs-css-about *) {
  width: 26px;
  height: 26px;
}

.dgs-diff-title:where(.dgs-css-about,.dgs-css-about *) {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-weight: 700;
  font-size: 1.2rem;
  color: #0A1F33;
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
  transition: color 0.3s ease;
}

.dgs-diff-card:hover .dgs-diff-title:where(.dgs-css-about,.dgs-css-about *) {
  color: var(--action-teal);
}

.dgs-diff-card p:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #334155;
  margin: 0;
}

/* CSR FRAMEWORK - Icon + copy combined in one card per stage. All 4 step
   cards are equal-width flex columns (flex:1, min-width:0 overrides the
   browser's default min-content floor so a long label/paragraph can't
   force one column wider than the rest); connectors are a fixed width,
   so the connecting lines always land evenly between the four. Wraps to
   a simple stacked list — icon beside its copy, no connectors — on
   mobile, so nothing depends on the equal-fill math at narrow widths. */
.dgs-csr-graphic:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  /* No overflow clip here: the step icons lift 3px on hover
     (.dgs-csr-graphic-step:hover .dgs-csr-graphic-icon), and this
     container's top edge sat close enough to clip that lift. */
}

@media (min-width: 900px) {
  .dgs-csr-graphic:where(.dgs-css-about,.dgs-css-about *) {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
}

.dgs-csr-graphic-step:where(.dgs-css-about,.dgs-css-about *) {
  --csr-accent: var(--dgs-teal);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
  flex: 1;
}

@media (min-width: 900px) {
  .dgs-csr-graphic-step:where(.dgs-css-about,.dgs-css-about *) {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    min-width: 0;
  }

  .dgs-csr-graphic-step:not(:last-child):where(.dgs-css-about,.dgs-css-about *)::after {
    content: '';
    position: absolute;
    top: 42px;
    left: 84px;
    right: -60px;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    z-index: 0;
    pointer-events: none;
  }
}

.dgs-csr-graphic-step--blue:where(.dgs-css-about,.dgs-css-about *) {
  --csr-accent: var(--dgs-blue);
}

.dgs-csr-graphic-icon:where(.dgs-css-about,.dgs-css-about *) {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1.5px solid color-mix(in srgb, var(--csr-accent) 40%, transparent);
  background: color-mix(in srgb, var(--csr-accent) 8%, transparent);
  transition: border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.dgs-csr-graphic-icon svg:where(.dgs-css-about,.dgs-css-about *) {
  width: 36px;
  height: 36px;
}

.dgs-csr-graphic-step:hover .dgs-csr-graphic-icon:where(.dgs-css-about,.dgs-css-about *) {
  border-color: var(--csr-accent);
  background: color-mix(in srgb, var(--csr-accent) 16%, transparent);
  transform: translateY(-3px);
}

.dgs-csr-graphic-connector:where(.dgs-css-about,.dgs-css-about *) {
  display: none;
}

@media (min-width: 900px) {
  .dgs-csr-graphic-connector:where(.dgs-css-about,.dgs-css-about *) {
    display: flex;
    align-items: center;
    flex: 0 0 60px;
    height: 84px;
    margin: 0 0.5rem;
    position: relative;
    z-index: 1;
  }
}

.dgs-csr-graphic-line:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.dgs-csr-graphic-dot:where(.dgs-css-about,.dgs-css-about *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--csr-accent, var(--dgs-teal));
}

.dgs-csr-graphic-arrow:where(.dgs-css-about,.dgs-css-about *) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 0.4rem;
  color: rgba(255, 255, 255, 0.4);
}

.dgs-csr-graphic-content:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.dgs-csr-graphic-text:where(.dgs-css-about,.dgs-css-about *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-white);
}

.dgs-csr-graphic-desc:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 100%;
}

@media (min-width: 900px) {
  .dgs-csr-graphic-desc:where(.dgs-css-about,.dgs-css-about *) {
    max-width: 30ch;
  }
}

/* TRUST & TRACK RECORD - Metrics Row (number stacked above its copy, thin
   vertical dividers between items, our light section background) */
.dgs-metrics-banner:where(.dgs-css-about,.dgs-css-about *) {
  margin-bottom: 3.5rem;
}

.dgs-metrics-banner-grid:where(.dgs-css-about,.dgs-css-about *) {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2.25rem 0;
}

@media (min-width: 640px) {
  .dgs-metrics-banner-grid:where(.dgs-css-about,.dgs-css-about *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dgs-metrics-banner-grid:where(.dgs-css-about,.dgs-css-about *) {
    grid-template-columns: repeat(5, 1fr);
  }
}

.dgs-banner-metric-item:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  padding: 0.5rem 1.75rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .dgs-banner-metric-item:not(:last-child):where(.dgs-css-about,.dgs-css-about *) {
    border-right: 1px solid #e2e8f0;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .dgs-banner-metric-item:nth-child(odd):where(.dgs-css-about,.dgs-css-about *) {
    border-right: 1px solid #e2e8f0;
  }
}

.dgs-stat-row:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.dgs-stat-num:where(.dgs-css-about,.dgs-css-about *) {
  font-size: clamp(2.4rem, 3.6vw, 3.1rem);
  font-weight: 800;
  color: #0A1F33;
  line-height: 1;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
}

.dgs-stat-prefix:where(.dgs-css-about,.dgs-css-about *),
.dgs-stat-unit:where(.dgs-css-about,.dgs-css-about *) {
  color: var(--action-teal, #00A896);
  font-weight: 800;
}

.dgs-stat-prefix:where(.dgs-css-about,.dgs-css-about *) {
  margin-right: 2px;
}

.dgs-stat-unit:where(.dgs-css-about,.dgs-css-about *) {
  margin-left: 2px;
}

.dgs-stat-label:where(.dgs-css-about,.dgs-css-about *) {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 700;
  color: var(--action-teal, #00A896);
  line-height: 1.3;
  margin: 0;
  text-align: left;
}

/* TRUST & TRACK RECORD - Smooth Infinite Logo Marquee */
.dgs-marquee-section:where(.dgs-css-about,.dgs-css-about *) {
  margin-top: 3.5rem;
  padding-top: 2.75rem;
  border-top: 1px solid #e2e8f0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

@media (min-width: 860px) {
  .dgs-marquee-section:where(.dgs-css-about,.dgs-css-about *) {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
}

.dgs-marquee-header:where(.dgs-css-about,.dgs-css-about *) {
  margin-bottom: 0;
  flex-shrink: 0;
}

@media (min-width: 860px) {
  .dgs-marquee-header:where(.dgs-css-about,.dgs-css-about *) {
    max-width: 480px;
    white-space: nowrap;
  }
}

.dgs-marquee-eyebrow:where(.dgs-css-about,.dgs-css-about *) {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--action-teal, #00A896);
  margin-bottom: 0.5rem;
}

.dgs-marquee-header .dgs-trust-label:where(.dgs-css-about,.dgs-css-about *) {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.02rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: #0A1F33;
}

.dgs-marquee-header .dgs-trust-label svg:where(.dgs-css-about,.dgs-css-about *) {
  width: 19px;
  height: 19px;
  color: var(--action-teal, #00A896);
  flex-shrink: 0;
}

.dgs-logo-marquee-track:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3.5rem;
  overflow: hidden;
  user-select: none;
  padding: 0.5rem 0;
  min-width: 0;
  flex: 1 1 auto;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.dgs-logo-marquee-content:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  flex-shrink: 0;
  animation: dgs-marquee-scroll 22s linear infinite;
}

.dgs-logo-marquee-track:hover .dgs-logo-marquee-content:where(.dgs-css-about,.dgs-css-about *) {
  animation-play-state: paused;
}

@keyframes dgs-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.dgs-marquee-logo-item:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 84px;
  transition: transform 0.25s ease;
}

.dgs-marquee-logo-item:hover:where(.dgs-css-about,.dgs-css-about *) {
  transform: translateY(-2px);
}

.dgs-marquee-logo-item img:where(.dgs-css-about,.dgs-css-about *) {
  max-height: 52px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.75);
  transition: filter 0.25s ease;
}

.dgs-marquee-logo-item:hover img:where(.dgs-css-about,.dgs-css-about *) {
  filter: grayscale(0) opacity(1);
}

.dgs-trust-label svg:where(.dgs-css-about,.dgs-css-about *) {
  width: 15px;
  height: 15px;
  color: var(--action-teal);
  flex-shrink: 0;
}

/* PREMIUM 'FOUNDER' EDITORIAL CARD LAYOUT */

/* NORTH STAR / BELIEFS TIMELINE LAYOUT */

.dgs-timeline-badge:where(.dgs-css-about,.dgs-css-about *) {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-navy-card);
  border: 2px solid var(--action-teal);
  color: var(--action-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  z-index: 2;
}

.dgs-timeline-content:where(.dgs-css-about,.dgs-css-about *) {
  background: var(--surface-navy-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-xl) var(--radius-xl);
  padding: var(--space-md) var(--space-lg);
  flex-grow: 1;
  transition: border-color var(--duration-base) var(--ease-out);
}

.dgs-timeline-content:hover:where(.dgs-css-about,.dgs-css-about *) {
  border-color: var(--action-teal);
}

.dgs-timeline-content h3:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 0.45rem;
  margin-bottom: 0.75rem;
  color: var(--text-white);
}

.dgs-timeline-content p:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Fluid layout — relative units for zoom resilience */
#dgs-about-hero .dgs-hero-content:where(.dgs-css-about,.dgs-css-about *) {
  max-width: 60rem;
}

/* Partners Section */

/* ============================================================
   ABOUT PAGE ADDITIONS: WHY CHOOSE US & CAREERS
   ============================================================ */

.dgs-why-grid:where(.dgs-css-about,.dgs-css-about *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 600px) {
  .dgs-why-grid:where(.dgs-css-about,.dgs-css-about *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dgs-why-grid:where(.dgs-css-about,.dgs-css-about *) {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.2rem 2rem;
  }
}

.dgs-why-card:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.5rem;
  transition: transform 0.4s var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: auto;
}

.dgs-why-card:hover:where(.dgs-css-about,.dgs-css-about *) {
  transform: translateY(-6px);
}

/* Minimalist Icon Container Box */
.dgs-why-icon-box:where(.dgs-css-about,.dgs-css-about *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(0, 179, 159, 0.16) 0%, rgba(45, 127, 249, 0.1) 100%);
  border: 1px solid rgba(0, 179, 159, 0.22);
  color: var(--action-teal);
  margin-bottom: 1.25rem;
  transition: all 0.35s var(--ease-out);
}

.dgs-why-icon-box svg:where(.dgs-css-about,.dgs-css-about *) {
  width: 30px;
  height: 30px;
  transition: transform 0.35s ease;
}

.dgs-why-card:hover .dgs-why-icon-box:where(.dgs-css-about,.dgs-css-about *) {
  border-color: rgba(0, 179, 159, 0.5);
  box-shadow: 0 0 18px rgba(0, 179, 159, 0.22);
}

.dgs-why-card:hover .dgs-why-icon-box svg:where(.dgs-css-about,.dgs-css-about *) {
  transform: scale(1.08);
}

.dgs-why-title:where(.dgs-css-about,.dgs-css-about *) {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-white);
  margin: 0 0 0.65rem 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.dgs-why-desc:where(.dgs-css-about,.dgs-css-about *) {
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* AEO Snippet Callout Styles */
.dgs-aeo-snippet:where(.dgs-css-about,.dgs-css-about *) {
  background: rgba(0, 179, 159, 0.04);
  border-left: 4px solid var(--action-teal);
  padding: 1.8rem 2.2rem;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  margin: 2.2rem 0;
}

.dgs-aeo-snippet p:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-white);
  font-weight: 500;
  margin: 0;
}

.dgs-section--light .dgs-aeo-snippet:where(.dgs-css-about,.dgs-css-about *) {
  background: rgba(10, 31, 51, 0.03);
  border-left-color: var(--bg-deep-navy);
}

.dgs-section--light .dgs-aeo-snippet p:where(.dgs-css-about,.dgs-css-about *) {
  color: var(--bg-deep-navy);
}

/* Ambient radial glow centered in the Leadership section, same formula
   as the homepage's industries-picker / brand-promise sections. */
#leadership:where(.dgs-css-about,.dgs-css-about *)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  background: radial-gradient(ellipse at center, rgba(20, 65, 145, 0.42) 0%, rgba(12, 40, 95, 0.22) 45%, rgba(10, 31, 51, 0) 75%);
  pointer-events: none;
  z-index: 1;
}

/* Mobile: #leadership stacks into an especially tall column (heading +
   full-height portrait photo + several bio paragraphs + controls), so
   85% of ITS height stretches this into a thin, mostly-invisible band
   that only shows near the section's exact vertical midpoint -- same
   bug as the homepage glows this was copied from (see dgs-index.css,
   same fix applied there). Below 768px, size it off the viewport
   instead of the section's variable content height, anchored near the
   top so it reads as a soft glow behind the heading, not a stretched
   sliver buried mid-scroll. */
@media (max-width: 767px) {
  #leadership:where(.dgs-css-about,.dgs-css-about *)::before {
    top: 300px;
    width: 130vw;
    height: 62vh;
    max-width: 640px;
    max-height: 560px;
  }
}

/* Executive Profile Styles */

/* ============================================================
   LEADERSHIP — auto-cycling "story" carousel
   Left: portrait stage + segmented progress bars (Instagram-story
   style). Right: profile info crossfading in sync.
   ============================================================ */

/* ---- Stage (photo + progress) ---- */

/* progress segments */

/* slides (overlapping via grid so height auto-fits) */

/* tap zones (prev / next) */

/* play / pause */

/* ---- Info panels (overlapping via grid, crossfade) ---- */

/* ============================================================
   LEADERSHIP — premium info-panel treatment
   ============================================================ */

/* credentials rendered as refined pill chips */

/* premium LinkedIn pill button */

/* ============================================================
   LEADERSHIP — compact 4-up team grid (light section)
   ============================================================ */

/* Careers Section Styles */

/* Careers Roles Grid */
.dgs-roles-list:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

/* Process Timeline List */

/* ============================================================
   CSR METHODOLOGY 2-COLUMN GRID (Sticky Media + Crossfade)
   ============================================================ */

/* ============================================================
   TRUST CENTER — COLLAPSING IMAGE PILLAR CARDS
   Exact CSS copy of the Brand Promise pillars pattern
   from dgs-index.css so about.html doesn't need that file.
   ============================================================ */

/* Outer flex wrapper */

/* Individual pillar card */

/* Background image layer — duotone at rest, full colour on hover */

/* Feathered navy overlay from bottom */

/* Ghost numeric tag */

/* Content layer */

/* Smooth reveal using grid-template-rows trick */

/* ============================================================
   OLD TRUST CENTER BENTO LAYOUT (kept for reference, unused)
   ============================================================ */

/* ============================================================
   UNIQUE CAREERS SPLIT HUB LAYOUT
   ============================================================ */

.dgs-careers-values-stack:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

.dgs-careers-value-pill:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.dgs-careers-value-pill:hover:where(.dgs-css-about,.dgs-css-about *) {
  border-color: var(--action-teal);
  background: #ffffff;
  transform: translateX(6px);
}

.dgs-careers-value-icon:where(.dgs-css-about,.dgs-css-about *) {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xl);
  background: rgba(0, 179, 159, 0.1);
  color: var(--action-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dgs-role-card-premium:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-left: 4px solid var(--action-teal);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.02);
  transition: all 0.35s var(--ease-out);
  margin-bottom: 1.25rem;
}

.dgs-role-card-premium:hover:where(.dgs-css-about,.dgs-css-about *) {
  border-color: #CBD5E1;
  border-left-color: var(--action-teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(10, 31, 51,0.06);
}

.dgs-role-header-row:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dgs-role-dept-tag:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--action-teal);
  background: rgba(0, 179, 159, 0.08);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
}

/* ============================================================
   ABOUT HERO (migrated from dgs-service-detail.css so about.html
   only depends on dgs-common.css + dgs-about.css)
   Centered text + wide photo below, half-bleeds out of dark section.
   ============================================================ */
.dgs-service-hero:where(.dgs-css-about,.dgs-css-about *) {
  padding: 8rem 0 5rem;
  background-color: #0A1F33 !important;
  color: var(--text-white);
  position: relative;
  overflow: visible;
  text-align: center;
}

@media (min-width: 1024px) {
  .dgs-service-hero:where(.dgs-css-about,.dgs-css-about *) {
    padding: 10.5rem 0 6.5rem;
  }
}

@media (max-width: 768px) {
  .dgs-service-hero:where(.dgs-css-about,.dgs-css-about *) {
    padding: 8.5rem 0 4.5rem;
  }
}

/* Depth: soft spotlight (mesh grid removed) */
.dgs-service-hero .dgs-hero-mesh-overlay:where(.dgs-css-about,.dgs-css-about *) {
  display: none !important;
}

.dgs-service-hero .dgs-hero-spotlight:where(.dgs-css-about,.dgs-css-about *) {
  position: absolute;
  left: 50%;
  top: 0;
  width: 80vw;
  height: 60vh;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(0, 179, 159, 0.14) 0%, rgba(45, 127, 249, 0.06) 50%, transparent 80%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -20%);
}

.dgs-service-hero > .dgs-container:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  z-index: 5;
}

/* Centered column: text block then wide photo below */
.dgs-svc-hero-grid:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.dgs-service-hero .dgs-hero-content:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 3.5rem;
}

.dgs-service-hero h1:where(.dgs-css-about,.dgs-css-about *) {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 1.5rem;
  text-align: center;
}

.dgs-service-hero h1 .dgs-hero-title-main:where(.dgs-css-about,.dgs-css-about *) {
  background: linear-gradient(to bottom, #ffffff 55%, #cfd8e3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.dgs-service-hero .dgs-hero-sub:where(.dgs-css-about,.dgs-css-about *) {
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 0 auto;
  text-align: center;
}

.dgs-service-hero .dgs-hero-actions:where(.dgs-css-about,.dgs-css-about *) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Hero visual: wide full-bleed image below text, top half-visible in dark section */

/* ============================================================
   STICKY-PHOTO FIX for the CSR Methodology section.
   The shared `.dgs-section--dark` rule in dgs-common.css sets
   `overflow: hidden`, which turns the section into the sticky
   element's scroll container and stops the media column from
   sticking. We only need VERTICAL overflow visible for the
   sticky media column, so keep the horizontal axis clipped:
   the section's 600px decorative `::after` glow used to leak
   past the viewport here (overflow: visible un-clipped it),
   widening the mobile layout to ~488px and pushing the navbar
   hamburger off the right edge of the screen. `overflow-x: clip`
   is the one value that lets `overflow-y` stay `visible` (unlike
   `hidden`, which forces the other axis to `auto` and would
   re-break the sticky scroll container).
   ============================================================ */
#approach:where(.dgs-css-about,.dgs-css-about *) {
  overflow-x: clip;
  overflow-y: visible;
}

/* ============================================================
   SECTION 3.1 "OUR STORY" — framed image + AEO/narrative split
   ============================================================ */

/* ============================================================
   SECTION 3.5 "TRUST & TRACK RECORD" — stat cards with icons +
   pill-style trust badges (was plain centered numbers + bare text)
   ============================================================ */

/* ============================================================
   SECTION 3.4 "CSR FRAMEWORK" — landscape image + AEO snippet,
   even columns (deliberately distinct from the portrait 0.85/1.15
   splits used in "Our Story" / "Why Digital GrowthScale"), plus a
   connected horizontal timeline in place of a plain card grid.
   ============================================================ */

/* ── Connected timeline: replaces the old plain card grid ── */
@media (min-width: 780px) {
  /* connecting line running behind the numbered nodes */
}

.dgs-csr-step:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  padding-top: 0;
}

/* ============================================================
   SECTION 3.3 "WHY DIGITAL GROWTHSCALE" — intro split + diff cards
   ============================================================ */

/* ============================================================
   ABOUT FINAL CTA — cinematic (giant SCALE word + aurora + grid
   + faded photo). Migrated from dgs-service-detail.css.
   ============================================================ */
.dgs-sol-final-cta:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-navy-darkest, #0A1F33) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

/* faded photo background */
.dgs-sol-final-bg:where(.dgs-css-about,.dgs-css-about *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  pointer-events: none;
}

/* SCALE watermark removed from about page */
.dgs-sol-final-cta:where(.dgs-css-about,.dgs-css-about *)::before {
  content: none;
}

/* The shared .dgs-section--dark::after bottom-glow (dgs-common.css) sits at
   bottom: -150px, meant to bleed past a dark section's own edge. #leadership
   guards against this with inline overflow:hidden, but #approach has no such
   guard, so the glow was leaking into the white #trust section below it. */
#approach:where(.dgs-css-about,.dgs-css-about *)::after {
  content: none;
}

/* breathing teal/blue aurora */
.dgs-sol-final-cta:where(.dgs-css-about,.dgs-css-about *)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 50vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 179, 159, 0.12) 0%,
    rgba(45, 127, 249, 0.12) 40%,
    transparent 70%);
  animation: dgs-sol-cta-breathe 8s ease-in-out infinite alternate;
}

/* lift real content above the decorative layers */
.dgs-sol-final-cta > *:not(.dgs-sol-final-bg):where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  z-index: 2;
}

/* Heading: two clean lines + white gradient text-glow */
.dgs-sol-final-cta h2:where(.dgs-css-about,.dgs-css-about *) {
  max-width: 66rem;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
  line-height: 1.22;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.12));
}

/* keep the teal accent line solid (don't let the gradient clip swallow it) */
.dgs-sol-final-cta h2 .dgs-text-accent:where(.dgs-css-about,.dgs-css-about *) {
  -webkit-text-fill-color: var(--action-teal);
  filter: none;
}

/* ============================================================
   MOBILE RESPONSIVENESS OVERRIDES (About Page)
   ============================================================ */
@media (max-width: 900px) {
  .dgs-premium-story-layout:where(.dgs-css-about,.dgs-css-about *) {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .dgs-showcase-grid:where(.dgs-css-about,.dgs-css-about *) {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .dgs-leader-spotlight-card:where(.dgs-css-about,.dgs-css-about *) {
    min-height: auto !important;
  }
}

@media (max-width: 768px) {
  #dgs-about-hero:where(.dgs-css-about,.dgs-css-about *) {
    padding: 7rem 0 3rem !important;
  }

  /* The global `.dgs-page h1` clamp forces ~44.8px here, which is oversized on
     a phone. Bring the hero heading down to the same mobile scale as the index
     hero. ID selector + !important to beat that global. */
  #dgs-about-hero h1:where(.dgs-css-about,.dgs-css-about *),
  #dgs-about-hero h1 .dgs-hero-title-main:where(.dgs-css-about,.dgs-css-about *) {
    font-size: clamp(1.9rem, 6.2vw, 2.6rem) !important;
  }

  #story:where(.dgs-css-about,.dgs-css-about *), #leadership:where(.dgs-css-about,.dgs-css-about *), #why:where(.dgs-css-about,.dgs-css-about *), #approach:where(.dgs-css-about,.dgs-css-about *), #trust:where(.dgs-css-about,.dgs-css-about *) {
    padding: 3.5rem 0 !important;
  }

  .dgs-timeline-badge:where(.dgs-css-about,.dgs-css-about *) {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.8rem !important;
  }

  .dgs-timeline-content:where(.dgs-css-about,.dgs-css-about *) {
    padding: 1.25rem 1rem !important;
  }

  .dgs-timeline-content h3:where(.dgs-css-about,.dgs-css-about *) {
    font-size: 1.15rem !important;
  }

  .dgs-sol-final-cta:where(.dgs-css-about,.dgs-css-about *) {
    padding: 4rem 1rem !important;
  }

  .dgs-sol-final-cta h2:where(.dgs-css-about,.dgs-css-about *) {
    font-size: 1.45rem !important;
  }

  .dgs-sol-final-cta .dgs-hero-actions:where(.dgs-css-about,.dgs-css-about *) {
    flex-direction: column !important;
    width: 100% !important;
  }

  .dgs-sol-final-cta .dgs-btn-saas:where(.dgs-css-about,.dgs-css-about *) {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 1023px) {
  .dgs-nav-links:where(.dgs-css-about,.dgs-css-about *),
  .dgs-nav-cta-group:where(.dgs-css-about,.dgs-css-about *) {
    display: none !important;
  }

  .dgs-nav-toggle:where(.dgs-css-about,.dgs-css-about *) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    z-index: 205 !important;
    cursor: pointer !important;
  }

  .dgs-nav-toggle-bars span:where(.dgs-css-about,.dgs-css-about *) {
    background-color: #ffffff !important;
  }
}

/* ============================================================
   LEADERSHIP CAROUSEL (migrated from about.html inline \3c style>)
   ============================================================ */
/* Mobile margin matches the "Why Digital GrowthScale" section's
   (#why), which never overrides .dgs-container and so just
   uses the sitewide default (1rem below 768px, 2rem at
   768-1023px). Zeroing it out entirely (an earlier pass here)
   went too far -- the card read as glued to the screen edge,
   inconsistent with every other section on the page. This
   re-declares that same default explicitly (scoped to
   #leadership, ID specificity so it isn't fighting the 1440px
   desktop widening above) rather than removing the override
   and hoping nothing else on this ID depends on it. */
@media (max-width: 767px) {
  #leadership > .dgs-container:where(.dgs-css-about,.dgs-css-about *) {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  #leadership > .dgs-container:where(.dgs-css-about,.dgs-css-about *) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.dgs-showcase-grid:where(.dgs-css-about,.dgs-css-about *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .dgs-showcase-grid:where(.dgs-css-about,.dgs-css-about *) {
    grid-template-columns: 360px 1fr;
    gap: 3.5rem;
  }
}

/* 3D Stage Container on the Left */
.dgs-3d-stage-container:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 460px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

.dgs-3d-stage:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Portrait Cards (3:4 ratio vertical cards, NO circles) */
.dgs-portrait-card:where(.dgs-css-about,.dgs-css-about *) {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 310px;
  height: 430px;
  margin-left: -155px;
  border-radius: 20px;
  overflow: hidden;
  background: #0D2847;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.6s ease,
    box-shadow 0.6s ease,
    border-color 0.6s ease;
  user-select: none;
  transform-origin: center center;
  will-change: transform, opacity;
  cursor: pointer;
}

.dgs-portrait-img-wrap:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  width: 100%;
  height: 100%;
}

.dgs-portrait-img-wrap img:where(.dgs-css-about,.dgs-css-about *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.6s ease;
}

.dgs-portrait-overlay:where(.dgs-css-about,.dgs-css-about *) {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 31, 51, 0.55) 0%, rgba(10, 31, 51, 0) 45%);
  pointer-events: none;
}

/* Leader Detail Panels on the Right */
.dgs-leader-spotlight-card:where(.dgs-css-about,.dgs-css-about *) {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2.75rem 2.5rem;
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transition: min-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Mobile: no card at all -- not a transparent/invisible one
   that still reserves the padding, an ACTUAL reset of every
   visual + layout-constraining property the card rule above
   sets, so name/role/bio/LinkedIn-link/prev-next-controls
   (everything inside this element) fall back to plain page
   flow, inset only by #leadership's own container margin
   (1rem/2rem, matching every other section -- see the
   #leadership > .dgs-container rule below). Desktop
   (>=900px) is completely untouched: the rule above still
   applies there exactly as before. */
@media (max-width: 899px) {
  .dgs-leader-spotlight-card:where(.dgs-css-about,.dgs-css-about *) {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    box-shadow: none;
    overflow: visible;
  }
}

/* The sitewide readability cap (.dgs-page :where(p) in
   dgs-common.css, max-inline-size: 68ch) was capping the bio
   paragraphs at a fixed character width regardless of how
   wide the card actually is, leaving a big dead gap on the
   right once the card widened. This has real specificity
   (a class selector, not :where()'s zero), so it wins. */
.dgs-leader-detail-panel p:where(.dgs-css-about,.dgs-css-about *) {
  max-inline-size: none;
}

/* Mobile-only: the photo lives inside the same spotlight card
   (one continuous card), not as a separate stacked block above
   it -- but styled the same way the desktop .dgs-portrait-card
   is (rounded corners, border, shadow), not bled flush to the
   card's edges. Swapped by JS (see switchLeader's
   syncMobilePhoto) every time the active leader changes, so
   dot/arrow/autoplay cycling still drives it. Desktop keeps
   the 3D stage instead (see .dgs-3d-stage-container below). */
img.dgs-leader-mobile-photo:where(.dgs-css-about,.dgs-css-about *) {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 430px;
  object-fit: cover;
  object-position: center top;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  margin: 0 auto 1.75rem;
  align-self: center;
}

@media (min-width: 900px) {
  img.dgs-leader-mobile-photo:where(.dgs-css-about,.dgs-css-about *) {
    /* Same specificity (element + class) as .dgs-page img in
       dgs-common.css, which otherwise wins over a plain
       .dgs-leader-mobile-photo class selector and forces this
       back to display:block even inside this media query. */
    display: none;
  }
}

@media (max-width: 899px) {
  .dgs-3d-stage-container:where(.dgs-css-about,.dgs-css-about *) {
    display: none;
  }
}

.dgs-leader-panels:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.dgs-leader-detail-panel:where(.dgs-css-about,.dgs-css-about *) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.dgs-leader-detail-panel.is-active:where(.dgs-css-about,.dgs-css-about *) {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Same treatment as the Core Differentiators / Events Gallery
   arrows: subtle outline by default, solid teal fill on hover,
   and the Next button is always solid teal (not just on hover). */
.dgs-ctrl-btn:where(.dgs-css-about,.dgs-css-about *) {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.dgs-ctrl-btn:hover:where(.dgs-css-about,.dgs-css-about *) {
  background: var(--action-teal);
  border-color: var(--action-teal);
  color: #ffffff;
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-725d748587:where(.dgs-css-about,.dgs-css-about *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7d50c988793abee4f91a3c.png') !important;
}

.dgs-il-1432561cbb:where(.dgs-css-about,.dgs-css-about *) {
  background: #ffffff !important;
  padding: 6rem 0 !important;
  width: 100% !important;
}

.dgs-il-396afc5d1a:where(.dgs-css-about,.dgs-css-about *) {
  max-width: 1100px !important;
  margin: 0 auto 2.5rem auto !important;
  text-align: center !important;
}

.dgs-il-2fe2ed9959:where(.dgs-css-about,.dgs-css-about *) {
  color: var(--action-teal) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}

.dgs-il-adb029d8cc:where(.dgs-css-about,.dgs-css-about *) {
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #0A1F33 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
}

.dgs-il-fb4e2029ae:where(.dgs-css-about,.dgs-css-about *) {
  width: 100% !important;
  display: block !important;
  border-radius: var(--radius-xl) !important;
}

.dgs-il-21a68c56cf:where(.dgs-css-about,.dgs-css-about *) {
  margin: 0 0 2.5rem 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.dgs-il-db9744373a:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.15rem !important;
  line-height: 1.75 !important;
  color: #0A1F33 !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.dgs-il-3a880ccf3f:where(.dgs-css-about,.dgs-css-about *) {
  font-weight: 600 !important;
  color: #0A1F33 !important;
  border-left: 3px solid var(--action-teal) !important;
  padding-left: 1.25rem !important;
}

.dgs-il-648149cea2:where(.dgs-css-about,.dgs-css-about *) {
  margin-bottom: 0 !important;
}

.dgs-il-684fdac59b:where(.dgs-css-about,.dgs-css-about *) {
  background: #0A1F33 !important;
  padding: 6rem 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.dgs-il-f90845deec:where(.dgs-css-about,.dgs-css-about *) {
  max-width: 860px !important;
  margin: 0 auto 3.5rem auto !important;
  text-align: center !important;
}

.dgs-il-f2baaa332b:where(.dgs-css-about,.dgs-css-about *) {
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
}

.dgs-il-5b21b58a0d:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.1rem !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.dgs-il-a9c78daa35:where(.dgs-css-about,.dgs-css-about *) {
  max-width: 1440px !important;
  margin: 0 auto !important;
}

.dgs-il-f0b24eea08:where(.dgs-css-about,.dgs-css-about *) {
  margin-bottom: 1.5rem !important;
}

.dgs-il-218dbdea6b:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--action-teal) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
}

.dgs-il-c46b1c7004:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 0.4rem 0 !important;
  letter-spacing: -0.02em !important;
}

.dgs-il-8143454af6:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 1.1rem !important;
}

.dgs-il-501e48cbef:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 2rem !important;
}

.dgs-il-bd788d112c:where(.dgs-css-about,.dgs-css-about *) {
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 1rem !important;
}

.dgs-il-23143dab0c:where(.dgs-css-about,.dgs-css-about *) {
  color: var(--action-teal) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
}

.dgs-il-4e39a41a73:where(.dgs-css-about,.dgs-css-about *) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 2rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dgs-il-487b2c5804:where(.dgs-css-about,.dgs-css-about *) {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

.dgs-il-f7af5536df:where(.dgs-css-about,.dgs-css-about *) {
  width: 24px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--action-teal) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.dgs-il-1d45eb9c3f:where(.dgs-css-about,.dgs-css-about *) {
  width: 8px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.dgs-il-291f98a298:where(.dgs-css-about,.dgs-css-about *) {
  display: flex !important;
  gap: 0.6rem !important;
}

.dgs-il-aeb1ff1995:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.1rem !important;
  color: #334155 !important;
  margin: 0 !important;
}

.dgs-il-77f13e492c:where(.dgs-css-about,.dgs-css-about *) {
  background: radial-gradient(circle at 50% 50%, rgba(45, 127, 249, 0.18) 0%, rgba(45, 127, 249, 0) 70%), #0A1F33 !important;
  padding: 6rem 0 !important;
  width: 100% !important;
}

.dgs-il-53c59cd9e8:where(.dgs-css-about,.dgs-css-about *) {
  max-width: 900px !important;
  margin: 0 auto 2.5rem auto !important;
  text-align: center !important;
}

.dgs-il-6781a04e66:where(.dgs-css-about,.dgs-css-about *) {
  max-width: 800px !important;
  margin: 0 auto 4rem auto !important;
  text-align: center !important;
}

.dgs-il-d3e7d391d5:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.1rem !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.dgs-il-354b423d13:where(.dgs-css-about,.dgs-css-about *) {
  max-width: 900px !important;
  margin: 0 auto 3.5rem auto !important;
  text-align: center !important;
}

.dgs-il-5fcf807c65:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.1rem !important;
  color: #334155 !important;
  margin: 0 auto !important;
}

.dgs-il-14a0687fbe:where(.dgs-css-about,.dgs-css-about *) {
  font-size: 1.05rem !important;
  color: #475569 !important;
  margin: 0 auto !important;
  max-width: 640px !important;
}

.dgs-il-9158034c9d:where(.dgs-css-about,.dgs-css-about *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7d56c61eb55bdfc30eb631.png') !important;
}


/* ============================================================
   C03. CAREERS-DETAIL  (scope: .dgs-css-careers-detail)
   Formerly css/dgs-careers-detail.css. Used by:
     career-blog.html, careers/ai-systems-engineer.html, careers/crm-automation-developer.html
     careers/operations-associate.html
   ============================================================ */

/* ============================================================
    STATIC CAREERS DETAIL PAGES (careers/*.html)
    ------------------------------------------------------------
    These rules style the 3 existing static per-job pages
    (careers/ai-systems-engineer.html, careers/operations-associate.html,
    careers/crm-automation-developer.html) — migrated from inline
    style="" attributes on those pages, hence the .dgs-il-* (inline)
    naming. Do NOT remove these: all 3 static pages load this file
    directly and depend on these exact class names. Everything below
    this block, under "DGS CAREERS — DETAIL TEMPLATE", is a separate,
    additive section for career-blog.html's GHL-native template and
    does not replace or touch these.
    ============================================================ */
  .dgs-il-642ac55600:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    padding: 9rem 0 3.5rem !important;
    background: #0A1F33 !important;
    color: #ffffff !important;
  }

  .dgs-il-d260492821:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    display: block !important;
    color: var(--action-teal) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-bottom: 1.75rem !important;
  }

  .dgs-il-7e617631ae:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    margin-top: 0.75rem !important;
    color: #ffffff !important;
    font-size: clamp(2.2rem, 4vw, 3.4rem) !important;
  }

  .dgs-il-621408cb65:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    margin-top: 1.25rem !important;
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
  }

  .dgs-il-a747c5ebad:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    padding: 4rem 0 6rem !important;
    background: #ffffff !important;
    color: #0A1F33 !important;
  }

  .dgs-il-444c6cf9a2:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    font-size: 1.4rem !important;
  }

  .dgs-il-fdf48aefcd:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    margin-top: 1rem !important;
    padding-left: 1.25rem !important;
    color: var(--text-dark-muted) !important;
    line-height: 1.9 !important;
  }

  .dgs-il-7572487128:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    margin-top: 3rem !important;
    font-size: 1.4rem !important;
  }

  .dgs-il-c4773bee52:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    margin-top: 3rem !important;
    font-size: 1.05rem !important;
  }

  .dgs-il-270edf33ee:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    color: var(--action-teal) !important;
    font-weight: 700 !important;
  }

  /* ============================================================
    DGS CAREERS — DETAIL TEMPLATE (career-blog.html)
    ------------------------------------------------------------
    Styles the NATIVE GHL Blog Post widget (Careers jobs are a GHL
    blog channel — confirmed live, 2026-09-16 saved copy of a
    published job posting: the widget renders
    .blog-html-container-single > .blog-back-button /
    .meta-section-1(.blog-category) / .blog-content-title /
    .meta-section-1(.blog-date) / .blog-cover-image-container /
    .blog-html#blogPostContent / .blog-tags /
    .hl-blog-content-back-to-top-container) to look like the DGS
    Careers Detail design instead of GHL's default blog-post look.
    No DOM is rebuilt — every selector below targets a real,
    confirmed class or id. Same technique family as
    css/dgs-growth-article.css (native-slot restyling, `order` for
    visual reordering, JS-inserted real content for fields GHL has
    no native slot for), kept in its own file per project convention
    (isolated to Careers, dgs-growth-article.css untouched).

    IMPORTANT — Careers detail hero is SINGLE COLUMN, NO IMAGE:
    .blog-cover-image-container is always empty on a career posting
    (confirmed live) and is hidden outright below, unlike the Growth
    Hub article hero's 2-column grid+image. This is deliberate, not
    an oversight — see the project brief's explicit "no featured
    image, no fake image column" requirement.
    ============================================================ */

  /* :root (not just a scoped class) so --car-* resolves even before
    js/dgs-careers.js has a chance to add class="dgs-car" to <main> — same
    reasoning already documented for --ga-* in dgs-growth-article.css:
    a var() that fails to resolve on an inherited property like `color`
    falls back to the inherited value, not an error, so it silently
    renders invisible text if this were scoped and the ancestor class
    were ever missing. */
  :root:where(:has(>body.dgs-css-careers-detail)) {
    --car-navy: #0A1F33;
    --car-teal: #00B39F;
    --car-ink: #0A1F33;
    --car-muted: #5B6B7C;
    --car-hairline: rgba(10, 31, 51, 0.1);
    --car-surface: #F7F9FA;
  }

  /* ---------------------------------------------------------
    1. Reading progress bar (reused pattern from Growth Hub,
    own markup/class so dgs-growth-article.css is never touched)
  --------------------------------------------------------- */
  .dgs-car-progress:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    z-index: 1001;
    background: var(--car-teal);
    transition: width 0.1s linear;
  }

  @media (prefers-reduced-motion: reduce) {
    .dgs-car-progress:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
      transition: none;
    }
  }

  /* ---------------------------------------------------------
    2. Layout containment — GHL's blog-content section wrapper can
    carry its own max-width/margin/padding that fights a full-width
    hero; reset the real ancestor chain (never the random per-element
    ID classes GHL regenerates on every edit).
  --------------------------------------------------------- */
  .dgs-ghl-blog-content:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  .fullSection:has(.blog-html-container-single):where(.dgs-css-careers-detail,.dgs-css-careers-detail *),
  .c-row:has(.blog-html-container-single):where(.dgs-css-careers-detail,.dgs-css-careers-detail *),
  .c-column:has(.blog-html-container-single):where(.dgs-css-careers-detail,.dgs-css-careers-detail *),
  .c-custom-code:has(.blog-html-container-single):where(.dgs-css-careers-detail,.dgs-css-careers-detail *),
  .custom-code-container:has(.blog-html-container-single):where(.dgs-css-careers-detail,.dgs-css-careers-detail *),
  .vertical.inner:has(.blog-html-container-single):where(.dgs-css-careers-detail,.dgs-css-careers-detail *),
  .blog-html-container-single:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ---------------------------------------------------------
    2b. Loading state
    Reverted from a staged (hero-first, then body, then footer)
    reveal back to a single gate: splitting it into independent
    checkpoints kept causing its own regressions (a footer that could
    stay invisible if a posting's body didn't match expectations, a
    hero/body split that was easy to get out of sync with the
    min-height reservation below). Simpler and more reliable: the
    whole .dgs-ghl-native-blog-slot stays hidden via opacity/visibility
    (NOT display:none, so the reserved space below still holds and
    nothing shifts while it's invisible) until js/dgs-careers.js's
    revealCareer() confirms the real hero AND the real job body are
    BOTH ready, then reveals the entire posting in one go. The footer
    is never gated on JS at all — see the removed rule that used to
    sit near the end of this file; it's static and always visible
    now.

    GHL's Blog Content widget fetches/renders the posting AFTER this
    page's HTML/CSS has already painted, so .dgs-ghl-native-blog-slot
    is empty at first paint. `<html>` already has a navy background
    sitewide (css/dgs-common.css), so this empty reserved space reads
    as the intended "navy loading state", not a broken blank screen —
    kept modest (20rem, not a full viewport) so it never reads as its
    own empty "section" even on a slow load.
  --------------------------------------------------------- */
  .dgs-ghl-native-blog-slot:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    display: block;
    opacity: 0;
    visibility: hidden;
  }

  .dgs-ghl-native-blog-slot:not(.is-ready):where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    min-height: 20rem;
  }

  .dgs-ghl-native-blog-slot.is-ready:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .dgs-ghl-native-blog-slot.is-ready:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
      transition: none;
    }
  }

  /* ---------------------------------------------------------
    3. Hero
    No date, no image, no metadata line in the hero — Work Setup/Work
    Shift-style facts the job author writes belong in the article body
    (see .dgs-career-post .dgs-career-meta near the bottom of this
    file), and .blog-cover-image-container is never part of the hero's
    content structure at all (a career posting never has one; it stays
    hidden as a bare sibling, not moved into the wrapper below).

    ARCHITECTURE — read this before changing anything here:
    .blog-html-container-single is ONLY responsible for the navy
    background (`!important` because GHL ships its own
    `#blog-content-<id> .blog-html-container-single{background-color:
    #fff}` rule on every posting, confirmed live, which otherwise wins
    on specificity and erases the navy) and the decorative glow.
    js/dgs-careers.js's buildHeroInner() creates ONE real wrapper,
    .dgs-car-hero-inner, and moves the real back-link/category/title
    nodes into it, then insertDek() appends the description as its
    last child — so back-link, category, title and description are
    ACTUAL SIBLINGS inside one element, not four independent hero
    children each computing their own width.

    LEFT EDGE = THE ARTICLE BODY'S OWN CONTENT WIDTH, reused exactly
    (2026-09-19 correction — previously centered at a different, hero-
    only measure). .dgs-career-post (the white article body's content
    wrapper, below) is `max-width: 840px; margin: 0 auto`. .dgs-car-
    hero-inner uses that identical max-width + the identical 0/1rem
    horizontal padding .blog-html applies around it, so both boxes
    resolve to the exact same left edge at every viewport width — not
    two independent measurements that happen to agree. Do NOT give the
    four hero children their own separate width/padding/margin system:
    that's the exact design (tried and abandoned) that let them drift
    out of sync under different GHL page-builder states. One wrapper,
    one width formula, reused from the one source of truth. */
  .blog-html-container-single:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    position: relative;
    background-color: var(--car-navy) !important;
  }

  /* Decorative glow — a separate absolute layer, not a background on
    any text element (a background can never paint past its own box,
    so a glow meant to visually span several lines has to be its own
    layer). Low-alpha, so text stays readable through it. */
  .blog-html-container-single:where(.dgs-css-careers-detail,.dgs-css-careers-detail *)::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 0;
    height: 24rem;
    background: radial-gradient(ellipse 56vw 22rem at 50% -18%, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 45%, transparent 75%);
    pointer-events: none;
  }

  .dgs-car-hero-inner:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 840px;
    margin: 0 auto;
    padding: 8.5rem 1rem 2.75rem;
    text-align: left;
  }

  /* Same breakpoint .blog-html below drops its own horizontal padding
    at — .dgs-career-post is only ever constrained by its own
    max-width past this point, never by a parent's padding, so this
    has to match exactly for the two left edges to stay identical. */
  @media (min-width: 768px) {
    .dgs-car-hero-inner:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .dgs-car-hero-inner > .blog-back-button:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100% !important;
    gap: 0.4rem;
    /* Explicit 0 on every side, not just the shorthand's implicit
      left/right — GHL's own per-template stylesheet can carry its own
      padding on this exact class (confirmed elsewhere in this file for
      .blog-content-title), so this has to actively zero it rather than
      rely on never having set it. Matches .dgs-car-dek's box exactly
      (that element has zero competing native styles, which is why its
      alignment is correct — bringing back-link/category/title to the
      same zero-padding box is what puts all four on one axis). */
    padding: 0 !important;
    margin: 0 0 1.75rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none !important;
    cursor: pointer;
  }

  .dgs-car-hero-inner > .blog-back-button:hover:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    color: var(--car-teal) !important;
  }

  /* GHL's default back-arrow renders blank without Font Awesome loaded
    — swap for a plain glyph. */
  .dgs-car-hero-inner > .blog-back-button .blog-left-arrow:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    margin-right: 0.3rem !important;
  }

  .dgs-car-hero-inner > .blog-back-button .blog-left-arrow:where(.dgs-css-careers-detail,.dgs-css-careers-detail *)::before {
    content: "\2190" !important;
    font-family: var(--font-body) !important;
  }

  .dgs-car-hero-inner > .meta-section-1:has(.blog-category):where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    box-sizing: border-box;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 1rem !important;
  }

  .dgs-car-hero-inner .blog-category:where(.dgs-css-careers-detail,.dgs-css-careers-detail *),
  .dgs-car-hero-inner .blog-category a:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    display: inline-block;
    font-family: var(--font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--car-teal) !important;
    text-decoration: none !important;
  }

  .dgs-car-hero-inner > .blog-content-title:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    box-sizing: border-box;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 1.25rem !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: clamp(2.1rem, 4.6vw, 3.7rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #ffffff !important;
  }

  /* Description: js/dgs-careers.js's insertDek() appends this as the
    LAST child of .dgs-car-hero-inner — real per-posting SEO data from
    the post's own <meta name="description">, confirmed identical to
    that job's listing-card excerpt text. Optional: simply absent if
    the posting has no meta description. */
  .dgs-car-hero-inner > .dgs-car-dek:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    box-sizing: border-box;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.78) !important;
  }

  .dgs-car-hero-inner > .dgs-car-dek:where(.dgs-css-careers-detail,.dgs-css-careers-detail *)::before {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    margin: 0 0 1.5rem;
    background: var(--car-teal);
  }

  /* Publish date + featured image: no static-design counterpart for a
    job posting — native elements kept in the DOM, not surfaced, never
    moved into .dgs-car-hero-inner. */
  .blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-careers-detail,.dgs-css-careers-detail *),
  .blog-html-container-single > .blog-cover-image-container:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    display: none !important;
  }

  /* ---------------------------------------------------------
    4. Job content (#blogPostContent) — semantic HTML the job author
    pastes per posting: .dgs-career-post wrapping a lead paragraph,
    H2 section headings (About the Role / Key Responsibilities /
    Qualifications / Nice to Have / Benefits — whichever the author
    actually included, never all of them by default), and
    .dgs-career-list bullet lists. Real content, styled here instead
    of via a per-post pasted \3c style> block (the previous live
    pattern) so every future posting only needs to paste clean HTML.
  --------------------------------------------------------- */
  .blog-html-container-single > .blog-html:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    box-sizing: border-box;
    width: 100%;
    padding: 3rem 1rem 1rem;
    margin: 0 !important;
    text-align: left;
    /* Opaque white "turns off" the container's own navy background for
      this region — a normal-flow child's own background always paints
      over its parent's, so this needs nothing fancier than a plain
      background-color. !important + explicit border-radius/border/
      box-shadow resets (real bug, found live, 2026-09-19): without
      them, a navy sliver showed between this and the Back to Top
      container right after it, and the latter rendered as a separate
      rounded "pill" instead of a continuous white area — GHL's own
      per-template styles carry properties on these exact classes that
      nothing here had zeroed yet. */
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  @media (min-width: 768px) {
    .blog-html-container-single > .blog-html:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
      padding: 3.5rem 0 1rem;
    }
  }

  .dgs-career-post:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    /* max-width/margin made authoritative here (2026-09-19) — every
      live posting checked so far (AI Systems Engineer, Account
      Manager, BIM Modeler) pastes this exact same 840px/auto pair in
      its own per-post \3c style> block, so this isn't a new value, just
      centralizing the existing convention. This is also now the
      single source of truth .dgs-car-hero-inner's own max-width reuses
      to keep the hero's left edge identical to the article's — future
      postings should stop pasting their own copy of this rule (paste
      clean HTML only, per the file header), but a posting that still
      does is harmless as long as it keeps using the same value. */
    max-width: 840px;
    margin: 0 auto;
    text-align: left;
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--car-ink);
    line-height: 1.65;
  }

  /* Safety default for any image a posting's body happens to include.
    No fixed dimensions to reserve ahead of time (per-post pasted HTML,
    same caveat as css/dgs-growth-article.css's identical rule) — this
    only stops one from overflowing its column or showing at a huge
    raw intrinsic size before it loads. No !important, so a posting's
    own pasted styles still win. */
  .dgs-career-post img:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    max-width: 100%;
    height: auto;
  }

  /* Visible in the article body, exactly where the author writes it
    (explicit correction, 2026-09-19 — this used to be relocated into
    the hero via JS; it isn't anymore). Confirmed live (Account Manager
    posting) as a <div> with one <span> per fact ("Work Set up: ..." /
    "Work Shift: ..."), matching the author's own already-established
    convention — styled here to match that exact treatment so future
    postings don't need to paste their own \3c style> block for it. */
  .dgs-career-post .dgs-career-meta:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--car-teal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin: 0 0 1.5rem;
  }

  .dgs-career-post .dgs-career-meta span:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    display: block;
  }

  .dgs-career-post .dgs-career-lead:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    font-size: 1.1rem;
    color: var(--car-ink);
    line-height: 1.7;
    margin: 0 0 2.5rem;
  }

  .dgs-career-post h2:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    font-family: var(--font-heading, 'Sora', sans-serif);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--car-navy);
    letter-spacing: -0.01em;
    margin: 2.75rem 0 1rem;
    scroll-margin-top: 6.5rem;
  }

  .dgs-career-post h2:first-of-type:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    margin-top: 0;
  }

  .dgs-career-post p:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    font-size: 1rem;
    color: var(--car-muted);
    line-height: 1.7;
    margin: 0 0 1.25rem;
  }

  .dgs-career-list:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .dgs-career-list li:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    position: relative;
    padding-left: 1.5rem;
    color: var(--car-muted);
    line-height: 1.6;
  }

  .dgs-career-list li:where(.dgs-css-careers-detail,.dgs-css-careers-detail *)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--car-teal);
  }

  /* Apply CTA: styled by class only — the author sets the real
    destination (a GHL calendar/form link, /contact, etc.) per
    posting. Never hardcoded here; see career-blog.html. */

  /* .dgs-career-cta: the REAL class confirmed in live use (Account
    Manager posting, 2026-09-18) — "Interested? Apply for this role →
    or email talent@...", authored as a plain <p> with two <a> links
    and no styling of its own, so it rendered as unstyled default
    browser link text. Not invented; this is the actual apply-CTA
    convention already adopted for real postings, styled here to match
    the rest of .dgs-career-post instead of introducing a second,
    competing "official" apply component. */
  .dgs-career-cta:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    margin: 2.75rem 0 0 !important;
    padding-top: 1.75rem;
    border-top: 1px solid var(--car-hairline);
    font-size: 1rem !important;
    color: var(--car-muted) !important;
  }

  .dgs-career-cta a:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    color: var(--car-teal) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  .dgs-career-cta a:hover:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    text-decoration: underline !important;
  }

  /* ---------------------------------------------------------
    5. (removed) On This Page (TOC) — Career Detail pages deliberately
    never show a table of contents (explicit project decision,
    2026-09-17): unlike Growth Hub articles, a job posting's short
    "About the job / Qualifications" structure doesn't warrant sidebar
    nav, and it visually competed with the single-column hero. TOC
    generation is fully disabled in js/dgs-careers.js (buildToc()/
    wireToc() removed); no CSS is needed for a feature that no longer
    runs.
  --------------------------------------------------------- */

  /* ---------------------------------------------------------
    6. Tags / Back to Top
  --------------------------------------------------------- */
  .blog-html-container-single > .blog-tags:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    width: 100%;
    background-color: #ffffff !important;
    margin: 0 !important;
    border: none !important;
  }

  .blog-html-container-single > .blog-tags:empty:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    display: none;
  }

  /* Stays in its REAL native position — a sibling of .blog-html, direct
    child of .blog-html-container-single (never reparented into
    #blogPostContent; see js/dgs-careers.js's header comment for why
    that broke it). Position/styling matched exactly to the Growth
    Hub article template's own back-to-top
    (css/dgs-growth-article.css, section 6): a plain, centered,
    transparent teal text link with no top divider/hairline and no
    hover state — not the earlier full-width "card footer with a
    border-top" treatment this used to have. */
  .blog-html-container-single > .hl-blog-content-back-to-top-container:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    max-width: 860px;
    margin: 0 auto 3rem !important;
    padding: 0 1rem !important;
    text-align: center;
    background: transparent !important;
  }

  .blog-html-container-single > .hl-blog-content-back-to-top-container .back-to-top:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
    background: transparent !important;
    color: var(--car-teal) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
  }

  /* ---------------------------------------------------------
    7. Responsive — 480px / 390px hero type trim

    BUG FIXED HERE: both selectors below used to target
    `.blog-html-container-single > .blog-back-button` / `>
    .blog-content-title` directly — but js/dgs-careers.js's
    buildHeroInner() MOVES those real nodes into .dgs-car-hero-inner
    (see section 3 above), so neither one has been a direct child of
    .blog-html-container-single since that wrapper was introduced.
    The `>` made both rules permanently unreachable: the mobile
    title-size trim never applied, and — more visibly — the
    intended MOBILE top-clearance reduction never took over from
    .dgs-car-hero-inner's own unconditional `padding: 8.5rem 1rem
    2.75rem` (see section 3), so small phones kept the DESKTOP
    8.5rem top padding instead of dropping to 6.5rem. That extra
    ~35px of navy padding sitting above the title, on the narrowest
    phones specifically, is the "hero looks off on mobile" part of
    the reported regression.
  --------------------------------------------------------- */
  @media (max-width: 480px) {
    .dgs-car-hero-inner:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
      padding-top: 6.5rem;
    }

    .dgs-car-hero-inner > .blog-content-title:where(.dgs-css-careers-detail,.dgs-css-careers-detail *) {
      font-size: clamp(1.7rem, 8vw, 2.2rem) !important;
    }
  }

  /* ---------------------------------------------------------
    8. Footer
    REGRESSION FIXED HERE: this used to gate the footer's opacity on
    document.body.classList.contains('dgs-car-content-in'), set by
    js/dgs-careers.js's revealBody() — which only fires once
    getCareerPost() finds a REAL .dgs-career-post element inside that
    specific posting's own pasted HTML. Any posting missing that
    exact class (a recruiter typo, a differently-structured paste —
    outside this repo's control, see career-blog.html's own notes on
    per-posting authored content) left the footer at opacity:0
    PERMANENTLY: a static, always-present element with zero GHL
    content-readiness risk of its own had its visibility tied to a
    third-party content author's HTML being exactly right. The
    6-second failsafe in that same file still eventually added the
    class, but that's still up to 6s of a genuinely MISSING footer,
    not a cosmetic delay. The footer is unconditionally visible now —
    normal document flow, no reveal gating, matching "must remain
    part of the normal document flow" / "never permanently hide the
    footer".
  --------------------------------------------------------- */


/* ============================================================
   C04. EVENT-DETAIL  (scope: .dgs-css-event-detail)
   Formerly css/dgs-event-detail.css. Used by:
     growth-hub/connect/from-operator-to-orchestrator-batch-2.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — EVENT DETAIL PAGE (reusable template)
   Load order: dgs-common.css THEN this file. Self-contained: pages
   under growth-hub/connect/ load ONLY dgs-common.css + this sheet,
   nothing else. Every event-specific rule is namespaced .dgs-event-*
   so this sheet can be shared by every future event without
   per-event overrides.
   ============================================================ */

/* ─── 0. SHARED FOUNDATION (inlined from dgs-growth-article.css) ───
   The generic article-hero/TOC/layout/back-to-top system every Growth
   Hub content page shares (.dgs-ga-*), inlined here verbatim instead
   of linking dgs-growth-article.css, so this template has zero
   external stylesheet dependency beyond dgs-common.css. Only the
   subset this page actually uses is included (no .dgs-ga-cover, no
   .dgs-ga-body prose/callout/CTA styles, no related-card grid — this
   page doesn't use any of those). Keep in sync with
   dgs-growth-article.css and dgs-playbook-detail.css's own copy if
   this shared system ever changes. */

.dgs-ga:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  --ga-navy: #0A1F33;
  --ga-teal: #00B39F;
  --ga-blue: #2D7FF9;
  --ga-amber: #F5A623;
  --ga-ink: #0A1F33;
  --ga-muted: #5B6B7C;
  --ga-hairline: rgba(10, 31, 51, 0.1);
  --ga-surface: #F7F9FA;
  --ga-cat: var(--ga-teal);
}

.dgs-ga-hero:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  background: var(--ga-navy);
  padding: 8.5rem 0 5.5rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.dgs-ga-hero:where(.dgs-css-event-detail,.dgs-css-event-detail *)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18%;
  width: 56vw;
  height: 22rem;
  min-width: 26rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 45%, transparent 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.dgs-ga-hero-inner:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .dgs-ga-hero-inner:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-hero-inner:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    padding: 0 3.5rem;
  }
}

.dgs-ga-back:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color 0.25s ease;
}

.dgs-ga-back svg:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  width: 16px;
  height: 16px;
}

.dgs-ga-back:hover:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  color: var(--ga-teal);
}

.dgs-ga-cat:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ga-cat);
  margin-bottom: 1.1rem;
}

.dgs-ga-title:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 1.75rem !important;
}

.dgs-ga-dek:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 62ch;
  margin: 0 0 2rem !important;
}

.dgs-ga-meta:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.62);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dgs-ga-meta strong:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  color: #ffffff;
  font-weight: 600;
}

.dgs-ga-meta span:not(:last-child):where(.dgs-css-event-detail,.dgs-css-event-detail *)::after {
  content: '\00b7';
  margin-left: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
}

.dgs-ga-layout:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  position: relative;
  z-index: 0;
  background: #ffffff;
  max-width: 100%;
  margin: 0 auto;
  padding: 4.5rem 1rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .dgs-ga-layout:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    padding: 4.5rem 2rem 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-layout:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    padding: 4.5rem 3.5rem 2rem;
  }
}

.dgs-ga-layout:where(.dgs-css-event-detail,.dgs-css-event-detail *)::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
}

@media (min-width: 960px) {
  .dgs-ga-layout:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    grid-template-columns: 240px 1fr;
    gap: 4.5rem;
    align-items: start;
  }
}

.dgs-ga-toc:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  order: -1;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 960px) {
  .dgs-ga-toc:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    position: sticky;
    top: 7.5rem;
    order: 0;
    max-width: 240px;
  }
}

.dgs-ga-toc-label:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ga-muted);
  margin-bottom: 0.9rem;
}

@media (max-width: 959px) {
  .dgs-ga-toc-label:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    display: none;
  }
}

.dgs-ga-toc-toggle:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--ga-surface);
  border: 1px solid var(--ga-hairline);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ga-ink);
}

@media (min-width: 960px) {
  .dgs-ga-toc-toggle:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    display: none;
  }
}

.dgs-ga-toc-toggle svg:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.dgs-ga-toc[data-open="true"] .dgs-ga-toc-toggle svg:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  transform: rotate(180deg);
}

.dgs-ga-toc-list:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  list-style: none;
  margin: 0.9rem 0 0 !important;
  padding: 0.25rem 0 0 1.4rem !important;
  border-left: 2px solid var(--ga-hairline);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 100%;
}

@media (max-width: 959px) {
  .dgs-ga-toc-list:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    display: none;
    margin-top: 1rem !important;
  }
  .dgs-ga-toc[data-open="true"] .dgs-ga-toc-list:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    display: flex;
  }
}

.dgs-ga-toc-list a:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ga-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.dgs-ga-toc-list a:hover:where(.dgs-css-event-detail,.dgs-css-event-detail *),
.dgs-ga-toc-list a.is-active:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  color: var(--ga-navy);
  font-weight: 600;
}

.dgs-ga-top:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--action-teal, #00B39F);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
  z-index: 500;
  box-shadow: 0 10px 24px rgba(0, 179, 159, 0.32);
}

.dgs-ga-top:hover:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  background: var(--action-mint-hover, #1ac9b0);
}

.dgs-ga-top.is-visible:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.dgs-ga-top svg:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .dgs-ga-top:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    transition: none;
  }
}

/* ─── 1. HERO ───
   Event pages reuse the site's article hero text system (.dgs-ga-cat /
   .dgs-ga-title / .dgs-ga-dek / .dgs-ga-meta, inlined in section 0
   above) so the copy looks like the same family as a Growth Hub
   article, but the layout is bespoke: text left, cover photo right,
   instead of the article's full-bleed cover-below-hero. */

.dgs-event-hero-grid:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 960px) {
  .dgs-event-hero-grid:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
  }
}

/* Grid items default to min-width:auto, which sizes to intrinsic content
   (the image's natural width) and can blow the column out past its fr
   share. min-width:0 lets both columns actually respect the grid track. */
.dgs-event-hero-grid > *:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  min-width: 0;
}

/* .dgs-ga-hero-inner normally supplies its own container gutters (it's
   used full-bleed in articles); here .dgs-container already provides
   those, so strip its padding/max-width to avoid doubling up. */
.dgs-event-hero-split .dgs-ga-hero-inner:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  max-width: none;
  margin: 0;
  padding: 0;
}

.dgs-event-hero-cover img:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.dgs-event-hero-actions:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

@media (max-width: 640px) {
  .dgs-event-hero-actions .dgs-btn-saas:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    width: 100%;
  }
}

/* ─── 2. BODY LAYOUT ───
   Same sticky-sidebar + content-column grid as an article
   (.dgs-ga-layout, .dgs-ga-toc: defined in dgs-growth-article.css).
   .dgs-event-content replaces .dgs-ga-body: it holds the same section
   rhythm/heading style as article prose, but its children are our own
   structured blocks (row lists, a detail list) instead of paragraphs. */

.dgs-event-content:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  max-width: 76ch;
}

.dgs-event-content > * + *:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  margin-top: 3.5rem;
}

/* No font-size here: dgs-common.css's global
   `.dgs-page h2 { font-size: ...!important }` (Framework 3.0 default)
   always wins over any same-specificity descendant selector regardless
   of stylesheet load order, so fighting it just risks these headings
   drifting out of sync with every other h2 on the site. Inheriting it
   instead guarantees this page's section headings always match
   sitewide (including the playbook template's). */
.dgs-event-content h2:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ga-navy, #0A1F33);
  margin: 0 0 1.5rem;
  scroll-margin-top: 6.5rem;
}

.dgs-event-lead-copy p:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-size: 1.1rem;
  line-height: 1.85;
  color: #2A3B4D;
  margin: 0;
}

/* Not this / this comparison */
.dgs-event-compare:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--surface-border-neutral);
  padding-top: 2rem;
}

@media (min-width: 560px) {
  .dgs-event-compare:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.dgs-event-compare-block:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  padding-left: 1.25rem;
  border-left: 2px solid var(--surface-border-neutral);
}

.dgs-event-compare-block--is:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  border-left-color: var(--dgs-teal);
}

.dgs-event-compare-label:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.55rem;
}

.dgs-event-compare-block--is .dgs-event-compare-label:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  color: var(--dgs-teal-deep);
}

.dgs-event-compare-block p:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-dark-primary);
  margin: 0;
}

/* ─── 3. NUMBERED ROW LIST ───
   Shared component reused by "What You'll Leave With", "Who It's For"
   and "The Experience" — one clean pattern instead of three bespoke
   grids/tracks. */

.dgs-event-row-list:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  border-top: 1px solid var(--surface-border-neutral);
}

.dgs-event-row:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: flex;
  gap: 1.25rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--surface-border-neutral);
}

.dgs-event-row-icon:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--surface-border-neutral);
  border-radius: var(--radius-sm);
  color: var(--dgs-teal-deep);
}

.dgs-event-row-icon svg:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  width: 18px;
  height: 18px;
}

.dgs-event-row-body:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  min-width: 0;
}

.dgs-event-row-body h3:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ga-navy, #0A1F33);
  margin: 0;
}

.dgs-event-row-body p:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #4a5568;
  margin: 0.5rem 0 0;
}

/* ─── 4. THE DETAILS (label / value list) ─── */

.dgs-event-detail-list:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  margin: 0;
  border-top: 1px solid var(--surface-border-neutral);
}

.dgs-event-detail-row:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--surface-border-neutral);
}

.dgs-event-detail-row dt:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  flex: none;
  width: 9.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dgs-teal-deep);
}

.dgs-event-detail-row dt svg:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  flex: none;
  width: 16px;
  height: 16px;
}

.dgs-event-detail-row dd:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  margin: 0;
  flex: 1 1 auto;
  text-align: right;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ga-navy, #0A1F33);
}

@media (max-width: 480px) {
  .dgs-event-detail-row:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .dgs-event-detail-row dd:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
    text-align: left;
  }
}

/* ─── 5. FINAL CTA / REGISTRATION CARD ───
   Gradient navy card floating on a white section, same recipe as the
   careers page's "No open role that fits?" module (.dgs-aeo-navy-banner
   in dgs-industries-detail.css / dgs-careers.css), minus its photo-ring
   graphic — replaced here with the actual registration form. */

.dgs-event-register-card:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  position: relative;
  overflow: hidden;
  max-width: 90rem;
  margin: 0 auto;
  background: #0A1F33;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px rgba(10, 31, 51, 0.35);
  padding: clamp(2.25rem, 4vw, 3.5rem);
}

/* Fixed-size corner glow (not height:100%): on mobile the card grows tall
   because the two columns stack, and a full-height gradient rectangle put
   its radial center mid-card, showing as a hard seam right behind the
   form. Anchoring a fixed-height blob to the top-right corner instead
   keeps it a subtle, consistent accent at any card height. */
.dgs-event-register-card:where(.dgs-css-event-detail,.dgs-css-event-detail *)::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 450px;
  max-width: 70%;
  height: 28rem;
  max-height: 70%;
  background: radial-gradient(circle at 100% 0%, rgba(0, 179, 159, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.dgs-event-register-inner:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.dgs-event-register-text:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  width: 100%;
  max-width: 40rem;
}

.dgs-event-register-formcol:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The registration form used to fill this column (iframe); now it's just
   the highlighted "Register Here" link, sized/centered to still read as a
   deliberate focal point rather than a stray button in empty space. */
.dgs-event-register-cta:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  width: 100%;
  max-width: 20rem;
  justify-content: center;
}

/* Compound selectors (.dgs-event-register-card ...) are deliberate here,
   not just namespacing: this card sits inside a .dgs-section--light
   section, whose sitewide `p`/`span`/`h2` color rules (dgs-common.css)
   match at equal-or-higher specificity than a single class. Without the
   extra .dgs-event-register-card ancestor, those rules would win and
   flip this card's white/amber text back to dark-on-dark-navy. */
.dgs-event-register-card .dgs-event-register-eyebrow:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dgs-teal);
  margin-bottom: 0.9rem;
}

.dgs-event-register-card .dgs-event-register-text h2:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 0.85rem;
}

.dgs-event-register-card .dgs-event-register-sub:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 1.5rem;
}

.dgs-event-register-card .dgs-event-register-meta:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-07e6d16ec2:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  --ga-cat: var(--ga-teal) !important;
}

.dgs-il-e6cd4d6a90:where(.dgs-css-event-detail,.dgs-css-event-detail *) {
  width:100% !important;
  border:none !important;
  border-radius:8px !important;
  display:block !important;
}


/* ============================================================
   C05. EVENTS-GALLERY  (scope: .dgs-css-events-gallery)
   Formerly css/dgs-events-gallery.css. Used by:
     about.html
   ============================================================ */

/* ============================================================
   DGS EVENTS & MOMENTS GALLERY
   Shared horizontal-scroll carousel used in two places:
     - Growth Hub → Connect ("Recent Events & Moments", full cards)
     - About → "Where We Show Up" (compact photographic strip)
   ~2 cards in view plus a peek of the next, paged with prev/next
   arrows (same mechanic as the Core Differentiators carousel). Cards
   keep their photo's natural aspect ratio, so nothing is force-cropped.
   ============================================================ */

.dgs-events-gallery-wrap:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: relative;
}

/* ─── Empty state: shown until there's a real event to post (see
   EVENTS_ARE_LIVE in js/dgs-events-gallery.js) — an honest placeholder
   instead of fabricated event photos. ─── */
.dgs-events-empty:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  text-align: center;
  max-width: 26rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}

.dgs-events-empty-icon:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(10, 31, 51, 0.14);
  color: rgba(10, 31, 51, 0.45);
  margin-bottom: 1.25rem;
}

.dgs-events-empty-icon svg:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  width: 24px;
  height: 24px;
}

/* h3 + class beats the global `.dgs-page h3` rule (class+element outranks
   a bare class), which was blowing this up to full heading size. */
h3.dgs-events-empty-title:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0A1F33;
  margin: 0 0 0.5rem 0;
}

.dgs-events-empty-text:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

.dgs-section--dark .dgs-events-empty-icon:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
.dgs-section--darker .dgs-events-empty-icon:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.55);
}

.dgs-section--dark .dgs-events-empty-title:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
.dgs-section--darker .dgs-events-empty-title:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  color: #ffffff;
}

.dgs-section--dark .dgs-events-empty-text:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
.dgs-section--darker .dgs-events-empty-text:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  color: rgba(255, 255, 255, 0.72);
}

/* ─── Year divider: archives the board like a real event gallery, one
   group per year (newest first). A single group today, more as events
   from future years get added. "2026" is the only large heading on the
   board — the month lives on each photo instead (see
   .dgs-event-caption-month), not as its own divider. ─── */
.dgs-events-year-group + .dgs-events-year-group:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  margin-top: 3rem;
}

.dgs-events-year-label:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-bottom: 1.75rem;
}

.dgs-events-year-num:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bg-deep-navy, #0A1F33);
  white-space: nowrap;
}

.dgs-events-year-line:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(10, 31, 51, 0.14);
}

/* Month sub-group: no divider of its own — just a gap between clusters,
   matching .dgs-events-track's own 1rem gap between photos so the board
   reads as one consistent grid rather than the rows looking like
   separate sections. */
.dgs-events-month-group + .dgs-events-month-group:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  margin-top: 1rem;
}

/* Horizontal carousel: ~2 cards in view plus a peek of the next one, no
   prev/next buttons — swipe/drag only. Touch scrolls natively (overflow-x:
   auto + -webkit-overflow-scrolling:touch below); mouse-drag is handled in
   JS (enableDragScroll in dgs-events-gallery.js), which needs
   scroll-behavior switched to auto while dragging or each scrollLeft write
   would animate instead of tracking the pointer 1:1. Cards keep their own
   photo aspect ratio (no forced height), so the track's items line up at
   the top but can vary in height, same "real photography" variety the old
   masonry layout had. */
.dgs-events-track:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.dgs-events-track:where(.dgs-css-events-gallery,.dgs-css-events-gallery *)::-webkit-scrollbar {
  display: none;
}

.dgs-events-track.is-dragging:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

/* Prev/next sit directly on the row — absolutely positioned over the
   track's own left/right edge, so the left arrow reads as "on" the
   leftmost photo and the right arrow "on" the rightmost one, rather than
   in a separate control row below the gallery. A dark translucent circle
   works over any photo/section regardless of light or dark background. */
.dgs-events-track-wrap:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: relative;
}

.dgs-events-arrow:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 31, 51, 0.55);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

.dgs-events-arrow svg:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  width: 20px;
  height: 20px;
}

.dgs-events-arrow--prev:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  left: 0.75rem;
}

.dgs-events-arrow--next:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  right: 0.75rem;
}

.dgs-events-arrow:hover:not(:disabled):where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  background: var(--action-teal, #00B39F);
}

.dgs-events-arrow:disabled:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  opacity: 0;
  pointer-events: none;
}

.dgs-event-card:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  /* Narrower than the container so the next card visibly peeks in on
     mobile — 78vw/340px left almost no sliver on some phone widths. */
  flex: 0 0 72vw;
  max-width: 300px;
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 640px) {
  .dgs-event-card:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
    flex-basis: 45%;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .dgs-event-card:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
    flex-basis: 42%;
  }
}

/* Entrance animation for a Load More batch (see cardHTML's `enter` param
   and animateRowIn in dgs-events-gallery.js). Cards render already in
   this opacity:0 state; JS adds .is-in one frame later to trigger the
   transition. transition-delay is set per-card inline (stagger), so the
   row fades in card-by-card rather than all five at once. */
.dgs-event-card--enter:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-event-card--enter.is-in:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dgs-event-card--enter:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
    transition: none;
    transition-delay: 0s !important;
  }
}

/* ─── Load More (progressive loading, "full" variant only) ───
   Sits in the normal gap below the last year-group. */
.dgs-events-loadmore-wrap:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  margin-top: 2rem;
  text-align: center;
}

.dgs-events-loadmore-btn:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(10, 31, 51, 0.18);
  background: #ffffff;
  color: #0A1F33;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(10, 31, 51, 0.1);
}

/* The label text is a bare, unclassed <span> — dgs-common.css's sitewide
   `.dgs-section--light span { color: ... }` rule sets color DIRECTLY on
   it, which wins over any color set on the button (an ancestor can only
   ever supply an inherited value, and a direct rule on the element itself
   always beats that regardless of the ancestor rule's specificity). This
   was the actual cause of the button showing dark text no matter what
   color the button itself was told to use. */
.dgs-events-loadmore-btn span:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  color: inherit;
}

.dgs-events-loadmore-btn svg:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  width: 18px;
  height: 18px;
}

.dgs-section--dark .dgs-events-loadmore-btn:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
.dgs-section--darker .dgs-events-loadmore-btn:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  box-shadow: none;
}

.dgs-event-card:focus-visible:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  outline: 2px solid var(--action-teal, #00B39F);
  outline-offset: 3px;
  border-radius: var(--radius-lg, 14px);
}

.dgs-event-media:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background: rgba(10, 31, 51, 0.04);
  border: 1px solid rgba(10, 31, 51, 0.08);
  isolation: isolate;
}

.dgs-section--dark .dgs-event-media:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
.dgs-section--darker .dgs-event-media:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  border-color: rgba(255, 255, 255, 0.1);
}

.dgs-event-media img:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
              filter 0.5s var(--ease-out, ease);
}

.dgs-event-card:hover .dgs-event-media img:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  transform: scale(1.06);
  filter: grayscale(1) contrast(1.15) brightness(0.7);
}

/* Navy duotone tint, feathered at the edges — same recipe as the site's
   hero duotone treatment, just triggered on hover. Shared by both cards. */
.dgs-event-duotone:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, #0A1F33 0%, #0d5f70 55%, #00B39F 100%);
  mix-blend-mode: color;
  mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, black 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, black 45%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out, ease);
}

.dgs-event-card:hover .dgs-event-duotone:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  opacity: 1;
}

/* Caption sits directly on the photo, revealed on hover — pure photography
   at rest, same on every tile for a consistent board. */
.dgs-event-caption:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  background: linear-gradient(to top, rgba(10, 31, 51, 0.95) 0%, rgba(10, 31, 51, 0.4) 60%, rgba(10, 31, 51, 0) 100%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.dgs-event-card:hover .dgs-event-caption:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
.dgs-event-card:focus-within .dgs-event-caption:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  opacity: 1;
  transform: translateY(0);
}

/* Month, low-opacity, sitting above the title — the only place the month
   now appears (no separate divider/watermark on the board itself). */

/* Double-scoped: the title is an <h3> for semantics, but .dgs-page h3 in
   dgs-common.css (class + element = higher specificity than a single class)
   was winning the font-size cascade and blowing it up to full heading
   size. Scoping under the parent beats that without needing !important. */
.dgs-event-caption .dgs-event-caption-title:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #ffffff !important;
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 0.25rem 0;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {

  .dgs-event-card:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
  .dgs-event-media img:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
  .dgs-event-duotone:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
  .dgs-event-caption:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
  .dgs-events-arrow:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
    transition: none !important;
  }

  .dgs-events-track:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
    scroll-behavior: auto !important;
  }
}

/* ─── Lightbox: fullscreen photo popup, one singleton per page ─── */
body.dgs-lightbox-lock:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  overflow: hidden;
}

.dgs-lightbox:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6.5vh 4vw 4vh;
  background: rgba(6, 14, 24, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out, ease), visibility 0s linear 0.3s;
}

.dgs-lightbox.is-open:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease-out, ease);
}

.dgs-lightbox-inner:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-lightbox.is-open .dgs-lightbox-inner:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  transform: scale(1);
}

.dgs-lightbox-img:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* Sits inside the photo's own top-right corner (the inner wrapper is
   exactly as wide/tall as the image, so top:0/right:0 line up with the
   image's actual edges) rather than floating above the picture. A solid
   dark chip keeps it readable over any photo. */
.dgs-lightbox-close:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 14, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.dgs-lightbox-close:hover:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  background: var(--action-teal, #00B39F);
  border-color: var(--action-teal, #00B39F);
  transform: scale(1.06);
}

.dgs-lightbox-close svg:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
  width: 18px;
  height: 18px;
}

@media (max-width: 640px) {
  .dgs-lightbox:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
    padding: 5.5vh 4vw 3vh;
  }

  .dgs-lightbox-img:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
    max-height: 74vh;
  }

  .dgs-lightbox-close:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
    top: 0.6rem;
    right: 0.6rem;
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dgs-lightbox:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
  .dgs-lightbox-inner:where(.dgs-css-events-gallery,.dgs-css-events-gallery *),
  .dgs-lightbox-close:where(.dgs-css-events-gallery,.dgs-css-events-gallery *) {
    transition: none !important;
  }
}


/* ============================================================
   C06. FAQ  (scope: .dgs-css-faq)
   Formerly css/dgs-faq.css. Used by:
     faq.html
   ============================================================ */

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-fc4cbc441f:where(.dgs-css-faq,.dgs-css-faq *) {
  padding: 8rem 0 4rem !important;
  background: #0A1F33 !important;
}

.dgs-il-31915f8f52:where(.dgs-css-faq,.dgs-css-faq *) {
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.dgs-il-40aef0b69f:where(.dgs-css-faq,.dgs-css-faq *) {
  color: var(--action-teal) !important;
  margin-bottom: 0.75rem !important;
  display: inline-block !important;
}

.dgs-il-405f8cdc2e:where(.dgs-css-faq,.dgs-css-faq *) {
  color: #ffffff !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

.dgs-il-78c360413a:where(.dgs-css-faq,.dgs-css-faq *) {
  color: var(--action-teal) !important;
}

.dgs-il-a0eb4ec5d1:where(.dgs-css-faq,.dgs-css-faq *) {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  margin: 0 auto !important;
  max-width: 600px !important;
}

.dgs-il-0248b24e7c:where(.dgs-css-faq,.dgs-css-faq *) {
  padding: 5rem 0 8rem !important;
}

.dgs-il-955ab49b81:where(.dgs-css-faq,.dgs-css-faq *) {
  max-width: 900px !important;
  margin: 0 auto !important;
}

.dgs-il-96ef9c7186:where(.dgs-css-faq,.dgs-css-faq *) {
  margin: 0 !important;
  width: 100% !important;
}

.dgs-il-80f56ee2c9:where(.dgs-css-faq,.dgs-css-faq *) {
  position: relative !important;
  overflow: hidden !important;
  padding: var(--space-2xl) 0 !important;
  background: var(--bg-navy-darkest) !important;
  min-height: 60vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dgs-il-abf357f64e:where(.dgs-css-faq,.dgs-css-faq *) {
  background-image:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1600&auto=format&fit=crop') !important;
}

.dgs-il-055261c8e0:where(.dgs-css-faq,.dgs-css-faq *) {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 70vw !important;
  height: 50vh !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.dgs-il-8e74b3ae80:where(.dgs-css-faq,.dgs-css-faq *) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.dgs-il-b783b57af6:where(.dgs-css-faq,.dgs-css-faq *) {
  position: relative !important;
  z-index: 2 !important;
  max-width: 900px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2rem !important;
  box-sizing: border-box !important;
}

.dgs-il-a24c96df24:where(.dgs-css-faq,.dgs-css-faq *) {
  margin: 0 !important;
  font-size: clamp(3rem, 6.8vw, 5.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

.dgs-il-71e255c773:where(.dgs-css-faq,.dgs-css-faq *) {
  margin: 0 auto !important;
  max-width: 640px !important;
  font-size: clamp(1rem, 1.8vw, 1.15rem) !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
}

.dgs-il-d46ee4853e:where(.dgs-css-faq,.dgs-css-faq *) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  margin-top: 1.5rem !important;
  width: 100% !important;
}


/* ============================================================
   C07. GROWTH-HUB  (scope: .dgs-css-growth-hub)
   Formerly css/dgs-growth-hub.css. Used by:
     growth-hub.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — GROWTH HUB SPECIFIC STYLES
   Inspired by premium consulting networks (Accenture/Rippling level)
   ============================================================ */

/* ─── GENERAL LAYOUT & VARIABLES ─── */
:root:where(:has(>body.dgs-css-growth-hub)) {
  --hub-card-bg: rgba(255, 255, 255, 0.02);
  --hub-card-border: rgba(255, 255, 255, 0.06);
  --hub-card-hover-border: rgba(0, 179, 159, 0.3);
}

.dgs-hub-section:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  padding: 7rem 0;
  position: relative;
}

/* ─── ALTERNATING SECTION RHYTHM ───────────────────────────────
   Growth Hub sections alternate between White (#ffffff) and Navy (#0A1F33).
   Section order:
   - Hero: Navy (#0A1F33)
   - Learn (#learn): White (#ffffff)
   - Implement (#implement): Navy (#0A1F33)
   - Inspire (#inspire): White (#ffffff)
   - Connect (#connect): Navy (#0A1F33)
   - FAQs (#faqs): White (#ffffff)
   - Final CTA (#dgs-final-cta): Navy (#0A1F33)
   ------------------------------------------------------------- */
.dgs-hub-section.dgs-section--darker:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background: var(--dgs-navy-950, #061524) !important;
}
.dgs-hub-section.dgs-section--dark:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background: var(--bg-dark-navy, #0A1F33) !important;
}
.dgs-hub-section.dgs-section--light:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background: #ffffff !important;
  color: var(--text-dark-primary, #0f172a);
}
/* Headings & copy on light background sections */
.dgs-hub-section.dgs-section--light .dgs-hub-head h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: #0A1F33 !important;
}

.dgs-hub-section.dgs-section--light .dgs-hub-head p:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: var(--text-dark-muted, #334155) !important;
  text-align: center;
}

/* Supporting copy on dark sections should be darker for readability */
.dgs-hub-section.dgs-section--dark .dgs-hub-head p:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Learn Section Cards: photo backdrop cards must always keep bright white/teal text */

/* Inspire Section Cards on light background */
.dgs-hub-section.dgs-section--light .dgs-insp-card:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background: #ffffff !important;
  border: 1px solid rgba(10, 31, 51, 0.12) !important;
  box-shadow: none !important;
}
.dgs-hub-section.dgs-section--light .dgs-insp-card:hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  border-color: var(--action-teal, #00B39F) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
.dgs-hub-section.dgs-section--light .dgs-insp-meta:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: #00B39F !important;
  font-weight: 700 !important;
}
.dgs-hub-section.dgs-section--light .dgs-insp-headline:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: #0A1F33 !important;
  font-weight: 800 !important;
}
.dgs-hub-section.dgs-section--light .dgs-insp-val:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: #334155 !important;
}
.dgs-hub-section.dgs-section--light .dgs-insp-metric:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  border-top: 1px solid rgba(10, 31, 51, 0.12) !important;
}
.dgs-hub-section.dgs-section--light .dgs-insp-figure:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: #0A1F33 !important;
  font-weight: 800 !important;
}
.dgs-hub-section.dgs-section--light .dgs-insp-unit:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: #00B39F !important;
}
.dgs-hub-section.dgs-section--light .dgs-insp-caption:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: #475569 !important;
  font-weight: 500 !important;
}


/* ─── HERO (scoped copy of the shared service-hero treatment) ─── */
.dgs-service-hero:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  padding: 8rem 0 5rem;
  background-color: #0A1F33 !important;
  color: var(--text-white);
  position: relative;
  overflow: visible;
  text-align: center;
  border-bottom: none;
}

@media (min-width: 1024px) {
  .dgs-service-hero:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    padding: 10.5rem 0 6.5rem;
  }
}

@media (max-width: 768px) {
  .dgs-service-hero:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    padding: 8.5rem 0 4.5rem;
  }
}

/* Photo bed, matching the solutions / industries / about hero pattern.
   `.dgs-hero-photo-bg` appears in the markup on those pages but was never
   defined in any stylesheet, so the rule lives here. Sits below the mesh and
   spotlight, masked toward the bottom so the copy stays legible. */

/* Duotone backdrop. The base layer is desaturated, then a navy/teal gradient
   is composited with mix-blend-mode: color, which keeps the photo's luminance
   and takes hue and saturation from the gradient. */
.dgs-hero-duotone:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 55%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 55%, transparent 92%);
}

.dgs-hero-duotone:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::before,
.dgs-hero-duotone:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::after {
  content: '';
  position: absolute;
  inset: 0;
}

.dgs-hero-duotone:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::before {
  background-image: var(--dgs-duotone-img);
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.15) brightness(0.72);
  opacity: 0.5;
}

.dgs-hero-duotone:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::after {
  background: linear-gradient(135deg, #0A1F33 0%, #0d5f70 55%, #00B39F 100%);
  mix-blend-mode: color;
}

/* Legibility scrim over the duotone so hero copy keeps its contrast */
.dgs-hero-scrim:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 31, 51, 0.72) 0%, rgba(10, 31, 51, 0.55) 45%, rgba(10, 31, 51, 0.92) 100%);
}

.dgs-service-hero .dgs-hero-mesh-overlay:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: none !important;
}

.dgs-service-hero .dgs-hero-spotlight:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: absolute;
  left: 50%;
  top: 0;
  width: 80vw;
  height: 60vh;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(0, 179, 159, 0.14) 0%, rgba(45, 127, 249, 0.06) 50%, transparent 80%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -20%);
}

.dgs-service-hero > .dgs-container:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: relative;
  z-index: 5;
}

.dgs-svc-hero-grid:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.dgs-service-hero .dgs-hero-content:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 3.5rem;
}

.dgs-service-hero h1:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 auto 1.5rem;
  max-width: 1140px;
  text-align: center;
}

.dgs-service-hero h1 .dgs-hero-title-main:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background: linear-gradient(to bottom, #ffffff 55%, #cfd8e3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.dgs-service-hero .dgs-hero-sub:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 0 auto;
  text-align: center;
}

.dgs-service-hero .dgs-hero-actions:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.dgs-service-hero-badge:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1affeb; /* brighter teal for dark mode contrast, matches .dgs-pill--teal */
  background: rgba(0, 179, 159, 0.15);
  border: 1px solid rgba(0, 179, 159, 0.4);
  border-radius: var(--radius-full);
  padding: 0.45rem 0.95rem;
  margin-bottom: 1.25rem;
}

/* ─── JUMP NAV (Growth Hub Section Navigation) ─── */
/* position:sticky is the correct DEFAULT behavior (2026-09-19,
   corrected after the fixed-from-load attempt above pinned it to the
   viewport from page load, which is wrong — it needs to start in its
   normal place and only stick once scroll reaches it). The bug this
   was chasing is real, but the actual fix now lives in JS, not CSS:
   GHL splits our authored <main> at the first native blog widget it
   renders as its own top-level Section (confirmed sitewide — Career
   Detail's own <main> renders completely empty for the identical
   reason), so <main>'s real box — the containing block sticky is
   constrained by — ends right around the Learn widget even though
   there is much more page below. CSS position:sticky has no way to
   see past that boundary. A small inline <script> at the bottom of
   growth-hub.html measures this nav's natural (in-flow) offset once,
   then past that point adds .dgs-hub-jumpnav--pinned
   (position:fixed, which IS anchored to the viewport and immune to
   the containing-block truncation) instead of relying on sticky for
   that part — see that script's own comment for the full mechanism.
   z-index stays BELOW the main site header's (100, css/dgs-common.css)
   so the header is never covered, matching the explicit requirement
   that it must always render on top of this nav. */
.dgs-hub-jumpnav:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background: #0A1F33;
  border-bottom: 1px solid var(--hub-card-border, rgba(255, 255, 255, 0.08));
}

.dgs-hub-jumpnav--pinned:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: fixed !important;
}

/* Dedicated spacer the script creates right after the nav — reserves
   its exact rendered height (measured live, never a guessed px value)
   only while pinned, so nothing jumps up underneath it. */
.dgs-hub-jumpnav-spacer:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  width: 100%;
  height: 0;
}

.dgs-hub-jumpnav-row:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 1rem 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dgs-hub-jumpnav-row:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::-webkit-scrollbar {
  display: none;
}

.dgs-hub-jumpnav-row a:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  position: relative;
  padding: 0.25rem 0;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.dgs-hub-jumpnav-row a:hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: var(--action-teal, #00B39F) !important;
}

.dgs-hub-jumpnav-row a:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--action-teal, #00B39F);
  transition: width 0.25s ease;
  transform: translateX(-50%);
}

.dgs-hub-jumpnav-row a:hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::after {
  width: 100%;
}

/* Mobile Layout (< 768px) */
@media (max-width: 768px) {
  .dgs-hub-jumpnav:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #0A1F33;
  }

  .dgs-hub-jumpnav-row:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 0.75rem 1.25rem;
  }

  .dgs-hub-jumpnav-row a:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    font-size: 0.82rem;
    padding: 0.2rem 0;
  }

  #learn:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  #implement:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  #inspire:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  #connect:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  #faqs:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    scroll-margin-top: 4rem;
  }
}

@media (min-width: 769px) {
  #learn:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  #implement:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  #inspire:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  #connect:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  #faqs:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    scroll-margin-top: 5rem;
  }
}

/* ─── SECTION HEADS ─── */
.dgs-hub-head:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4.5rem;
}
.dgs-hub-head h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}
.dgs-hub-head p:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: center;
  /* The sitewide readability cap (.dgs-page :where(p) { max-inline-size:
     var(--measure-max) } in dgs-common.css) shrinks this paragraph to
     ~68ch inside the 800px .dgs-hub-head, but .dgs-hub-head isn't in that
     rule's auto-centering exemption list, so the shrunk box was left-
     anchored and only the text inside it was centered — the box's own
     position wasn't. Recentering the box here fixes it for every section
     (Proof, Community, Recent Events, etc.) instead of one at a time. */
  margin-inline: auto;
}

/* ─── LEARN SECTION (Accenture/Rippling-level visual grid) ─── */

/* ─── IMPLEMENT SECTION (resource library, three cards, own gate each) ─── */
.dgs-resource-section:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background: #F8FAFC;
}

.dgs-resource-grid:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}
@media (min-width: 640px) {
  .dgs-resource-grid:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .dgs-resource-grid:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Same flat card format as the Latest Insights grid (.dgs-ga-related-*):
   no bordered box, a rounded image, and a plain arrow link as the CTA.
   The whole card is the tap/click target (role="button"), not just the
   small "Get Resource" text, so it's actually hittable on mobile. */
.dgs-resource-card:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}
.dgs-resource-card:focus-visible:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  outline: 2px solid var(--action-teal);
  outline-offset: 4px;
  border-radius: var(--radius-md, 10px);
}

.dgs-resource-media:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: relative;
  aspect-ratio: 16 / 8.5;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: var(--ga-navy, #0A1F33);
}
.dgs-resource-media img:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgs-resource-card:hover .dgs-resource-media img:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  transform: scale(1.045);
}

/* Icon placeholder for resource cards that don't have a custom cover
   graphic yet — .dgs-resource-media already falls back to a navy
   background when there's no <img>, so this just centers a teal glyph
   on it instead of leaving it blank. Swap in a real <img> and delete
   this modifier once cover art exists. */

.dgs-resource-body:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dgs-resource-type:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ga-teal, var(--action-teal)) !important;
  margin-bottom: 0.5rem;
}

.dgs-resource-body .dgs-resource-title:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-heading);
  /* Same weight + scale the blog/article body text uses for h3 headings
     (dgs-common.css .dgs-page h3 is 800 / --fs-h3), not a one-off guess. */
  font-weight: 800;
  font-size: var(--fs-h3, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ga-navy, #0A1F33);
  margin: 0 0 0.75rem !important;
}

.dgs-resource-desc:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ga-ink, #0A1F33);
  margin: 0 0 1rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dgs-resource-foot:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Plain arrow-link CTA, no button box/pill — matches .dgs-ga-related-read
   on the Latest Insights cards exactly. The whole card is still the real
   click target (role="button" on .dgs-resource-card), this is just label. */
.dgs-resource-btn:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ga-navy, #0A1F33);
  flex-shrink: 0;
  transition: color 0.3s ease;
}
.dgs-resource-btn svg:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  width: 15px;
  height: 15px;
  transition: transform 0.3s ease;
}
.dgs-resource-card:hover .dgs-resource-btn:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: var(--ga-cat, var(--ga-teal, var(--action-teal)));
}
.dgs-resource-card:hover .dgs-resource-btn svg:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  transform: translateX(3px);
}

/* ─── INSPIRE SECTION (proof, outcome-led) ─── */
/* One featured case spanning the row, two standard cases below.
   Three cells for three stories, no empty tile. */
.dgs-insp-grid:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}
@media (min-width: 992px) {
  .dgs-insp-grid:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Featured spans the row: copy and metrics sit side by side since there's
     no photo column to anchor anymore. */
  .dgs-insp-grid .dgs-insp-card--featured:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    column-gap: 3rem;
  }
  .dgs-insp-card--featured .dgs-insp-metrics:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    margin-top: 0;
  }
}

.dgs-insp-card:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--hub-card-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  transition: border-color 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.dgs-insp-card:hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  border-color: var(--hub-card-hover-border);
  background: rgba(255, 255, 255, 0.035);
  transform: translateY(-5px);
}

.dgs-insp-meta:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1rem;
}

.dgs-insp-card .dgs-insp-headline:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 1.25rem 0;
  max-width: 34ch;
}

.dgs-insp-val:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 1.6rem 0;
  max-width: 52ch;
}

/* The outcome is the visual anchor, not a paragraph buried at the bottom.
   Figures are sized to be the loudest thing in the card (2026-08-19 request:
   metrics as primary focal point), so the metric block gets extra gap to
   keep the huge numbers from feeling cramped against the card edge/caption. */
.dgs-insp-metrics:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-content: end;
  margin-top: auto;
}
@media (min-width: 560px) {
  .dgs-insp-card--featured .dgs-insp-metrics:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dgs-insp-metric:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 179, 159, 0.28);
}

.dgs-insp-figure:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(3.4rem, 6vw, 5.75rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin-bottom: 0.9rem;
}

.dgs-insp-unit:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-size: 0.36em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--action-teal);
  margin-left: 0.2em;
}

.dgs-insp-caption:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: block;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 26ch;
}

/* ─── CONNECT SECTION (community events) ───────────────────────
   Full-bleed photo card — same visual language as the Events & Moments
   gallery (.dgs-event-card / .dgs-event-duotone in dgs-events-gallery.css):
   the photo fills the whole card, a navy-teal duotone tint fades in on
   hover, and the image itself is scaled/darkened under it. Unlike the
   gallery, whose caption only appears on hover, this card promotes a
   specific live event, so its title/description sit on an ALWAYS-ON
   navy feather at the base of the photo, not gated behind hover.
   ------------------------------------------------------------- */
.dgs-conn-list:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}
@media (min-width: 900px) {
  .dgs-conn-list:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

.dgs-conn-card:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hub-card-border);
  isolation: isolate;
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.dgs-conn-card:hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  border-color: var(--hub-card-hover-border);
  transform: translateY(-4px);
}

.dgs-conn-media:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 51, 0.06);
}

.dgs-conn-media img:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease-out);
}

.dgs-conn-card:hover .dgs-conn-media img:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  transform: scale(1.06);
  filter: grayscale(1) contrast(1.15) brightness(0.7);
}

/* Navy-teal duotone tint, same recipe as the events gallery, triggered
   on hover only. */
.dgs-conn-duotone:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, #0A1F33 0%, #0d5f70 55%, #00B39F 100%);
  mix-blend-mode: color;
  mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, black 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 50%, black 45%, transparent 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.dgs-conn-card:hover .dgs-conn-duotone:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  opacity: 1;
}

/* Always-on navy feather (no opacity transition, no hover-gating) so the
   title/description stay legible against any photo at rest. */
.dgs-conn-caption:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  background: linear-gradient(to top, rgba(10, 31, 51, 0.96) 0%, rgba(10, 31, 51, 0.72) 42%, rgba(10, 31, 51, 0.05) 82%, transparent 100%);
}

/* Format meta as discrete chips rather than a dot-separated string */
.dgs-conn-meta:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.dgs-conn-format:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
.dgs-conn-detail:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  padding: 0.35rem 0.8rem;
  line-height: 1;
}

/* Compound .dgs-conn-card selectors below are deliberate, not just
   namespacing: this caption sits inside a .dgs-section--light section,
   whose sitewide `p`/`span`/`h3` color rules (dgs-common.css) are a
   class + element pair — MORE specific than a single class like
   `.dgs-conn-desc` alone — so without the extra ancestor class they'd
   win and flip this white overlay text back to dark-on-dark-photo. */
.dgs-conn-card .dgs-conn-format:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: #ffffff;
  background: rgba(0, 179, 159, 0.38);
  border: 1px solid rgba(0, 179, 159, 0.55);
}

.dgs-conn-card .dgs-conn-detail:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.dgs-conn-card .dgs-conn-title:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.6rem 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.dgs-conn-card .dgs-conn-desc:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.25rem 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.dgs-conn-card .dgs-conn-date:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: inline-block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* ─── FAQS SECTION ─── */
.dgs-faq-category:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  margin-bottom: 5rem;
}
.dgs-faq-category:last-child:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  margin-bottom: 0;
}

.dgs-faq-category-title:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bg-deep-navy);
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(10, 31, 51, 0.08);
  padding-bottom: 0.8rem;
}

/* Accordion */
.dgs-faq-list:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dgs-faq-item:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  border-bottom: 1px solid rgba(10, 31, 51, 0.08);
}

.dgs-faq-question:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 1.5rem 0;
  text-align: left;
  cursor: pointer;
  color: var(--bg-deep-navy);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  transition: color 0.3s;
}
.dgs-faq-question:hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: var(--action-teal);
}

.dgs-faq-number:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: var(--action-teal);
  margin-right: 1.25rem;
  font-weight: 700;
}

.dgs-faq-question-text:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  flex: 1;
}

/* Toggle: draw a crisp + with two bars instead of the literal "+" glyph,
   which renders as a thin, lopsided mark once rotated. Closed = +,
   open = a clean × (whole control rotated 45deg). */
.dgs-faq-toggle:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 1.5rem;
  font-size: 0;            /* hides the literal "+" in the markup */
  color: transparent;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgs-faq-toggle:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::before,
.dgs-faq-toggle:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--action-teal);
  transform: translate(-50%, -50%);
}
.dgs-faq-toggle:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.dgs-faq-item.is-open .dgs-faq-toggle:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  transform: rotate(45deg);
}

/* Collapsed by default; js/main.js opens an item by setting the answer's
   inline max-height to its scrollHeight. Using max-height (not display:none)
   keeps that mechanism working and gives a smooth expand/collapse. */
.dgs-faq-answer:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  max-height: 0;
  overflow: hidden;
  color: var(--text-dark-muted);
  font-size: 0.96rem;
  line-height: 1.7;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgs-faq-answer p:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  margin: 0;
  padding-bottom: 1.8rem;
}

/* ─── FINAL CTA ───────────────────────────────────────────────
   Scoped copy of the solutions / about final CTA (.dgs-sol-final-cta). This
   page does not load dgs-about.css, so the rules have to live here.
   ------------------------------------------------------------- */
.dgs-sol-final-cta:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-navy-darkest, #0A1F33) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

/* faded photo background */
.dgs-sol-final-bg:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  pointer-events: none;
}

/* SCALE watermark removed from growth hub page */
.dgs-sol-final-cta:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::before {
  content: none;
}

/* breathing teal/blue aurora */
.dgs-sol-final-cta:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 50vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%,
      rgba(0, 179, 159, 0.12) 0%,
      rgba(45, 127, 249, 0.12) 40%,
      transparent 70%);
  animation: dgs-sol-cta-breathe 8s ease-in-out infinite alternate;
}

/* lift real content above the decorative layers */
.dgs-sol-final-cta > *:not(.dgs-sol-final-bg):where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: relative;
  z-index: 2;
}

/* Heading: two clean lines + white gradient text-glow */
.dgs-sol-final-cta h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  max-width: 66rem;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
  line-height: 1.22;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.12));
}

/* keep the teal accent line solid (don't let the gradient clip swallow it) */
.dgs-sol-final-cta h2 .dgs-text-accent:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  -webkit-text-fill-color: var(--action-teal);
  filter: none;
}

.dgs-sol-final-ctas:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

/* ============================================================
   MOBILE RESPONSIVENESS OVERRIDES (Growth Hub)
   Card padding across Proof, Community, and the Implement gate was tuned
   for desktop (2.2-2.5rem); on a 375-428px phone that eats ~20-25% of the
   card's width before any copy starts. Ease it down without touching the
   desktop-first base rules above.
   ============================================================ */
@media (max-width: 640px) {
  .dgs-insp-card:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    padding: 1.5rem;
  }

  .dgs-conn-caption:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    padding: 1.5rem;
  }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  .dgs-sol-final-cta:where(.dgs-css-growth-hub,.dgs-css-growth-hub *)::after {
    animation: none;
    opacity: 0.65;
  }
  .dgs-conn-media img:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  .dgs-conn-duotone:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  .dgs-resource-media img:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  .dgs-resource-card:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  .dgs-insp-card:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
  .dgs-conn-card:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    transition: none;
  }
  .dgs-insp-card:hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    transform: none;
  }
  .dgs-conn-card:hover .dgs-conn-media img:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
    transform: none;
  }
}

/* ============================================================
   COMING-SOON MODAL (migrated from growth-hub.html inline \3c style>)
   ============================================================ */
.dgs-comingsoon-backdrop:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--dgs-navy-950, #0A1F33) 70%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10000;
}

.dgs-comingsoon-backdrop.is-visible:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  opacity: 1;
}

.dgs-comingsoon-modal:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  width: min(360px, calc(100vw - 2.5rem));
  background: var(--dgs-navy-900, #0A1F33);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10001;
}

.dgs-comingsoon-modal.is-visible:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.dgs-comingsoon-icon:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: block;
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
}

.dgs-comingsoon-modal h3:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.6rem;
}

.dgs-comingsoon-modal p:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  margin: 0;
  line-height: 1.6;
}

.dgs-comingsoon-close:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.dgs-comingsoon-close:hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background: var(--action-teal);
  color: #0A1F33;
}

.dgs-comingsoon-close svg:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  width: 16px;
  height: 16px;
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-d9cdb6dd0a:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a8578d7a3ca30469695ea89.png') !important;
}

.dgs-il-5b71234e2c:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  justify-content: flex-end !important;
}

.dgs-il-18317876ab:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: var(--bg-deep-navy) !important;
}

.dgs-il-0300ead363:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: var(--text-dark-muted) !important;
}

.dgs-il-4858a4af7d:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a8578d8a3ca30469695eacd.png') !important;
}

/* ============================================================
   GROWTH HUB FIX 1: NEUTRALIZE .dgs-reveal INSIDE THE GHL WIDGET ZONES
   main.js's IntersectionObserver drives .dgs-reveal -> .dgs-reveal.is-visible
   (dgs-common.css: base rule sets opacity:0/visibility:hidden with no
   !important; is-visible flips it back with !important). That observer only
   ever sees nodes that exist at its initial querySelectorAll pass, so cards
   the GHL widget injects into #learn/#implement/#connect AFTER that pass are
   never observed and never get .is-visible: they paint at opacity:0 (a brief
   flash of the pre-hydration frame) and then stay invisible for good. Rather
   than race the widget's own AJAX timing, these three zones are hard-forced
   visible from frame 1, so .dgs-reveal is fully inert here regardless of
   whether main.js ever reaches them. Scoped strictly to #learn/#implement/
   #connect (id selectors, so specificity + !important both beat the base
   dgs-common.css rule) - no other .dgs-reveal usage on this page or any
   other page is touched.

   Also covers .dgs-ghl-blog-placeholder itself (with or without a
   .dgs-reveal class): GHL's Blog Posts element is placed INSIDE that div
   inside the GHL editor, not as a sibling, so it is the one ancestor a
   future edit could plausibly tag .dgs-reveal (directly, or by nesting it
   deeper than the current #learn/#implement/#connect > .dgs-container >
   .dgs-ghl-blog-placeholder structure). A child widget that finishes
   rendering later can never make an already-hidden ANCESTOR visible again
   (opacity:0/visibility:hidden on a parent hides everything inside it
   regardless of the child's own opacity), so the placeholder is locked
   visible unconditionally, the same as the reveal elements around it. */
#learn .dgs-reveal:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement .dgs-reveal:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#connect .dgs-reveal:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#learn.dgs-reveal:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement.dgs-reveal:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#connect.dgs-reveal:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ============================================================
   GROWTH HUB FIX 2: LOCK CARD-LEVEL TITLES INSIDE THE GHL WIDGET ZONES
   dgs-common.css's .dgs-page h2/h3 clamp rules (~35-51px / ~24-30px, both
   !important) are meant for section-title-scale headings. GHL's native
   Blog Posts element renders its own per-card title as a bare h2/h3 (exact
   class naming varies by widget version/theme, hence the generic
   [class*="title"] + "h2, h3" catch-alls below), so those inherit the
   section-title clamp unless something more specific overrides them first.
   This locks every card-level title inside #learn/#implement/#connect
   (our own .dgs-ga-related-card-title / .dgs-resource-title included, so
   they read identically to whatever the GHL cards render) to the 20-22px
   card-title band, and leaves EVERY OTHER heading in these sections alone
   - most importantly .dgs-hub-head h2 ("Practical Resources", "Community"),
   which keeps its full section-title size since it is never matched by
   [class*="title"] or a .blog-card/.dgs-ghl-blog-placeholder ancestor.
   Zero bare "#implement h2"-style selectors are used anywhere in this
   block for that exact reason.

   .dgs-conn-title is deliberately EXCLUDED (#connect [class*="title"]:not
   (.dgs-conn-title)): unlike the GHL card titles this block targets, which
   sit on plain white cards, .dgs-conn-title sits on a dark photo (see
   .dgs-conn-card .dgs-conn-title in this file, color: #ffffff). This
   block's forced color: var(--ga-navy) !important was overriding that
   white and making the event card's own title unreadable against its
   photo background - confirmed live on the "From Operator to Orchestrator"
   card. .dgs-conn-title already sets its own comparable size/weight, so
   excluding it here only drops the color override, not the sizing.

   [class*="heading"] / [class*="headline"] added alongside [class*="title"]:
   the exact class GHL's Blog Posts widget uses is not something this repo
   can inspect ahead of time (theme/version-dependent, could change on a GHL
   update), so the catch-all leans on the handful of substrings blog/CMS
   widgets actually use for a post title in practice, rather than one exact
   guess. Still scoped to h1-h6 (any class) + these three substrings only,
   under #learn/#implement/#connect or .dgs-ghl-blog-placeholder - never a
   bare "#implement h2"/"#implement div" catch-all, so .dgs-hub-head h2 and
   any unrelated GHL-injected copy stay untouched. If GHL's actual title
   element uses none of these three words, this rule set will not reach it;
   that specific case can only be confirmed and fixed by inspecting the
   generated DOM in an actual GHL preview (see PR/task notes).
   ============================================================ */
#learn .dgs-ga-related-card-title:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement .dgs-resource-title:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#learn .blog-card h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#learn .blog-card h3:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement .blog-card h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement .blog-card h3:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#connect .blog-card h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#connect .blog-card h3:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#learn [class*="title"]:not(.dgs-ghi-featured-title):where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement [class*="title"]:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#connect [class*="title"]:not(.dgs-conn-title):where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#learn [class*="heading"]:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement [class*="heading"]:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#connect [class*="heading"]:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#learn [class*="headline"]:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement [class*="headline"]:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#connect [class*="headline"]:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-heading) !important;
  font-size: clamp(20px, 1.6vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.75rem !important;
  color: var(--ga-navy, #0A1F33) !important;
}

/* Explicitly re-assert the section headings this page relies on, in case a
   future GHL theme update ever makes its card wrapper class loose enough to
   collide with these (defensive; matches current markup either way). */
#learn > .dgs-container > h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement > .dgs-container > h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#connect > .dgs-container > h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
.dgs-hub-head h2:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-size: var(--fs-h2) !important;
  line-height: var(--line-heading, 1.2) !important;
}

/* opacity:1 here is not cosmetic - it's the actual fix for GHL blog card
   images "disappearing". dgs-common.css's sitewide "IMAGE LOAD FADE-IN"
   starts every <img> at opacity:0 and only reveals it once main.js's ONE-TIME
   querySelectorAll('img:not(.dgs-no-fade)') pass (run once, at page load)
   attaches a load-listener to it and that listener fires. GHL's Blog Posts
   widget injects its own <img> tags asynchronously, after that pass already
   ran, so they never get a listener, never get .dgs-img-loaded, and sit at
   opacity:0 forever under html.dgs-js img:not(.dgs-img-loaded){opacity:0}
   (see dgs-common.css). This !important override bypasses that gate
   entirely for every image inside the placeholder, independent of when GHL
   inserts it or whether any of our JS runs in time - no MutationObserver
   race to get right. Trade-off: these images pop in instantly instead of
   sitewide's soft fade, which is the same trade-off GROWTH HUB FIX 1 above
   already makes for .dgs-reveal in these same zones, for the same reason. */

/* Collapse the placeholder to zero height whenever GHL hasn't put anything
   into it - this local/static preview (GHL never processes the page), or a
   live category with zero posts. Without this, the section's own 7rem
   top+bottom padding (.dgs-hub-section) stacks against the next section's
   matching padding around a fully empty box, reading as a huge blank gap
   (e.g. #learn/#implement's placeholder into whatever section follows).
   :empty only matches when the element truly has no child nodes, so the
   placeholder markup must not contain whitespace/comments inside it for
   this to take effect - see the HTML comment on each placeholder <div>.
   #connect no longer has this wrapper div at all (GHL's Blog Posts widget
   is placed directly, no placeholder to nest it in), so this rule is now
   only relevant to #learn/#implement. */

/* #connect/#implement's copy used to sit above a .dgs-ghl-blog-placeholder
   wrapper that absorbed some of .dgs-hub-head's sitewide 4.5rem
   margin-bottom visually (the wrapper, empty or not, still gave the eye
   something to land on). Now that GHL's widget is placed directly with
   nothing in between (no wrapper div for either section), that margin
   reads as a much bigger gap before the widget starts. Scoped to these two
   only - #inspire/#faqs keep the sitewide .dgs-hub-head spacing untouched.
   #learn's equivalent copy uses a different class (.dgs-ghi-section-intro,
   not .dgs-hub-head) - see its own override in dgs-growth-insights.css. */
#connect .dgs-hub-head:where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
#implement .dgs-hub-head:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  margin-bottom: 1.5rem;
}

/* GROWTH HUB FIX 3: REAL GHL BLOG POST TITLE CLASS
   Confirmed via live DOM inspection (published page, DevTools computed
   styles): GHL's Blog Posts widget does NOT render inside
   .dgs-ghl-blog-placeholder / #learn / #implement / #connect at all - GHL
   replaces the placeholder with its own top-level page section (a sibling
   of our <main>, not a descendant), so every rule above this line never
   matches it. Its title is a real, stable class: <h2 class="blog-title
   text-xl font-bold text-black font-sans">. Because that <h2> still lives
   inside <body class="dgs-page">, it inherits dgs-common.css's sitewide
   .dgs-page h2 page-heading scale (clamp(2.2rem,4.5vw,3.2rem) !important)
   instead of GHL's own 20px card-title style - that's the actual cause of
   the title rendering oversized on the published page (confirmed: 35.2px
   computed, matching that clamp's floor). Fix targets .blog-title directly
   (specificity (0,2,0), beats .dgs-page h2's (0,1,1)) so the sitewide H2
   rule itself stays untouched. */
.dgs-page .blog-title:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-size: clamp(20px, 1.6vw, 22px) !important;
  /* Full title treatment, copied from the Careers listing widget's
     own h2.blog-title fix (css/dgs-careers.css — same native GHL blog
     widget family, confirmed: both render <h2 class="blog-title ...">
     via the same Compact List widget). Font-size above is unchanged
     (this page's own confirmed live value); everything else brings
     the DGS heading treatment (Sora, weight, navy, tight tracking)
     to a title that otherwise only had GHL's bare Tailwind defaults. */
  font-family: var(--font-heading, 'Sora', sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  line-height: 1.25 !important;
  color: var(--bg-deep-navy, #0A1F33) !important;
}

.dgs-page .blog-title a:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.dgs-page .blog-post-wrapper-compact:hover .blog-title a:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: var(--action-teal, #00b39f) !important;
}

/* GROWTH HUB FIX 4: PAGINATION — copied from the Careers listing
   widget (css/dgs-careers.css .pagination-container/.pagination-button
   — same native GHL Previous/1/2/3/Next widget). GHL drives the
   disabled/active state itself; this only restyles it. */
.dgs-page .pagination-container:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.dgs-page .pagination-button:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark-muted, #5a6e85);
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md, 6px);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dgs-page .pagination-button:disabled:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  opacity: 0.4;
  cursor: default;
}

.dgs-page .pagination-button.active:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: #ffffff;
  background: var(--action-teal, #00b39f);
  border-color: var(--action-teal, #00b39f);
}

.dgs-page .pagination-button:not(:disabled):hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  border-color: var(--action-teal, #00b39f);
  color: var(--action-teal, #00b39f);
}

/* GROWTH HUB FIX 5: "READ MORE" — right-aligned, teal only on hover
   (deliberately different from the Careers version this is copied
   from: Careers keeps its Read More teal at rest, this one stays the
   body-copy ink color at rest and only switches to teal on hover).
   :has() scoped to the specific wrapping .flex div the button sits
   alone in (confirmed live) so this can't catch any other "flex"
   utility div GHL's widget uses elsewhere on the same card. */
.dgs-page .content-width-compact > .flex:has(> .readme-btn):where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.dgs-page a.blog-button.readme-btn:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  color: var(--bg-deep-navy, #0A1F33) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-top: 0.5rem !important;
  transition: color 0.25s ease;
}

.dgs-page a.blog-button.readme-btn:hover:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  color: var(--action-teal, #00b39f) !important;
}

.dgs-page a.blog-button.readme-btn svg:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  transition: transform 0.25s ease;
}

.dgs-page a.blog-button.readme-btn:hover svg:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  transform: translateX(4px);
}

/* GROWTH HUB FIX 6: NAVY GAP AFTER THE WIDGET, MOBILE ONLY
   Same root cause already confirmed and fixed on the Careers listing
   widget (css/dgs-careers.css) — this file's own FIX 3 comment above
   already established the mechanism: GHL renders its Blog Posts
   widget as its own top-level page Section, a sibling of <main>, not
   nested inside #learn/#implement/#connect at all. That Section's own
   GHL-generated style leaves its background transparent, so whatever
   the page's default canvas color is behind it shows through — on
   Careers that was a full navy bleed; here on Growth Hub it only
   showed as a thin navy strip in the gap after the widget on mobile
   (the exact "empty space + navy bar" reported), because at wider
   widths something else in the layout happens to cover the same
   ancestor area, and only mobile's collapsed layout exposes it.
   Same fix: force white/full-width/zero spacing up the real, stable
   ancestor chain (never the random per-element ID classes GHL
   regenerates on every edit), scoped narrowly with
   :has(.hl-blog-post-home) so it can never touch any other
   custom-code Section on the page (Careers' own listing, the footer's
   custom-code paste, etc.). */
.fullSection:has(.hl-blog-post-home):where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
.c-row:has(.hl-blog-post-home):where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
.c-column:has(.hl-blog-post-home):where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
.c-custom-code:has(.hl-blog-post-home):where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
.custom-code-container:has(.hl-blog-post-home):where(.dgs-css-growth-hub,.dgs-css-growth-hub *),
.vertical.inner:has(.hl-blog-post-home):where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background-color: #ffffff !important;
  background-image: none !important;
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hl-blog-post-home:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  background-color: #ffffff !important;
}

/* Growth Hub posts can carry many SEO/keyword tags in GHL (confirmed
   live: some posts have 10+), but the card itself should only ever
   show one — the primary tag, i.e. whichever one GHL renders first,
   never a random pick. `.blog-tag` is a bare GHL theme class this
   exact widget also reuses elsewhere on the site (Careers' own job
   listing, styled separately and exclusively in css/dgs-careers.css,
   which this page never loads) — scoped under `.hl-blog-post-home`
   (this file's own established ancestor for the Growth Hub blog grid
   specifically, matching every other rule above) so this can never
   reach that other listing, or the individual post page (its tag
   list is a completely different element, `.blog-tags` > `.tag`
   singular — confirmed live — never `.blog-tag`).
   The general sibling selector (not :nth-child) hides every tag that
   has a PRECEDING .blog-tag sibling, i.e. every tag except the
   first, regardless of how many exist. This is presentation-only:
   the hidden tags are still real DOM nodes GHL rendered from the
   post's actual, untouched tag data — nothing is deleted, and the
   individual post page's own full tag list (see above) is never
   touched by this selector at all. */
.hl-blog-post-home .standard-blog-content > .flex.flex-wrap > .blog-tag ~ .blog-tag:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: none !important;
}

/* Defensive parity with the identical rule already established for
   this same widget in css/dgs-careers.css: a post with zero tags
   renders this wrapper with no children at all, so this collapses it
   outright rather than leaving an empty, potentially spaced box. */
.hl-blog-post-home .standard-blog-content > .flex.flex-wrap:empty:where(.dgs-css-growth-hub,.dgs-css-growth-hub *) {
  display: none;
}


/* ============================================================
   C08. GROWTH-INSIGHTS  (scope: .dgs-css-growth-insights)
   Formerly css/dgs-growth-insights.css. Used by:
     growth-hub.html
   ============================================================ */

/* ============================================================
   GROWTH HUB — INSIGHTS SYSTEM
   Editorial content hub layer for the Learn section of growth-hub.html.
   Independent of the Careers page styling; built on the same DGS tokens
   (navy / teal / blue / amber) as the rest of the site. Loaded alongside
   css/dgs-growth-hub.css, not a replacement for it.
   ============================================================ */

.dgs-ghi:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  --ghi-navy: #0A1F33;
  --ghi-teal: #00B39F;
  --ghi-blue: #2D7FF9;
  --ghi-amber: #F5A623;
  --ghi-ink: #0A1F33;
  --ghi-muted: #5B6B7C;
  --ghi-hairline: rgba(10, 31, 51, 0.1);
  --ghi-surface: #F7F9FA;
}

/* ─── Category color mapping (teal / blue alternating; amber reserved
   for CTAs only, per brand direction). Lives on whichever element
   carries data-cat — the featured card link — and cascades down to its
   .dgs-ghi-cat / .dgs-ghi-read descendants via the custom property. ─── */
.dgs-ghi-featured[data-cat="ai-strategy"]:where(.dgs-css-growth-insights,.dgs-css-growth-insights *),
.dgs-ghi-featured[data-cat="leadership"]:where(.dgs-css-growth-insights,.dgs-css-growth-insights *),
.dgs-ghi-featured[data-cat="automation"]:where(.dgs-css-growth-insights,.dgs-css-growth-insights *),
.dgs-ghi-featured[data-cat="business-systems"]:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) { --ghi-cat: var(--ghi-teal); }

.dgs-ghi-featured[data-cat="ai-ethics"]:where(.dgs-css-growth-insights,.dgs-css-growth-insights *),
.dgs-ghi-featured[data-cat="operations"]:where(.dgs-css-growth-insights,.dgs-css-growth-insights *),
.dgs-ghi-featured[data-cat="workforce"]:where(.dgs-css-growth-insights,.dgs-css-growth-insights *),
.dgs-ghi-featured[data-cat="growth"]:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) { --ghi-cat: var(--ghi-blue); }

/* ─── Intro / eyebrow row ─── */

/* ─── Featured article ─── */
.dgs-ghi-featured:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
  border: 1px solid var(--ghi-hairline);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background: #ffffff;
}

@media (min-width: 860px) {
  .dgs-ghi-featured:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
  }
}

.dgs-ghi-featured-media:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  position: relative;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  background: var(--ghi-navy);
}

@media (min-width: 860px) {
  .dgs-ghi-featured-media:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
    align-self: center;
  }
}

.dgs-ghi-featured-media img:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-ghi-featured:hover .dgs-ghi-featured-media img:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  transform: scale(1.03);
}

.dgs-ghi-featured-body:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem;
  gap: 1rem;
}

@media (min-width: 860px) {
  .dgs-ghi-featured-body:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
    padding: 3.25rem 3rem;
  }
}

.dgs-ghi-cat:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ghi-cat, var(--ghi-teal)) !important;
}

.dgs-ghi-featured-title:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ghi-navy);
  margin: 0;
}

.dgs-ghi-featured-excerpt:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ghi-muted);
  margin: 0;
  max-width: 46ch;
}

.dgs-ghi-meta:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ghi-muted);
}

.dgs-ghi-meta span:not(:last-child):where(.dgs-css-growth-insights,.dgs-css-growth-insights *)::after {
  content: '\00b7';
  margin-left: 0.5rem;
  color: var(--ghi-hairline);
}

.dgs-ghi-read:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ghi-navy);
  text-decoration: none;
  margin-top: 0.35rem;
}

.dgs-ghi-read svg:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.dgs-ghi-read:hover:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  color: var(--ghi-teal);
}

.dgs-ghi-read:hover svg:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  transform: translateX(4px);
}

/* ─── Section label row (e.g. "Thought Leadership") ─── */
.dgs-ghi-section-label:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  font-family: var(--font-heading);
  font-weight: 800;
  /* !important needed: .dgs-page h3 (class+element = higher specificity
     than this bare class alone) would otherwise silently win and shrink
     this back down, regardless of stylesheet load order. */
  font-size: var(--fs-h2, clamp(2.2rem, 4.5vw, 3.2rem)) !important;
  line-height: 1.15 !important;
  color: var(--ghi-navy);
  letter-spacing: -0.02em;
  margin: 6rem 0 1rem !important;
  text-align: center;
  position: relative;
}

@media (max-width: 640px) {
  .dgs-ghi-section-label:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
    margin: 4rem 0 1rem !important;
  }
}

.dgs-ghi-section-label:where(.dgs-css-growth-insights,.dgs-css-growth-insights *)::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--action-teal);
  border-radius: 2px;
  margin: 0 auto 1.25rem;
}

/* Compound selector is deliberate, not just namespacing: .dgs-page p
   (dgs-common.css) is a class+element pair — more specific than
   .dgs-ghi-section-intro alone — and sets margin:0, which was silently
   cancelling this rule's `margin: 0 auto` centering. The box stayed
   left-anchored at full/near-full measure width while text-align:center
   only centered the text INSIDE that mispositioned box, which is why a
   short second line looked centered but the long first line read as
   flush-left. */
.dgs-ghi .dgs-ghi-section-intro:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  max-width: 42rem;
  margin: 0 auto 4.5rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-dark-muted, #5a6e85);
}

/* #learn's GHL Blog Posts widget (category: Learn / Thought Leadership) is
   placed directly in the GHL editor right after this copy - no
   .dgs-ghl-blog-placeholder wrapper div (matches #implement/#connect in
   dgs-growth-hub.css). The sitewide 4.5rem margin-bottom above used to have
   that wrapper to land on; with nothing in between now, it reads as a much
   bigger gap before the widget starts. (1,1,0) specificity beats both the
   .dgs-ghi .dgs-ghi-section-intro rule above and .dgs-page p, no !important
   needed. */
#learn .dgs-ghi-section-intro:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  margin-bottom: 1.5rem;
}

/* ─── DGS Perspective callout (dark navy statement block) ─── */

/* ─── Reveal-on-scroll (progressive enhancement, matches site convention) ───
   Visible by default, same as the sitewide .dgs-reveal in dgs-common.css:
   the hidden-until-scrolled-into-view state only activates once
   html.dgs-js confirms JS actually ran, so this never gets stuck invisible
   waiting on dgs-growth-insights.js if it's blocked, delayed, or never
   loads on a page that includes this stylesheet. */
html.dgs-js .dgs-ghi-reveal:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

html.dgs-js .dgs-ghi-reveal.is-visible:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.dgs-js .dgs-ghi-reveal:where(.dgs-css-growth-insights,.dgs-css-growth-insights *) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   C09. GROWTH-ARTICLE  (scope: .dgs-css-growth-article)
   Formerly css/dgs-growth-article.css. Used by:
     ghl-blog.html, growth-hub/learn/ai-ceo-five-questions.html, growth-hub/learn/ai-readiness-test.html
     growth-hub/learn/business-operating-system-20-person-company.html, growth-hub/learn/founder-delegation-mistakes.html, growth-hub/learn/founder-dependency-test.html
     growth-hub/learn/hidden-cost-of-manual-handoffs.html, growth-hub/learn/hybrid-human-ai-team.html, growth-hub/learn/leading-team-scared-of-ai.html
     growth-hub/learn/remote-team-that-performs.html, growth-hub/learn/responsible-ai-smes-guide.html, growth-hub/learn/sops-not-being-followed.html
     growth-hub/learn/which-workflows-to-automate-first.html, growth-hub/learn/why-ai-why-now.html, growth-hub/learn/why-growth-stalls-1m-5m.html
     growth-hub.html
   ============================================================ */

/* ============================================================
   GROWTH HUB — ARTICLE TEMPLATE
   Reusable editorial article system: hero, sticky on-page nav, body
   typography, callouts, pull quotes, related content, CTA. Independent
   stylesheet — does not touch or depend on the Careers page CSS.
   Reused as-is for Insights, Guides, Playbooks, Case Studies, Events;
   only the eyebrow label and category color change per content type.
   ============================================================ */

/* :root (not just .dgs-ga) so every --ga-* token still resolves when a
   .dgs-ga-* component is pasted into GHL as an independent custom-code
   section with no shared .dgs-ga ancestor (confirmed live: "More
   Perspectives" on the real GHL page has no .dgs-ga wrapper anywhere
   above it, so var(--ga-surface)/var(--ga-navy) silently failed and the
   section rendered with no background/wrong text color at all instead
   of the intended light-gray card). .dgs-ga is kept alongside :root
   purely so a future more-specific override on .dgs-ga still works. */
:root:where(:has(>body.dgs-css-growth-article)),
.dgs-ga:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  --ga-navy: #0A1F33;
  --ga-teal: #00B39F;
  --ga-blue: #2D7FF9;
  --ga-amber: #F5A623;
  --ga-ink: #0A1F33;
  --ga-muted: #5B6B7C;
  --ga-hairline: rgba(10, 31, 51, 0.1);
  --ga-surface: #F7F9FA;
  --ga-cat: var(--ga-teal);
}

/* ─── Reading progress bar ─── */
.dgs-ga-progress:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--ga-teal);
  z-index: 999;
  transition: width 0.1s linear;
}

/* ─── Hero ─── */
.dgs-ga-hero:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  background: var(--ga-navy);
  padding: 8.5rem 0 5.5rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Soft radial glow, matching the legal/service hero treatment site-wide */
.dgs-ga-hero:where(.dgs-css-growth-article,.dgs-css-growth-article *)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18%;
  width: 56vw;
  height: 22rem;
  min-width: 26rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 45%, transparent 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* Matches the global .dgs-container gutters (nav-aligned), not the old
   fixed 7rem/1.25rem pair — article pages should share the site grid. */
.dgs-ga-hero-inner:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .dgs-ga-hero-inner:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-hero-inner:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 0 3.5rem;
  }
}

.dgs-ga-back:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color 0.25s ease;
}

.dgs-ga-back svg:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  width: 16px;
  height: 16px;
}

.dgs-ga-back:hover:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  color: var(--ga-teal);
}

.dgs-ga-cat:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ga-cat);
  margin-bottom: 1.1rem;
}

.dgs-ga-title:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 1.75rem !important;
}

.dgs-ga-dek:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 62ch;
  margin: 0 0 2rem !important;
}

.dgs-ga-meta:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.62);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dgs-ga-meta strong:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  color: #ffffff;
  font-weight: 600;
}

.dgs-ga-meta span:not(:last-child):where(.dgs-css-growth-article,.dgs-css-growth-article *)::after {
  content: '\00b7';
  margin-left: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ─── Hero image ─── */
.dgs-ga-cover:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  max-width: 100%;
  margin: -2rem auto 0;
  padding: 0 1rem;
  position: relative;
}

@media (min-width: 768px) {
  .dgs-ga-cover:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-cover:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 0 3.5rem;
  }
}

.dgs-ga-cover img:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
  border-radius: var(--radius-lg, 14px);
  display: block;
  box-shadow: 0 24px 60px rgba(10, 31, 51, 0.18);
}

/* ─── Layout: article body + sticky sidebar ─── */
.dgs-ga-layout:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  position: relative;
  z-index: 0;
  background: #ffffff;
  max-width: 100%;
  margin: 0 auto;
  padding: 4.5rem 1rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .dgs-ga-layout:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 4.5rem 2rem 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-layout:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 4.5rem 3.5rem 2rem;
  }
}

/* Full-bleed white background behind the article body, independent of
   the sitewide dark `body { background: navy }` rule. */
.dgs-ga-layout:where(.dgs-css-growth-article,.dgs-css-growth-article *)::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
}

@media (min-width: 960px) {
  .dgs-ga-layout:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: start;
  }
}

/* ─── On-page nav / TOC ─── */
.dgs-ga-toc:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: -1;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 960px) {
  .dgs-ga-toc:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    position: sticky;
    top: 7.5rem;
    order: 0;
    max-width: 260px;
  }
}

.dgs-ga-toc-label:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ga-muted);
  margin-bottom: 0.9rem;
}

/* Mobile disclosure toggle removed (user request) — the "On This Page"
   list is now always visible at every width, so .dgs-ga-toc-label (this
   rule) is the ONLY place the "On This Page" heading text renders now.
   .dgs-ga-toc-toggle below is unconditionally display:none instead of
   deleted from the DOM: buildToc() (js/dgs-growth-article.js) still
   creates it as part of the aside's innerHTML on native GHL posts, and
   leaving that JS untouched (rather than special-casing its markup) is
   the smaller change — hiding it in CSS alone is enough for it to have
   no visible or interactive effect anywhere. */
.dgs-ga-toc-toggle:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: none;
}

.dgs-ga-toc-list:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  list-style: none;
  margin: 0.9rem 0 0 !important;
  padding: 0.25rem 0 0 1.4rem !important;
  border-left: 2px solid var(--ga-hairline);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 100%;
}

.dgs-ga-toc-list a:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ga-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.dgs-ga-toc-list a:hover:where(.dgs-css-growth-article,.dgs-css-growth-article *),
.dgs-ga-toc-list a.is-active:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  color: var(--ga-navy);
  font-weight: 600;
}

/* ─── Article body typography ─── */
.dgs-ga-body:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-body);
  color: var(--ga-ink);
  max-width: 76ch;
}

.dgs-ga-body > p:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-size: 1.1rem;
  line-height: 1.85;
  color: #2A3B4D;
  margin: 0 0 1.6rem;
}

.dgs-ga-body h2:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ga-navy);
  margin: 3.5rem 0 1.25rem;
  scroll-margin-top: 6.5rem;
}

.dgs-ga-body h2:first-child:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  margin-top: 0;
}

.dgs-ga-body h3:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--ga-navy);
  margin: 2.4rem 0 0.9rem;
  scroll-margin-top: 6.5rem;
}

.dgs-ga-body ul:where(.dgs-css-growth-article,.dgs-css-growth-article *),
.dgs-ga-body ol:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  margin: 0 0 1.5rem;
  padding-left: 1.35rem;
  color: #2A3B4D;
  font-size: 1.02rem;
  line-height: 1.8;
}

.dgs-ga-body li:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  margin-bottom: 0.5rem;
}

.dgs-ga-body li:last-child:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  margin-bottom: 0;
}

.dgs-ga-body strong:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  color: var(--ga-navy);
  font-weight: 700;
}

.dgs-ga-body a:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  color: var(--ga-teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 179, 159, 0.35);
  text-underline-offset: 2px;
}

/* ─── Callout: "DGS PERSPECTIVE" ─── */
.dgs-ga-callout:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  background: var(--ga-navy);
  border-radius: var(--radius-md, 10px);
  padding: 1.9rem 2rem;
  margin: 2.25rem 0;
  border-left: 4px solid var(--ga-teal);
}

.dgs-ga-callout-label:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ga-teal);
  margin-bottom: 0.65rem;
}

.dgs-ga-callout p:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.55;
  color: #ffffff;
  margin: 0;
}

/* ─── Pull quote ─── */
.dgs-ga-pullquote:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  border-left: 3px solid var(--ga-hairline);
  padding-left: 1.5rem;
  margin: 2.25rem 0;
}

.dgs-ga-pullquote p:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--ga-navy);
  margin: 0;
  letter-spacing: -0.01em;
}

/* ─── Key takeaway box ─── */
.dgs-ga-takeaway:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  background: var(--ga-surface);
  border: 1px solid var(--ga-hairline);
  border-radius: var(--radius-md, 10px);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0 0;
}

.dgs-ga-takeaway-label:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ga-teal);
  margin-bottom: 0.6rem;
}

.dgs-ga-takeaway p:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: #2A3B4D;
  margin: 0;
}

/* ─── Author strip ─── */
.dgs-ga-author:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--ga-hairline);
}

/* .dgs-ga-author-mark (the "DGS" avatar circle) removed from every
   article's byline; rule intentionally left out. */
.dgs-ga-author-name:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ga-navy);
}

.dgs-ga-author-role:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ga-muted);
}

/* ─── Keep Reading / related articles ─── */
.dgs-ga-related:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  background: var(--ga-surface);
  padding: 5rem 0;
}

.dgs-ga-related-inner:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .dgs-ga-related-inner:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-related-inner:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 0 3.5rem;
  }
}

.dgs-ga-related-title:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--ga-navy);
  margin: 0 !important;
}

/* Article pages: heading + a single "View all" link, no card grid (that
   grid markup/CSS below is still shared with — and stays live for —
   Growth Hub's own "Thought Leadership" section). */
.dgs-ga-related-head:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* The link itself is the actual .dgs-promise-link class (dgs-common.css) —
   same component as "Read More" / "Apply for Position" on careers.html —
   so its color, underline and hover behavior come from there. This rule
   only supplies the one thing that component doesn't set: keeping the
   link from shrinking inside the .dgs-ga-related-head flex row. */
.dgs-ga-related-viewall:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  flex-shrink: 0;
}

.dgs-ga-related-grid:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem 1.75rem;
}

@media (min-width: 640px) {
  .dgs-ga-related-grid:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .dgs-ga-related-grid:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dgs-ga-related-card:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dgs-ga-related-media:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  position: relative;
  aspect-ratio: 16 / 8.5;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: var(--ga-navy);
}

.dgs-ga-related-media img:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-ga-related-card:hover .dgs-ga-related-media img:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  transform: scale(1.045);
}

.dgs-ga-related-body:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dgs-ga-related-cat:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ga-teal, #00B39F) !important;
  margin-bottom: 0.5rem;
}

.dgs-ga-related-card-title:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ga-navy);
  margin: 0 0 0.75rem !important;
}

.dgs-ga-related-desc:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ga-ink, #0A1F33);
  margin: 0 0 1rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dgs-ga-related-foot:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dgs-ga-related-read:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ga-navy);
  flex-shrink: 0;
  transition: gap 0.25s ease, color 0.25s ease;
}

.dgs-ga-related-card:hover .dgs-ga-related-read:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  gap: 0.6rem;
  color: var(--ga-cat, var(--ga-teal));
}

.dgs-ga-related-read svg:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  width: 15px;
  height: 15px;
}

/* ─── Final CTA ───────────────────────────────────────────────
   Scoped copy of the Growth Hub final CTA (.dgs-sol-final-cta, itself a
   copy of the solutions/about final CTA — see css/dgs-growth-hub.css).
   Article pages don't load dgs-growth-hub.css, so the rules have to live
   here too. Keep in sync with that file if the reference CTA changes.
   2026-08-19: replaced the old amber-pill .dgs-ga-cta with this so every
   individual article's closing CTA matches the Growth Hub CTA exactly.
   ------------------------------------------------------------- */
.dgs-sol-final-cta:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-navy-darkest, #0A1F33) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

/* faded photo background */
.dgs-sol-final-bg:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  pointer-events: none;
}

.dgs-sol-final-cta:where(.dgs-css-growth-article,.dgs-css-growth-article *)::before {
  content: none;
}

/* breathing teal/blue aurora */
.dgs-sol-final-cta:where(.dgs-css-growth-article,.dgs-css-growth-article *)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 50vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%,
      rgba(0, 179, 159, 0.12) 0%,
      rgba(45, 127, 249, 0.12) 40%,
      transparent 70%);
  animation: dgs-sol-cta-breathe 8s ease-in-out infinite alternate;
}

/* lift real content above the decorative layers */
.dgs-sol-final-cta > *:not(.dgs-sol-final-bg):where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  position: relative;
  z-index: 2;
}

/* Heading: two clean lines + white gradient text-glow */
.dgs-sol-final-cta h2:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  max-width: 66rem;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
  line-height: 1.22;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.12));
}

.dgs-sol-final-cta h2 .dgs-text-accent:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  -webkit-text-fill-color: var(--action-teal);
  filter: none;
}

.dgs-sol-final-ctas:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .dgs-sol-final-cta:where(.dgs-css-growth-article,.dgs-css-growth-article *)::after {
    animation: none;
    opacity: 0.65;
  }
}

/* ─── Back to top ───
   Solid teal circle (site's standard "solid teal badge" treatment, e.g.
   .dgs-timeline-badge), not the page's dark navy — a navy fill nearly
   disappeared against dark sections; teal reads clearly on both light
   and dark backgrounds. */
.dgs-ga-top:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--action-teal, #00B39F);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
  z-index: 500;
  box-shadow: 0 10px 24px rgba(0, 179, 159, 0.32);
}

.dgs-ga-top:hover:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  background: var(--action-mint-hover, #1ac9b0);
}

.dgs-ga-top.is-visible:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.dgs-ga-top svg:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .dgs-ga-top:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .dgs-ga-progress:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    transition: none;
  }
}

/* ============================================================
   MYTH/REALITY LIST (migrated from why-ai-why-now.html inline \3c style>)
   ============================================================ */
.dgs-ga-myth-list:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dgs-ga-myth-item:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  border: 1px solid rgba(10, 31, 51, 0.1);
  border-radius: var(--radius-md, 10px);
  padding: 1.25rem 1.5rem;
  background: #F7F9FA;
}

.dgs-ga-myth-item .dgs-ga-myth:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: block;
  font-weight: 700;
  color: #0A1F33;
  margin-bottom: 0.4rem;
}

.dgs-ga-myth-item .dgs-ga-myth:where(.dgs-css-growth-article,.dgs-css-growth-article *)::before {
  content: '\2715\0020';
  color: #c0392b;
  font-weight: 700;
}

.dgs-ga-myth-item .dgs-ga-reality:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: block;
  color: #5B6B7C;
  line-height: 1.7;
}

.dgs-ga-myth-item .dgs-ga-reality:where(.dgs-css-growth-article,.dgs-css-growth-article *)::before {
  content: '\2713\0020Reality: ';
  color: #00B39F;
  font-weight: 700;
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-07e6d16ec2:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  --ga-cat: var(--ga-teal) !important;
}

.dgs-il-4858a4af7d:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a8578d8a3ca30469695eacd.png') !important;
}

.dgs-il-f1ce35e630:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  --ga-cat: var(--ga-blue) !important;
}

/* ============================================================
   DGS BLOG POST TEMPLATE
   Native GHL Integration

   Makes the native GHL "Blog Content" widget (the dynamic post
   detail element that outputs .blog-content-title / .blog-category /
   .blog-date / .blog-cover-image-container / .blog-html) visually match
   the site's existing "text left, cover photo right, inside the navy
   hero" event-page pattern (growth-hub/connect/*, see
   .dgs-event-hero-grid / .dgs-event-hero-cover in
   css/dgs-event-detail.css) rather than the image-less static article
   hero. Every selector below is a stable GHL blog-theme class — never
   the per-widget random-hash id (e.g. #blog-content-fBpiT2lwHw) — so
   this ships once here and applies to every post automatically, no
   per-post GHL config needed. One piece of the hero doesn't exist as a
   real element GHL renders — the description paragraph — so
   js/dgs-growth-article.js creates a real `.dgs-ga-dek` element
   (reusing that exact class from the static template) from the post's
   own `<meta name="description">` and inserts it as a further direct
   child here, for `order`/grid placement to pick up like any other
   real hero element. */

/* `::before` below breaks out to `width: 100vw` for a full-bleed navy
   band on every post automatically, no per-post dependency on GHL's
   "Section Width: Full Width" toggle. `100vw` includes the browser's
   vertical scrollbar gutter, so without this it creates a page-level
   horizontal scrollbar on any OS/browser with a reserved (non-overlay)
   scrollbar. `.blog-html-container-single` itself must stay
   `overflow: visible` (below) or the breakout gets clipped right back
   — so the overflow has to be caught here, at the actual viewport
   scroll container. One deliberate exception to this file's own
   bare-tag scoping: unavoidable because `html`/`body` is the only
   element that can mask `100vw` overflow without clipping the
   breakout that depends on it.

   `overflow-x: clip`, not `hidden` — this file is shared sitewide
   (growth-hub.html loads it too, for the .dgs-ga token scope), and
   `hidden` on one axis forces the OTHER axis's computed value to
   `auto` per the CSS Overflow spec, turning `body` into a scroll
   container. That broke growth-hub.html's `.dgs-hub-jumpnav`
   `position: sticky` (its nearest scrolling ancestor became `body`
   instead of the viewport). Same fix already established elsewhere in
   this codebase for the same failure mode (see `#approach` in
   dgs-about.css): `clip` suppresses the overflow without creating a
   scroll container, so `overflow-y` can stay `visible` and sticky
   descendants keep the viewport as their scrolling ancestor. */
html:where(:has(>body.dgs-css-growth-article)),
body:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  overflow-x: clip;
  overflow-y: visible;
}

/* ---------------------------------------------------------
   0. Loading state
   GHL's Blog Content widget (a Nuxt/Vue component, see the hydration
   notes on insertDek() in js/dgs-growth-article.js) fetches/renders
   its post AFTER this page's own HTML/CSS has already painted —
   .dgs-ghl-native-blog-slot is empty at that first paint. Left alone,
   the sections below it (More Perspectives / CTA / footer) render
   right under the navbar for a moment, then the whole page reflows
   and jumps down once the real post lands. Hidden here via
   opacity/visibility (NOT display:none, so the space stays reserved
   and nothing below shifts while it's invisible) until
   js/dgs-growth-article.js's revealArticle() adds .is-ready — the
   same moment it confirms the real title, body, and (if present)
   fully-loaded cover image all exist. Scoped to this one slot only;
   the navbar/hero chrome around it is untouched.
--------------------------------------------------------- */
.dgs-ghl-native-blog-slot:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: block;
  opacity: 0;
  visibility: hidden;
}

.dgs-ghl-native-blog-slot:not(.is-ready):where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  /* Approximates "at least one screen of the real post" (hero +
     opening paragraphs) rather than guessing a tall arbitrary number
     — real posts are always longer than this once revealed, so it
     never leaves a visible gap. */
  min-height: 100vh;
}

.dgs-ghl-native-blog-slot.is-ready:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .dgs-ghl-native-blog-slot.is-ready:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    transition: none;
  }
}

/* ---------------------------------------------------------
   1. Template scope
   Every rule below is scoped under .blog-html-container-single, the
   stable wrapper GHL's blog-theme always renders around a Blog Content
   widget's output. Nothing here touches a bare tag/id or any selector
   that could match outside that widget.
--------------------------------------------------------- */
.blog-html-container-single:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: grid !important;
  grid-template-columns: 1fr;
  background: #ffffff !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  /* GHL's OWN default theme CSS (not ours) ships
     `.blog-html-container-single { margin: 0 auto; max-width: 800px;
     overflow: hidden }`. Left alone, that squeezes the whole widget
     into an 800px centered column AND clips the hero's `::before`
     full-bleed backdrop below, since an ancestor with
     `overflow: hidden` clips escaping descendants regardless of their
     own position/transform. All three must be beaten here, not just
     the child rules. (GHL also exposes a `.blog-content-fluid-width`
     class that sets max-width:100% on this same selector — an
     equivalent native "Fluid Width" widget toggle, if one exists in
     the page builder, is a fine alternative to this.) */
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* ---------------------------------------------------------
   2. Native GHL Blog Hero
   Native render order is: image, title, category, date, content.
   Target order: back-link, category, title, date, description stacked
   in a left column, with the featured image as a large column on the
   right — one navy hero band shared by both. Mobile stays a single
   stacked column, text first then image (same order the 2-column grid
   reduces to). `order` moves the real elements (image included) with
   zero DOM changes.

   The navy hero background is a single `::before` grid item (below)
   rather than a background on each element: with two columns, each
   element breaking out to its own `width:100vw` would bleed every text
   row across the image column too. A `::before` placed as a grid item
   spans exactly the hero's rows (auto-sized to content, no guessed
   number) while only its own width bleeds to the viewport edge via the
   standard `calc(50% - 50vw)` margin technique — the real content
   elements stay normal, non-breakout grid items sized to their track. */
.blog-html-container-single:where(.dgs-css-growth-article,.dgs-css-growth-article *)::before {
  content: '';
  grid-column: 1 / -1;
  grid-row: 1 / 7;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  /* Same glow as .dgs-ga-hero::before — same teal/blue stops and
     position (50% / -18%), same fixed (viewport-independent) ellipse
     technique rather than a bare `circle` whose implicit
     (farthest-corner) size stretches to fit THIS hero's own
     auto-height box. Sized bigger than the static template's own
     56vw x 22rem (84vw x 34rem, ~1.5x): this hero's box is usually
     much taller (it includes the featured image, unlike .dgs-ga-hero
     which is text-only), so a same-size blob reads proportionally
     smaller/more washed out here than it does on the shorter static
     hero — enlarging it is what actually keeps its VISUAL prominence
     comparable, not just its absolute stats. Layered on top of the
     solid navy in this one background instead of a second
     pseudo-element, since ::after would paint above the real hero
     content instead of behind it. */
  background:
    radial-gradient(ellipse 84vw 34rem at 50% -18%, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 45%, transparent 75%),
    var(--ga-navy, #0A1F33);
}

@media (min-width: 960px) {
  .blog-html-container-single:where(.dgs-css-growth-article,.dgs-css-growth-article *)::before {
    grid-row: 1 / 6;
  }
}

.blog-html-container-single > .blog-back-button:where(.dgs-css-growth-article,.dgs-css-growth-article *),
.blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-growth-article,.dgs-css-growth-article *),
.blog-html-container-single > .blog-content-title:where(.dgs-css-growth-article,.dgs-css-growth-article *),
.blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-growth-article,.dgs-css-growth-article *),
.blog-html-container-single > .dgs-ga-dek:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  box-sizing: border-box;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .blog-html-container-single > .blog-back-button:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .blog-content-title:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .dgs-ga-dek:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .blog-html-container-single > .blog-back-button:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .blog-content-title:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .dgs-ga-dek:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
}

/* Desktop 2-column hero, matching .dgs-event-hero-grid: text in
   column 1 (rows 1-5, one row per real element including the
   description), image in column 2 spanning the same 5 rows
   (grid-row set on .blog-cover-image-container below), vertically
   centered against the text. column-gap replaces these elements' own
   right-hand gutter so it isn't doubled at the seam between columns. */
@media (min-width: 960px) {
  .blog-html-container-single:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: 4rem;
  }

  .blog-html-container-single > .blog-back-button:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .blog-content-title:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .dgs-ga-dek:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    grid-column: 1;
    padding-right: 0;
  }

  .blog-html-container-single > .blog-back-button:where(.dgs-css-growth-article,.dgs-css-growth-article *) { grid-row: 1; }
  .blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-growth-article,.dgs-css-growth-article *) { grid-row: 2; }
  .blog-html-container-single > .blog-content-title:where(.dgs-css-growth-article,.dgs-css-growth-article *) { grid-row: 3; }
  .blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-growth-article,.dgs-css-growth-article *) { grid-row: 4; }
  .blog-html-container-single > .dgs-ga-dek:where(.dgs-css-growth-article,.dgs-css-growth-article *) { grid-row: 5; }

  .blog-html-container-single > .blog-html:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .blog-tags:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .blog-html-container-single > .hl-blog-content-back-to-top-container:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    grid-column: 1 / -1;
  }
}

/* padding-top clears the fixed top nav (.dgs-header) so the hero never
   starts underneath it — 8.5rem desktop / 6.5rem mobile (see "9.
   Responsive" below), well past the header's own ~1.15rem/1rem
   vertical padding + logo height.

   grid-row is set explicitly here (mirroring the desktop-only block
   above, now applied unconditionally) because mixing an auto-placed
   item with `.blog-html-container-single::before`'s own EXPLICIT
   `grid-row: 1 / 7` breaks on mobile: per the CSS Grid spec,
   explicitly-placed items are positioned before any auto-placed
   sibling, and auto-placement then skips cells they already occupy.
   ::before has the lowest `order` (the property's initial value, 0,
   vs. 1-9 on every real element here) so it's positioned first and
   claims rows 1-6 outright; every real element in this hero, having
   only `order` and no explicit `grid-row`, then gets auto-placed
   AFTER that reserved block, starting at row 7 — not inside it. Since
   ::before itself has no intrinsic size, rows 1-6 collapse to 0
   height with nothing "auto" to size them, so the navy backdrop
   effectively vanishes instead of just sitting empty, while the real
   text (title, date, description — all styled for white-on-navy)
   renders on the plain white page background beneath it: invisible,
   but still taking up its own layout height (confirmed live: category
   is teal so it stays visible either way, immediately under the
   header with no gap in front of it, then a "blank" gap exactly the
   height of the now-invisible white title/date/dek text, then the
   featured image, which stays visible because pixel content isn't
   subject to `color`). Desktop never hit this because the min-width:
   960px block below already gives every element here an explicit
   `grid-row` of its own — this makes mobile do the same instead of
   relying on auto-placement at all. */
.blog-html-container-single > .blog-back-button:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: 1;
  grid-row: 1;
  /* grid-column pinned alongside grid-row: ::before is explicitly
     `grid-column: 1 / -1`, so it already occupies column 1 at every
     row it spans. Left on `auto`, this item's column has to be
     auto-placed, and auto-placement treats that cell as taken (it
     never overlaps an explicitly-placed sibling) and pushes the item
     into a brand-new implicit column 2 instead — exactly what was
     shifting the whole mobile hero (text + image) into a ~50%-width
     right-hand column with a blank column 1 gap. Explicit `column: 1`
     is placement, not auto-placement, so it's allowed to sit in the
     same cell as ::before (which is just a painted background, not a
     layout obstacle) — matching what the desktop 2-column block below
     already does for the very same reason. */
  grid-column: 1;
  display: flex !important;
  align-items: center;
  gap: 0.4rem;
  padding-top: 8.5rem !important;
  padding-bottom: 2rem !important;
  font-family: var(--font-body) !important;
  /* Slightly reduced from 0.88rem (matches the same modest trim applied
     to the rest of the hero's type — see .blog-content-title below). */
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  margin-top: 0 !important;
  cursor: pointer;
}

.blog-html-container-single > .blog-back-button:hover:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  color: var(--ga-teal, #00B39F) !important;
}

/* GHL's default back-arrow renders blank without Font Awesome loaded;
   swap it for a plain arrow glyph instead of pulling in an icon font. */
.blog-html-container-single > .blog-back-button .blog-left-arrow:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  margin-right: 0.3rem !important;
}

.blog-html-container-single > .blog-back-button .blog-left-arrow:where(.dgs-css-growth-article,.dgs-css-growth-article *)::before {
  content: "\2190" !important;
  font-family: var(--font-body) !important;
}

.blog-html-container-single > .blog-content-title:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: 3;
  grid-row: 3;
  grid-column: 1;
  padding-top: 0 !important;
  padding-bottom: 1.75rem !important;
  margin: 0 !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  /* Was var(--fs-h1) == clamp(2.8rem, 6vw, 4.8rem) — matched the static
     template's own ACTUAL rendered size (`.dgs-page h1` outranks
     `.dgs-ga-title`'s own smaller clamp there by specificity, so
     --fs-h1 is what really wins on every article page). Trimmed ~15%
     off each number, then trimmed again (~10% further, user feedback
     after seeing it live) since even the first pass still read large
     for this specific hero. */
  font-size: clamp(2.1rem, 4.6vw, 3.7rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #ffffff !important;
}

.blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: 4;
  grid-row: 4;
  grid-column: 1;
  padding-top: 1.5rem !important;
  padding-bottom: 1.1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.blog-html-container-single .blog-date:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Description: a real element js/dgs-growth-article.js inserts as a
   further direct child (see the header comment above) — reusing
   .dgs-ga-dek as-is from the static template system. order:5 puts it
   last in the mobile text stack, right after the date; padding-bottom
   stands in for .dgs-ga-hero's own padding-bottom (this hero has none)
   to close the hero out before the image (mobile) / white body
   (desktop). */
.blog-html-container-single > .dgs-ga-dek:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: 5;
  grid-row: 5;
  grid-column: 1;
  padding-bottom: 2.75rem !important;
  /* Scoped override, not a change to .dgs-ga-dek itself: that shared
     rule (font-size: 1.1rem) is reused as-is on every other Growth Hub
     page via the same class, so trimming it there would shrink the
     dek everywhere, not just this hero. This knocks it down slightly
     (~9%) for the native blog hero specifically. */
  font-size: 1rem !important;
}

/* Featured image: order:6 on mobile (after the text stack, matching
   the static reference's own text-before-image reading order), grid
   column 2 / rows 1-5 on desktop (see the 2-column block above) —
   a real GHL element, not JS-moved. grid-row:6 (not just order) for
   the same reason every other hero element above now sets grid-row:
   without it, the image is auto-placed and gets skipped past the
   block .blog-html-container-single::before already claims via its
   own explicit `grid-row: 1 / 7`, landing outside the navy backdrop
   entirely instead of as its last row. */
.blog-html-container-single > .blog-cover-image-container:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: 6;
  grid-row: 6;
  grid-column: 1;
  max-width: 100%;
  margin: 0 auto 3rem !important;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .blog-html-container-single > .blog-cover-image-container:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 0 2rem;
  }
}

@media (min-width: 960px) {
  .blog-html-container-single > .blog-cover-image-container:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    grid-column: 2;
    grid-row: 1 / 6;
    /* align-self: start (not center) + real top/bottom padding, rather
       than trusting the grid to center it: the row span's height comes
       from column 1's text stack, so centering alone put the image
       flush against the nav whenever that text stack was short. The
       padding here is now itself the tallest thing in rows 1-5, so it
       sets the hero's height (grid tracks size to fit their content) —
       this is what actually "grows" the hero, not a height/min-height
       on the hero itself. (Tried `center` on user request, then asked
       to revert back to this.) */
    align-self: start;
    margin: 0;
    padding: 7.5rem 3.5rem 5rem 0;
  }
}

/* ---------------------------------------------------------
   3. Native GHL Metadata
--------------------------------------------------------- */
.blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: 2;
  /* Explicit row, matching every other real hero element (see the
     mobile-stacking comment above .blog-back-button): .before's
     `grid-row: 1 / 7` occupies rows 1-7 outright, so without this an
     auto-placed category gets skipped past that whole reserved block
     and lands in a new implicit row after the image instead of between
     the back-link and the title. grid-column:1 pinned for the same
     reason every sibling hero element now pins it too: ::before's
     `grid-column: 1 / -1` already occupies column 1 at this row, so
     auto-placement (triggered by leaving grid-column on `auto`) can't
     use that cell and creates an implicit column 2 instead, shifting
     the WHOLE hero (every explicitly-rowed item, plus the image) into
     a ~50%-width right column. Explicit placement doesn't avoid
     ::before the way auto-placement does, so this can safely share
     the cell with it. */
  grid-row: 2;
  grid-column: 1;
  padding-top: 0 !important;
  padding-bottom: 1.1rem !important;
}

.blog-html-container-single .blog-category:where(.dgs-css-growth-article,.dgs-css-growth-article *),
.blog-html-container-single .blog-category a:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: inline-block;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ga-teal, #00B39F) !important;
  text-decoration: none !important;
}

/* ---------------------------------------------------------
   4. Featured image
--------------------------------------------------------- */
.blog-html-container-single .hl-image-picture:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: block !important;
}

.blog-html-container-single .blog-content-blog-image:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  width: 100% !important;
  aspect-ratio: auto;
  height: auto;
  object-fit: cover !important;
  border-radius: var(--radius-lg, 14px) !important;
  display: block;
  box-shadow: 0 24px 60px rgba(10, 31, 51, 0.18);
}

/* Desktop: translucent white border instead of a shadow, since the
   image now sits directly on the navy hero rather than overlapping
   onto white (matches .dgs-event-hero-cover img). Natural aspect ratio
   applies at every size now (see the base rule above) so the image is
   never force-cropped into a short banner on mobile. */
@media (min-width: 960px) {
  .blog-html-container-single .blog-content-blog-image:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    border-radius: var(--radius-xl, 10px) !important;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* ---------------------------------------------------------
   5. Article content
   #blogPostContent is a fixed GHL id (not a per-widget random hash),
   safe to use directly per GHL's own docs.
--------------------------------------------------------- */
.blog-html-container-single > .blog-html:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: 7;
  background: #ffffff !important;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 4.5rem 1rem 2rem !important;
}

@media (min-width: 768px) {
  .blog-html-container-single > .blog-html:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 4.5rem 2rem 2rem !important;
  }
}

@media (min-width: 1024px) {
  .blog-html-container-single > .blog-html:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding: 4.5rem 3.5rem 2rem !important;
  }
}

/* Safety default for images inside the post BODY (not the hero cover
   image above, which is a fixed, known element already handled by
   revealArticle()'s load-gating in js/dgs-growth-article.js). Body
   images are authored per-post as arbitrary "Custom Code" HTML with
   no fixed dimensions this stylesheet can know ahead of time, so
   there's no real aspect-ratio to reserve here — this only stops an
   inline image from overflowing its column or rendering at its raw
   (possibly huge) intrinsic size before it loads, which is the part
   this stylesheet CAN control. Low specificity (no !important) on
   purpose: any per-post pasted \3c style> block that sizes its own
   images still wins over this fallback. */
.blog-html-container-single .blog-html img:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  max-width: 100%;
  height: auto;
}

/* js/dgs-growth-article.js scans .dgs-blog-render's h2 headings on load
   and, when there are any, inserts a .dgs-ga-toc sidebar (the same
   component the static article template hand-authors) as a sibling
   right before .dgs-blog-render — via `.dgs-blog-render.parentNode`,
   whatever that actually is. On a real GHL post that is NOT
   `#blogPostContent`/`.blog-html` itself: a post's rich body is
   authored as a "Custom Code" element inside the blog editor, so GHL
   renders one more real wrapper in between — a `div` carrying the
   stable attribute `data-code-embed-container` (confirmed live; its
   own id is a random per-widget hash, same caveat as
   `#blog-content-fBpiT2lwHw` elsewhere in this file, so it's never
   targeted directly). Grid-ing `.blog-html` itself (an earlier version
   of this rule) left the TOC and `.dgs-blog-render` stacked in normal
   flow inside that untouched wrapper div instead of side-by-side,
   since neither was actually a direct grid child of `.blog-html`.
   `:has(> .dgs-ga-toc)` sidesteps needing to name that wrapper at all:
   it matches whichever element is the TOC's real direct parent, one
   level up or ten, so this also still works unchanged if GHL ever
   renders the body with no extra wrapper. Scoped under
   `.blog-html-container-single` only to keep it from ever matching
   `.dgs-ga-toc`'s OTHER parent, the static template's own
   `.dgs-ga-layout` (which already grids itself independently above). */
.blog-html-container-single :has(> .dgs-ga-toc):where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 960px) {
  .blog-html-container-single :has(> .dgs-ga-toc):where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: start;
  }
}

/* Fallback typography for article HTML pasted WITHOUT its own known
   content wrapper/styles. #blogPostContent is an ID, which would
   outrank any of these wrappers' own (non-!important) max-width/margin,
   so the :not(:has(...)) guard is required, not decorative: it keeps
   this fallback OFF entirely on any post that already ships one of
   them, so existing per-post styling is never touched. Checked against
   all six known per-post wrapper classes (js/dgs-growth-article.js
   getGhlRender() reads the same list) — Learn posts use
   .dgs-blog-render, Connect posts .dgs-event-template-page, and within
   Implement every post so far has used its own class:
   .dgs-checklist-template-page, .dgs-playbook-template-page,
   .dgs-compliance-template-page, .dgs-sop-template-page (confirmed live
   on speedtoleadcode.html, compliancecalendar.html, and sop.html — same
   double-constraining bug every time a class was missing here: this
   fallback's max-width:76ch/margin:0 auto fired on top of the post's
   own per-post max-width and squeezed the TOC+article grid below,
   since it doesn't ship .dgs-blog-render either). */
#blogPostContent:not(:has(.dgs-blog-render, .dgs-checklist-template-page, .dgs-event-template-page, .dgs-playbook-template-page, .dgs-compliance-template-page, .dgs-sop-template-page)):where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-body);
  color: var(--ga-ink, #0A1F33);
  max-width: 76ch;
  margin: 0 auto;
}

#blogPostContent:not(:has(.dgs-blog-render, .dgs-checklist-template-page, .dgs-event-template-page, .dgs-playbook-template-page, .dgs-compliance-template-page, .dgs-sop-template-page)) > p:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-size: 1.1rem;
  line-height: 1.85;
  color: #2A3B4D;
}

#blogPostContent:not(:has(.dgs-blog-render, .dgs-checklist-template-page, .dgs-event-template-page, .dgs-playbook-template-page, .dgs-compliance-template-page, .dgs-sop-template-page)) > h2:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  color: var(--ga-navy, #0A1F33);
}

/* ---------------------------------------------------------
   6. Native GHL overrides
--------------------------------------------------------- */
.blog-html-container-single > .blog-tags:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: 8;
  max-width: 860px;
  margin: 0 auto !important;
  padding: 0 1rem 1rem !important;
}

.blog-html-container-single > .blog-tags:empty:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: none !important;
}

.blog-html-container-single > .hl-blog-content-back-to-top-container:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  order: 9;
  max-width: 860px;
  margin: 0 auto 3rem !important;
  padding: 0 1rem !important;
  text-align: center;
  background: transparent !important;
}

.blog-html-container-single > .hl-blog-content-back-to-top-container .back-to-top:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  background: transparent !important;
  color: var(--ga-teal, #00B39F) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
}

/* ---------------------------------------------------------
   7. More Perspectives
   Reuses .dgs-ga-related as-is (see section 509+ above) from the
   Custom Code section placed directly after the Blog Content widget
   in the page builder — nothing to add here.
--------------------------------------------------------- */

/* ---------------------------------------------------------
   8. Final CTA
   Reuses .dgs-sol-final-cta as-is (see section 694+ above) from the
   Custom Code section placed after "More Perspectives" in the page
   builder — nothing to add here.
--------------------------------------------------------- */

/* ---------------------------------------------------------
   9. Responsive
--------------------------------------------------------- */
@media (max-width: 767px) {
  .blog-html-container-single > .blog-back-button:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    padding-top: 6.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .blog-html-container-single .blog-content-blog-image:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    border-radius: var(--radius-md, 10px) !important;
  }
}

/* ---------------------------------------------------------
   11. Social share (.dgs-blog-share)
   Static sibling of .dgs-ghl-blog-content (see ghl-blog.html) — same
   "always in the DOM, never GHL-injected" category as the static
   More Perspectives/CTA/footer sections, so every rule here is
   scoped strictly under .dgs-blog-share and never touches a bare tag
   (h1/h2/p/a/button/img/div) that could leak into the native widget,
   navbar, or footer. Uses the same --ga-navy/--ga-teal/--ga-hairline/
   --ga-surface tokens as the rest of this file (defined on .dgs-ga,
   which wraps this section too) rather than inventing new colors.
   Visible keyboard focus is inherited for free from the sitewide
   ".dgs-page a/button:focus-visible" rule in dgs-common.css —
   nothing extra needed here. */
.dgs-blog-share:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  padding: 0 1rem 2.5rem;
  /* Explicit, not incidental: <main> carries a global navy
     background-color (dgs-common.css's loading-state fallback), and
     background-color is never inherited, so without its own opaque
     background this section would let that navy show through behind
     it — confirmed live, it rendered as an unwanted dark band between
     the white article and "More Perspectives". White keeps this
     reading as a continuation of the article, per spec (no new
     colored section). */
  background: var(--bg-white, #ffffff);
}

.dgs-blog-share-inner:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ga-hairline, rgba(10, 31, 51, 0.1));
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.dgs-blog-share-label:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ga-navy, #0A1F33);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.dgs-blog-share-actions:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.dgs-blog-share-btn:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 40px;
  width: 40px;
  padding: 0;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--ga-hairline, rgba(10, 31, 51, 0.1));
  background: var(--ga-surface, #F7F9FA);
  color: var(--ga-navy, #0A1F33);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color var(--duration-fast, 0.15s) ease, color var(--duration-fast, 0.15s) ease, background var(--duration-fast, 0.15s) ease;
}

/* "Copy Link" carries a visible label next to its icon (there is no
   universally recognizable "copy" glyph the way there is for the
   Facebook/LinkedIn/Instagram marks), so it alone gets auto width. */
.dgs-blog-share-btn--copy:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  width: auto;
  padding: 0 0.9rem 0 0.75rem;
}

.dgs-blog-share-btn svg:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (hover: hover) {
  .dgs-blog-share-btn:hover:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    border-color: var(--ga-teal, #00B39F);
    color: var(--ga-teal, #00B39F);
    background: rgba(0, 179, 159, 0.06);
  }
}

.dgs-blog-share-btn.is-copied:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  border-color: var(--ga-teal, #00B39F);
  color: var(--ga-teal, #00B39F);
}

/* Small feedback tooltip, used only by the Instagram button (its
   feedback has nowhere else to live, since — unlike Copy Link — it
   has no visible text label of its own to swap). Positioned via CSS
   only; JS just swaps its text and toggles .is-tooltip-visible. */
.dgs-blog-share-tooltip:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ga-navy, #0A1F33);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-sm, 6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 2;
}

.dgs-blog-share-tooltip:where(.dgs-css-growth-article,.dgs-css-growth-article *)::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ga-navy, #0A1F33);
}

.dgs-blog-share-btn.is-tooltip-visible .dgs-blog-share-tooltip:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dgs-blog-share-btn:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .dgs-blog-share-tooltip:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    transition: none;
  }
}

/* Mobile: tighten gaps slightly (all four actions still fit on one
   line at 320px — 40px x3 icons + one text button + gaps — this is
   just extra headroom, not a layout change) and keep the tooltip from
   ever pushing past the viewport's left edge on the first icon. */
@media (max-width: 420px) {
  .dgs-blog-share-inner:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    gap: 0.6rem;
  }

  .dgs-blog-share-actions:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    gap: 0.45rem;
  }
}

/* ---------------------------------------------------------
   12. Previous / Next article (.dgs-blog-prev-next)
   Sits inside .dgs-ga-related-inner, after .dgs-ga-related-head — see
   ghl-blog.html for exactly where. Same scoping discipline as the
   share component in section 11: every selector is namespaced under
   .dgs-blog-prev-next, no bare tags, same --ga-* tokens (this lives
   under .dgs-ga too). Starts [hidden] in the markup; JS only clears
   that (and each individual .dgs-blog-prev-next__item's own [hidden])
   once it has confirmed real data — see the matching comment block in
   js/dgs-growth-article.js for how "confirmed real" is determined. */
.dgs-blog-prev-next:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ga-hairline, rgba(10, 31, 51, 0.1));
}

.dgs-blog-prev-next[hidden]:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: none;
}

.dgs-blog-prev-next__item:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  text-decoration: none;
}

.dgs-blog-prev-next__item[hidden]:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: none;
}

.dgs-blog-prev-next__item--prev:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  align-items: flex-start;
  text-align: left;
}

.dgs-blog-prev-next__item--next:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

.dgs-blog-prev-next__label:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ga-muted, #5B6B7C);
  transition: color var(--duration-fast, 0.15s) ease;
}

.dgs-blog-prev-next__label svg:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--duration-fast, 0.15s) ease;
}

.dgs-blog-prev-next__title:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ga-navy, #0A1F33);
  transition: color var(--duration-fast, 0.15s) ease;
  /* Long titles wrap onto a second line instead of overflowing the
     50%-ish column width each item gets from flex-basis above. */
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .dgs-blog-prev-next__item:hover .dgs-blog-prev-next__label:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .dgs-blog-prev-next__item:hover .dgs-blog-prev-next__title:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    color: var(--ga-teal, #00B39F);
  }

  .dgs-blog-prev-next__item--prev:hover .dgs-blog-prev-next__label svg:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    transform: translateX(-3px);
  }

  .dgs-blog-prev-next__item--next:hover .dgs-blog-prev-next__label svg:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dgs-blog-prev-next__label:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .dgs-blog-prev-next__label svg:where(.dgs-css-growth-article,.dgs-css-growth-article *),
  .dgs-blog-prev-next__title:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    transition: none;
  }
}

/* Below ~500px a 260px flex-basis on both items no longer fits side by
   side — stack them, each left-aligned, rather than letting them
   crush down to an unreadable width. */
@media (max-width: 500px) {
  .dgs-blog-prev-next:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* flex/flex-basis on .dgs-blog-prev-next__item above sizes WIDTH in
     the default row layout — once flex-direction flips to column here,
     that same "1 1 260px" would size HEIGHT instead (flex-basis always
     tracks the main axis), stretching each item to ~260px tall and
     opening a large gap between them. Reset to natural content height. */
  .dgs-blog-prev-next__item:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    flex: none;
  }

  .dgs-blog-prev-next__item--next:where(.dgs-css-growth-article,.dgs-css-growth-article *) {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
  }
}


/* ============================================================
   C10. ASSESSMENT  (scope: .dgs-css-assessment)
   Formerly css/dgs-assessment.css. Used by:
     growth-hub/learn/ai-readiness-test.html
   ============================================================ */

/* ============================================================
   GROWTH HUB — AI READINESS ASSESSMENT (Interactive)
   Independent stylesheet for the scored quiz experience. Inherits
   --ga-navy / --ga-teal / --ga-blue / --ga-amber / --ga-ink / --ga-muted /
   --ga-hairline / --ga-surface from the .dgs-ga scope it's nested inside
   (see dgs-growth-article.css). Does not touch that file.

   2026-08-19 visual overhaul: sharp/geometric enterprise redesign, all
   selectors and data-attributes kept identical to js/dgs-assessment.js —
   this file only restyles, it never renames a hook the script queries.
   Local tokens below (--asm-*) intentionally use a deeper navy than the
   sitewide --ga-navy for a more "ink" structural color on this one
   component, per the brand direction given for this redesign.
   ============================================================ */

.dgs-asm:where(.dgs-css-assessment,.dgs-css-assessment *) {
  --asm-navy: #040e2c;
  --asm-navy-soft: color-mix(in srgb, #040e2c 90%, white 10%);
  --asm-slate: #465364;
  --asm-slate-soft: #7C8793;
  --asm-mist: #F4F6F8;
  --asm-border: rgba(4, 14, 44, 0.14);
  --asm-border-soft: rgba(4, 14, 44, 0.08);
  --asm-teal: var(--action-teal, #00B39F);
  --asm-amber: var(--dgs-amber, #F5A623);

  position: relative;
  z-index: 0;
  background: #ffffff;
  padding: 4.5rem 1.5rem 6rem;
}

.dgs-asm:where(.dgs-css-assessment,.dgs-css-assessment *)::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
}

.dgs-asm-inner:where(.dgs-css-assessment,.dgs-css-assessment *) {
  max-width: 760px;
  margin: 0 auto;
}

/* ─── Progress bar ───────────────────────────────────────────
   A static label frames the bar so it reads as one deliberate
   instrument, not a bare form-library progress element. Thin
   white "cut" lines every 20% mark the five dimensions, visible
   over both the track and the fill. ─────────────────────────── */
.dgs-asm-progress-bar:where(.dgs-css-assessment,.dgs-css-assessment *) {
  margin-bottom: 2.5rem;
}

.dgs-asm-progress-label:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--asm-slate-soft);
  margin-bottom: 0.75rem;
}

.dgs-asm-progress-track:where(.dgs-css-assessment,.dgs-css-assessment *) {
  height: 6px;
  border-radius: var(--radius-xs, 2px);
  background: var(--asm-border-soft);
  overflow: hidden;
  position: relative;
}

.dgs-asm-progress-track:where(.dgs-css-assessment,.dgs-css-assessment *)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(20% - 1px),
    #ffffff calc(20% - 1px),
    #ffffff 20%
  );
  pointer-events: none;
}

.dgs-asm-progress-fill:where(.dgs-css-assessment,.dgs-css-assessment *) {
  height: 100%;
  width: 0%;
  background: var(--asm-teal);
  transition: width 0.35s var(--ease-out, ease);
}

/* ─── Card shell ─────────────────────────────────────────────
   Flat, bordered, sharply cornered. No shadow, no heavy navy top
   edge (2026-08-31: removed per feedback, read as a leftover "quiz
   chrome" accent that fought the consulting-report tone) — the
   1px hairline border alone signals the instrument boundary. ──── */
.dgs-asm-card:where(.dgs-css-assessment,.dgs-css-assessment *) {
  background: #ffffff;
  border: 1px solid var(--asm-border);
  border-radius: var(--radius-xl, 8px);
  padding: 3rem 3rem 2.75rem;
}

@media (max-width: 640px) {
  .dgs-asm-card:where(.dgs-css-assessment,.dgs-css-assessment *) {
    padding: 2rem 1.35rem 1.85rem;
  }
}

.dgs-asm-screen[hidden]:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: none;
}

/* ─── Shared text bits ───────────────────────────────────────
   eyebrow -> heading -> lede is the fixed hierarchy on every
   screen; the eyebrow carries a small geometric tick instead of
   just being caps text, so it reads as a label, not a stray line. */
.dgs-asm-eyebrow:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--asm-teal);
  margin-bottom: 1rem;
}

.dgs-asm-eyebrow:where(.dgs-css-assessment,.dgs-css-assessment *)::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--asm-teal);
  flex-shrink: 0;
}

/* !important below beats .dgs-page h2/p (class+element = higher
   specificity than a single component class) — without it these
   rules silently lose to the sitewide h2/p reset regardless of
   stylesheet load order. Same fix applied throughout this file
   wherever a rule targets a bare h1-h6/p/a/button. */
.dgs-asm-heading:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
  color: var(--asm-navy);
  margin: 0 0 1rem !important;
}

.dgs-asm-lede:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 1.04rem;
  line-height: 1.75 !important;
  color: var(--asm-slate);
  max-width: 54ch;
  margin: 0 0 2.25rem !important;
}

/* ─── Buttons ─────────────────────────────────────────────────
   Sharp corners (radius-lg = 6px, not a pill), no shadow lift.
   Interaction reads through a background/border shift and a 1px
   nudge, not a floating card effect. ───────────────────────── */
.dgs-asm-btn:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body) !important;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-lg, 6px);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.dgs-asm-btn--primary:where(.dgs-css-assessment,.dgs-css-assessment *) {
  background: var(--asm-navy);
  color: #ffffff;
}

.dgs-asm-btn--primary:hover:where(.dgs-css-assessment,.dgs-css-assessment *) {
  background: var(--asm-navy-soft);
  transform: translateY(-1px);
}

.dgs-asm-btn--amber:where(.dgs-css-assessment,.dgs-css-assessment *) {
  background: var(--asm-amber);
  color: var(--asm-navy) !important;
}

.dgs-asm-btn--amber:hover:where(.dgs-css-assessment,.dgs-css-assessment *) {
  background: var(--dgs-amber-hover, #dc9420);
  transform: translateY(-1px);
}

.dgs-asm-btn--ghost:where(.dgs-css-assessment,.dgs-css-assessment *) {
  background: transparent;
  color: var(--asm-slate);
  border-color: var(--asm-border);
  padding: 0.85rem 1.4rem;
}

.dgs-asm-btn--ghost:hover:where(.dgs-css-assessment,.dgs-css-assessment *) {
  border-color: var(--asm-navy);
  color: var(--asm-navy);
}

.dgs-asm-btn svg:where(.dgs-css-assessment,.dgs-css-assessment *) {
  width: 16px;
  height: 16px;
}

.dgs-asm-btn:disabled:where(.dgs-css-assessment,.dgs-css-assessment *) {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ─── Question screen ─────────────────────────────────────────
   The dimension label is a solid navy tag (a "you are here"
   marker), separated from the question count by a hairline rule
   so the meta row reads as instrumentation, not stray captions. */
.dgs-asm-q-meta:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.85rem;
  border-bottom: 1px solid var(--asm-border-soft);
}

.dgs-asm-q-dim:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--asm-navy);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm, 3px);
}

.dgs-asm-q-progress:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--asm-slate-soft);
  font-variant-numeric: tabular-nums;
}

.dgs-asm-q-text:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  line-height: 1.42 !important;
  letter-spacing: -0.01em;
  color: var(--asm-navy);
  margin: 0 0 2.5rem !important;
}

.dgs-asm-scale:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.dgs-asm-scale-btn:where(.dgs-css-assessment,.dgs-css-assessment *) {
  flex: 1;
  aspect-ratio: 1 / 1;
  max-width: 64px;
  border-radius: var(--radius-md, 4px);
  border: 1.5px solid var(--asm-border);
  background: #ffffff;
  color: var(--asm-navy);
  font-family: var(--font-heading) !important;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.dgs-asm-scale-btn:hover:where(.dgs-css-assessment,.dgs-css-assessment *) {
  border-color: var(--asm-teal);
  background: color-mix(in srgb, var(--asm-teal) 8%, white);
}

.dgs-asm-scale-btn.is-selected:where(.dgs-css-assessment,.dgs-css-assessment *) {
  background: var(--asm-navy);
  border-color: var(--asm-navy);
  color: #ffffff;
}

.dgs-asm-scale-labels:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--asm-slate-soft);
  margin-bottom: 2.25rem;
}

.dgs-asm-q-nav:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  justify-content: flex-start;
  padding-top: 1.5rem;
  border-top: 1px solid var(--asm-border-soft);
}

/* ─── Email gate: GHL lead-capture iframe ───────────────────────
   The form itself (name/email fields, validation) lives inside the
   embedded GHL widget. No fixed/min height here on purpose: GHL's
   form_embed.js resizes the iframe to its actual content height via
   postMessage, so the wrapper just hugs whatever height that ends up
   being instead of forcing a tall fixed box around a short form. */
.dgs-asm-iframe-wrap:where(.dgs-css-assessment,.dgs-css-assessment *) {
  border: 1.5px solid var(--asm-border);
  border-radius: var(--radius-md, 4px);
  background: var(--asm-mist);
  overflow: hidden;
  line-height: 0;
}

.dgs-asm-iframe-wrap iframe:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: block;
  width: 100%;
}

.dgs-asm-continue:where(.dgs-css-assessment,.dgs-css-assessment *) {
  width: 100%;
  justify-content: center;
  margin-top: 1.5rem;
}

.dgs-asm-privacy:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--asm-slate-soft);
  margin: 1.5rem 0 0 !important;
}

/* ============================================================
   RESULTS — AI Readiness Snapshot (business maturity report)
   Everything below is scoped to .dgs-asmres, the results screen.
   Local tokens map straight to the DGS 3.0 palette (dgs-common.css
   :root): navy structure, teal = strength/progression, electric
   blue = attention/gap, amber reserved ONLY for the primary score
   figure and the closing CTA button, never used decoratively
   elsewhere on this screen (brand rule).
   ============================================================ */
.dgs-asmres:where(.dgs-css-assessment,.dgs-css-assessment *) {
  --asmres-blue: var(--dgs-blue, #2D7FF9);
}

/* The report needs more air than the quiz card, so the shell widens
   itself only while the results screen is the one showing. Falls
   back gracefully (fixed 760px) in browsers without :has(). Gated
   to >=900px only: below that, the pre-existing .dgs-asm-card
   padding rules (640px/480px/360px, further down this file) already
   handle mobile correctly, and a :has()-scoped override here would
   outrank them on specificity even at those narrower widths, so it
   must not exist below the gate at all. */
@media (min-width: 900px) {
  .dgs-asm-inner:has([data-asm-screen="results"]:not([hidden])):where(.dgs-css-assessment,.dgs-css-assessment *) {
    max-width: 1120px;
  }

  .dgs-asm-inner:has([data-asm-screen="results"]:not([hidden])) .dgs-asm-card:where(.dgs-css-assessment,.dgs-css-assessment *) {
    padding: 3.5rem 3.5rem 3rem;
  }
}

/* ─── 01 — Header ─── */
.dgs-asmres-head:where(.dgs-css-assessment,.dgs-css-assessment *) {
  margin-bottom: 2.5rem;
}

.dgs-asmres-kicker:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--asm-teal);
  margin-bottom: 0.9rem;
}

.dgs-asmres-kicker:where(.dgs-css-assessment,.dgs-css-assessment *)::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--asm-teal);
  flex-shrink: 0;
}

.dgs-asmres-title:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading) !important;
  font-weight: 800;
  font-size: clamp(1.65rem, 3.4vw, 2.3rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: var(--asm-navy);
  margin: 0 0 0.75rem !important;
}

.dgs-asmres-dek:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7 !important;
  color: var(--asm-slate);
  max-width: 60ch;
  margin: 0 !important;
}

/* ─── 02 — Primary score ─── */
.dgs-asmres-score:where(.dgs-css-assessment,.dgs-css-assessment *) {
  text-align: center;
  padding: 2.25rem 0 2.5rem;
  margin-bottom: 3rem;
  border-top: 1px solid var(--asm-border-soft);
  border-bottom: 1px solid var(--asm-border-soft);
}

.dgs-asmres-score-num:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3.2rem, 7.5vw, 4.6rem);
  line-height: 1;
  color: var(--asm-amber);
  letter-spacing: -0.03em;
}

.dgs-asmres-score-num span:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-size: 0.34em;
  font-weight: 700;
  color: var(--asm-slate-soft);
}

.dgs-asmres-level-badge:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.15rem 0 1.35rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-sm, 3px);
  background: var(--asm-navy);
  color: #ffffff;
}

.dgs-asmres-level-num:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.dgs-asmres-level-name:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asm-teal);
}

.dgs-asmres-interp:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.75 !important;
  color: var(--asm-slate);
  max-width: 58ch;
  margin: 0 auto !important;
}

/* ─── Shared section label ─── */
.dgs-asmres-section:where(.dgs-css-assessment,.dgs-css-assessment *) {
  margin-bottom: 3.25rem;
}

.dgs-asmres-section-label:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--asm-navy);
  margin: 0 0 1.5rem;
}

.dgs-asmres-section-label:where(.dgs-css-assessment,.dgs-css-assessment *)::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--asm-teal);
  flex-shrink: 0;
}

/* ─── 03 — Maturity model: five-step ascending staircase ───
   Same fill formula as the Methodology page's Business Maturity
   Model (dgs-methodology.css .dgs-mat-card), so a visitor who's seen
   that page recognizes this instantly as the same model. ─────── */
.dgs-asmres-mat-track:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.75rem;
}

@media (min-width: 820px) {
  .dgs-asmres-mat-track:where(.dgs-css-assessment,.dgs-css-assessment *) {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.6rem;
  }
}

.dgs-asmres-mat-step:where(.dgs-css-assessment,.dgs-css-assessment *) {
  --mat-fill: #E7EBEF;
  --mat-ink: var(--asm-navy);
  position: relative;
  flex: 1;
  background: var(--mat-fill);
  border-radius: var(--radius-md, 4px) var(--radius-md, 4px) 0 0;
  padding: 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

@media (min-width: 820px) {
  .dgs-asmres-mat-step:where(.dgs-css-assessment,.dgs-css-assessment *) {
    min-width: 0;
  }

  .dgs-asmres-mat-step[data-level="1"]:where(.dgs-css-assessment,.dgs-css-assessment *) { min-height: 5rem; }
  .dgs-asmres-mat-step[data-level="2"]:where(.dgs-css-assessment,.dgs-css-assessment *) { min-height: 6.1rem; }
  .dgs-asmres-mat-step[data-level="3"]:where(.dgs-css-assessment,.dgs-css-assessment *) { min-height: 7.2rem; }
  .dgs-asmres-mat-step[data-level="4"]:where(.dgs-css-assessment,.dgs-css-assessment *) { min-height: 8.3rem; }
  .dgs-asmres-mat-step[data-level="5"]:where(.dgs-css-assessment,.dgs-css-assessment *) { min-height: 9.4rem; }
}

.dgs-asmres-mat-step[data-level="1"]:where(.dgs-css-assessment,.dgs-css-assessment *) { --mat-fill: color-mix(in srgb, var(--dgs-navy) 6%, white 94%); }
.dgs-asmres-mat-step[data-level="2"]:where(.dgs-css-assessment,.dgs-css-assessment *) { --mat-fill: color-mix(in srgb, var(--dgs-teal) 22%, white 78%); }
.dgs-asmres-mat-step[data-level="3"]:where(.dgs-css-assessment,.dgs-css-assessment *) { --mat-fill: var(--dgs-teal); --mat-ink: #ffffff; }
.dgs-asmres-mat-step[data-level="4"]:where(.dgs-css-assessment,.dgs-css-assessment *) { --mat-fill: color-mix(in srgb, var(--dgs-teal) 55%, var(--dgs-blue) 45%); --mat-ink: #ffffff; }
.dgs-asmres-mat-step[data-level="5"]:where(.dgs-css-assessment,.dgs-css-assessment *) { --mat-fill: var(--dgs-navy); --mat-ink: #ffffff; }

.dgs-asmres-mat-code:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--mat-ink);
  opacity: 0.85;
}

.dgs-asmres-mat-name:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--mat-ink);
}

/* Desktop-only: the outline ring is the "current" affordance for the
   staircase. Kept out of the base rule (and out of the mobile query
   below) on purpose, it must never leak into the mobile row layout,
   which has its own tint+border-left affordance instead. */
@media (min-width: 820px) {
  .dgs-asmres-mat-step.is-current:where(.dgs-css-assessment,.dgs-css-assessment *) {
    outline: 2px solid var(--asm-navy);
    outline-offset: 3px;
  }
}

.dgs-asmres-mat-tag:where(.dgs-css-assessment,.dgs-css-assessment *) {
  position: absolute;
  top: -1.6rem;
  left: 0;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--asm-navy);
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-xs, 2px);
  white-space: nowrap;
}

@media (max-width: 819px) {
  .dgs-asmres-mat-step:where(.dgs-css-assessment,.dgs-css-assessment *) {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    border-radius: var(--radius-md, 4px);
    border-left: 5px solid var(--mat-fill);
    background: #ffffff;
    padding: 0.85rem 1.1rem;
  }

  .dgs-asmres-mat-step[data-level]:where(.dgs-css-assessment,.dgs-css-assessment *) { min-height: 0; }
  .dgs-asmres-mat-code:where(.dgs-css-assessment,.dgs-css-assessment *),
  .dgs-asmres-mat-name:where(.dgs-css-assessment,.dgs-css-assessment *) { color: var(--asm-navy); opacity: 1; }
  .dgs-asmres-mat-code:where(.dgs-css-assessment,.dgs-css-assessment *) { color: var(--dgs-teal); }

  .dgs-asmres-mat-step.is-current:where(.dgs-css-assessment,.dgs-css-assessment *) {
    border-left-color: var(--asm-navy);
    background: color-mix(in srgb, var(--asm-navy) 5%, white);
  }

  .dgs-asmres-mat-tag:where(.dgs-css-assessment,.dgs-css-assessment *) {
    position: static;
    top: auto;
    left: auto;
    /* The tag markup is emitted before the code/name spans (so it can
       be absolutely positioned above the step on desktop). In this
       row layout it needs to render AFTER them instead, flush right,
       or the auto margin below collapses all the row's free space in
       front of it, leaving a large dead gap before the badge. */
    order: 1;
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* ─── 04 — Readiness framework: connected dimension row ─── */
.dgs-asmres-dims:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}

.dgs-asmres-dim:where(.dgs-css-assessment,.dgs-css-assessment *) {
  position: relative;
  flex: 1 1 140px;
  background: #ffffff;
  border: 1px solid var(--asm-border);
  border-top: 3px solid var(--asmres-blue);
  border-radius: var(--radius-md, 4px);
  padding: 1.1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dgs-asmres-dim-name:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asm-slate-soft);
}

.dgs-asmres-dim-score:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--asm-navy);
  letter-spacing: -0.02em;
}

.dgs-asmres-dim-meter:where(.dgs-css-assessment,.dgs-css-assessment *) {
  height: 4px;
  border-radius: var(--radius-xs, 2px);
  background: var(--asm-border-soft);
  overflow: hidden;
}

.dgs-asmres-dim-meter span:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: block;
  height: 100%;
  background: var(--dgs-teal);
}

.dgs-asmres-dim.is-weakest .dgs-asmres-dim-meter span:where(.dgs-css-assessment,.dgs-css-assessment *) {
  background: var(--asmres-blue);
}

.dgs-asmres-dim.is-weakest:where(.dgs-css-assessment,.dgs-css-assessment *) {
  border-top-color: var(--asmres-blue);
}

.dgs-asmres-dim-flag:where(.dgs-css-assessment,.dgs-css-assessment *) {
  position: absolute;
  top: -0.6rem;
  right: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--asmres-blue);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-xs, 2px);
}

.dgs-asmres-dim-arrow:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: none;
  align-items: center;
  flex: 0 0 auto;
  color: var(--asm-border);
}

.dgs-asmres-dim-arrow svg:where(.dgs-css-assessment,.dgs-css-assessment *) {
  width: 16px;
  height: 16px;
}

@media (min-width: 820px) {
  .dgs-asmres-dim-arrow:where(.dgs-css-assessment,.dgs-css-assessment *) {
    display: flex;
  }
}

@media (max-width: 819px) {
  .dgs-asmres-dims:where(.dgs-css-assessment,.dgs-css-assessment *) {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .dgs-asmres-dim:where(.dgs-css-assessment,.dgs-css-assessment *) {
    /* The desktop rule sets `flex: 1 1 140px` as a min column WIDTH
       for the horizontal row layout. .dgs-asmres-dims switches to
       flex-direction:column here, which flips the main axis to
       vertical, so that same 140px basis silently became a forced
       min-HEIGHT instead, ballooning every card to 140px regardless
       of its actual (much shorter) content. Reset it explicitly. */
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    border-top: none;
    border-left: 3px solid var(--asmres-blue);
    padding: 0.9rem 1.1rem;
  }

  .dgs-asmres-dim-name:where(.dgs-css-assessment,.dgs-css-assessment *) { flex: 1 1 auto; }
  .dgs-asmres-dim-meter:where(.dgs-css-assessment,.dgs-css-assessment *) { flex: 1 1 90px; }
  .dgs-asmres-dim-flag:where(.dgs-css-assessment,.dgs-css-assessment *) { top: 0.5rem; right: 0.5rem; }
}

/* ─── 05 — Strengths vs gaps ─── */
.dgs-asmres-sg:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .dgs-asmres-sg:where(.dgs-css-assessment,.dgs-css-assessment *) {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

.dgs-asmres-sg-col h3:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  font-size: 0.92rem !important;
  letter-spacing: 0.02em;
  color: var(--asm-navy);
  margin: 0 0 1.1rem !important;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--dgs-teal);
}

.dgs-asmres-sg-col--gap h3:where(.dgs-css-assessment,.dgs-css-assessment *) {
  border-bottom-color: var(--asmres-blue);
}

.dgs-asmres-sg-item:where(.dgs-css-assessment,.dgs-css-assessment *) {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--asm-border-soft);
}

.dgs-asmres-sg-item:last-child:where(.dgs-css-assessment,.dgs-css-assessment *) {
  border-bottom: none;
}

.dgs-asmres-sg-dim:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dgs-teal);
  margin-bottom: 0.3rem;
}

.dgs-asmres-sg-col--gap .dgs-asmres-sg-dim:where(.dgs-css-assessment,.dgs-css-assessment *) {
  color: var(--asmres-blue);
}

.dgs-asmres-sg-item p:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55 !important;
  color: var(--asm-slate);
  margin: 0 !important;
}

/* ─── 06 — Priorities: numbered consulting-style list ─── */
.dgs-asmres-priorities:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  flex-direction: column;
}

.dgs-asmres-priority:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--asm-border-soft);
}

.dgs-asmres-priority:first-child:where(.dgs-css-assessment,.dgs-css-assessment *) {
  padding-top: 0;
}

.dgs-asmres-priority:last-child:where(.dgs-css-assessment,.dgs-css-assessment *) {
  border-bottom: none;
  padding-bottom: 0;
}

.dgs-asmres-priority-num:where(.dgs-css-assessment,.dgs-css-assessment *) {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--asm-border);
  min-width: 2rem;
}

.dgs-asmres-priority-title:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  font-size: 1rem !important;
  color: var(--asm-navy);
  margin: 0 0 0.35rem !important;
}

.dgs-asmres-priority-desc:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6 !important;
  color: var(--asm-slate);
  margin: 0 !important;
}

/* ─── Recommended solutions: compact link row, not a card grid ─── */
.dgs-asmres-solutions:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
}

/* The link itself is .dgs-promise-link (dgs-common.css) — same
   component as "Read More" / "Apply for Position" on careers.html —
   so color, underline and hover behavior all come from there. Default
   navy text with a hover-only underline was easy to miss against this
   much whitespace; the shared teal component reads as a clear CTA. */
.dgs-asmres-solution-link:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-size: 0.9rem;
}

/* ─── 07 — Next maturity step ───
   Mobile: current state -> down arrow -> next state, stacked, one
   column, matching the roadmap reading order. Desktop (>=640px):
   the same three pieces sit in a row with a right-pointing arrow. */
.dgs-asmres-next:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  background: var(--asm-mist);
  border-radius: var(--radius-lg, 6px);
  padding: 1.5rem 1.5rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .dgs-asmres-next:where(.dgs-css-assessment,.dgs-css-assessment *) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
  }
}

.dgs-asmres-next-state:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

@media (min-width: 640px) {
  .dgs-asmres-next-state:where(.dgs-css-assessment,.dgs-css-assessment *) {
    align-items: flex-start;
  }
}

.dgs-asmres-next-state span:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--asm-slate-soft);
}

.dgs-asmres-next-state strong:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--asm-navy);
}

.dgs-asmres-next-state--target strong:where(.dgs-css-assessment,.dgs-css-assessment *) {
  color: var(--dgs-teal);
}

.dgs-asmres-next-arrow:where(.dgs-css-assessment,.dgs-css-assessment *) {
  color: var(--asm-slate-soft);
}

.dgs-asmres-next-arrow svg:where(.dgs-css-assessment,.dgs-css-assessment *) {
  width: 20px;
  height: 20px;
}

@media (min-width: 640px) {
  .dgs-asmres-next-arrow:where(.dgs-css-assessment,.dgs-css-assessment *) {
    transform: rotate(-90deg);
  }
}

.dgs-asmres-next-copy:where(.dgs-css-assessment,.dgs-css-assessment *) {
  flex: 1 1 100%;
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.6 !important;
  color: var(--asm-slate);
  margin: 0 !important;
}

.dgs-asmres-next.is-maxed .dgs-asmres-next-state--target:where(.dgs-css-assessment,.dgs-css-assessment *),
.dgs-asmres-next.is-maxed .dgs-asmres-next-arrow:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: none;
}

/* ─── Bridge CTA ─── */
.dgs-asm-bridge:where(.dgs-css-assessment,.dgs-css-assessment *) {
  background: var(--asm-navy);
  border-left: 3px solid var(--asm-teal);
  border-radius: var(--radius-md, 4px);
  padding: 1.9rem 2rem;
  text-align: center;
}

.dgs-asmres-cta-kicker:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--asm-teal);
  margin-bottom: 0.75rem;
}

.dgs-asm-bridge p:where(.dgs-css-assessment,.dgs-css-assessment *) {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #ffffff;
  margin: 0 0 1.25rem;
}

.dgs-asm-restart:where(.dgs-css-assessment,.dgs-css-assessment *) {
  display: block;
  text-align: center;
  font-family: var(--font-body) !important;
  font-size: 0.85rem;
  color: var(--asm-slate-soft);
  text-decoration: underline;
  text-decoration-color: var(--asm-border);
  margin: 1.75rem auto 0;
  background: none;
  border: none;
  cursor: pointer;
}

.dgs-asm-restart:hover:where(.dgs-css-assessment,.dgs-css-assessment *) {
  color: var(--asm-navy);
}

/* ─── Mobile: keep tiles/type from cramping or overflowing ─── */
@media (max-width: 480px) {
  .dgs-asm:where(.dgs-css-assessment,.dgs-css-assessment *) {
    padding: 3.5rem 1rem 4.5rem;
  }

  .dgs-asm-scale:where(.dgs-css-assessment,.dgs-css-assessment *) {
    gap: 0.4rem;
  }

  .dgs-asm-scale-btn:where(.dgs-css-assessment,.dgs-css-assessment *) {
    max-width: none;
    font-size: 0.95rem;
  }

  .dgs-asm-q-meta:where(.dgs-css-assessment,.dgs-css-assessment *) {
    gap: 0.5rem;
  }

  .dgs-asm-btn:where(.dgs-css-assessment,.dgs-css-assessment *) {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Extra-narrow phones (320-360px): the 5-tile scale row and
   card padding both need a bit more room to give here to keep
   the tap targets comfortable and avoid any horizontal crowding. */
@media (max-width: 360px) {
  .dgs-asm-card:where(.dgs-css-assessment,.dgs-css-assessment *) {
    padding: 1.75rem 1rem 1.6rem;
  }

  .dgs-asm-scale:where(.dgs-css-assessment,.dgs-css-assessment *) {
    gap: 0.3rem;
  }

  .dgs-asm-scale-btn:where(.dgs-css-assessment,.dgs-css-assessment *) {
    font-size: 0.85rem;
  }

  .dgs-asm-q-text:where(.dgs-css-assessment,.dgs-css-assessment *) {
    font-size: 1.3rem;
  }
}

/* ============================================================
   RESULTS — mobile tuning. The section-by-section rules above
   already reflow each block to a single column below 820px/640px;
   this pass just tightens the vertical rhythm and horizontal
   padding so the report doesn't feel like a desktop layout that
   got squeezed, on phones from ~390px down to 320px. ============ */
@media (max-width: 640px) {
  .dgs-asmres-head:where(.dgs-css-assessment,.dgs-css-assessment *) {
    margin-bottom: 2rem;
  }

  .dgs-asmres-score:where(.dgs-css-assessment,.dgs-css-assessment *) {
    padding: 1.75rem 0 2rem;
    margin-bottom: 2.25rem;
  }

  .dgs-asmres-level-badge:where(.dgs-css-assessment,.dgs-css-assessment *) {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.15rem;
    text-align: center;
  }

  .dgs-asmres-section:where(.dgs-css-assessment,.dgs-css-assessment *) {
    margin-bottom: 2.5rem;
  }

  .dgs-asmres-section-label:where(.dgs-css-assessment,.dgs-css-assessment *) {
    margin-bottom: 1.15rem;
  }

  .dgs-asmres-priority:where(.dgs-css-assessment,.dgs-css-assessment *) {
    gap: 0.9rem;
    padding: 1rem 0;
  }

  .dgs-asmres-solutions:where(.dgs-css-assessment,.dgs-css-assessment *) {
    flex-direction: column;
    gap: 0.85rem;
  }

  .dgs-asmres-cta:where(.dgs-css-assessment,.dgs-css-assessment *) {
    padding: 1.6rem 1.5rem;
  }
}

@media (max-width: 360px) {
  .dgs-asmres-mat-step:where(.dgs-css-assessment,.dgs-css-assessment *),
  .dgs-asmres-dim:where(.dgs-css-assessment,.dgs-css-assessment *) {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .dgs-asmres-sg-item p:where(.dgs-css-assessment,.dgs-css-assessment *),
  .dgs-asmres-priority-desc:where(.dgs-css-assessment,.dgs-css-assessment *),
  .dgs-asmres-next-copy:where(.dgs-css-assessment,.dgs-css-assessment *) {
    font-size: 0.86rem;
  }
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-07e6d16ec2:where(.dgs-css-assessment,.dgs-css-assessment *) {
  --ga-cat: var(--ga-teal) !important;
}


/* ============================================================
   C11. INDUSTRIES  (scope: .dgs-css-industries)
   Formerly css/dgs-industries.css. Used by:
     industries.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — INDUSTRIES PAGE-SPECIFIC STYLES
   Load order: dgs-common.css FIRST, then this file.
   ============================================================ */

#dgs-industries-hero:where(.dgs-css-industries,.dgs-css-industries *) {
  padding-top: 9rem;
  padding-bottom: 5rem;
  text-align: center;
  background: var(--bg-deep-navy);
  position: relative;
}

/* This page's hero/CTA photos inherited the site-wide tightened feather,
   but read harsh here — restore a wider fade back toward navy. */
#dgs-industries-hero .dgs-hero-duotone:where(.dgs-css-industries,.dgs-css-industries *) {
  mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 35%, transparent 80%);
}

#dgs-industries-cta .dgs-sol-final-bg:where(.dgs-css-industries,.dgs-css-industries *) {
  opacity: 0.18;
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black 40%, transparent 78%);
}

/* Selector Layout: industry nav (sticky sidebar at desktop) + content.
   Below 1024px the nav stays the original card-grid picker sitting above
   the content, full width. At 1024px+ it collapses into a slim sticky
   left rail so the picker and the pane you're reading sit side by side —
   no more scrolling back up through a wall of buttons to switch sectors. */
.dgs-selector-layout:where(.dgs-css-industries,.dgs-css-industries *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .dgs-selector-layout:where(.dgs-css-industries,.dgs-css-industries *) {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3rem;
  }
}

/* Solution Selector Tab Bar */
.dgs-selector-tabs:where(.dgs-css-industries,.dgs-css-industries *) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

@media (min-width: 600px) {
  .dgs-selector-tabs:where(.dgs-css-industries,.dgs-css-industries *) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 780px) {
  .dgs-selector-tabs:where(.dgs-css-industries,.dgs-css-industries *) {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .dgs-selector-tabs:where(.dgs-css-industries,.dgs-css-industries *) {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: sticky;
    top: 8.75rem;
  }
}

.dgs-tab-btn:where(.dgs-css-industries,.dgs-css-industries *) {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-xl);
  padding: 1.1rem 1rem;
  color: #475569;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.25s var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.dgs-tab-btn:hover:where(.dgs-css-industries,.dgs-css-industries *) {
  background: #E2E8F0;
  border-color: #CBD5E1;
  color: #0F172A;
}

.dgs-tab-btn.is-active:where(.dgs-css-industries,.dgs-css-industries *) {
  background: #0F172A !important;
  border-color: #0F172A !important;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}

.dgs-tab-btn-icon:where(.dgs-css-industries,.dgs-css-industries *) {
  width: 20px;
  height: 20px;
  color: #64748B;
  transition: color 0.25s ease;
}

.dgs-tab-btn:hover .dgs-tab-btn-icon:where(.dgs-css-industries,.dgs-css-industries *) {
  color: #0F172A;
}

.dgs-tab-btn.is-active .dgs-tab-btn-icon:where(.dgs-css-industries,.dgs-css-industries *) {
  color: var(--action-teal, #00B39F) !important;
  opacity: 1;
}

@media (min-width: 1024px) {
  .dgs-tab-btn:where(.dgs-css-industries,.dgs-css-industries *) {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-lg);
  }

  .dgs-tab-btn-icon:where(.dgs-css-industries,.dgs-css-industries *) {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
}

/* Selector Content Display Pane */
.dgs-selector-panes:where(.dgs-css-industries,.dgs-css-industries *) {
  min-width: 0;
}

.dgs-selector-pane:where(.dgs-css-industries,.dgs-css-industries *) {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s var(--ease-out);
}

.dgs-selector-pane.is-active:where(.dgs-css-industries,.dgs-css-industries *) {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Header inside Pane */
.dgs-industry-view-head:where(.dgs-css-industries,.dgs-css-industries *) {
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.dgs-industry-view-head h2:where(.dgs-css-industries,.dgs-css-industries *) {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.8vw, 1.75rem) !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.015em;
}

/* 3-Column Table Grid Container (Mist Base) */
.dgs-industry-view-grid:where(.dgs-css-industries,.dgs-css-industries *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0.75rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.dgs-industry-view-grid > div:last-child:where(.dgs-css-industries,.dgs-css-industries *) {
  display: contents;
}

@media (min-width: 1024px) {
  .dgs-industry-view-grid:where(.dgs-css-industries,.dgs-css-industries *) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* Columns 1 & 2: Light Mist Columns */
.dgs-problems-box:where(.dgs-css-industries,.dgs-css-industries *),
.dgs-rec-box:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.75rem 1.6rem;
  background: #F8FAFC;
}

.dgs-problems-box:where(.dgs-css-industries,.dgs-css-industries *) {
  border-top: none;
}

@media (min-width: 1024px) {
  .dgs-rec-box:where(.dgs-css-industries,.dgs-css-industries *) {
    border-top: none;
    border-left: 1px solid #E2E8F0;
  }
}

/* Column 3: Highlighted Navy Card (Image 2 Inspired Pop-Out) */
.dgs-results-box:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.75rem 1.6rem;
  background: #0F172A !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 1024px) {
  .dgs-results-box:where(.dgs-css-industries,.dgs-css-industries *) {
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.22);
    z-index: 3;
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px;
  }
}

/* Remove legacy connector mark diamonds */
.dgs-rec-box:where(.dgs-css-industries,.dgs-css-industries *)::before,
.dgs-results-box:where(.dgs-css-industries,.dgs-css-industries *)::before {
  display: none !important;
}

/* Headers inside Table Columns */
.dgs-problems-box h4:where(.dgs-css-industries,.dgs-css-industries *),
.dgs-rec-box h4:where(.dgs-css-industries,.dgs-css-industries *) {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F172A !important;
  margin: 0 0 1.1rem 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.dgs-results-box h4:where(.dgs-css-industries,.dgs-css-industries *) {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: #FFFFFF !important;
  margin: 0 0 1.1rem 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Badge Pseudo Elements */
.dgs-problems-box h4 svg:where(.dgs-css-industries,.dgs-css-industries *),
.dgs-results-box h4 svg:where(.dgs-css-industries,.dgs-css-industries *) {
  display: none;
}

.dgs-problems-box h4:where(.dgs-css-industries,.dgs-css-industries *)::before,
.dgs-rec-box h4:where(.dgs-css-industries,.dgs-css-industries *)::before,
.dgs-results-box h4:where(.dgs-css-industries,.dgs-css-industries *)::before {
  content: "";
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--action-teal, #00B39F);
  background-color: rgba(0, 179, 159, 0.1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.dgs-problems-box h4:where(.dgs-css-industries,.dgs-css-industries *)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B39F' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}

.dgs-rec-box h4:where(.dgs-css-industries,.dgs-css-industries *)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B39F' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>");
}

.dgs-results-box h4:where(.dgs-css-industries,.dgs-css-industries *)::before {
  background-color: rgba(0, 179, 159, 0.2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B39F' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* Lists inside Columns */
.dgs-problems-list:where(.dgs-css-industries,.dgs-css-industries *),
.dgs-results-list:where(.dgs-css-industries,.dgs-css-industries *) {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dgs-problems-list li:where(.dgs-css-industries,.dgs-css-industries *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #0F172A !important;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.dgs-results-list li:where(.dgs-css-industries,.dgs-css-industries *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #F8FAFC !important;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.dgs-problems-list li:where(.dgs-css-industries,.dgs-css-industries *)::before {
  content: "";
  display: inline-flex;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #EF4444;
  flex-shrink: 0;
  margin-top: 0.5rem;
}

.dgs-results-list li:where(.dgs-css-industries,.dgs-css-industries *)::before {
  content: "";
  display: inline-flex;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--action-teal, #00B39F);
  box-shadow: 0 0 6px rgba(0, 179, 159, 0.6);
  flex-shrink: 0;
  margin-top: 0.5rem;
}

/* Solution Recommendation Link Cards */
.dgs-rec-steps:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dgs-rec-step-link:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px;
  color: #0F172A !important;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.25s var(--ease-out);
}

.dgs-rec-step-link:hover:where(.dgs-css-industries,.dgs-css-industries *) {
  background: #F0FDF4 !important;
  border-color: var(--action-teal, #00B39F) !important;
  color: #0F172A !important;
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(0, 179, 159, 0.12);
}

.dgs-rec-step-link svg:where(.dgs-css-industries,.dgs-css-industries *) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--action-teal, #00B39F) !important;
  transition: transform 0.25s ease;
}

.dgs-rec-step-link:hover svg:where(.dgs-css-industries,.dgs-css-industries *) {
  transform: translateX(4px);
}

/* AEO Snippet box inside Industry Selector */

/* ============================================================
   SERVICE HERO BASE (self-contained)
   Migrated here so this page needs only dgs-common.css + this
   sheet. Common already provides the centered grid, content, h1,
   sub, actions, badge, scrim, duotone, value-pills and title-main;
   only the dark base shell and the decorative overlays lived in the
   old service-detail sheet, so they are re-declared below.
   ============================================================ */

.dgs-service-hero:where(.dgs-css-industries,.dgs-css-industries *) {
  padding: 7rem 0 0;
  background-color: #0A1F33 !important;
  color: var(--text-white);
  position: relative;
  overflow: visible;
  text-align: center;
}

@media (min-width: 1024px) {
  .dgs-service-hero:where(.dgs-css-industries,.dgs-css-industries *) {
    padding: 9rem 0 0;
  }
}

/* This page's hero has no photo below the copy, so give the content
   block the bottom breathing room the photo normally provides. */
.dgs-service-hero .dgs-hero-content:where(.dgs-css-industries,.dgs-css-industries *) {
  padding-bottom: 3.5rem;
}

/* Depth: soft spotlight (mesh grid overlay removed) */
.dgs-service-hero .dgs-hero-mesh-overlay:where(.dgs-css-industries,.dgs-css-industries *) {
  display: none !important;
}

.dgs-service-hero .dgs-hero-spotlight:where(.dgs-css-industries,.dgs-css-industries *) {
  position: absolute;
  left: 50%;
  top: 0;
  width: 80vw;
  height: 60vh;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(0, 179, 159, 0.14) 0%, rgba(45, 127, 249, 0.06) 50%, transparent 80%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -20%);
}

/* ============================================================
   PREMIUM LIGHT GRID (migrated from industries.html inline \3c style>)
   ============================================================ */
/* Premium Light Grid for Industries Landing Page - Styled like Image 2 */
.dgs-industry-grid:where(.dgs-css-industries,.dgs-css-industries *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
  margin-top: 0;
  margin-bottom: 2rem;
}
@media (min-width: 600px) {
  .dgs-industry-grid:where(.dgs-css-industries,.dgs-css-industries *) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .dgs-industry-grid:where(.dgs-css-industries,.dgs-css-industries *) {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  .dgs-industry-grid:where(.dgs-css-industries,.dgs-css-industries *) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dgs-industry-select-card:where(.dgs-css-industries,.dgs-css-industries *) {
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  height: 100%;
  transition: transform 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dgs-industry-select-card:hover:where(.dgs-css-industries,.dgs-css-industries *) {
  transform: translateY(-5px);
}

.dgs-ind-icon-box:where(.dgs-css-industries,.dgs-css-industries *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: linear-gradient(145deg, #e3f7f5 0%, #e7f2fe 100%);
  border: 1px solid rgba(0, 179, 159, 0.22);
  color: #0A1F33;
  margin-bottom: 1.15rem;
  transition: all 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.dgs-industry-select-card:hover .dgs-ind-icon-box:where(.dgs-css-industries,.dgs-css-industries *) {
  background: var(--action-teal, #00b39f);
  color: #ffffff;
  border-color: var(--action-teal, #00b39f);
  box-shadow: 0 6px 18px rgba(0, 179, 159, 0.28);
}

.dgs-ind-icon-box svg:where(.dgs-css-industries,.dgs-css-industries *) {
  width: 28px;
  height: 28px;
}

.dgs-industry-select-card h3.dgs-ind-title:where(.dgs-css-industries,.dgs-css-industries *) {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #0A1F33;
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
  transition: color 0.3s ease;
}
.dgs-industry-select-card:hover h3.dgs-ind-title:where(.dgs-css-industries,.dgs-css-industries *) {
  color: var(--action-teal, #00b39f);
}

.dgs-industry-select-card p.dgs-ind-desc:where(.dgs-css-industries,.dgs-css-industries *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: #334155;
  margin: 0 0 1.1rem 0;
}

.dgs-ind-link-row:where(.dgs-css-industries,.dgs-css-industries *) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(10, 31, 51, 0.09);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0A1F33;
  transition: all 0.3s ease;
}
.dgs-industry-select-card:hover .dgs-ind-link-row:where(.dgs-css-industries,.dgs-css-industries *) {
  color: var(--action-teal, #00b39f);
  border-top-color: rgba(0, 179, 159, 0.35);
  padding-left: 0.2rem;
}
.dgs-ind-link-row svg:where(.dgs-css-industries,.dgs-css-industries *) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.dgs-industry-select-card:hover .dgs-ind-link-row svg:where(.dgs-css-industries,.dgs-css-industries *) {
  transform: translateX(5px);
}

/* Icons inside the Problems / Expected Results box headings (dgs-industries.css
   defines the h4 flex+gap, but not an icon size) */
.dgs-problems-box h4 svg:where(.dgs-css-industries,.dgs-css-industries *),
.dgs-results-box h4 svg:where(.dgs-css-industries,.dgs-css-industries *) {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dgs-industry-view-cta:where(.dgs-css-industries,.dgs-css-industries *) {
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}

/* ============================================================
   RESULTS & CASES: CLIENT SUCCESS LIBRARY
   Self-contained copy of the growth-hub "Proof" card system
   (light variant) plus filter controls and a format badge.
   ============================================================ */
.dgs-case-filters:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1.75rem;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #E2E8F0;
}

.dgs-case-filter-field:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dgs-case-filter-field label:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dgs-case-filter-field select:where(.dgs-css-industries,.dgs-css-industries *) {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: #0A1F33;
  background: #F8FAFC url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23334155" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 0.85rem center;
  background-size: 14px;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-lg);
  padding: 0.7rem 2.4rem 0.7rem 1rem;
  min-width: 220px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.dgs-case-filter-field select:hover:where(.dgs-css-industries,.dgs-css-industries *),
.dgs-case-filter-field select:focus:where(.dgs-css-industries,.dgs-css-industries *) {
  border-color: var(--action-teal);
  outline: none;
}

.dgs-insp-grid:where(.dgs-css-industries,.dgs-css-industries *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}
@media (min-width: 992px) {
  .dgs-insp-grid:where(.dgs-css-industries,.dgs-css-industries *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dgs-insp-card:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(10, 31, 51, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: 0 4px 20px rgba(10, 31, 51, 0.05);
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
@media (min-width: 480px) {
  .dgs-insp-card:where(.dgs-css-industries,.dgs-css-industries *) {
    padding: 2rem;
  }
}
.dgs-insp-card:hover:where(.dgs-css-industries,.dgs-css-industries *) {
  border-color: var(--action-teal);
  box-shadow: 0 16px 36px rgba(10, 31, 51, 0.12);
  transform: translateY(-4px);
}

.dgs-insp-media:where(.dgs-css-industries,.dgs-css-industries *) {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(10, 31, 51, 0.08);
  background: rgba(10, 31, 51, 0.02);
}
.dgs-insp-media img:where(.dgs-css-industries,.dgs-css-industries *) {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.dgs-insp-card:hover .dgs-insp-media img:where(.dgs-css-industries,.dgs-css-industries *) {
  transform: scale(1.04);
}

.dgs-insp-card .dgs-insp-meta:where(.dgs-css-industries,.dgs-css-industries *) {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--action-teal);
  margin-bottom: 0.85rem;
}

h3.dgs-insp-headline:where(.dgs-css-industries,.dgs-css-industries *) {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.1vw, 1.7rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0A1F33;
  margin: 0 0 1.25rem 0;
}

.dgs-insp-val:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #334155;
  margin: 0 0 1.6rem 0;
}

.dgs-insp-val strong:where(.dgs-css-industries,.dgs-css-industries *) {
  color: #0A1F33;
  font-weight: 700;
  margin-right: 0.25rem;
}

.dgs-insp-metrics:where(.dgs-css-industries,.dgs-css-industries *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  margin-top: auto;
}

.dgs-insp-metric:where(.dgs-css-industries,.dgs-css-industries *) {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(10, 31, 51, 0.12);
}

.dgs-insp-figure:where(.dgs-css-industries,.dgs-css-industries *) {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0A1F33;
  margin-bottom: 0.5rem;
}

.dgs-insp-figure .dgs-insp-unit:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 0.42em;
  font-weight: 700;
  color: var(--action-teal);
  margin-left: 0.15em;
}

.dgs-insp-caption:where(.dgs-css-industries,.dgs-css-industries *) {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #475569;
  font-weight: 500;
}

.dgs-insp-card .dgs-case-cta:where(.dgs-css-industries,.dgs-css-industries *) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--action-teal);
  text-decoration: none;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(10, 31, 51, 0.08);
}
.dgs-case-cta svg:where(.dgs-css-industries,.dgs-css-industries *) {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}
.dgs-case-cta:hover svg:where(.dgs-css-industries,.dgs-css-industries *) {
  transform: translateX(4px);
}

.dgs-case-empty:where(.dgs-css-industries,.dgs-css-industries *) {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: var(--radius-lg);
}
.dgs-case-empty p:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 1rem;
  color: #475569;
  margin: 0 auto;
}
.dgs-case-empty a:where(.dgs-css-industries,.dgs-css-industries *) {
  color: var(--action-teal);
  font-weight: 700;
}

.dgs-case-note:where(.dgs-css-industries,.dgs-css-industries *) {
  text-align: center !important;
  font-size: 0.85rem;
  color: #94A3B8;
  margin: 2.5rem auto 0 auto !important;
  display: block !important;
  width: 100% !important;
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-835ed1faef:where(.dgs-css-industries,.dgs-css-industries *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a9a62324f0181579a4ec017.png') !important;
}

.dgs-il-fc1acb5626:where(.dgs-css-industries,.dgs-css-industries *) {
  color: var(--action-teal) !important;
  -webkit-text-fill-color: var(--action-teal) !important;
}

.dgs-il-78c360413a:where(.dgs-css-industries,.dgs-css-industries *) {
  color: var(--action-teal) !important;
}

.dgs-il-1432561cbb:where(.dgs-css-industries,.dgs-css-industries *) {
  background: #ffffff !important;
  padding: 6rem 0 !important;
  width: 100% !important;
}

.dgs-il-f056bf2ebb:where(.dgs-css-industries,.dgs-css-industries *) {
  max-width: 780px !important;
  margin: 0 auto 3rem auto !important;
  text-align: center !important;
}

.dgs-il-2fe2ed9959:where(.dgs-css-industries,.dgs-css-industries *) {
  color: var(--action-teal) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}

.dgs-il-adb029d8cc:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #0A1F33 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
}

.dgs-il-6410d12245:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 1.1rem !important;
  color: #475569 !important;
  margin: 0 !important;
}

.dgs-il-7e6229a431:where(.dgs-css-industries,.dgs-css-industries *) {
  background: #FFFFFF !important;
  padding: 6rem 0 !important;
  width: 100% !important;
}

.dgs-il-42cf042a26:where(.dgs-css-industries,.dgs-css-industries *) {
  max-width: 860px !important;
  margin: 0 auto 3rem auto !important;
  text-align: center !important;
}

.dgs-il-e2cd20e675:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
}

.dgs-il-5995159710:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 1.1rem !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.dgs-il-69fee466c4:where(.dgs-css-industries,.dgs-css-industries *) {
  max-width: 960px !important;
  margin: 0 auto 3rem auto !important;
  text-align: center !important;
}

.dgs-il-a907e0edcf:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: clamp(2.6rem, 4.8vw, 3.8rem) !important;
  font-weight: 800 !important;
  color: #0A1F33 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
}

.dgs-il-86be899c1c:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 1.1rem !important;
  color: #475569 !important;
  margin: 0 auto !important;
}

.dgs-il-204b18f8ea:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.dgs-il-85056bada5:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.dgs-il-42acb60ee2:where(.dgs-css-industries,.dgs-css-industries *) {
  font-weight: 700 !important;
}

.dgs-il-c1f2ca9f09:where(.dgs-css-industries,.dgs-css-industries *) {
  font-weight: 700 !important;
  color: #475569 !important;
}

.dgs-il-f8baf1e56b:where(.dgs-css-industries,.dgs-css-industries *) {
  background:#FFF3F2 !important;
  color:#E11D48 !important;
}

.dgs-il-f78fef7cbb:where(.dgs-css-industries,.dgs-css-industries *) {
  background:#EEF2F6 !important;
}

.dgs-il-d87a15565f:where(.dgs-css-industries,.dgs-css-industries *) {
  border-color: #A7F3D0 !important;
  background: #ECFDF5 !important;
}

.dgs-il-64473c7e02:where(.dgs-css-industries,.dgs-css-industries *) {
  background:#D1FAE5 !important;
  color:#059669 !important;
}

.dgs-il-32c180204b:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.dgs-il-a0cc7e204f:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
}

.dgs-il-6d9d6fda77:where(.dgs-css-industries,.dgs-css-industries *) {
  display: flex !important;
  gap: 0.35rem !important;
}

.dgs-il-aebcffad81:where(.dgs-css-industries,.dgs-css-industries *) {
  font-weight: 700 !important;
  color: #0F172A !important;
}

.dgs-il-8af46a18d4:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  color: #64748B !important;
  text-transform: uppercase !important;
}

.dgs-il-0ce36ba172:where(.dgs-css-industries,.dgs-css-industries *) {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
}

.dgs-il-a5f279578d:where(.dgs-css-industries,.dgs-css-industries *) {
  padding: 0.1rem 0.35rem !important;
}

.dgs-il-c2bafe49ca:where(.dgs-css-industries,.dgs-css-industries *) {
  flex-shrink: 0 !important;
}

.dgs-il-1b38474da2:where(.dgs-css-industries,.dgs-css-industries *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a9a6237fac7854efe5b0192.png') !important;
}


/* ============================================================
   C12. INDUSTRIES-DETAIL  (scope: .dgs-css-industries-detail)
   Formerly css/dgs-industries-detail.css. Used by:
     industries/construction.html, industries/education.html, industries/financial-services.html
     industries/growing-smes.html, industries/healthcare.html, industries/hospitality.html
     industries/logistics.html, industries/outsourcing.html, industries/professional-services.html
     industries/real-estate.html, industries/recruitment.html, industries/retail.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — STANDALONE INDUSTRY DETAIL PAGE STYLES
   Custom made for the 12 sector sub-pages under /industries/
   ============================================================ */

/* ─── 1. HERO (Centered text + duotone background photo, matches solutions detail) ─── */

.dgs-service-hero:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  padding: 8rem 0 5rem;
  background-color: #0A1F33 !important;
  color: var(--text-white, #ffffff);
  position: relative;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

@media (min-width: 1024px) {
  .dgs-service-hero:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    padding: 10.5rem 0 6.5rem;
  }
}

@media (max-width: 768px) {
  .dgs-service-hero:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    padding: 8.5rem 0 4.5rem;
  }
}

/* Remove table grid mesh overlay per request */
.dgs-hero-mesh-overlay:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
.dgs-service-hero .dgs-hero-mesh-overlay:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: none !important;
}

/* Duotone background photo styling (renders the Unsplash image linked in HTML) */
.dgs-hero-duotone:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  mask-image: radial-gradient(ellipse 95% 100% at 50% 0%, black 50%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 95% 100% at 50% 0%, black 50%, transparent 92%);
}

.dgs-hero-duotone:where(.dgs-css-industries-detail,.dgs-css-industries-detail *)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--dgs-duotone-img);
  background-size: cover;
  background-position: center;
  filter: grayscale(0.85) contrast(1.2) brightness(0.85);
  opacity: 0.55;
}

.dgs-hero-duotone:where(.dgs-css-industries-detail,.dgs-css-industries-detail *)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0A1F33 0%, #0d5f70 55%, #00B39F 100%);
  mix-blend-mode: color;
  opacity: 0.85;
}

.dgs-hero-scrim:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 31, 51, 0.25) 0%, rgba(10, 31, 51, 0.5) 60%, #0A1F33 100%);
}

.dgs-service-hero .dgs-hero-spotlight:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  position: absolute;
  left: 50%;
  top: 0;
  width: 80vw;
  height: 60vh;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 50%, transparent 80%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -20%);
}

.dgs-service-hero > .dgs-container:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  position: relative;
  z-index: 5;
}

/* Centered hero content column */
.dgs-svc-hero-grid:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.dgs-service-hero .dgs-hero-content:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 3.5rem;
}

.dgs-service-hero h1:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 auto 1.5rem;
  max-width: 1140px;
  text-align: center;
}

.dgs-service-hero h1 .dgs-hero-title-main:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background: linear-gradient(to bottom, #ffffff 55%, #cfd8e3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.dgs-service-hero .dgs-hero-sub:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 0 auto;
  text-align: center;
}

.dgs-service-hero .dgs-hero-actions:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Breadcrumb (centered, on dark) */
.dgs-svc-breadcrumb:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2rem;
  position: relative;
  z-index: 5;
}

.dgs-svc-breadcrumb a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: rgba(255, 255, 255, 0.88);
  transition: color var(--duration-base, 0.3s) var(--ease-out, ease-out);
  text-decoration: none;
}

.dgs-svc-breadcrumb a:hover:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: var(--action-teal, #00b39f);
}

.dgs-svc-breadcrumb span[aria-hidden]:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: rgba(255, 255, 255, 0.25);
}

.dgs-svc-breadcrumb .dgs-svc-current:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #ffffff;
  font-weight: 600;
}

/* Smooth padding transition to problems section */
#dgs-ind-problems:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  padding-top: 5rem !important;
}

@media (min-width: 1024px) {
  #dgs-ind-problems:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    padding-top: 6.5rem !important;
  }
}

/* ─── SOLUTION HERO BADGE ─── */
.dgs-service-hero-badge:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1affeb; /* brighter teal for dark mode contrast, matches .dgs-pill--teal */
  background: rgba(0, 179, 159, 0.15);
  border: 1px solid rgba(0, 179, 159, 0.4);
  border-radius: var(--radius-full);
  padding: 0.45rem 0.95rem;
  margin-bottom: 1.5rem;
}

/* ─── BREADCRUMB ─── */
.dgs-svc-breadcrumb:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2rem;
  position: relative;
  z-index: 5;
}

.dgs-svc-breadcrumb a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.3s;
}

.dgs-svc-breadcrumb a:hover:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: var(--action-teal);
}

.dgs-svc-breadcrumb span[aria-hidden]:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: rgba(255, 255, 255, 0.25);
}

.dgs-svc-breadcrumb .dgs-svc-current:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #ffffff;
  font-weight: 600;
}

/* ─── CHALLENGES (PROBLEMS) SECTION ─── */
.dgs-challenge-grid:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 60rem;
  margin: 3.5rem auto 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .dgs-challenge-grid:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 4rem;
  }
}

.dgs-challenge-card:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.3s var(--ease-out, ease-out);
}

.dgs-challenge-card:hover:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  transform: translateY(-3px);
  background: none !important;
  border: none !important;
}

.dgs-challenge-card-icon:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(0, 179, 159, 0.16) 0%, rgba(45, 127, 249, 0.1) 100%);
  border: 1px solid rgba(0, 179, 159, 0.22);
  color: var(--action-teal, #00b39f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dgs-challenge-card-icon svg:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: 26px;
  height: 26px;
}

.dgs-challenge-card div:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dgs-challenge-card h3:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
.dgs-challenge-card div > p:first-child:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
.dgs-challenge-card p:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #0A1F33 !important;
  margin: 0;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.dgs-challenge-card div > p:nth-child(2):where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-dark-muted, #5a6e85) !important;
  margin-top: 0.4rem;
  line-height: 1.6;
}

/* Light card override reset */
.dgs-challenge-card--light:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.dgs-challenge-card--light p:first-child:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #0A1F33 !important;
}

.dgs-challenge-card--light p:nth-child(2):where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #5a6e85 !important;
}

/* ─── RECOMMENDED STACK (CHECKLIST) ─── */
.dgs-check-grid:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  margin-top: 3.5rem;
}

.dgs-check-item:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.dgs-check-item-icon:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 179, 159, 0.1);
  color: var(--action-teal);
  flex-shrink: 0;
}

.dgs-check-item-icon svg:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: 16px;
  height: 16px;
}

.dgs-check-item p:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* On light sections the checklist text goes dark for contrast */
.dgs-section--light .dgs-check-item p:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #334155;
}

/* Two-column checklist for wider recommended/results sections */

/* ─── AEO BLOCK ─── */

/* ─── AEO on a LIGHT section: one soft "mist" card holding the whole block.
   Heading spans the top; photo + answer copy sit side by side beneath it. ─── */

#dgs-ind-aeo .dgs-aeo-q:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-dark-primary);
  margin: 0 0 2rem;
}

#dgs-ind-aeo .dgs-aeo-a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--text-dark-muted);
  margin: 0;
}

/* Photo panel inside the mist card: soft framing, no heavy dark drop shadow */

/* ─── SECTION WITH PHOTO STRIPE ─── */

/* On light bg sections, the overlay should be lighter */

/* ─── AEO SECTION WITH PHOTO ─── */

/* ─── FINAL CTA — cinematic (matches the individual solution pages) ───
   Ported from `.dgs-sol-final-cta` in dgs-service-detail.css so the industry
   pages share the exact same final-CTA treatment (giant SCALE watermark +
   faded photo + breathing aurora + white-gradient heading with teal accent). */
.dgs-sol-final-cta:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: calc(var(--space-2xl, 6rem) * 1.05) 3.5rem;
  background: var(--bg-navy-darkest, #0A1F33) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

/* faded photo background */
.dgs-sol-final-bg:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  pointer-events: none;
}

/* SCALE watermark removed from industry detail pages */
.dgs-sol-final-cta:where(.dgs-css-industries-detail,.dgs-css-industries-detail *)::before {
  content: none;
}

/* breathing teal/blue aurora */
.dgs-sol-final-cta:where(.dgs-css-industries-detail,.dgs-css-industries-detail *)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 50vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 179, 159, 0.12) 0%,
    rgba(45, 127, 249, 0.12) 40%,
    transparent 70%);
  animation: dgs-sol-cta-breathe 8s ease-in-out infinite alternate;
}

/* lift real content above the decorative layers */
.dgs-sol-final-cta > *:not(.dgs-sol-final-bg):where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  position: relative;
  z-index: 2;
}

/* Heading: two clean lines + white gradient text-glow.
   The !important beats the global `.dgs-page h2` !important size in common. */
.dgs-sol-final-cta h2:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  max-width: 66rem;
  margin: 0 auto var(--space-md, 1.25rem);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
  line-height: 1.22;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.12));
}

/* keep the teal accent line solid (don't let the gradient clip swallow it) */
.dgs-sol-final-cta h2 .dgs-text-accent:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  -webkit-text-fill-color: var(--action-teal);
  filter: none;
}

.dgs-sol-final-cta p:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  max-width: 40rem;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

.dgs-sol-final-ctas:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

/* ─── CASE STUDIES (representative outcome cards) ─── */

.dgs-case-note:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  margin: 3.25rem auto 0 !important;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
  text-align: center;
}

/* On the light case-studies section the note needs dark text */
.dgs-section--light .dgs-case-note:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #5a6e85;
}

/* ============================================================
   SPLIT-WITH-MEDIA (Recommended / Expected Results sections)
   Content column + framed photo, so every section carries imagery.
   ============================================================ */

@media (min-width: 960px) {
  /* Reversed variant puts the photo on the left */
}

/* Softer framing when the split sits on a light section */

/* ─── DUAL COMPARISON CARD MATRIX (ON LIGHT SECTION BACKGROUND) ─── */
.dgs-ind-compare-wrapper:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 960px) {
  .dgs-ind-compare-wrapper:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* LEFT PANEL (RECOMMENDED SOLUTIONS) - LIGHT MIST BACKGROUND CARD */
.dgs-ind-compare-left:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-xl, 24px);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(10, 31, 51, 0.04);
}

.dgs-ind-compare-left .dgs-eyebrow:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: var(--action-teal, #00B39F) !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.dgs-ind-compare-left h2:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #0A1F33 !important; /* DARK NAVY HEADING ON MIST CARD */
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  margin: 0.5rem 0 2rem;
  letter-spacing: -0.02em;
}

/* LIST CONTAINER */
.dgs-ind-compare-list:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* LEFT ITEM ROW - PURE WHITE CHIP ON MIST CARD */
.dgs-ind-compare-left .dgs-ind-compare-item:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.35rem;
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 2px 8px rgba(10, 31, 51, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-ind-compare-left .dgs-ind-compare-item:hover:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background: #ffffff !important;
  border-color: rgba(0, 179, 159, 0.4) !important;
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(0, 179, 159, 0.1);
}

.dgs-ind-compare-left .dgs-ind-item-icon:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 179, 159, 0.1);
  border: 1px solid rgba(0, 179, 159, 0.25);
  color: var(--action-teal, #00B39F);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dgs-ind-compare-left .dgs-ind-item-icon svg:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: 16px;
  height: 16px;
}

.dgs-ind-compare-left .dgs-ind-item-title:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #0A1F33 !important; /* DARK NAVY TEXT FOR CRISP CONTRAST ON WHITE CHIP */
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

/* RIGHT ELEVATED PANEL (EXPECTED RESULTS) - DEEP NAVY CARD, GLOW REMOVED */
.dgs-ind-compare-right:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background: #0A1F33 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-xl, 24px);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 20px 45px rgba(10, 31, 51, 0.22);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* REMOVED GLOW BLOB ::before */

.dgs-ind-badge-glow:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--action-teal, #00B39F);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  box-shadow: none;
}

.dgs-ind-compare-right h2:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #ffffff !important;
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  margin: 0.85rem 0 2rem;
  letter-spacing: -0.02em;
}

/* HIGHLIGHTED RESULT ITEM CARDS IN RIGHT CARD */
.dgs-ind-compare-item--highlight:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.35rem;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-md, 14px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-ind-compare-item--highlight:hover:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(0, 179, 159, 0.4) !important;
  transform: translateX(4px);
}

.dgs-ind-item-icon--teal:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--action-teal, #00B39F);
  border: none;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dgs-ind-item-icon--teal svg:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: 16px;
  height: 16px;
}

.dgs-ind-compare-right .dgs-ind-item-title:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #ffffff !important;
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

/* ─── AEO BANNER (GRID LAYOUT WITH HORIZONTAL MARQUEE STACK) ─── */
.dgs-aeo-navy-banner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
#dgs-ind-aeo .dgs-aeo-navy-banner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
.dgs-section--light #dgs-ind-aeo .dgs-aeo-navy-banner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background: #0A1F33 !important;
  border-radius: var(--radius-xl, 24px);
  padding: clamp(2.25rem, 4vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 50px rgba(10, 31, 51, 0.35) !important;
  position: relative;
  overflow: hidden;
}

.dgs-aeo-navy-banner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *)::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  background: radial-gradient(circle at 100% 50%, rgba(0, 179, 159, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.dgs-aeo-banner-inner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  z-index: 1;
}

.dgs-aeo-text-side:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  flex: 1 1 52%;
  min-width: 0;
}

.dgs-aeo-navy-banner .dgs-aeo-q:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
#dgs-ind-aeo .dgs-aeo-q:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
.dgs-section--light #dgs-ind-aeo .dgs-aeo-q:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff !important;
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
}

.dgs-aeo-navy-banner .dgs-text-teal:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: var(--action-teal, #00B39F) !important;
}

.dgs-aeo-navy-banner .dgs-aeo-a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
#dgs-ind-aeo .dgs-aeo-a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
.dgs-section--light #dgs-ind-aeo .dgs-aeo-a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1.125rem;
  line-height: 1.75;
  color: #ffffff !important;
  opacity: 0.95;
  margin: 0;
}

/* ─── AEO ECOSYSTEM STACK (HORIZONTAL MARQUEE ABOVE HERO BADGE) ─── */
.dgs-aeo-ecosystem-stack:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  flex: 0 0 420px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 0;
}

.dgs-aeo-hmarquee-container:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  position: relative;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  display: flex;
  padding: 0.35rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.dgs-aeo-hmarquee-track:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: max-content;
  animation: dgs-aeo-hmarquee-scroll 24s linear infinite;
}

.dgs-aeo-hmarquee-container:hover .dgs-aeo-hmarquee-track:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  animation-play-state: paused;
}

@keyframes dgs-aeo-hmarquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Individual Tool Chip (Crisp, High-End Card) */
.dgs-ind-tool-chip:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 52px;
  padding: 0.65rem;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 2px 5px rgba(0, 0, 0, 0.1);
  user-select: none;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.dgs-ind-tool-chip:hover:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  transform: translateY(-3px) scale(1.06);
  border-color: rgba(0, 179, 159, 0.6);
  box-shadow: 0 12px 28px rgba(0, 179, 159, 0.35);
}

.dgs-ind-tool-chip svg:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
}

/* Center Highlighted Hero Chip: Intelligent Automation */
.dgs-ind-tool-chip--hero:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
.dgs-section--light .dgs-ind-tool-chip--hero:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: auto;
  height: 52px;
  background: linear-gradient(135deg, #092c48 0%, #051829 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #00B39F !important;
  box-shadow: 0 8px 24px rgba(0, 179, 159, 0.4), 0 0 16px rgba(0, 179, 159, 0.2) !important;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 15px;
  white-space: nowrap;
}

.dgs-ind-tool-chip--hero span:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
.dgs-section--light .dgs-ind-tool-chip--hero span:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  color: #ffffff !important;
  font-weight: 700;
  white-space: nowrap;
}

.dgs-ind-tool-chip--hero:hover:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  transform: translateY(-3px) scale(1.05);
  border-color: #00e6cc !important;
  box-shadow: 0 12px 30px rgba(0, 179, 159, 0.55), 0 0 20px rgba(0, 179, 159, 0.35) !important;
}

.dgs-ind-tool-chip--hero svg:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  width: 22px;
  height: 22px;
  stroke: #00B39F;
  color: #00B39F;
}

@media (max-width: 1024px) {
  .dgs-aeo-banner-inner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 2.25rem;
  }
  .dgs-aeo-text-side:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    width: 100%;
    max-width: 720px;
    text-align: center;
  }
  .dgs-aeo-navy-banner .dgs-aeo-q:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
  }
  .dgs-aeo-navy-banner .dgs-aeo-a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    font-size: 1.05rem;
    line-height: 1.7;
  }
  .dgs-aeo-ecosystem-stack:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    /* Desktop's `flex: 0 0 420px` sets a 420px WIDTH in the row layout
       above. .dgs-aeo-banner-inner just switched to flex-direction:column,
       where flex-basis governs HEIGHT instead — without this reset the
       stack was forced to a 420px-tall box no matter how little content
       (a row of chips + one badge) it actually held, leaving a huge dead
       gap of empty navy card below them on tablet/mobile. */
    flex: 0 1 auto;
    width: 100%;
    max-width: 480px;
  }
  .dgs-aeo-hmarquee-container:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .dgs-aeo-navy-banner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
  #dgs-ind-aeo .dgs-aeo-navy-banner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
  .dgs-section--light #dgs-ind-aeo .dgs-aeo-navy-banner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    padding: 2.25rem 1.25rem !important;
    border-radius: 20px !important;
  }
  .dgs-aeo-banner-inner:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    gap: 1.75rem;
  }
  .dgs-aeo-text-side:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    text-align: center;
  }
  .dgs-aeo-navy-banner .dgs-aeo-q:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    font-size: 1.35rem !important;
    line-height: 1.3;
    margin-bottom: 0.85rem;
  }
  .dgs-aeo-navy-banner .dgs-aeo-a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    font-size: 0.95rem !important;
    line-height: 1.6;
  }
  .dgs-aeo-ecosystem-stack:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    width: 100%;
    gap: 1.15rem;
  }
  .dgs-aeo-hmarquee-container:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    width: 100%;
    padding: 0.25rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  }
  .dgs-ind-tool-chip:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    width: 52px;
    height: 46px;
    padding: 0.5rem;
    border-radius: 12px;
  }
  .dgs-ind-tool-chip svg:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    width: 24px;
    height: 24px;
  }
  .dgs-ind-tool-chip--hero:where(.dgs-css-industries-detail,.dgs-css-industries-detail *),
  .dgs-section--light .dgs-ind-tool-chip--hero:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    height: 46px;
    padding: 0 1.25rem;
    font-size: 0.875rem;
    border-radius: 12px;
    gap: 0.55rem;
  }
  .dgs-ind-tool-chip--hero svg:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   CASE STUDIES: stat cards (rebuilt, replaces the old photo-pillar
   layout). Two-column grid on a dark section: big stat number,
   category tag, description, "Scope" pill.
   ============================================================ */
/* Wider measure just for this heading so the larger font-size below
   doesn't force it onto two lines (sitewide .dgs-section-head caps at
   56.25rem, too narrow at this size). */
#dgs-ind-cases .dgs-section-head:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  max-width: 76rem;
}

#dgs-ind-cases h2:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-size: clamp(2.6rem, 5.2vw, 3.9rem) !important;
}

.dgs-cs-grid:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin: 3rem auto 2.25rem;
  max-width: 84rem;
}

@media (min-width: 760px) {
  .dgs-cs-grid:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.dgs-cs-rule:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: 2rem;
}

.dgs-cs-stat:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.dgs-cs-num:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3.25rem, 6vw, 4.5rem);
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.dgs-cs-unit:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  color: var(--action-teal);
}

.dgs-cs-tag:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--action-teal);
  margin-bottom: 0.9rem;
}

.dgs-cs-desc:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 2.5rem !important;
  max-width: 42ch;
}

.dgs-cs-scope:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid rgba(0, 179, 159, 0.35);
  border-radius: var(--radius-full, 999px);
  padding: 0.4rem 1.05rem 0.4rem 0.4rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.dgs-cs-scope-label:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background: var(--action-teal);
  color: #0A1F33;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-full, 999px);
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-eae56abd02:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b25ba6a03cda06d724be.png') !important;
}

.dgs-il-842252d1fb:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  justify-content:center !important;
}

.dgs-il-ab397ef252:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b25ca6a03cda06d72df2.png') !important;
}

.dgs-il-7018de4779:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b1be8143df7d49d03ffc.png') !important;
}

.dgs-il-8406dd665d:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b1c0cf50f900f27f65b2.png') !important;
}

.dgs-il-e35428037a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b207b9de9ff193f2efaf.png') !important;
}

.dgs-il-ef2f1bf4e2:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a853e5fe8effa27ad2c05d0.png') !important;
}

.dgs-il-774bc0ef0c:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b1958143df7d49ceff59.png') !important;
}

.dgs-il-704f03d214:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b19acf50f900f27e6bad.png') !important;
}

.dgs-il-569d6631f1:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b149255b571c8e198dc1.png') !important;
}

.dgs-il-5c7b60c7c4:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b14c1082d648776d4192.png') !important;
}

.dgs-il-efdf220e48:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b100f1e423633fc2efda.png') !important;
}

.dgs-il-4ec98d7aa0:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b0fe99074f5ef6bb4ad1.png') !important;
}

.dgs-il-9c0355a838:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b0421082d648776c5481.png') !important;
}

.dgs-il-50b388cbd9:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a853e12b8d260ce2a2bbc21.png') !important;
}

.dgs-il-a611154c63:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83aece270e1f5457b1f84a.png') !important;
}

.dgs-il-fe6ecea1fb:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83aecffe4291bd10229e15.png') !important;
}

.dgs-il-b67b633b50:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83af6ef1e423633fc07b16.png') !important;
}

.dgs-il-906b20e5b9:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83af6dfe4291bd10236015.png') !important;
}

.dgs-il-7d6d251e82:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83af9dcf50f900f27d3742.png') !important;
}

.dgs-il-aa89683798:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83af9fcf50f900f27d375c.png') !important;
}

.dgs-il-4a812fcfee:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83af3bb9de9ff193f14137.png') !important;
}

.dgs-il-6f1f5671f0:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83af458143df7d49ccae08.png') !important;
}

.dgs-il-f670fb045a:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83af0c8143df7d49cc7363.png') !important;
}

.dgs-il-f3b93603ca:where(.dgs-css-industries-detail,.dgs-css-industries-detail *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83af0a255b571c8e18d923.png') !important;
}


/* ============================================================
   C13. INDUSTRIES-INTERACTIVE  (scope: .dgs-css-industries-interactive)
   Formerly css/dgs-industries-interactive.css. Used by:
     industries.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — CLIENT SUCCESS INTERACTIVE VISUALS
   Slate UI Backgrounds, Matching Rounded Corners (16px), 
   Spacious Enterprise SaaS Layout (No duplicate stats inside)
   ============================================================ */

/* Base Media Container matching outer card radius (16px) and slate theme */
.dgs-insp-media:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  height: 240px !important;
  background: #F8FAFC !important; /* Premium Slate-50 background */
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-lg, 16px) !important; /* Exact match to white card */
  overflow: hidden;
  position: relative;
}

.dgs-visual-container:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 100%;
  height: 100%;
  background: #F8FAFC;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  user-select: none;
}

/* Micro Cards inside the Slate Dashboard preview */
.dgs-ui-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  padding: 0.65rem 0.85rem;
  font-size: 0.78rem;
  color: #0F172A;
}

.dgs-ui-badge:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dgs-ui-badge--pending:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.dgs-ui-badge--success:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #D1FAE5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.dgs-ui-badge--neutral:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
}

.dgs-ui-badge--ai:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: rgba(0, 168, 150, 0.1);
  color: var(--action-teal, #00A896);
  border: 1px solid rgba(0, 168, 150, 0.2);
}

.dgs-ui-avatar:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #475569;
  border: 1px solid #ffffff;
}

/* ==========================================
   CARD 1: Professional Services (Proposal)
   ========================================== */
.dgs-visual-ps-flow-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.dgs-visual-ps-flow:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.dgs-visual-ps-step:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  z-index: 2;
}

.dgs-visual-ps-node:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E2E8F0;
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 0 1px #CBD5E1;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.dgs-visual-ps-step.active .dgs-visual-ps-node:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: var(--action-teal, #00A896);
  box-shadow: 0 0 0 1px var(--action-teal, #00A896), 0 0 10px rgba(0, 168, 150, 0.4);
}

.dgs-visual-ps-line-bg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  position: absolute;
  top: 6px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: #E2E8F0;
  z-index: 1;
}

.dgs-visual-ps-line-fill:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 0%;
  height: 100%;
  background: var(--action-teal, #00A896);
  transition: width 1.2s ease-in-out;
}

.play-animation .dgs-visual-ps-line-fill:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 100%;
}

.dgs-visual-ps-step-label:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748B;
}

.dgs-visual-ps-step.active .dgs-visual-ps-step-label:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  color: #0F172A;
}

.dgs-visual-ps-bottom:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Animations entrance */
.dgs-visual-ps-flow-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *),
.dgs-visual-ps-bottom .dgs-ui-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.play-animation .dgs-visual-ps-flow-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.play-animation .dgs-visual-ps-bottom .dgs-ui-card:nth-child(1):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.play-animation .dgs-visual-ps-bottom .dgs-ui-card:nth-child(2):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* ==========================================
   CARD 2: Recruitment (Candidate CRM)
   ========================================== */
.dgs-visual-rec-pipeline:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  width: 100%;
}

.dgs-visual-rec-col:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.5rem;
  min-height: 105px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}

.dgs-visual-rec-col-title:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  font-size: 0.62rem;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-left: 0.2rem;
}

.dgs-visual-rec-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 0.4rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.play-animation .dgs-visual-rec-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateX(0);
}

.play-animation .dgs-visual-rec-col:nth-child(1) .dgs-visual-rec-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.15s; }
.play-animation .dgs-visual-rec-col:nth-child(2) .dgs-visual-rec-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.4s; }
.play-animation .dgs-visual-rec-col:nth-child(3) .dgs-visual-rec-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.65s; }
.play-animation .dgs-visual-rec-col:nth-child(4) .dgs-visual-rec-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.9s; }

.dgs-visual-rec-bottom:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}

.dgs-visual-rec-speed-track:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 100px;
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  overflow: hidden;
}

.dgs-visual-rec-speed-bar:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 0%;
  height: 100%;
  background: var(--action-teal, #00A896);
  border-radius: 3px;
  transition: width 1.2s ease-in-out;
}

.play-animation .dgs-visual-rec-speed-bar:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 85%;
}

/* ==========================================
   CARD 3: Healthcare (Clinic Dashboard)
   ========================================== */
.dgs-visual-hc-dashboard:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.85rem;
  align-items: center;
}

.dgs-visual-hc-left:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.dgs-visual-hc-reminder:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *),
.dgs-visual-hc-billing:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-size: 0.75rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.play-animation .dgs-visual-hc-reminder:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.play-animation .dgs-visual-hc-billing:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.dgs-visual-hc-right:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.play-animation .dgs-visual-hc-right:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.4s;
}

.dgs-hc-calendar-grid:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.dgs-hc-cal-day:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  aspect-ratio: 1;
  border-radius: 3px;
  background: #F1F5F9;
}

.dgs-hc-cal-day.booked:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: var(--action-teal, #00A896);
}

/* ==========================================
   CARD 4: Construction (Permit Timeline)
   ========================================== */
.dgs-visual-const-timeline-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.dgs-visual-const-progress-track:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 100%;
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.dgs-visual-const-progress-bar:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 0%;
  height: 100%;
  background: var(--action-teal, #00A896);
  border-radius: 3px;
  transition: width 1.3s ease-in-out;
}

.play-animation .dgs-visual-const-progress-bar:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 100%;
}

.dgs-visual-const-steps:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.dgs-visual-const-step:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.play-animation .dgs-visual-const-step:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
}

.play-animation .dgs-visual-const-step:nth-child(1):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.2s; }
.play-animation .dgs-visual-const-step:nth-child(2):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.45s; }
.play-animation .dgs-visual-const-step:nth-child(3):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.7s; }
.play-animation .dgs-visual-const-step:nth-child(4):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.95s; }

.dgs-visual-const-bottom:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.dgs-visual-const-timeline-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *),
.dgs-visual-const-bottom .dgs-ui-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.play-animation .dgs-visual-const-timeline-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.play-animation .dgs-visual-const-bottom .dgs-ui-card:nth-child(1):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.play-animation .dgs-visual-const-bottom .dgs-ui-card:nth-child(2):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* ==========================================
   CARD 5: Retail (Inventory Sync Network)
   ========================================== */
.dgs-visual-ret-sync-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  height: 110px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.dgs-visual-ret-channel:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  position: absolute;
  top: 50%;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0F172A;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
}

.dgs-visual-ret-channel.pos-pos:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  left: 6%;
  transform: translateY(-50%) translateX(-6px);
}

.dgs-visual-ret-channel.pos-web:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  right: 6%;
  transform: translateY(-50%) translateX(6px);
}

.play-animation .dgs-visual-ret-channel.pos-pos:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0.15s;
}

.play-animation .dgs-visual-ret-channel.pos-web:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0.45s;
}

.dgs-visual-ret-core:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0F172A;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dgs-visual-ret-core svg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 20px;
  height: 20px;
}

.dgs-visual-ret-svg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.dgs-visual-ret-line:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  stroke: #CBD5E1;
  stroke-width: 2;
  stroke-dasharray: 5;
  fill: none;
}

.play-animation .dgs-visual-ret-line:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  stroke: var(--action-teal, #00A896);
  animation: dgs-dash 2s linear infinite;
}

.dgs-visual-ret-bottom-row:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.play-animation .dgs-visual-ret-bottom-row:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

/* Restored: the @keyframes header for this fragment had been deleted,
   leaving a stray "}" that made browsers drop the next rule
   (.dgs-visual-ret-status-card) and left dgs-dash undefined. */
@keyframes dgs-dash {
  to {
    stroke-dashoffset: -20;
  }
}

/* ==========================================
   CARD 6: Financial Services (Onboarding)
   ========================================== */
.dgs-visual-fs-dashboard:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 1rem;
  align-items: center;
}

.dgs-visual-fs-list:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.dgs-visual-fs-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.play-animation .dgs-visual-fs-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  opacity: 1;
  transform: translateY(0);
}

.play-animation .dgs-visual-fs-item:nth-child(1):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.15s; }
.play-animation .dgs-visual-fs-item:nth-child(2):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.4s; }
.play-animation .dgs-visual-fs-item:nth-child(3):where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { transition-delay: 0.65s; }

.dgs-fs-check:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.dgs-fs-check svg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  width: 11px;
  height: 11px;
}

.play-animation .dgs-visual-fs-item.checked .dgs-fs-check:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: var(--action-teal, #00A896);
  border-color: var(--action-teal, #00A896);
  color: #ffffff;
}

.dgs-visual-fs-chart:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.dgs-fs-circle-svg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  transform: rotate(-90deg);
  width: 72px;
  height: 72px;
}

.dgs-fs-circle-bg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  fill: none;
  stroke: #F1F5F9;
  stroke-width: 7;
}

.dgs-fs-circle-val:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  fill: none;
  stroke: var(--action-teal, #00A896);
  stroke-width: 7;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.4s ease-in-out;
}

.play-animation .dgs-fs-circle-val:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  stroke-dashoffset: 0;
}

.dgs-fs-chart-text:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
  position: absolute;
  font-size: 0.85rem;
  font-weight: 800;
  color: #0F172A;
}

/* ============================================================
   MOBILE RESPONSIVENESS OVERRIDES FOR INTERACTIVE CARDS
   ============================================================ */
@media (max-width: 576px) {
  .dgs-insp-media:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    height: auto !important;
    min-height: 180px !important;
    padding: 1rem 0 !important;
  }
  .dgs-visual-container:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    height: auto !important;
    padding: 0.75rem 0.9rem !important;
    gap: 0.65rem !important;
  }

  /* PS Flow Card */
  .dgs-visual-ps-flow:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .dgs-visual-ps-step-label:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    font-size: 0.56rem !important;
  }
  .dgs-visual-ps-node:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 10px !important;
    height: 10px !important;
  }
  .dgs-visual-ps-line-bg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    display: none;
  }
  .dgs-visual-ps-bottom:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .dgs-visual-ps-bottom .dgs-ui-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    min-width: 0 !important;
    padding: 0.5rem 0.6rem !important;
  }

  /* Recruitment Pipeline CRM */
  .dgs-visual-rec-pipeline:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .dgs-visual-rec-col:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    min-width: 0 !important;
    min-height: 80px !important;
    padding: 0.35rem !important;
  }
  .dgs-visual-rec-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    padding: 0.3rem 0.35rem !important;
    font-size: 0.66rem !important;
    gap: 0.25rem !important;
  }
  .dgs-visual-rec-col-title:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    font-size: 0.56rem !important;
  }
  .dgs-visual-rec-bottom:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    margin-top: 0.5rem !important;
    padding: 0.5rem 0.7rem !important;
  }
  .dgs-visual-rec-speed-track:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 70px !important;
    height: 5px !important;
  }

  /* Shared micro-UI pieces */
  .dgs-ui-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    font-size: 0.7rem !important;
    padding: 0.5rem 0.6rem !important;
  }
  .dgs-ui-avatar:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.55rem !important;
  }
  .dgs-ui-badge:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    font-size: 0.55rem !important;
    padding: 0.18rem 0.4rem !important;
  }

  /* Healthcare Dashboard */
  .dgs-visual-hc-dashboard:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
  .dgs-visual-hc-left:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    gap: 0.5rem !important;
  }
  .dgs-visual-hc-right:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    padding: 0.65rem !important;
  }
  .dgs-hc-calendar-grid:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    gap: 2px !important;
  }
  .dgs-hc-cal-day:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    border-radius: 2px !important;
  }

  /* Construction Timeline */
  .dgs-visual-const-timeline-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    padding: 0.75rem 0.9rem !important;
  }
  .dgs-visual-const-progress-track:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    height: 5px !important;
  }
  .dgs-visual-const-steps:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    justify-content: center !important;
  }
  .dgs-visual-const-step:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    flex: 1 1 45% !important;
    justify-content: center !important;
    font-size: 0.64rem !important;
    gap: 0.25rem !important;
  }
  .dgs-visual-const-bottom:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .dgs-visual-const-bottom .dgs-ui-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    min-width: 0 !important;
    padding: 0.5rem 0.6rem !important;
  }

  /* Financial Services */
  .dgs-visual-fs-dashboard:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }
  .dgs-visual-fs-list:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *),
  .dgs-visual-fs-chart:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    min-width: 0 !important;
  }
  .dgs-visual-fs-list:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    padding: 0.6rem 0.75rem !important;
  }
  .dgs-visual-fs-item:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    font-size: 0.68rem !important;
    gap: 0.4rem !important;
  }
  .dgs-fs-check:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 14px !important;
    height: 14px !important;
  }
  .dgs-fs-check svg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 9px !important;
    height: 9px !important;
  }
  .dgs-fs-circle-svg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 56px !important;
    height: 56px !important;
  }
  .dgs-fs-chart-text:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    font-size: 0.75rem !important;
  }
  .dgs-visual-fs-chart:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    padding: 0.75rem !important;
  }

  /* Retail sync card */
  .dgs-visual-ret-sync-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    height: auto !important;
    min-height: 160px !important;
    padding: 0.85rem !important;
  }
  .dgs-visual-ret-core:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 34px !important;
    height: 34px !important;
  }
  .dgs-visual-ret-core svg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 16px !important;
    height: 16px !important;
  }
  .dgs-visual-ret-channel:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    font-size: 0.62rem !important;
    padding: 0.3rem 0.5rem !important;
  }
  .dgs-visual-ret-channel.pos-pos:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { left: 1% !important; }
  .dgs-visual-ret-channel.pos-web:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) { right: 1% !important; }
  .dgs-visual-ret-bottom-row:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    margin-top: 0.5rem !important;
  }

  /* Reminder / billing rows */
  .dgs-visual-hc-reminder:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *),
  .dgs-visual-hc-billing:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    font-size: 0.68rem !important;
    padding: 0.55rem 0.7rem !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
}

@media (max-width: 420px) {
  .dgs-insp-media:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    min-height: 150px !important;
  }
  .dgs-visual-container:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    padding: 0.65rem 0.75rem !important;
    gap: 0.55rem !important;
  }
  .dgs-visual-rec-pipeline:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
  }
  .dgs-visual-ret-sync-card:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    min-height: 140px !important;
  }
  .dgs-visual-ret-core:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 28px !important;
    height: 28px !important;
  }
  .dgs-visual-ret-core svg:where(.dgs-css-industries-interactive,.dgs-css-industries-interactive *) {
    width: 14px !important;
    height: 14px !important;
  }
}


/* ============================================================
   C14. LEGAL  (scope: .dgs-css-legal)
   Formerly css/dgs-legal.css. Used by:
     cookie-policy.html, data-protection-notice.html, privacy-policy.html
     terms-of-service.html
   ============================================================ */

.dgs-legal:where(.dgs-css-legal,.dgs-css-legal *) {
  --legal-mist: #F4F6F8;
  --legal-muted: #56677A;
  --legal-hairline: rgba(10, 31, 33, 0.1);
}

/* ─── Hero: compact, navy, single soft glow (no photo) ─── */
.dgs-legal-hero:where(.dgs-css-legal,.dgs-css-legal *) {
  background: var(--bg-deep-navy);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 8.25rem 0 3rem;
}

@media (min-width: 1024px) {
  .dgs-legal-hero:where(.dgs-css-legal,.dgs-css-legal *) {
    padding: 9.5rem 0 3.75rem;
  }
}

@media (max-width: 768px) {
  .dgs-legal-hero:where(.dgs-css-legal,.dgs-css-legal *) {
    padding: 7.25rem 0 2.5rem;
  }
}

.dgs-legal-hero:where(.dgs-css-legal,.dgs-css-legal *)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18%;
  width: 56vw;
  height: 22rem;
  min-width: 26rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 45%, transparent 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.dgs-legal-hero > .dgs-container:where(.dgs-css-legal,.dgs-css-legal *) {
  position: relative;
  z-index: 1;
}

.dgs-legal-eyebrow:where(.dgs-css-legal,.dgs-css-legal *) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1affeb;
  background: rgba(0, 179, 159, 0.15);
  border: 1px solid rgba(0, 179, 159, 0.4);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.1rem;
}

.dgs-legal-hero h1:where(.dgs-css-legal,.dgs-css-legal *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 2.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 1rem !important;
  max-width: 40rem;
}

.dgs-legal-dek:where(.dgs-css-legal,.dgs-css-legal *) {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 56ch;
  margin: 0 0 1.4rem !important;
}

.dgs-legal-meta:where(.dgs-css-legal,.dgs-css-legal *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dgs-legal-meta strong:where(.dgs-css-legal,.dgs-css-legal *) {
  color: #ffffff;
  font-weight: 600;
}

/* ─── Layout: sticky TOC + article body ─── */
.dgs-legal-layout:where(.dgs-css-legal,.dgs-css-legal *) {
  position: relative;
  z-index: 0;
  background: #ffffff;
  /* Longhand on purpose: a shorthand `padding: 3.5rem 0 5.5rem` here would
     zero out the left/right padding .dgs-container already set (loaded
     earlier, but this class is more specific by source order since it's
     on the same element), stripping the page's side margin at every
     viewport width, not just mobile. */
  padding-top: 3.5rem;
  padding-bottom: 5.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Full-bleed white background, independent of the sitewide navy body/main */
.dgs-legal-layout:where(.dgs-css-legal,.dgs-css-legal *)::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
}

@media (min-width: 960px) {
  .dgs-legal-layout:where(.dgs-css-legal,.dgs-css-legal *) {
    grid-template-columns: 220px 1fr;
    gap: 4rem;
    align-items: start;
    padding-top: 4.5rem;
    padding-bottom: 6.5rem;
  }
}

/* ─── Table of contents ───
   Ported from the Growth Hub article template's "On This Page" TOC
   (css/dgs-growth-article.css .dgs-ga-toc*): sticky rail on desktop,
   a collapsible disclosure button on mobile (js/dgs-legal.js toggles
   [data-open] the same way js/dgs-growth-article.js does for .dgs-ga-toc),
   instead of the previous chip-wrap layout. */
.dgs-legal-toc:where(.dgs-css-legal,.dgs-css-legal *) {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 960px) {
  .dgs-legal-toc:where(.dgs-css-legal,.dgs-css-legal *) {
    position: sticky;
    top: 7.5rem;
    max-width: 220px;
  }
}

.dgs-legal-toc-label:where(.dgs-css-legal,.dgs-css-legal *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--legal-muted);
  margin-bottom: 0.85rem;
}

/* Mobile shows the disclosure button instead, which already carries
   this same label text. */
@media (max-width: 959px) {
  .dgs-legal-toc-label:where(.dgs-css-legal,.dgs-css-legal *) {
    display: none;
  }
}

/* Mobile: collapsible disclosure */
.dgs-legal-toc-toggle:where(.dgs-css-legal,.dgs-css-legal *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--legal-mist);
  border: 1px solid var(--legal-hairline);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bg-deep-navy);
}

@media (min-width: 960px) {
  .dgs-legal-toc-toggle:where(.dgs-css-legal,.dgs-css-legal *) {
    display: none;
  }
}

.dgs-legal-toc-toggle svg:where(.dgs-css-legal,.dgs-css-legal *) {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.dgs-legal-toc[data-open="true"] .dgs-legal-toc-toggle svg:where(.dgs-css-legal,.dgs-css-legal *) {
  transform: rotate(180deg);
}

.dgs-legal-toc-list:where(.dgs-css-legal,.dgs-css-legal *) {
  list-style: none;
  margin: 0.9rem 0 0 !important;
  padding: 0.25rem 0 0 1.4rem !important;
  border-left: 2px solid var(--legal-hairline);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 100%;
}

@media (max-width: 959px) {
  .dgs-legal-toc-list:where(.dgs-css-legal,.dgs-css-legal *) {
    display: none;
    margin-top: 1rem !important;
  }

  .dgs-legal-toc[data-open="true"] .dgs-legal-toc-list:where(.dgs-css-legal,.dgs-css-legal *) {
    display: flex;
  }
}

.dgs-legal-toc-list a:where(.dgs-css-legal,.dgs-css-legal *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--legal-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.dgs-legal-toc-list a:hover:where(.dgs-css-legal,.dgs-css-legal *),
.dgs-legal-toc-list a.is-active:where(.dgs-css-legal,.dgs-css-legal *) {
  color: var(--bg-deep-navy);
  font-weight: 700;
}

/* ─── Article body typography ─── */
.dgs-legal-body:where(.dgs-css-legal,.dgs-css-legal *) {
  font-family: var(--font-body);
  color: var(--text-dark-primary);
  max-width: 74ch;
  overflow-wrap: anywhere;
}

.dgs-legal-body > p:where(.dgs-css-legal,.dgs-css-legal *) {
  font-size: 1.02rem;
  line-height: 1.85;
  color: #2A3B4D;
  margin: 0 0 1.4rem;
}

.dgs-legal-body h2:where(.dgs-css-legal,.dgs-css-legal *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bg-deep-navy);
  margin: 3rem 0 1rem;
  scroll-margin-top: 6.5rem;
}

.dgs-legal-body h2:first-child:where(.dgs-css-legal,.dgs-css-legal *) {
  margin-top: 0;
}

.dgs-legal-body h3:where(.dgs-css-legal,.dgs-css-legal *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--bg-deep-navy);
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 6.5rem;
}

.dgs-legal-body ul:where(.dgs-css-legal,.dgs-css-legal *),
.dgs-legal-body ol:where(.dgs-css-legal,.dgs-css-legal *) {
  margin: 0 0 1.4rem;
  padding-left: 1.3rem;
  color: #2A3B4D;
  font-size: 0.98rem;
  line-height: 1.8;
}

.dgs-legal-body li:where(.dgs-css-legal,.dgs-css-legal *) {
  margin-bottom: 0.45rem;
}

.dgs-legal-body li:last-child:where(.dgs-css-legal,.dgs-css-legal *) {
  margin-bottom: 0;
}

.dgs-legal-body strong:where(.dgs-css-legal,.dgs-css-legal *) {
  color: var(--bg-deep-navy);
  font-weight: 700;
}

.dgs-legal-body a:where(.dgs-css-legal,.dgs-css-legal *) {
  color: var(--action-teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 179, 159, 0.35);
  text-underline-offset: 2px;
}

.dgs-legal-body hr:where(.dgs-css-legal,.dgs-css-legal *) {
  border: none;
  border-top: 1px solid var(--legal-hairline);
  margin: 2.5rem 0;
}

/* ─── "Before You Publish" placeholder-review notice ─── */

/* ─── Cross-links to the other legal pages ─── */
.dgs-legal-related:where(.dgs-css-legal,.dgs-css-legal *) {
  background: var(--legal-mist);
  border-top: 1px solid var(--legal-hairline);
  padding: 3.25rem 0;
}

.dgs-legal-related h2:where(.dgs-css-legal,.dgs-css-legal *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--bg-deep-navy);
  margin: 0 0 1.25rem !important;
}

.dgs-legal-related-grid:where(.dgs-css-legal,.dgs-css-legal *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 640px) {
  .dgs-legal-related-grid:where(.dgs-css-legal,.dgs-css-legal *) {
    grid-template-columns: repeat(3, 1fr);
  }
}

a.dgs-legal-related-card:where(.dgs-css-legal,.dgs-css-legal *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1rem 1.15rem;
  background: #ffffff;
  border: 1px solid var(--legal-hairline);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--bg-deep-navy);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.dgs-legal-related-card:hover:where(.dgs-css-legal,.dgs-css-legal *) {
  border-color: var(--action-teal);
  transform: translateY(-2px);
}

.dgs-legal-related-card svg:where(.dgs-css-legal,.dgs-css-legal *) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--action-teal);
}

.dgs-legal-related-contact:where(.dgs-css-legal,.dgs-css-legal *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--legal-muted);
  margin: 0 !important;
}

.dgs-legal-related-contact a:where(.dgs-css-legal,.dgs-css-legal *) {
  color: var(--action-teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 179, 159, 0.4);
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.dgs-legal-related-contact a:hover:where(.dgs-css-legal,.dgs-css-legal *) {
  color: var(--bg-deep-navy);
}


/* ============================================================
   C15. PLAYBOOK-DETAIL  (scope: .dgs-css-playbook-detail)
   Formerly css/dgs-playbook-detail.css. Used by:
     growth-hub/implement/ai-readiness-checklist.html, growth-hub/implement/compliance-calendar-template.html, growth-hub/implement/remote-onboarding-checklist.html
     growth-hub/implement/sop-template-pack.html, growth-hub/implement/speed-to-lead-playbook.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — PLAYBOOK / RESOURCE DETAIL PAGE
   (reusable template for the "Practical Resources" library)
   Load order: dgs-common.css THEN this file. Self-contained: pages
   under growth-hub/implement/ load ONLY dgs-common.css + this sheet,
   nothing else. Same hero/TOC/layout system as an event detail page
   (dgs-event-detail.css), but namespaced .dgs-pb-* and built around a
   downloadable resource instead of a scheduled event: a numbered
   "What's Inside" section (rather than an icon row list) mirrors the
   numbered section badges already used in the source PDF, and the
   final CTA gates the resource behind the same GHL form used by the
   growth-hub.html resource modal, embedded inline instead of a popup.
   ============================================================ */

/* ─── 0. SHARED FOUNDATION (inlined from dgs-growth-article.css) ───
   The generic article-hero/TOC/layout/cover/back-to-top/"keep reading"
   system every Growth Hub content page shares (.dgs-ga-*), inlined
   here verbatim instead of linking dgs-growth-article.css, so this
   template has zero external stylesheet dependency beyond
   dgs-common.css. Only the subset this page actually uses is included
   (no .dgs-ga-body prose/callout/CTA styles, no related-card grid —
   this page's "Keep Reading" is the heading+link variant only, no
   card grid). Keep in sync with dgs-growth-article.css and
   dgs-event-detail.css's own copy if this shared system ever
   changes. */

/* :root (not just .dgs-ga) so every --ga-* token still resolves when a
   .dgs-ga-* component (e.g. this page's "Keep Reading" section) is
   pasted into GHL as an independent custom-code section with no shared
   .dgs-ga ancestor — confirmed live on the article template's equal
   case: with no wrapper, var(--ga-surface)/var(--ga-navy) silently
   fail and the section loses its background/text color entirely
   instead of falling back to anything. .dgs-ga is kept alongside :root
   purely so a future more-specific override on .dgs-ga still works. */
:root:where(:has(>body.dgs-css-playbook-detail)),
.dgs-ga:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  --ga-navy: #0A1F33;
  --ga-teal: #00B39F;
  --ga-blue: #2D7FF9;
  --ga-amber: #F5A623;
  --ga-ink: #0A1F33;
  --ga-muted: #5B6B7C;
  --ga-hairline: rgba(10, 31, 51, 0.1);
  --ga-surface: #F7F9FA;
  --ga-cat: var(--ga-teal);
}

.dgs-ga-hero:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  background: var(--ga-navy);
  padding: 8.5rem 0 5.5rem;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.dgs-ga-hero:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18%;
  width: 56vw;
  height: 22rem;
  min-width: 26rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.08) 45%, transparent 75%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.dgs-ga-hero-inner:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .dgs-ga-hero-inner:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-hero-inner:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 0 3.5rem;
  }
}

.dgs-ga-back:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color 0.25s ease;
}

.dgs-ga-back svg:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  width: 16px;
  height: 16px;
}

.dgs-ga-back:hover:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  color: var(--ga-teal);
}

.dgs-ga-cat:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ga-cat);
  margin-bottom: 1.1rem;
}

.dgs-ga-title:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 1.75rem !important;
}

.dgs-ga-dek:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 62ch;
  margin: 0 0 2rem !important;
}

.dgs-ga-meta:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.62);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dgs-ga-meta strong:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  color: #ffffff;
  font-weight: 600;
}

.dgs-ga-meta span:not(:last-child):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *)::after {
  content: '\00b7';
  margin-left: 0.55rem;
  color: rgba(255, 255, 255, 0.3);
}

/* ─── Hero image ─── */
.dgs-ga-cover:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  max-width: 100%;
  margin: -2rem auto 0;
  padding: 0 1rem;
  position: relative;
}

@media (min-width: 768px) {
  .dgs-ga-cover:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-cover:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 0 3.5rem;
  }
}

.dgs-ga-cover img:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
  border-radius: var(--radius-lg, 14px);
  display: block;
  box-shadow: 0 24px 60px rgba(10, 31, 51, 0.18);
}

.dgs-ga-layout:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  position: relative;
  z-index: 0;
  background: #ffffff;
  max-width: 100%;
  margin: 0 auto;
  padding: 4.5rem 1rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .dgs-ga-layout:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 4.5rem 2rem 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-layout:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 4.5rem 3.5rem 2rem;
  }
}

.dgs-ga-layout:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *)::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
}

@media (min-width: 960px) {
  .dgs-ga-layout:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    grid-template-columns: 240px 1fr;
    gap: 4.5rem;
    align-items: start;
  }
}

.dgs-ga-toc:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  order: -1;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 960px) {
  .dgs-ga-toc:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    position: sticky;
    top: 7.5rem;
    order: 0;
    max-width: 240px;
  }
}

.dgs-ga-toc-label:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ga-muted);
  margin-bottom: 0.9rem;
}

@media (max-width: 959px) {
  .dgs-ga-toc-label:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    display: none;
  }
}

.dgs-ga-toc-toggle:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--ga-surface);
  border: 1px solid var(--ga-hairline);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ga-ink);
}

@media (min-width: 960px) {
  .dgs-ga-toc-toggle:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    display: none;
  }
}

.dgs-ga-toc-toggle svg:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.dgs-ga-toc[data-open="true"] .dgs-ga-toc-toggle svg:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  transform: rotate(180deg);
}

.dgs-ga-toc-list:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  list-style: none;
  margin: 0.9rem 0 0 !important;
  padding: 0.25rem 0 0 1.4rem !important;
  border-left: 2px solid var(--ga-hairline);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 100%;
}

@media (max-width: 959px) {
  .dgs-ga-toc-list:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    display: none;
    margin-top: 1rem !important;
  }
  .dgs-ga-toc[data-open="true"] .dgs-ga-toc-list:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    display: flex;
  }
}

.dgs-ga-toc-list a:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ga-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  overflow-wrap: break-word;
  word-break: break-word;
}

.dgs-ga-toc-list a:hover:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
.dgs-ga-toc-list a.is-active:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  color: var(--ga-navy);
  font-weight: 600;
}

.dgs-ga-top:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--action-teal, #00B39F);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
  z-index: 500;
  box-shadow: 0 10px 24px rgba(0, 179, 159, 0.32);
}

.dgs-ga-top:hover:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  background: var(--action-mint-hover, #1ac9b0);
}

.dgs-ga-top.is-visible:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.dgs-ga-top svg:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .dgs-ga-top:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    transition: none;
  }
}

/* ─── Keep Reading (heading + single link, no card grid — this page
   doesn't use the related-card grid variant) ─── */
.dgs-ga-related:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  background: var(--ga-surface);
  padding: 5rem 0;
}

.dgs-ga-related-inner:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .dgs-ga-related-inner:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .dgs-ga-related-inner:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 0 3.5rem;
  }
}

.dgs-ga-related-title:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--ga-navy);
  margin: 0 !important;
}

.dgs-ga-related-head:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* The link itself is the actual .dgs-promise-link class (dgs-common.css) —
   same component as "Read More" / "Apply for Position" on careers.html —
   so its color, underline and hover behavior come from there. This rule
   only supplies the one thing that component doesn't set: keeping the
   link from shrinking inside the .dgs-ga-related-head flex row. */
.dgs-ga-related-viewall:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  flex-shrink: 0;
}

/* ─── 1. HERO ───
   The plain shared article hero (.dgs-ga-hero / .dgs-ga-hero-inner /
   .dgs-ga-cover, all inlined in section 0 above) reused as-is,
   exactly as its own header comment says to for "Insights, Guides,
   Playbooks, Case Studies, Events." The one bespoke addition is a CTA
   row after .dgs-ga-meta, the same pattern the event template uses
   for its own hero action button. */

.dgs-pb-hero-actions:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

@media (max-width: 640px) {
  .dgs-pb-hero-actions .dgs-btn-saas:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    width: 100%;
  }
}

/* ─── 2. BODY LAYOUT ───
   Same sticky-sidebar + content-column grid as an article
   (.dgs-ga-layout / .dgs-ga-toc, defined in dgs-growth-article.css). */

.dgs-pb-content:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  max-width: 76ch;
}

.dgs-pb-content > * + *:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  margin-top: 3.5rem;
}

/* No font-size here: dgs-common.css's global
   `.dgs-page h2 { font-size: ...!important }` (Framework 3.0 default)
   always wins over any same-specificity descendant selector regardless
   of stylesheet load order, so fighting it just risks these headings
   drifting out of sync with every other h2 on the site (including the
   event template's). Inheriting it instead guarantees this page's
   section headings always match sitewide. */
.dgs-pb-content h2:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ga-navy, #0A1F33);
  margin: 0 0 1.5rem;
  scroll-margin-top: 6.5rem;
}

.dgs-pb-lead-copy p:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 1.1rem;
  line-height: 1.85;
  color: #2A3B4D;
  margin: 0;
}

/* Not this / this comparison */
.dgs-pb-compare:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--surface-border-neutral);
  padding-top: 2rem;
}

@media (min-width: 560px) {
  .dgs-pb-compare:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

.dgs-pb-compare-block:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  padding-left: 1.25rem;
  border-left: 2px solid var(--surface-border-neutral);
}

.dgs-pb-compare-block--is:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  border-left-color: var(--dgs-teal);
}

.dgs-pb-compare-label:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.55rem;
}

.dgs-pb-compare-block--is .dgs-pb-compare-label:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  color: var(--dgs-teal-deep);
}

.dgs-pb-compare-block p:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-dark-primary);
  margin: 0;
}

/* ─── 3. NUMBERED SECTION LIST ("What's Inside") ───
   Echoes the source PDF's own numbered-square section badges (01, 02,
   03...) rather than the event template's icon rows — a small,
   deliberate visual nod that this list maps 1:1 onto the document a
   visitor is about to receive. */

.dgs-pb-sections:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  border-top: 1px solid var(--surface-border-neutral);
}

.dgs-pb-section-row:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex;
  gap: 1.25rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--surface-border-neutral);
}

.dgs-pb-section-num:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--dgs-teal);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dgs-teal-deep);
}

.dgs-pb-section-body:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  min-width: 0;
}

.dgs-pb-section-body h3:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ga-navy, #0A1F33);
  margin: 0;
}

.dgs-pb-section-body p:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #4a5568;
  margin: 0.4rem 0 0;
}

/* ─── 4. ROW LIST ("Who It's For") ─── */

.dgs-pb-row-list:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  border-top: 1px solid var(--surface-border-neutral);
}

.dgs-pb-row:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex;
  gap: 1.25rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--surface-border-neutral);
}

.dgs-pb-row-icon:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--surface-border-neutral);
  border-radius: var(--radius-sm);
  color: var(--dgs-teal-deep);
}

.dgs-pb-row-icon svg:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  width: 18px;
  height: 18px;
}

.dgs-pb-row-body:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  min-width: 0;
}

.dgs-pb-row-body h3:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ga-navy, #0A1F33);
  margin: 0;
}

.dgs-pb-row-body p:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #4a5568;
  margin: 0.5rem 0 0;
}

/* ─── 5. THE DETAILS (label / value list) ─── */

.dgs-pb-detail-list:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  margin: 0;
  border-top: 1px solid var(--surface-border-neutral);
}

.dgs-pb-detail-row:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--surface-border-neutral);
}

.dgs-pb-detail-row dt:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  flex: none;
  width: 9.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dgs-teal-deep);
}

.dgs-pb-detail-row dt svg:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  flex: none;
  width: 16px;
  height: 16px;
}

.dgs-pb-detail-row dd:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  margin: 0;
  flex: 1 1 auto;
  text-align: right;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ga-navy, #0A1F33);
}

@media (max-width: 480px) {
  .dgs-pb-detail-row:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .dgs-pb-detail-row dd:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    text-align: left;
  }
}

/* Reads as its own supporting-information block: comfortable internal
   padding (not just the left accent), 32px above separating it from
   The Details list, and 0 of its own margin-bottom below — the gap
   down to "How It Works" is owned entirely by the explicit
   #details + #how-it-works rule below so it can't be shortened by
   margin collapsing through the section boundary. */
.dgs-pb-disclaimer:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-tertiary);
  border-left: 2px solid var(--surface-border-neutral);
  padding: 1rem 0 1rem 1rem;
  margin: 2rem 0 0;
}

/* Section-to-section transition gets its own explicit, larger gap
   (64px desktop / 48px mobile below) instead of the generic 3.5rem
   .dgs-pb-content > * + * spacing every other top-level block uses,
   so the disclaimer reads as closed-off supporting info before "How
   It Works" opens as a clearly new section. */
#details + #how-it-works:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  margin-top: 4rem;
}

/* ─── 6. HOW IT WORKS ───
   DIAGNOSIS (why the previous version still looked stuck together):
   the intro paragraph carried margin:0 and the gap below it was
   delegated entirely to the NEXT element's padding-top. That's a
   correct, non-collapsing technique, but it makes the gap's owner
   non-obvious — split across two unrelated rules instead of living on
   one dedicated class — so it's easy to lose track of, exactly the
   fragility being flagged here. This rebuild uses dedicated
   .dgs-pb-hiw-* classes (scoped to this section only, no shared
   .dgs-pb-content > * + * / .dgs-pb-content h2 reliance) with every
   gap owned by exactly one rule:
     title -> intro:      margin-bottom on the title (dedicated class)
     intro -> steps:      margin-bottom on the intro (dedicated class)
     step -> step:        flex `gap` on the steps container (not a
                           margin, so it structurally cannot collapse)
     step title -> desc:  margin on the step title (dedicated class)
   A connected vertical timeline still runs through the number badges
   (unchanged from before), now bridging the flex gap via a negative
   `bottom` offset on the connector instead of padding-bottom on each
   step; see the comment on .dgs-pb-hiw-step::before below. */

/* Written as h2.dgs-pb-hiw-title (element + class) purely so this
   margin reliably beats the shared `.dgs-pb-content h2` rule, which
   is also element+class specificity (0,1,1) and would otherwise win
   on source order alone. No !important needed: this is a genuine,
   confirmed specificity tie, resolved by raising this selector to
   match it rather than by force. Font-family/weight/color/size are
   deliberately NOT redeclared here — those still come from the
   shared rule (and, through it, the sitewide h2 default), so this
   heading stays visually identical to every other section heading
   on the page; only its margin is dedicated to this section. */
h2.dgs-pb-hiw-title:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  margin: 0 0 1.25rem;
}

.dgs-pb-hiw-intro:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #4a5568;
  max-width: 47.5rem;
  margin: 0 0 2.5rem;
}

.dgs-pb-hiw-steps:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.dgs-pb-hiw-step:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 1.75rem;
  align-items: start;
}

.dgs-pb-hiw-number:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  justify-self: start;
  position: relative;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--dgs-teal);
  border-radius: 50%;
  background: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dgs-teal-deep);
}

.dgs-pb-hiw-content:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  min-width: 0;
}

.dgs-pb-hiw-content h3:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ga-navy, #0A1F33);
  margin: 0.25rem 0 0.75rem;
}

.dgs-pb-hiw-content p:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #4a5568;
  margin: 0;
}

/* Connecting line: starts at the bottom of this step's own badge and
   ends at `bottom: -2rem`, i.e. exactly minus the steps container's
   `gap` value, so it extends past this step's own box into the gap
   and reaches the next step's badge. The gap itself is never owned by
   either step (it's real space the flex container inserts between
   them), which is what makes it collapse-proof; this negative offset
   is just how the line visually bridges that space. Suppressed on the
   last step since there's nothing after it to connect to. */
.dgs-pb-hiw-step:not(:last-child):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *)::before {
  content: '';
  position: absolute;
  left: 1.375rem;
  top: 2.75rem;
  bottom: -2rem;
  width: 1px;
  background: var(--surface-border-neutral);
}

@media (max-width: 640px) {
  #details + #how-it-works:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    margin-top: 3rem;
  }

  .dgs-pb-hiw-intro:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    margin-bottom: 1.75rem;
  }

  .dgs-pb-hiw-step:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    grid-template-columns: 3rem 1fr;
    column-gap: 1rem;
  }
}

/* ─── 7. FINAL CTA / GET-THE-RESOURCE CARD ───
   Same gradient navy card recipe as the event registration card
   (.dgs-event-register-card in dgs-event-detail.css), with the GHL
   resource-request form (see growth-hub.html's requested_resource
   modal) embedded inline instead of behind a popup. */

.dgs-pb-cta-card:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  position: relative;
  overflow: hidden;
  max-width: 90rem;
  margin: 0 auto;
  background: #0A1F33;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px rgba(10, 31, 51, 0.35);
  padding: clamp(2.25rem, 4vw, 3.5rem);
}

.dgs-pb-cta-card:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *)::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 450px;
  max-width: 70%;
  height: 28rem;
  max-height: 70%;
  background: radial-gradient(circle at 100% 0%, rgba(0, 179, 159, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.dgs-pb-cta-inner:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.dgs-pb-cta-text:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  flex: 1 1 18rem;
  min-width: 0;
}

.dgs-pb-cta-formcol:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  flex: 1 1 20rem;
  min-width: 0;
}

/* Compound selectors (.dgs-pb-cta-card ...) are deliberate: this card
   sits inside a .dgs-section--light section, whose sitewide
   p/span/h2 color rules (dgs-common.css) match at equal-or-higher
   specificity than a single class and would otherwise flip this
   card's white/teal text back to dark-on-dark-navy. */
.dgs-pb-cta-card .dgs-pb-cta-eyebrow:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dgs-teal);
  margin-bottom: 0.9rem;
}

.dgs-pb-cta-card .dgs-pb-cta-text h2:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 0.85rem;
}

.dgs-pb-cta-card .dgs-pb-cta-sub:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 1.5rem;
}

.dgs-pb-cta-card .dgs-pb-cta-meta:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dgs-pb-cta-form:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  width: 100%;
}

.dgs-pb-cta-form iframe:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  width: 100%;
  border: none;
  border-radius: var(--radius-lg);
  display: block;
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-07e6d16ec2:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  --ga-cat: var(--ga-teal) !important;
}

.dgs-il-e6cd4d6a90:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  width:100% !important;
  border:none !important;
  border-radius:8px !important;
  display:block !important;
}

/* ============================================================
   DGS BLOG POST TEMPLATE
   Native GHL Integration

   Duplicated verbatim from css/dgs-growth-article.css (same file
   section 0 above duplicates that file's .dgs-ga-* foundation, for
   the same reason: this template is self-contained, no external
   stylesheet dependency beyond dgs-common.css). The native GHL Blog
   Content widget is shared across Learn (articles), Implement
   (playbooks/resources), and Inspire (insights) — same widget, same
   .blog-html-container-single DOM, same selectors below — so this
   integration has to live in every stylesheet a GHL blog-theme
   template can load, not just dgs-growth-article.css.

   Keep this block byte-for-byte in sync with the one in
   css/dgs-growth-article.css if the native GHL integration ever
   changes; sections 7/8 below are the only two lines that
   legitimately differ, since this template's "Keep Reading" and
   Final CTA markup differ from the article template's.
========================================================= */

/* ---------------------------------------------------------
   1. Template scope
   Every rule below is scoped under .blog-html-container-single,
   the stable wrapper GHL's blog-theme always renders around a Blog
   Content widget's output. Nothing here touches a bare tag/id or any
   selector that could match outside that widget.
--------------------------------------------------------- */
.blog-html-container-single:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: flex !important;
  flex-direction: column;
  background: #ffffff !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  /* GHL's OWN default theme CSS (not ours) ships
     `.blog-html-container-single { margin: 0 auto; max-width: 800px;
     overflow: hidden }`. Left alone, that squeezes the whole widget
     into an 800px centered column (exposing the sitewide navy
     `body.dgs-page` background on both sides for the widget's full
     height — the "navy page / white body" split) AND clips every
     child's `width: 100vw` full-bleed hero breakout below, since an
     ancestor with `overflow: hidden` clips escaping descendants
     regardless of their own position/transform. All three must be
     beaten here, not just the child rules. (GHL also exposes a
     `.blog-content-fluid-width` class that sets max-width:100% on this
     same selector — an equivalent native "Fluid Width" widget toggle,
     if one exists in the page builder, is a fine alternative to this.) */
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* ---------------------------------------------------------
   2. Native GHL Blog Hero
   Native render order is: image, title, category, date, content.
   Target order is: back-link, category, title, date, image, content.
   `order` moves the real elements (image included) with zero DOM
   changes; the back-link, category, title and date rows additionally
   share one navy, full-bleed background so the four separate elements
   read as a single hero block, matching .dgs-ga-hero.
--------------------------------------------------------- */
.blog-html-container-single > .blog-back-button:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
.blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
.blog-html-container-single > .blog-content-title:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
.blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  background: var(--ga-navy, #0A1F33) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .blog-html-container-single > .blog-back-button:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
  .blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
  .blog-html-container-single > .blog-content-title:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
  .blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .blog-html-container-single > .blog-back-button:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
  .blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
  .blog-html-container-single > .blog-content-title:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
  .blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }
}

.blog-html-container-single > .blog-back-button:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  order: 1;
  display: flex !important;
  align-items: center;
  gap: 0.4rem;
  padding-top: 8.5rem !important;
  padding-bottom: 2rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  margin-top: 0 !important;
  cursor: pointer;
}

.blog-html-container-single > .blog-back-button:hover:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  color: var(--ga-teal, #00B39F) !important;
}

/* GHL's default back-arrow renders blank without Font Awesome loaded;
   swap it for a plain arrow glyph instead of pulling in an icon font. */
.blog-html-container-single > .blog-back-button .blog-left-arrow:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  margin-right: 0.3rem !important;
}

.blog-html-container-single > .blog-back-button .blog-left-arrow:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *)::before {
  content: "\2190" !important;
  font-family: var(--font-body) !important;
}

.blog-html-container-single > .blog-content-title:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  order: 3;
  padding-top: 0 !important;
  padding-bottom: 1.75rem !important;
  margin: 0 !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 4.2vw, 3.1rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #ffffff !important;
}

.blog-html-container-single > .blog-cover-image-container:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  order: 5;
  max-width: 100%;
  margin: -2rem auto 0 !important;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .blog-html-container-single > .blog-cover-image-container:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .blog-html-container-single > .blog-cover-image-container:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 0 3.5rem;
  }
}

/* ---------------------------------------------------------
   3. Native GHL Metadata
--------------------------------------------------------- */
.blog-html-container-single > .meta-section-1:has(.blog-category):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  order: 2;
  padding-top: 0 !important;
  padding-bottom: 1.1rem !important;
}

.blog-html-container-single .blog-category:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *),
.blog-html-container-single .blog-category a:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: inline-block;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ga-teal, #00B39F) !important;
  text-decoration: none !important;
}

.blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  order: 4;
  display: flex;
  align-items: center;
  padding-top: 1.5rem !important;
  padding-bottom: 2.75rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.blog-html-container-single .blog-date:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

/* ---------------------------------------------------------
   4. Featured image
--------------------------------------------------------- */
.blog-html-container-single .hl-image-picture:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: block !important;
}

.blog-html-container-single .blog-content-blog-image:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  width: 100% !important;
  aspect-ratio: 16 / 8.5;
  object-fit: cover !important;
  border-radius: var(--radius-lg, 14px) !important;
  display: block;
  box-shadow: 0 24px 60px rgba(10, 31, 51, 0.18);
}

/* ---------------------------------------------------------
   5. Article content
   #blogPostContent is a fixed GHL id (not a per-widget random hash),
   safe to use directly per GHL's own docs.
--------------------------------------------------------- */
.blog-html-container-single > .blog-html:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  order: 6;
  background: #ffffff !important;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 4.5rem 1rem 2rem !important;
}

@media (min-width: 768px) {
  .blog-html-container-single > .blog-html:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 4.5rem 2rem 2rem !important;
  }
}

@media (min-width: 1024px) {
  .blog-html-container-single > .blog-html:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding: 4.5rem 3.5rem 2rem !important;
  }
}

/* Fallback typography for article HTML pasted WITHOUT its own
   .dgs-blog-render wrapper/styles. #blogPostContent is an ID, which
   would outrank .dgs-blog-render's own (non-!important) max-width/
   margin, so the :not(:has(...)) guard is required, not decorative:
   it keeps this fallback OFF entirely on any post that already ships
   .dgs-blog-render, so existing per-post styling is never touched. */
#blogPostContent:not(:has(.dgs-blog-render)):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-body);
  color: var(--ga-ink, #0A1F33);
  max-width: 76ch;
  margin: 0 auto;
}

#blogPostContent:not(:has(.dgs-blog-render)) > p:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-size: 1.1rem;
  line-height: 1.85;
  color: #2A3B4D;
}

#blogPostContent:not(:has(.dgs-blog-render)) > h2:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  color: var(--ga-navy, #0A1F33);
}

/* ---------------------------------------------------------
   6. Native GHL overrides
--------------------------------------------------------- */
.blog-html-container-single > .blog-tags:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  order: 7;
  max-width: 860px;
  margin: 0 auto !important;
  padding: 0 1rem 1rem !important;
}

.blog-html-container-single > .blog-tags:empty:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  display: none !important;
}

.blog-html-container-single > .hl-blog-content-back-to-top-container:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  order: 8;
  max-width: 860px;
  margin: 0 auto 3rem !important;
  padding: 0 1rem !important;
  text-align: center;
  background: transparent !important;
}

.blog-html-container-single > .hl-blog-content-back-to-top-container .back-to-top:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
  background: transparent !important;
  color: var(--ga-teal, #00B39F) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
}

/* ---------------------------------------------------------
   7. More Perspectives ("Keep Reading")
   Reuses the .dgs-ga-related heading+link variant already inlined in
   section 0 above (no card grid on this template) — nothing to add
   here. Lives in its own Custom Code section placed directly after
   the Blog Content widget in the page builder.
--------------------------------------------------------- */

/* ---------------------------------------------------------
   8. Final CTA
   This template's Final CTA is the bespoke .dgs-pb-cta-card
   gated-resource form (section 7 above), not .dgs-sol-final-cta —
   reused as-is, nothing to add here.
--------------------------------------------------------- */

/* ---------------------------------------------------------
   9. Responsive
--------------------------------------------------------- */
@media (max-width: 767px) {
  .blog-html-container-single > .blog-back-button:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    padding-top: 6.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .blog-html-container-single > .meta-section-1:has(.blog-date):where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    flex-wrap: wrap;
    padding-bottom: 2rem !important;
  }

  .blog-html-container-single > .blog-cover-image-container:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    margin-top: -1.25rem !important;
  }

  .blog-html-container-single .blog-content-blog-image:where(.dgs-css-playbook-detail,.dgs-css-playbook-detail *) {
    border-radius: var(--radius-md, 10px) !important;
  }
}


/* ============================================================
   C16. SOCIAL-HUB  (scope: .dgs-css-social-hub)
   Formerly css/dgs-social-hub.css. Used by:
     hub.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — SOCIAL / QR HUB  (hub.html)
   ------------------------------------------------------------
   Standalone destination for QR codes on printed materials,
   decks, events and business cards. Loads AFTER dgs-common.css
   and reuses its Framework 3.0 tokens, header/footer, buttons,
   .dgs-eyebrow / .dgs-section-head and the .dgs-reveal system.

   Design language: Deep Navy #0A1F33 surfaces, Growth Teal
   accents, Signal Amber reserved for primary conversion CTAs,
   1px hairline borders, token radii (max --radius-xl / 8px),
   subtle motion only. No glassmorphism, no oversized gradients.
   ============================================================ */

/* This page is dark end-to-end, so paint the document navy to
   avoid any white flash above/below sections. */
.dgs-hub:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  background: #050d1a;
}

/* Shared local tokens for this page */
.dgs-hub:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  --hub-card: #0d2439;                    /* raised navy card surface */
  --hub-card-2: #0b1f31;                  /* recessed card surface   */
  --hub-line: rgba(255, 255, 255, 0.08);  /* hairline border         */
  --hub-line-strong: rgba(255, 255, 255, 0.14);
  --hub-teal-soft: rgba(0, 179, 159, 0.12);
}

/* ============================================================
   1. HERO
   ============================================================ */
.dgs-hub-hero:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(0, 179, 159, 0.10) 0%, transparent 55%),
    radial-gradient(90% 70% at 10% 0%, rgba(45, 127, 249, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #071324 0%, #0A1F33 60%, #081525 100%);
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(3.5rem, 7vw, 5rem);
}

/* Balanced duotone grade: brand navy & teal tint while keeping image details visible */
.dgs-hub .dgs-hero-duotone:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  mask-image: radial-gradient(ellipse 100% 100% at 50% 25%, black 60%, transparent 98%) !important;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 25%, black 60%, transparent 98%) !important;
}

.dgs-hub .dgs-hero-duotone:where(.dgs-css-social-hub,.dgs-css-social-hub *)::before {
  filter: grayscale(0.65) contrast(1.12) brightness(0.78) !important;
  opacity: 0.65 !important;
}

.dgs-hub .dgs-hero-duotone:where(.dgs-css-social-hub,.dgs-css-social-hub *)::after {
  opacity: 0.7 !important;
}

.dgs-hub .dgs-hero-scrim:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  background: linear-gradient(to bottom, rgba(7, 19, 36, 0.55) 0%, rgba(10, 31, 51, 0.65) 50%, rgba(8, 21, 37, 0.9) 100%) !important;
}

/* Dotted texture removed from hero */
.dgs-hub-hero:where(.dgs-css-social-hub,.dgs-css-social-hub *)::before {
  content: none !important;
}

.dgs-hub-hero > .dgs-container:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  position: relative;
  z-index: 2;
}

.dgs-hub-hero-grid:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .dgs-hub-hero-grid:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
    grid-template-columns: 1.4fr 0.6fr;
  }
}

.dgs-hub-hero-logo:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: inline-block;
  margin-bottom: 1.25rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dgs-hub-hero-logo:hover:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  opacity: 0.95;
  transform: translateY(-1px);
}
.dgs-hub-logo-img:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  height: clamp(42px, 5vw, 60px);
  width: auto;
  object-fit: contain;
  display: block;
}

/* Dedicated eyebrow for this hero, decoupled from the sitewide
   .dgs-eyebrow so it can be aligned/sized independently. */
.dgs-hub-hero-eyebrow:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: flex;
  justify-content: flex-start;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--action-teal);
  margin: 0;
}

.dgs-page.dgs-hub .dgs-hub-hero-title:where(.dgs-css-social-hub,.dgs-css-social-hub *),
h1.dgs-hub-hero-title:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0.6rem 0 0;
}
@media (min-width: 960px) {
  .dgs-page.dgs-hub .dgs-hub-hero-title:where(.dgs-css-social-hub,.dgs-css-social-hub *),
  h1.dgs-hub-hero-title:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
    white-space: nowrap;
  }
}

.dgs-hub-hero-title .dgs-hub-accent:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  color: var(--action-teal);
}

.dgs-hub-hero-copy p.dgs-hub-hero-lead:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  text-align: left;
  color: var(--text-light-muted);
  margin: 1.75rem 0 0;
  max-width: 46ch;
}

/* ── Reach-us channels: SMS / Call / WhatsApp / Viber, "Let's Talk" label inline ── */
.dgs-hub-hero-channels:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.dgs-hub-hero-talk-label:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  margin-right: 0.25rem;
}

.dgs-hub-hero-channel:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-full);
  background: var(--hub-card-2);
  border: 1px solid var(--hub-line);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}
.dgs-hub-hero-channel svg:where(.dgs-css-social-hub,.dgs-css-social-hub *) { width: 17px; height: 17px; color: var(--action-teal); }
.dgs-hub-hero-channel:hover:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  transform: translateY(-2px);
  border-color: rgba(0, 179, 159, 0.4);
  background: #0d2439;
}

.dgs-hub-hero-phone-number:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  transition: color var(--duration-base) var(--ease-out);
}
.dgs-hub-hero-phone-number:hover:where(.dgs-css-social-hub,.dgs-css-social-hub *) { color: var(--action-teal); }

/* ── Hero contact cards: careers / business growth ── */
.dgs-hub-hero-contacts:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hub-line);
}
@media (min-width: 560px) {
  .dgs-hub-hero-contacts:where(.dgs-css-social-hub,.dgs-css-social-hub *) { grid-template-columns: repeat(2, 1fr); }
}

.dgs-hub-hero-contact:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  text-decoration: none;
  padding: 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--hub-card-2);
  border: 1px solid var(--hub-line);
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}
.dgs-hub-hero-contact:hover:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  border-color: rgba(0, 179, 159, 0.45);
  transform: translateY(-3px);
  background: var(--hub-card);
}
.dgs-hub-hero-contact-icon:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(0, 179, 159, 0.18) 0%, rgba(45, 127, 249, 0.12) 100%);
  border: 1px solid rgba(0, 179, 159, 0.25);
  color: var(--action-teal);
}
.dgs-hub-hero-contact-icon svg:where(.dgs-css-social-hub,.dgs-css-social-hub *) { width: 20px; height: 20px; }
.dgs-hub-hero-contact-body:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.dgs-hub-hero-contact-body .k:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action-teal);
}
.dgs-hub-hero-contact-body .d:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.dgs-hub-hero-contact-body .v:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: #ffffff;
  word-break: break-word;
}

/* ── Right column: highlighted follow panel (orb now lives as a section-level background layer) ── */
.dgs-hub-hero-visual:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: flex;
  justify-content: center;
}

/* Left alignment helpers for hero copy & eyebrow */
.dgs-hub-hero-copy:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  text-align: left !important;
}

.dgs-hub-hero-copy .dgs-eyebrow:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: inline-flex !important;
  align-items: center !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ── Individual Large Social Buttons ── */
.dgs-hub-hero-social-buttons:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 440px;
}

.dgs-hub-social-btn:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  --btn-brand: var(--action-teal);
  --btn-brand-bg: rgba(0, 179, 159, 0.12);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.4rem;
  border-radius: var(--radius-xl);
  background: #0d2439;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 30px -15px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out),
              background 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out);
}

.dgs-hub-social-btn--fb:where(.dgs-css-social-hub,.dgs-css-social-hub *),
.dgs-hub-social-btn--in:where(.dgs-css-social-hub,.dgs-css-social-hub *),
.dgs-hub-social-btn--ig:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  --btn-brand: var(--action-teal);
  --btn-brand-bg: rgba(0, 179, 159, 0.15);
}

.dgs-hub-social-btn .icon:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--btn-brand);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease;
}

.dgs-hub-social-btn .icon svg:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  width: 22px;
  height: 22px;
}

.dgs-hub-social-btn .text:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  flex: 1;
}

.dgs-hub-social-btn .arrow:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--btn-brand-bg);
  color: var(--btn-brand);
  transition: transform 0.25s ease, background 0.25s ease;
}

.dgs-hub-social-btn .arrow svg:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  width: 16px;
  height: 16px;
}

.dgs-hub-social-btn:hover:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--btn-brand) 60%, transparent);
  background: #0e2942;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.7);
}

.dgs-hub-social-btn:hover .arrow:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  transform: translateX(3px);
  background: var(--btn-brand);
  color: #ffffff;
}

/* ── Hero globe: now an ambient, supporting background layer ── */

/* floating platform chips over the globe */

@keyframes dgs-hub-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes dgs-hub-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-47bb04fc03:where(.dgs-css-social-hub,.dgs-css-social-hub *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7301f6ffc85279f4022784.png') !important;
}


/* ============================================================
   C17. SOLUTION-DETAIL  (scope: .dgs-css-solution-detail)
   Formerly css/dgs-solution-detail.css. Used by:
     audit.html, career-main-layout.html, careers.html
     contact.html, solutions/corporate-training.html, solutions/crm-funnel-automation.html
     solutions/eor-hr-support.html, solutions/growth-os-setup.html, solutions/growth-systems-audit.html
     solutions/intelligent-automation.html, solutions/recruitment-executive-search.html, solutions/remote-staffing-solutions.html
     solutions.html, thank-you-application.html, thank-you-audit.html
     thank-you-contact.html, thank-you-training.html, thank-you.html
   GHL fallback: on the 8 solution pages (<main data-dgs-css> includes
   dgs-css-premium-viz) these rules also match inside <main>, so the page
   is styled even if GHL drops the <body> classes and before main.js runs.
   ============================================================ */

/* LEGACY (frozen 2026-10-10): superseded by css/styles.css, which every page
   in this repo now loads. Kept only because pages already published on
   GoHighLevel still link this URL; it stops being needed once those pages
   are re-pasted from this repo. Do not edit; change css/styles.css instead. */
/* ============================================================
   DIGITAL GROWTHSCALE — SERVICE DETAIL PAGE STYLES
   Shared by all 8 individual service landing pages.
   Load order: dgs-common.css FIRST, then this file.
   ============================================================ */


/* ─── 1. HERO (Centered text + wide photo below, half-bleeds out of dark section) ─── */

.dgs-service-hero:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  padding: 8rem 0 5rem;
  background-color: #0A1F33 !important;
  color: var(--text-white);
  position: relative;
  overflow: visible;
  text-align: center;
}

@media (min-width: 1024px) {
  .dgs-service-hero:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 10.5rem 0 6.5rem;
  }
}

@media (max-width: 768px) {
  .dgs-service-hero:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 8.5rem 0 4.5rem;
  }
}

/* Depth: soft spotlight (mesh grid overlay removed) */
.dgs-service-hero .dgs-hero-mesh-overlay:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: none !important;
}

.dgs-service-hero .dgs-hero-spotlight:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: absolute;
  left: 50%;
  top: 0;
  width: 80vw;
  height: 60vh;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(0, 179, 159, 0.14) 0%, rgba(45, 127, 249, 0.06) 50%, transparent 80%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -20%);
}

.dgs-service-hero > .dgs-container:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  z-index: 5;
}

/* Centered column: text block → wide photo below */
.dgs-svc-hero-grid:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.dgs-service-hero .dgs-hero-content:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 3.5rem;
}

.dgs-service-hero h1:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 auto 1.5rem;
  max-width: 1140px;
  text-align: center;
}

.dgs-service-hero h1 .dgs-hero-title-main:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: linear-gradient(to bottom, #ffffff 55%, #cfd8e3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.dgs-service-hero .dgs-hero-sub:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 0 auto;
  text-align: center;
}

.dgs-service-hero .dgs-hero-actions:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Solution 0X badge pill */
.dgs-service-hero-badge:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1affeb; /* brighter teal for dark mode contrast, matches .dgs-pill--teal */
  background: rgba(0, 179, 159, 0.15);
  border: 1px solid rgba(0, 179, 159, 0.4);
  border-radius: var(--radius-full);
  padding: 0.45rem 0.95rem;
  margin-bottom: 1.25rem;
}

/* Breadcrumb (centered, on dark) */
.dgs-svc-breadcrumb:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 2rem;
  position: relative;
  z-index: 5;
}

.dgs-svc-breadcrumb a:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: rgba(255, 255, 255, 0.88);
  transition: color var(--duration-base) var(--ease-out);
}

.dgs-svc-breadcrumb a:hover:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--action-teal);
}

.dgs-svc-breadcrumb span[aria-hidden]:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: rgba(255, 255, 255, 0.25);
}

.dgs-svc-breadcrumb .dgs-svc-current:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: #ffffff;
  font-weight: 600;
}

/* Hero visual: wide full-bleed image below text, top half-visible in dark section */


/* ─── TEAL OUTLINE BUTTON (secondary CTA) ─── */


/* ─── 2. IDEAL FIT PROFILE SECTION ─── */

/* Ideal Fit cards get their own unboxed, icon-top layout instead of the
   shared boxed .dgs-value-card (border, shadow, backdrop-blur) — squeezed
   into a 1/3-width grid column that heavy card chrome looked cramped and
   crowded. This mirrors a plain, editorial column layout: bare icon, bold
   label, muted copy, with a thin divider between columns on desktop. */

/* Left-alignment overrides for industry tags inside the details row */


/* ─── 3. BUYING TRIGGERS ("Is this you?") ─── */


/* ─── 4. WHO THIS IS FOR — Horizontal Cards ─── */

/* Bullet list inside value cards */


/* ─── 5. BEST-FIT INDUSTRIES ─── */


/* ─── 6. MESSAGING ANGLE (pull-quote banner) ─── */


/* ─── 7. PREV / NEXT SERVICE NAVIGATION ─── */

.dgs-svc-nextprev:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 56rem;
  margin: 0 auto;
}

.dgs-svc-nextprev a:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--surface-border-neutral);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  color: var(--text-dark-muted);
  font-size: 0.88rem;
  text-decoration: none;
  flex: 1;
  min-width: 14rem;
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.dgs-svc-nextprev a:hover:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-color: var(--action-teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 179, 159, 0.08);
}

.dgs-svc-nextprev a.dgs-svc-next:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  text-align: right;
  align-items: flex-end;
}

.dgs-svc-nextprev-label:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--action-teal);
  font-weight: 700;
  font-family: var(--font-display);
}

.dgs-svc-nextprev-title:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bg-deep-navy);
  line-height: 1.35;
}

@media (max-width: 640px) {
  .dgs-svc-nextprev:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    flex-direction: column;
  }

  .dgs-svc-nextprev a:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    min-width: 100%;
  }
}


/* ─── 8. RESPONSIVE CLEANUP ─── */

@media (max-width: 768px) {

  .dgs-service-hero:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 7.5rem 0 3.5rem;
  }
}


/* The FAQ layout and styling is fully defined in dgs-common.css.
   Redundant overrides removed here to guarantee consistent styles. */


/* ============================================================
   SOLUTION PAGE 3.0 — GOLD-STANDARD TEMPLATE SECTIONS
   Added for the 8 Solutions pages (Transform / Enable / Elevate).
   Shared blocks: Challenges, Who it's for, What's included,
   CSR journey, Expected outcomes, KPIs, Case studies, Resources.
   ============================================================ */

/* ─── Shared: intro copy under a section head ─── */
/* `.dgs-page` prefix (specificity 0,2,0) is required so the auto side-margins
   win over the global `.dgs-page p { margin: 0 }` (0,1,1) — without it the lead
   loses its centering and sits flush left under the centered heading. */
.dgs-page .dgs-sol-lead:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  max-width: 52rem;
  margin: 0 auto var(--space-lg);
  text-align: center;
  text-wrap: balance;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.dgs-section--light .dgs-sol-lead:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--text-dark-muted);
}

/* Shared 2-up marker eyebrow already handled by .dgs-eyebrow */


/* ─── CHALLENGES THIS SOLVES (light cards, image-2 style) ─── */
.dgs-challenge-grid:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 68rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .dgs-challenge-grid:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 3.5rem;
  }
}

.dgs-challenge-card:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.dgs-challenge-card-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(0, 179, 159, 0.16) 0%, rgba(45, 127, 249, 0.1) 100%);
  border: 1px solid rgba(0, 179, 159, 0.22);
  color: var(--action-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dgs-challenge-card-icon svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 30px;
  height: 30px;
}

.dgs-challenge-card h3:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bg-deep-navy);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.dgs-challenge-card p:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--text-dark-muted);
}


/* ─── SHARED CHECK GRID (Who it's for / What's included / Outcomes) ─── */
.dgs-check-grid:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2.5rem;
  max-width: 60rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 720px) {
  .dgs-check-grid:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dgs-check-item:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.dgs-section--light .dgs-check-item:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-bottom-color: var(--surface-border-neutral);
}

.dgs-check-item-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: rgba(0, 179, 159, 0.1);
  border: 1px solid rgba(0, 179, 159, 0.28);
  color: var(--action-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dgs-check-item-icon svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 14px;
  height: 14px;
}

.dgs-check-item p:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}

.dgs-section--light .dgs-check-item p:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: #334155;
}

.dgs-check-item strong:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--text-white);
  font-weight: 650;
}

.dgs-section--light .dgs-check-item strong:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--bg-deep-navy);
}


/* ─── CSR JOURNEY (Sticky Left Heading + Scrollable Right Track) ─── */
.dgs-csr-layout:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 900px) {
  .dgs-csr-layout:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-template-columns: 4fr 6fr;
    gap: 5.5rem;
  }
  .dgs-csr-sticky:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    position: sticky;
    top: 8.75rem;
  }
}

.dgs-csr-track:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  counter-reset: csr;
  position: relative;
  z-index: 1;
  width: 100%;
}

.dgs-csr-step:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  padding: 2.2rem 2rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}

.dgs-csr-step:hover:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-color: rgba(0, 179, 159, 0.35);
  background: rgba(255, 255, 255, 0.03);
}

.dgs-csr-step-num:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  counter-increment: csr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--action-teal);
  background: rgba(0, 179, 159, 0.08);
  color: var(--action-teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}

.dgs-csr-step-num:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *)::before {
  content: '0' counter(csr);
}

.dgs-csr-step h3:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-white);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}

.dgs-csr-step p:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}


/* ─── CSR JOURNEY GRAPHIC (icon strip below the CSR text/track) ───
   No supporting copy under the label here (icon + short title only), so
   steps stay pinned to the icon's own width (84px) instead of equal-fill
   — the connecting lines space evenly off the icon box, never off how
   wide a stage's label happens to be. */
.dgs-csr-graphic:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.75rem);
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 179, 159, 0.16) 0%, transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(0, 179, 159, 0.22) 0%, transparent 48%),
    rgba(255, 255, 255, 0.015);
}

.dgs-csr-graphic-step:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --csr-accent: var(--dgs-teal);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  flex: 0 0 84px;
  width: 84px;
  max-width: 84px;
}

.dgs-csr-graphic-step--blue:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --csr-accent: var(--dgs-blue);
}

.dgs-csr-graphic-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1.5px solid color-mix(in srgb, var(--csr-accent) 40%, transparent);
  background: color-mix(in srgb, var(--csr-accent) 8%, #0A1F33);
  transition: border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.dgs-csr-graphic-icon svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 36px;
  height: 36px;
}

.dgs-csr-graphic-step:hover .dgs-csr-graphic-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-color: var(--csr-accent);
  background: color-mix(in srgb, var(--csr-accent) 16%, #0A1F33);
  transform: translateY(-3px);
}

.dgs-csr-graphic-label:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  width: max-content;
}

.dgs-csr-graphic-num:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  padding-right: 0.6rem;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  font-family: var(--font-display, var(--font-heading));
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--csr-accent);
}

.dgs-csr-graphic-text:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-white);
}

.dgs-csr-graphic-connector:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: center;
  flex: 1 1 40px;
  min-width: 24px;
  height: 84px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.dgs-csr-graphic-line:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.dgs-csr-graphic-dot:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dgs-teal);
}

.dgs-csr-graphic-arrow:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 0.4rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 760px) {
  .dgs-csr-graphic:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
    padding: 1.75rem 1.25rem;
    justify-items: center;
  }

  .dgs-csr-graphic-step:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    flex: none;
    width: 100%;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
  }

  .dgs-csr-graphic-connector:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    display: none;
  }

  .dgs-csr-graphic-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 68px;
    height: 68px;
  }

  .dgs-csr-graphic-icon svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 30px;
    height: 30px;
  }

  .dgs-csr-graphic-label:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    white-space: nowrap;
  }

  .dgs-csr-graphic-text:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
  }

  .dgs-csr-graphic-num:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.75rem;
    padding-right: 0.5rem;
  }
}

@media (max-width: 380px) {
  .dgs-csr-graphic:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    gap: 1.5rem 1rem;
    padding: 1.5rem 1rem;
  }

  .dgs-csr-graphic-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 58px;
    height: 58px;
  }

  .dgs-csr-graphic-icon svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 26px;
    height: 26px;
  }

  .dgs-csr-graphic-text:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.72rem;
  }

  .dgs-csr-graphic-num:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.68rem;
  }
}


/* ─── KPIs WE TRACK ─── */


/* ─── CASE STUDIES (Client Success cards) ─── */

.dgs-case-note:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  max-width: 60rem;
  margin: 3.25rem auto 0 !important;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-tertiary);
}


/* ─── RESOURCES ─── */
.dgs-resource-grid:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 56rem;
  margin: 0 auto;
}

@media (min-width: 700px) {
  .dgs-resource-grid:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dgs-resource-card:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem 1.75rem;
  background: var(--bg-white);
  border: 1px solid var(--surface-border-neutral);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(10, 31, 51, 0.03);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.dgs-resource-card:hover:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  transform: translateY(-3px);
  border-color: var(--action-teal);
  box-shadow: 0 16px 36px rgba(0, 179, 159, 0.08);
}

.dgs-resource-card-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(0, 179, 159, 0.08);
  border: 1px solid rgba(0, 179, 159, 0.2);
  color: var(--action-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dgs-resource-card-icon svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 20px;
  height: 20px;
}

.dgs-resource-card-body:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  flex: 1;
  min-width: 0;
}

.dgs-resource-card-title:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bg-deep-navy);
  margin-bottom: 0.2rem;
}

.dgs-resource-card-note:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-dark-muted);
}

.dgs-resource-card-arrow:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  flex-shrink: 0;
  color: var(--action-teal);
  transition: transform var(--duration-base) var(--ease-out);
}

.dgs-resource-card:hover .dgs-resource-card-arrow:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  transform: translateX(4px);
}

.dgs-resource-card-arrow svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 20px;
  height: 20px;
}


/* ─── POSITIONING / DISCLAIMER NOTE (e.g. "support, not legal advice") ─── */
.dgs-sol-note:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  max-width: 52rem;
  margin: var(--space-md) auto 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--action-teal);
  background: rgba(0, 179, 159, 0.04);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.dgs-section--light .dgs-sol-note:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--text-dark-muted);
  background: rgba(0, 179, 159, 0.05);
}


/* ─── SPLIT FEATURE (image + content, Rippling-inspired) ─── */
.dgs-sol-split:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .dgs-sol-split:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* Floating chip reused inside split media */

.dgs-sol-split-body:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  max-width: 34rem;
}

.dgs-sol-split-body .dgs-eyebrow:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  justify-content: flex-start;
}

.dgs-sol-split-body h2:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0.35rem 0 1.5rem;
}

/* Client Success heading, matched to the industry-page equivalent
   (#dgs-ind-cases h2 in dgs-industries-detail.css) — bigger than the
   shared .dgs-section-head h2 default. */
#dgs-sol-cases .dgs-section-head:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  max-width: 76rem;
}

#dgs-sol-cases h2:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: clamp(2.6rem, 5.2vw, 3.9rem) !important;
}

.dgs-sol-split-body .dgs-sol-lead:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  margin: 0 0 1.5rem;
  text-align: left;
  max-width: none;
}

/* Stacked check list inside split (single column, no centering) */
.dgs-sol-split .dgs-check-grid:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  margin: 0;
}


/* ─── CASE CARD IMAGE HEADER ─── */


/* ─── FINAL CTA — cinematic (giant SCALE word + aurora + grid + faded photo) ───
   Mirrors the homepage cinematic CTA. Overrides the teal/amber `.dgs-cta-banner`
   wash and the off-brand purple `.dgs-section--darker::after` glow. */
.dgs-sol-final-cta:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-navy-darkest, #0A1F33) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

/* faded photo background */
.dgs-sol-final-bg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  pointer-events: none;
}

/* SCALE watermark removed from solution detail pages */
.dgs-sol-final-cta:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *)::before {
  content: none;
}

/* breathing teal/blue aurora — replaces the purple .dgs-section--darker::after */
.dgs-sol-final-cta:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vw;
  height: 50vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%,
    rgba(0, 179, 159, 0.12) 0%,
    rgba(45, 127, 249, 0.12) 40%,
    transparent 70%);
  animation: dgs-sol-cta-breathe 8s ease-in-out infinite alternate;
}

/* lift real content above the decorative layers */
.dgs-sol-final-cta > *:not(.dgs-sol-final-bg):where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  z-index: 2;
}

/* Heading: two clean lines + white gradient text-glow (matches homepage CTA).
   The !important beats the global `.dgs-page h2` !important size in common. */
.dgs-sol-final-cta h2:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  max-width: 66rem;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
  line-height: 1.22;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.12));
}

/* keep the teal accent line solid (don't let the gradient clip swallow it) */
.dgs-sol-final-cta h2 .dgs-text-accent:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  -webkit-text-fill-color: var(--action-teal);
  filter: none;
}


/* ============================================================
   SOLUTION PAGE 3.0 — MEDIA ADDITIONS (photos below content)
   ============================================================ */

/* Photo anchored below the sticky CSR heading/copy (left column) */

/* Shared wide framed photo used in Included / Outcomes / KPIs sections */

/* Client success: keep the two cards centered and equal height */


/* ─── MEDIA SPLIT (content beside photo — Included / Outcomes / KPIs) ─── */
.dgs-sol-msplit:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.dgs-sol-msplit-body:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dgs-sol-msplit .dgs-section-head:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  text-align: left;
  margin: 0 0 1.5rem;
}

.dgs-sol-msplit .dgs-eyebrow:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  justify-content: flex-start;
}

.dgs-sol-msplit .dgs-sol-lead:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  text-align: left;
  margin: 0 0 1.5rem;
  max-width: none;
}

/* Lists/tiles collapse to a single stacked column inside the split */
.dgs-sol-msplit .dgs-check-grid:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  margin: 0;
}

/* The photo fills its column, no longer a wide band below */

@media (min-width: 900px) {
  .dgs-sol-msplit:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
  }
  /* --rev flips the photo to the left */
  .dgs-sol-msplit--rev .dgs-sol-msplit-body:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    order: 2;
  }
}

/* KPIs render as bare divider rows (not cards) inside the split */


/* 100% Global Solution Detail Badge System */
.dgs-ui-badge:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
}

.dgs-ui-badge--success:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: #064E3B;
  color: #34D399;
  border: 1px solid #047857;
}

.dgs-ui-badge--pending:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: #451A03;
  color: #FBBF24;
  border: 1px solid #78350F;
}

.dgs-ui-badge--ai:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: #0C4A6E;
  color: #38BDF8;
  border: 1px solid #0284C7;
}

.dgs-ui-badge--neutral:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: #1E293B;
  color: #94A3B8;
  border: 1px solid #334155;
}

/* What is Included checklist: same static, unfilled icon as every other
   checklist on the page — no solid fill, no active/hover state. */
#dgs-sol-included .dgs-check-item:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  padding: 1.15rem 0;
  gap: 1.15rem;
  align-items: center;
}

#dgs-sol-included .dgs-check-item-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 26px;
  height: 26px;
}

#dgs-sol-included .dgs-check-item p:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 1.05rem;
  color: #0A1F33;
}

/* ══════════════════════════════════════════════════════════════════════════════
   WHAT IS INCLUDED: FLOATING GRAPHIC SYSTEM WITH DEEP NAVY CONTAINER
   ══════════════════════════════════════════════════════════════════════════════ */
.dgs-included-cards-stage:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-2xl, 24px);
  background: radial-gradient(circle at 50% 50%, #1E4E82 0%, #0E2C4D 45%, #061524 85%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(6, 21, 36, 0.5), 0 4px 16px rgba(6, 21, 36, 0.3);
  perspective: 1200px;
  margin: 0 auto;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.dgs-included-cards-stage:hover:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  transform: translateY(-4px);
  box-shadow: 0 32px 72px rgba(6, 21, 36, 0.6), 0 0 30px rgba(0, 179, 159, 0.2);
  border-color: rgba(0, 179, 159, 0.35);
}

.dgs-included-img:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: scale(1.005);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.dgs-included-cards-stage:hover .dgs-included-img:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  transform: scale(1.035) rotate(0.6deg);
  filter: brightness(1.03) contrast(1.02);
}

/* Mouse pointer cursor mockup */
.dgs-inc-cursor:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: absolute;
  right: 17%;
  bottom: 37%;
  width: 28px;
  height: 28px;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  animation: dgsCursorFloat 3.5s ease-in-out infinite;
  z-index: 10;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-included-cards-stage:hover .dgs-inc-cursor:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  transform: translate(4px, 4px) scale(1.1);
}

.dgs-inc-cursor svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 100%;
  height: 100%;
}

@keyframes dgsCursorFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4px, 4px); }
}

@media (max-width: 991px) {
  .dgs-included-cards-stage:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    max-width: 520px;
  }
}

@media (max-width: 600px) {
  .dgs-included-cards-stage:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    border-radius: 18px;
    max-width: 100%;
  }
  .dgs-inc-cursor:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 22px;
    height: 22px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   WHAT YOU WALK AWAY WITH: BEFORE & AFTER TRANSFORMATION COMPARISON SYSTEM
   ══════════════════════════════════════════════════════════════════════════════ */

/* Transformation card container */
.dgs-transform-stage:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  position: relative;
}

/* No outer card/background — two staggered panels sit directly on the
   section. The teal "After" panel is pulled left to overlap the white
   "Before" panel and offset down, elevated above it with a stronger
   shadow, so the pair reads as two overlapping cards, not a grid. */
.dgs-transform-panels:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  align-items: start;
}

.dgs-transform-panel:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.dgs-transform-panel--before:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  background: #ffffff;
  border: 1px solid rgba(10, 31, 51, 0.08);
  box-shadow: 0 16px 40px rgba(10, 31, 51, 0.07);
  padding-right: 2.5rem;
}

.dgs-transform-panel--after:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
  margin-left: -2.75rem;
  margin-top: 1.75rem;
  /* Navy-dominant base — same radial "glow" recipe as the What is Included
     isometric stage — with a soft teal glow layered on top so it still
     reads as the "after" panel. */
  background:
    radial-gradient(circle at 75% 12%, rgba(0, 179, 159, 0.22) 0%, transparent 35%),
    radial-gradient(circle at 50% 25%, #16395E 0%, #0E2C4D 40%, #071A2E 85%);
  box-shadow: 0 20px 44px rgba(6, 21, 36, 0.3), 0 6px 16px rgba(6, 21, 36, 0.18);
}

.dgs-transform-panel-head:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  padding: 1.1rem 1.15rem 0.95rem;
  border-bottom: 1px solid rgba(10, 31, 51, 0.08);
}

.dgs-transform-panel--after .dgs-transform-panel-head:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.dgs-transform-panel-title:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dgs-transform-panel--before .dgs-transform-panel-title:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: #0A1F33 !important;
}

.dgs-transform-panel--after .dgs-transform-panel-title:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: #ffffff !important;
}

.dgs-transform-row:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.15rem;
  border-bottom: 1px solid rgba(10, 31, 51, 0.08);
}

.dgs-transform-panel--after .dgs-transform-row:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.dgs-transform-row:last-child:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-bottom: none;
}

/* Icons */
.dgs-transform-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dgs-transform-icon svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 15px;
  height: 15px;
}

.dgs-transform-icon--before:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: rgba(100, 116, 139, 0.12);
  color: #64748B !important;
}

.dgs-transform-icon--after:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: rgba(0, 179, 159, 0.18);
  color: var(--action-teal, #00B39F) !important;
}

/* Text — muted/regular for the problem, bright/bold for the resolved state */
.dgs-transform-text:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.dgs-transform-panel--before .dgs-transform-text:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: #475569 !important;
  font-weight: 500 !important;
}

.dgs-transform-panel--after .dgs-transform-text:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: #ffffff !important;
  font-weight: 650 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TRANSFORMATION PANELS RESPONSIVENESS
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .dgs-transform-panels:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dgs-transform-panel--before:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
    padding-bottom: 1.75rem;
  }
  .dgs-transform-panel--after:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-column: 1;
    grid-row: 2;
    margin-left: 0;
    margin-top: -1.75rem;
  }
  .dgs-transform-panel-head:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 1rem 1rem 0.85rem;
  }
  .dgs-transform-row:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 0.65rem 1rem;
    gap: 0.55rem;
  }
  .dgs-transform-icon:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 26px;
    height: 26px;
  }
  .dgs-transform-icon svg:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 13px;
    height: 13px;
  }
  .dgs-transform-text:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.78rem !important;
  }
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-bc042355a2:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7d7b57a6a03cda06451b76.png') !important;
}

.dgs-il-842252d1fb:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  justify-content:center !important;
}

.dgs-il-6406681f99:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b595255b571c8e31e1eb.webp') !important;
}

.dgs-il-30f186ec55:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b578f1e423633fd2a997.jpg') !important;
}

.dgs-il-47494578d5:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b574270e1f5457c80fe6.jpg') !important;
}

.dgs-il-4624871d44:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b57acf50f900f28d0a93.png') !important;
}

.dgs-il-5bd40aca88:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:30% !important;
}

.dgs-il-792ae859f4:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:42% !important;
}

.dgs-il-8ba188a96c:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:55% !important;
}

.dgs-il-49676cd522:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:68% !important;
}

.dgs-il-1e5f67a6a4:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:80% !important;
}

.dgs-il-4e0c7dd189:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:100% !important;
}

.dgs-il-f706e30f50:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  margin: 0.5rem 0 1.5rem !important;
}

.dgs-il-1c21f7a172:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.7 !important;
  font-size: 1.05rem !important;
  margin: 0 !important;
}

.dgs-il-dab2ff0e27:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:45% !important;
}

.dgs-il-66a76c25d0:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:60% !important;
}

.dgs-il-3c9dd4fd2b:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:74% !important;
}

.dgs-il-c22e8ee749:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:86% !important;
}

.dgs-il-09f1c56410:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

.dgs-il-c375cc7a76:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color:var(--action-teal) !important;
}

.dgs-il-555b20047d:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--bg-deep-navy) !important;
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

.dgs-il-78c360413a:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--action-teal) !important;
}

.dgs-il-4819f8adc9:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--text-dark-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  max-width: 28rem !important;
}

.dgs-il-2cfbdbb9ba:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 60px !important;
  height: 3px !important;
  background: var(--accent-yellow) !important;
  margin-top: 2rem !important;
}

.dgs-il-608fa7e08b:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  padding-top: var(--space-lg) !important;
  padding-bottom: var(--space-lg) !important;
}

.dgs-il-71076997ec:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7d7b461eb55bdfc3bc6aa6.png') !important;
}

.dgs-il-0a10b68907:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7d89f81eb55bdfc3fcbd26.png') !important;
}

.dgs-il-fc4716fc25:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83b57ca6a03cda06e1d25a.jpg') !important;
}

.dgs-il-36ae8d8897:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:90% !important;
}

.dgs-il-ea33f9c998:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:70% !important;
}

.dgs-il-376e1a7b20:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:50% !important;
}

.dgs-il-00b3f26a35:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:35% !important;
}

.dgs-il-79ddfd87b1:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:20% !important;
}

.dgs-il-d48ef8e93e:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:15% !important;
}

.dgs-il-3ea73264c0:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7dc7965fc842636ebacb50.png') !important;
}

.dgs-il-6a69a18b8f:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7dc807967894b43363aa81.png') !important;
}

.dgs-il-47e89f80a4:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:40% !important;
}

.dgs-il-c75673a8a6:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:25% !important;
}

.dgs-il-1ad8c5e7bd:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:10% !important;
}

.dgs-il-b5ca939d73:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:4% !important;
}

.dgs-il-2e3d0443a0:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:65% !important;
}

.dgs-il-2c3fcffaff:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:78% !important;
}

.dgs-il-30c7ca8998:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:88% !important;
}

.dgs-il-11c0352f4c:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:96% !important;
}

.dgs-il-8856cb3c30:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7dcccec00ec1b226fe6fcf.png') !important;
}

.dgs-il-a631fb7b1c:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7dd0be255b571c8e36dd53.png') !important;
}

.dgs-il-3c5a95aa45:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:52% !important;
}

.dgs-il-19a84d88f4:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:85% !important;
}

.dgs-il-0a209d861c:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:95% !important;
}

.dgs-il-b669ca2a8b:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:48% !important;
}

.dgs-il-879c30322d:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7dd534255b571c8e44eba6.png') !important;
}

.dgs-il-5ea8c43e94:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7e19e75fc842636ec355ea.png') !important;
}

.dgs-il-927232e65f:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:38% !important;
}

.dgs-il-780d57f968:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:28% !important;
}

.dgs-il-cdd32ee3e5:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7e049f5fc842636e63d865.png') !important;
}

.dgs-il-1eae526da7:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7defeda6a03cda0609e7a2.png') !important;
}

.dgs-il-e899c0b9fd:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:58% !important;
}

.dgs-il-fce528bb18:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:72% !important;
}

.dgs-il-8b097aa291:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7defeda6a03cda0609e7a7.png') !important;
}

.dgs-il-55376008b2:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7e0413b59d098314b7abf4.png') !important;
}

.dgs-il-ca0b3e6169:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:62% !important;
}

.dgs-il-a702cb6a1f:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:22% !important;
}

.dgs-il-c23bf38d9a:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:14% !important;
}

.dgs-il-aab8146217:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:9% !important;
}

.dgs-il-eb39931398:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7e0418cf50f900f254403d.png') !important;
}

.dgs-il-1cafa9aa35:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7e18275fc842636ebc13fa.png') !important;
}

.dgs-il-44e0360f3a:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:75% !important;
}

.dgs-il-dda174e6b3:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:32% !important;
}

.dgs-il-b9570e96e8:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --h:12% !important;
}

.dgs-il-b5a7cd6e63:where(.dgs-css-solution-detail,.dgs-css-solution-detail *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7e1827255b571c8e19dd28.png') !important;
}


/* ============================================================
   C18. PREMIUM-VIZ  (scope: .dgs-css-premium-viz)
   Formerly css/dgs-premium-viz.css: the "Who it is for" people panel
   and "KPIs we track" scorecard (.dgs-pv-panel). Used by:
     solutions/*.html (all 8 solution pages)
   ============================================================ */

/* LEGACY (frozen 2026-10-10): superseded by css/styles.css, which every page
   in this repo now loads. Kept only because pages already published on
   GoHighLevel still link this URL; it stops being needed once those pages
   are re-pasted from this repo. Do not edit; change css/styles.css instead. */
/* ============================================================
   DIGITAL GROWTHSCALE — PREMIUM NODE-DIAGRAM VISUAL SYSTEM
   Shared by the "who it's for / included / outcomes / KPI" widgets
   across solution detail pages. Glass panels, glowing connector
   lines, small node cards in brand teal / navy / amber — replaces
   flat dashboard mockups.

   Theme-aware: default is a dark navy panel (for use on dark
   sections). Add [data-theme="light"] on .dgs-pv-panel when it
   sits on a light/white section, and it flips to a slate panel.

   Load order: after dgs-common.css.
   ============================================================ */

.dgs-pv-panel:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --pv-panel-bg: radial-gradient(120% 100% at 15% 0%, #16283D 0%, #0F1D2E 45%, #0A1420 100%);
  --pv-panel-border: rgba(0, 179, 159, 0.2);
  --pv-panel-shadow: 0 30px 60px -25px rgba(4, 10, 18, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --pv-glow-a: #00B39F;
  --pv-glow-b: #F5A623;
  --pv-texture-dot: rgba(255, 255, 255, 0.06);
  --pv-head-border: rgba(255, 255, 255, 0.08);
  --pv-head-label: rgba(255, 255, 255, 0.6);
  --pv-badge-bg: rgba(0, 179, 159, 0.14);
  --pv-badge-border: rgba(0, 179, 159, 0.32);
  --pv-badge-text: #5EEAD4;
  --pv-track-bg: rgba(255, 255, 255, 0.08);
  --pv-hub-bg: linear-gradient(135deg, #00B39F 0%, #00695C 100%);
  --pv-hub-text: #ffffff;
  --pv-hub-shadow: 0 0 0 5px rgba(0, 179, 159, 0.14), 0 10px 25px -8px rgba(0, 179, 159, 0.55);
  --pv-node-bg: rgba(255, 255, 255, 0.045);
  --pv-node-border: rgba(255, 255, 255, 0.09);
  --pv-node-border-hover: rgba(0, 179, 159, 0.45);
  --pv-node-bg-hover: rgba(255, 255, 255, 0.07);
  --pv-node-title: #F1F5F9;
  --pv-node-sub: rgba(255, 255, 255, 0.45);
  --pv-node-tick: rgba(0, 179, 159, 0.55);
  --pv-foot-border: rgba(255, 255, 255, 0.07);
  --pv-foot-text: rgba(255, 255, 255, 0.4);
  --pv-stat-text: #ffffff;
  --pv-stat-label: rgba(255, 255, 255, 0.5);
  --pv-icon-teal-bg: rgba(0, 179, 159, 0.18); --pv-icon-teal-fg: #5EEAD4;
  --pv-icon-blue-bg: rgba(45, 127, 249, 0.18); --pv-icon-blue-fg: #93C5FD;
  --pv-icon-amber-bg: rgba(245, 166, 35, 0.18); --pv-icon-amber-fg: #FCD34D;
  --pv-icon-green-bg: rgba(16, 185, 129, 0.18); --pv-icon-green-fg: #6EE7B7;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  background: var(--pv-panel-bg);
  border: 1px solid var(--pv-panel-border);
  box-shadow: var(--pv-panel-shadow);
  padding: 2.25rem !important;
  margin-top: 1.5rem !important;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  /* Layout-affecting properties (padding/margin/max-height/border-width)
     are intentionally NOT here and NOT toggled by .is-visible below: the
     panel keeps its full box size at all times so it never collapses and
     shifts the page when it scrolls out of view or the entrance replays.
     Only opacity/transform animate — both are compositor-only and never
     reflow surrounding sections. */
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-pv-panel.is-visible:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Desktop padding (2.25rem) eats a big share of a phone's width before any
   node/card content starts. Variant panels with their own mobile padding
   (people-panel, kpi-panel) chain extra specificity to beat this, so this
   stays the shared floor for every other .dgs-pv-panel variant. Not gated
   on .is-visible: padding must hold constant regardless of reveal state. */
@media (max-width: 600px) {
  .dgs-pv-panel:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 1.5rem !important;
  }
}
/* ≤420px padding is set once, further down, alongside the rest of that
   breakpoint's element resizing (search "@media (max-width: 420px)"). */

/* ─── Light theme (panel on a white/slate section) ─── */
.dgs-pv-panel[data-theme="light"]:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --pv-panel-bg: linear-gradient(160deg, #F8FAFC 0%, #F1F5F9 100%);
  --pv-panel-border: rgba(10, 31, 51, 0.09);
  --pv-panel-shadow: 0 24px 48px -28px rgba(10, 31, 51, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --pv-texture-dot: rgba(10, 31, 51, 0.05);
  --pv-head-border: rgba(10, 31, 51, 0.08);
  --pv-head-label: #475569;
  --pv-badge-bg: rgba(0, 179, 159, 0.1);
  --pv-badge-border: rgba(0, 179, 159, 0.28);
  --pv-badge-text: #00897B;
  --pv-track-bg: rgba(10, 31, 51, 0.08);
  --pv-hub-text: #ffffff;
  --pv-node-bg: #ffffff;
  --pv-node-border: rgba(10, 31, 51, 0.08);
  --pv-node-border-hover: rgba(0, 179, 159, 0.4);
  --pv-node-bg-hover: #ffffff;
  --pv-node-title: #0F172A;
  --pv-node-sub: #64748B;
  --pv-node-tick: rgba(0, 179, 159, 0.4);
  --pv-foot-border: rgba(10, 31, 51, 0.08);
  --pv-foot-text: #64748B;
  --pv-stat-text: #0F172A;
  --pv-stat-label: #64748B;
  --pv-icon-teal-bg: rgba(0, 179, 159, 0.1); --pv-icon-teal-fg: #00897B;
  --pv-icon-blue-bg: rgba(45, 127, 249, 0.1); --pv-icon-blue-fg: #2D7FF9;
  --pv-icon-amber-bg: rgba(245, 166, 35, 0.12); --pv-icon-amber-fg: #B45309;
  --pv-icon-green-bg: rgba(16, 185, 129, 0.1); --pv-icon-green-fg: #059669;
}

.dgs-pv-texture:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(var(--pv-texture-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 75%);
  pointer-events: none;
}
@keyframes dgs-pv-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.65; }
}

/* ─── "Updating" state — a pulsing ring on the border, not just text,
   for whichever node/badge represents something currently in progress.
   Only animates while the panel is in view. ─── */
@keyframes dgs-pv-live-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 179, 159, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 179, 159, 0); }
}
@keyframes dgs-pv-live-ring-tight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 179, 159, 0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(0, 179, 159, 0); }
}

/* ─── Node graph ─── */

/* ─── Stat variant (Outcomes / KPI widgets) ─── */
.dgs-pv-count:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: #ffffff !important;
}
.dgs-pv-sym:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--action-teal, #00B39F) !important;
}

/* Light Theme overrides for stats/numbers/symbols */
.dgs-pv-panel[data-theme="light"] .dgs-pv-count:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: #0F172A !important;
}
.dgs-pv-panel[data-theme="light"] .dgs-pv-sym:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--action-teal, #00B39F) !important;
}

/* ─── Hub + bus-line node grid (safer alternative to per-node bezier paths) ─── */

/* ─── Automatic staggered cascade (no per-item inline delay needed) ─── */

/* Timeline / roadmap variant */

/* ============================================================
   TALENT INTELLIGENCE & RECRUITMENT WORKSPACE EXTENSIONS
   ============================================================ */

/* ─── Role Definition & Capability Tags ─── */

/* ─── Search Funnel Pipeline (Who It Is For) ─── */

/* ─── CSR Candidate Pipeline Tracker ─── */

/* ─── Talent Intelligence Modules (Included) ─── */

/* ─── Fit Matrix / Hiring Decision Workspace ─── */

/* ─── Client Success Mini Visualizations ─── */

/* ============================================================
   PEOPLE / IN-PRACTICE PANEL ("Who it's for" widget)
   A role/persona switcher (avatar row + tab row) paired with a
   contextual "in practice" product card that cross-fades per
   role. Auto-cycles via .dgs-pv-people-panel controller in
   main.js; a manual click always wins and resets the timer.
   ============================================================ */

.dgs-pv-people-panel:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  /* No glow override here — inherits the base .dgs-pv-panel navy radial
     (three stops, #16283D -> #0F1D2E -> #0A1420), which already has
     enough depth on its own without a teal accent layered on top. */
  --pv-card-bg: rgba(255, 255, 255, 0.055);
  --pv-card-border: rgba(255, 255, 255, 0.1);
  --pv-card-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1.5rem 1.6rem 1.7rem;
  margin-top: 0;
  align-self: start;
}
.dgs-pv-people-panel[data-theme="light"]:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  --pv-card-bg: #ffffff;
  --pv-card-border: rgba(10, 31, 51, 0.08);
  --pv-card-shadow: 0 22px 44px -26px rgba(10, 31, 51, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.dgs-pv-people-eyebrow:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
.dgs-pv-practice-eyebrow:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--pv-head-label) !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.9rem;
}

/* ─── Role row: photo + label as one aligned unit ─── */
.dgs-pv-role-row:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 0.7rem;
  padding-bottom: 1.3rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--pv-head-border);
}

.dgs-pv-role:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 62px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgs-pv-panel.is-visible .dgs-pv-role:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 1;
  transform: translateY(0);
}

.dgs-pv-role-photo:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background-color: var(--pv-node-bg);
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--pv-node-border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.dgs-pv-role:hover .dgs-pv-role-photo:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-color: var(--pv-node-border-hover);
}
.dgs-pv-role.is-active .dgs-pv-role-photo:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-color: var(--action-teal, #00B39F);
  box-shadow: 0 0 0 3px rgba(0, 179, 159, 0.16);
  transform: translateY(-2px);
}

/* ─── Numbers / Metrics top grid (non-interactive high-impact scorecard) ─── */
.dgs-pv-stats-grid:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--pv-head-border, rgba(255, 255, 255, 0.12));
}

@media (max-width: 560px) {
  .dgs-pv-stats-grid:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }
}

.dgs-pv-stats-grid .dgs-pv-stat-item:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
.dgs-pv-stat-item:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 0.9rem 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  will-change: opacity, transform;
}

.dgs-pv-panel.is-visible .dgs-pv-stats-grid .dgs-pv-stat-item:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
.dgs-pv-panel.is-visible .dgs-pv-stat-item:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
}

.dgs-pv-panel.is-visible .dgs-pv-stats-grid .dgs-pv-stat-item:nth-child(1):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.06s; }
.dgs-pv-panel.is-visible .dgs-pv-stats-grid .dgs-pv-stat-item:nth-child(2):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.14s; }
.dgs-pv-panel.is-visible .dgs-pv-stats-grid .dgs-pv-stat-item:nth-child(3):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.22s; }
.dgs-pv-panel.is-visible .dgs-pv-stats-grid .dgs-pv-stat-item:nth-child(4):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.30s; }

.dgs-pv-stats-grid .dgs-pv-stat-item:hover:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
.dgs-pv-stat-item:hover:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: var(--action-teal, #00B39F) !important;
  box-shadow: 0 6px 20px rgba(0, 179, 159, 0.22) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

.dgs-pv-stats-grid .dgs-pv-stat-num:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
.dgs-pv-stat-num:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-family: var(--font-heading, "Outfit", "Sora", sans-serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem;
  opacity: 1 !important;
  -webkit-text-fill-color: initial !important;
}

.dgs-pv-stats-grid .dgs-pv-stat-num .dgs-pv-count:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
.dgs-pv-stat-num .dgs-pv-count:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: #FFFFFF !important;
}

.dgs-pv-stats-grid .dgs-pv-stat-num small:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
.dgs-pv-stat-num small:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--action-teal, #00B39F) !important;
  letter-spacing: -0.01em;
}

.dgs-pv-stats-grid .dgs-pv-stat-lbl:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
.dgs-pv-stat-lbl:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: #E2E8F0 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-align: center;
  opacity: 1 !important;
}

.dgs-pv-role-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  font-size: 0.72rem;
  font-weight: 500;
  color: #94A3B8 !important;
  text-align: center;
  line-height: 1.25;
  padding-bottom: 0.4rem;
  transition: color 0.25s ease, font-weight 0.25s ease;
}
.dgs-pv-role-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--action-teal, #00B39F);
  transform: translateX(-50%);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgs-pv-role.is-active .dgs-pv-role-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: #FFFFFF !important;
  font-weight: 700;
}
.dgs-pv-role.is-active .dgs-pv-role-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *)::after {
  width: 100%;
}

/* Staggered entrance for the role row (up to 6 items) */
.dgs-pv-role-row .dgs-pv-role:nth-child(1):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.04s; }
.dgs-pv-role-row .dgs-pv-role:nth-child(2):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.1s; }
.dgs-pv-role-row .dgs-pv-role:nth-child(3):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.16s; }
.dgs-pv-role-row .dgs-pv-role:nth-child(4):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.22s; }
.dgs-pv-role-row .dgs-pv-role:nth-child(5):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.28s; }
.dgs-pv-role-row .dgs-pv-role:nth-child(6):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.34s; }

.dgs-pv-practice-stage:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: relative;
  z-index: 2;
  transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Inactive cards are pulled out of flow (absolute, overlaid, no bottom
   constraint so they keep their natural content height instead of being
   stretched) so the stage's JS-driven height always hugs whichever card is
   currently active instead of locking to the tallest card in the set — no
   dead space under shorter variants, and a real height to animate to/from. */
.dgs-pv-practice-card:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--pv-card-bg);
  border: 1px solid var(--pv-card-border);
  border-radius: 16px;
  box-shadow: var(--pv-card-shadow);
  padding: 1.35rem 1.5rem 1.3rem;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgs-pv-panel.is-visible .dgs-pv-practice-card.is-active:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.dgs-pv-practice-head:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--pv-card-border);
}
.dgs-pv-practice-title:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 1rem;
  font-weight: 800;
  color: var(--pv-node-title) !important;
  margin: 0;
  font-family: var(--font-heading, 'Sora', sans-serif);
  letter-spacing: -0.01em;
}
.dgs-pv-panel[data-theme="light"] .dgs-pv-practice-title:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--dgs-navy, #0A1F33) !important;
}
.dgs-pv-practice-tag:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--action-teal, #00B39F) !important;
}

.dgs-pv-practice-chat:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.dgs-pv-practice-chat > p:not(.dgs-pv-chat-reply):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  margin: 0;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--action-teal, #00B39F);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--pv-node-title) !important;
  min-height: 1.6em;
  align-self: flex-start;
  max-width: 92%;
}
.dgs-pv-practice-chat p.is-typing:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *)::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  background: var(--action-teal, #00B39F);
  vertical-align: -0.15em;
  animation: dgs-pv-caret-blink 0.9s steps(1) infinite;
}

/* User's reply: a teal chat bubble, right-aligned like a real conversation.
   Revealed by JS once the incoming message finishes typing. */
.dgs-pv-chat-reply:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  align-self: flex-end;
  max-width: 78%;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border-radius: 14px 14px 4px 14px;
  background: var(--action-teal, #00B39F);
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgs-pv-chat-reply.is-shown:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@keyframes dgs-pv-caret-blink {
  50% { opacity: 0; }
}

.dgs-pv-practice-stats:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
}
.dgs-pv-practice-stat-row:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--pv-card-border);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.dgs-pv-practice-stat-row:first-child:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-top: none;
  padding-top: 0;
}
.dgs-pv-practice-card.is-active .dgs-pv-practice-stat-row:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 1;
  transform: translateY(0);
}
.dgs-pv-practice-card.is-active .dgs-pv-practice-stat-row:nth-child(1):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.1s; }
.dgs-pv-practice-card.is-active .dgs-pv-practice-stat-row:nth-child(2):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.16s; }
.dgs-pv-practice-card.is-active .dgs-pv-practice-stat-row:nth-child(3):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.22s; }
.dgs-pv-practice-card.is-active .dgs-pv-practice-stat-row:nth-child(4):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.28s; }
.dgs-pv-practice-stat-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pv-stat-label) !important;
}
.dgs-pv-practice-stat-value:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pv-node-title) !important;
  text-align: right;
}
.dgs-pv-practice-stat-value.tone-teal:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { color: var(--action-teal, #00B39F) !important; }
.dgs-pv-practice-stat-value.tone-blue:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { color: var(--pv-icon-blue-fg) !important; }

.dgs-pv-practice-foot:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--pv-card-border);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--pv-node-title) !important;
}

/* NOTE: `.dgs-pv-panel` (base rule, top of file) sets `padding: 2.25rem
   !important` at every viewport, unconditionally (not gated on
   .is-visible — padding must hold constant across the reveal so the
   panel never collapses/reflows), which is equal-or-higher specificity
   than a bare `.dgs-pv-people-panel` rule — so a plain override here
   would silently lose and this panel would stay full-size on phones.
   Chaining `.dgs-pv-panel.dgs-pv-people-panel` + `!important` is what
   actually wins. Not gated on .is-visible for the same reason as the
   base rule: this padding must never change after mount. */
@media (max-width: 600px) {
  .dgs-pv-panel.dgs-pv-people-panel:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { padding: 1.3rem 1.2rem 1.5rem !important; }
  .dgs-pv-role:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { width: 54px; }
  .dgs-pv-role-photo:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { width: 40px; height: 40px; }
  .dgs-pv-role-row:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { gap: 0.7rem 0.5rem; }
}

@media (max-width: 420px) {
  .dgs-pv-panel.dgs-pv-people-panel:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { padding: 1.1rem 1rem 1.3rem !important; }
  .dgs-pv-role:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { width: 48px; }
  .dgs-pv-role-photo:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { width: 36px; height: 36px; }
  .dgs-pv-practice-card:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { padding: 1.1rem 1.15rem 1.05rem !important; }
  .dgs-pv-practice-title:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { font-size: 0.92rem; }
}

/* ─── FLOW variant: GHL-style automation chain (trigger → action → action → done) ─── */
.dgs-pv-practice-flow:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.dgs-pv-flow-node:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: var(--pv-node-bg);
  border: 1px solid var(--pv-node-border);
  opacity: 0;
  transform: translateY(6px) scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.dgs-pv-practice-card.is-active .dgs-pv-flow-node:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.dgs-pv-practice-card.is-active .dgs-pv-flow-node:nth-child(1):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.08s; }
.dgs-pv-practice-card.is-active .dgs-pv-flow-node:nth-child(3):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.2s; }
.dgs-pv-practice-card.is-active .dgs-pv-flow-node:nth-child(5):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.32s; }
.dgs-pv-practice-card.is-active .dgs-pv-flow-node:nth-child(7):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.44s; }
.dgs-pv-flow-node-icon:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pv-icon-teal-bg) !important;
  color: var(--pv-icon-teal-fg) !important;
  flex-shrink: 0;
}
.dgs-pv-flow-node[data-tone="blue"] .dgs-pv-flow-node-icon:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { background: var(--pv-icon-blue-bg) !important; color: var(--pv-icon-blue-fg) !important; }
.dgs-pv-flow-node[data-tone="amber"] .dgs-pv-flow-node-icon:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { background: var(--pv-icon-amber-bg) !important; color: var(--pv-icon-amber-fg) !important; }
.dgs-pv-flow-node[data-tone="green"] .dgs-pv-flow-node-icon:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { background: var(--pv-icon-green-bg) !important; color: var(--pv-icon-green-fg) !important; }
.dgs-pv-flow-node-icon svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 11px;
  height: 11px;
}
.dgs-pv-flow-node-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pv-node-title) !important;
  white-space: nowrap;
}
.dgs-pv-flow-arrow:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  color: var(--pv-node-sub);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dgs-pv-practice-card.is-active .dgs-pv-flow-arrow:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 0.5;
}
.dgs-pv-practice-card.is-active .dgs-pv-flow-arrow svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  animation: dgs-pv-flow-blink 1.8s ease-in-out infinite;
}
.dgs-pv-practice-card.is-active .dgs-pv-flow-arrow:nth-child(2) svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { animation-delay: 0s; }
.dgs-pv-practice-card.is-active .dgs-pv-flow-arrow:nth-child(4) svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { animation-delay: 0.3s; }
.dgs-pv-practice-card.is-active .dgs-pv-flow-arrow:nth-child(6) svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { animation-delay: 0.6s; }
@keyframes dgs-pv-flow-blink {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(2px); }
}

/* ─── PIPELINE variant: stage columns with counts, current stage highlighted ─── */
.dgs-pv-practice-pipeline:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
@media (max-width: 420px) {
  .dgs-pv-practice-pipeline:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { flex-wrap: wrap; }
  .dgs-pv-pipe-stage:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { min-width: calc(50% - 0.25rem); }
}
.dgs-pv-pipe-stage:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.75rem 0.4rem;
  border-radius: 12px;
  border: 1px solid var(--pv-card-border);
  background: var(--pv-node-bg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}
.dgs-pv-practice-card.is-active .dgs-pv-pipe-stage:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 1;
  transform: translateY(0);
}
.dgs-pv-practice-card.is-active .dgs-pv-pipe-stage:nth-child(1):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.08s; }
.dgs-pv-practice-card.is-active .dgs-pv-pipe-stage:nth-child(2):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.16s; }
.dgs-pv-practice-card.is-active .dgs-pv-pipe-stage:nth-child(3):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.24s; }
.dgs-pv-practice-card.is-active .dgs-pv-pipe-stage:nth-child(4):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.32s; }
.dgs-pv-pipe-stage[data-active="true"]:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-color: var(--dgs-blue, #2D7FF9);
  background: var(--pv-icon-blue-bg) !important;
  box-shadow: 0 0 0 1px rgba(45, 127, 249, 0.18);
}
.dgs-pv-pipe-count:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pv-node-title) !important;
  font-family: var(--font-heading, 'Sora', sans-serif);
}
.dgs-pv-pipe-stage[data-active="true"] .dgs-pv-pipe-count:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--dgs-blue, #2D7FF9) !important;
}
.dgs-pv-pipe-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pv-stat-label) !important;
  text-align: center;
}

/* ─── CHECKLIST variant: rows with drawn-in checkmarks ─── */
.dgs-pv-practice-checklist:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dgs-pv-check-row:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.dgs-pv-practice-card.is-active .dgs-pv-check-row:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  opacity: 1;
  transform: translateY(0);
}
.dgs-pv-practice-card.is-active .dgs-pv-check-row:nth-child(1):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.08s; }
.dgs-pv-practice-card.is-active .dgs-pv-check-row:nth-child(2):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.16s; }
.dgs-pv-practice-card.is-active .dgs-pv-check-row:nth-child(3):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.24s; }
.dgs-pv-practice-card.is-active .dgs-pv-check-row:nth-child(4):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.32s; }
.dgs-pv-check-mark:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--pv-node-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.dgs-pv-check-mark svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.4s ease 0.15s;
}
.dgs-pv-check-row[data-done="true"] .dgs-pv-check-mark:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  border-color: var(--dgs-blue, #2D7FF9);
  background: var(--dgs-blue, #2D7FF9);
}
.dgs-pv-practice-card.is-active .dgs-pv-check-row[data-done="true"] .dgs-pv-check-mark svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  stroke-dashoffset: 0;
}
.dgs-pv-check-text:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pv-node-sub) !important;
}
.dgs-pv-check-row[data-done="true"] .dgs-pv-check-text:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--pv-node-title) !important;
}

/* ─── CHART variant: headline stat + mini bar chart ─── */
.dgs-pv-practice-chart:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.dgs-pv-chart-headline:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.dgs-pv-chart-value:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--dgs-blue, #2D7FF9) !important;
  font-family: var(--font-heading, 'Sora', sans-serif);
  letter-spacing: -0.01em;
}
.dgs-pv-chart-caption:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  font-size: 0.74rem;
  color: var(--pv-stat-label) !important;
  font-weight: 600;
}
.dgs-pv-chart-bars:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 56px;
}
.dgs-pv-chart-bar:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  flex: 1;
  height: 0;
  border-radius: 4px 4px 2px 2px;
  background: var(--pv-node-border);
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.dgs-pv-practice-card.is-active .dgs-pv-chart-bar:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  height: var(--h, 40%);
}
.dgs-pv-practice-card.is-active .dgs-pv-chart-bar:nth-child(1):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0s; }
.dgs-pv-practice-card.is-active .dgs-pv-chart-bar:nth-child(2):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.05s; }
.dgs-pv-practice-card.is-active .dgs-pv-chart-bar:nth-child(3):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.1s; }
.dgs-pv-practice-card.is-active .dgs-pv-chart-bar:nth-child(4):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.15s; }
.dgs-pv-practice-card.is-active .dgs-pv-chart-bar:nth-child(5):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.2s; }
.dgs-pv-practice-card.is-active .dgs-pv-chart-bar:nth-child(6):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) { transition-delay: 0.25s; }
.dgs-pv-chart-bar[data-current="true"]:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: var(--dgs-blue, #2D7FF9);
}

/* ─── Sync highlight: "Who it's for" checklist item that matches the
   currently active People role, toggled by the panel's JS controller. ─── */
.dgs-sol-split .dgs-check-item-icon:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.dgs-sol-split .dgs-check-item p:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  transition: color 0.3s ease;
}
.dgs-sol-split .dgs-check-item.is-active .dgs-check-item-icon:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  background: var(--action-teal, #00B39F) !important;
  border-color: var(--action-teal, #00B39F) !important;
  color: #ffffff !important;
  transform: scale(1.08);
}
.dgs-sol-split .dgs-check-item.is-active p:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
  color: var(--dgs-navy, #0A1F33) !important;
  font-weight: 600;
}

/* ============================================================
   PREMIUM KPI NUMBERS & SLEEK VECTOR CHART DASHBOARD
   Dark navy glassmorphism panel with 3 clean KPI cards
   and minimal SVG area/spline trend line.
   ============================================================ */

/* ─── 3-Card Clean KPI Grid ─── */

/* ─── Clean Vector Chart Card ─── */

/* ============================================================
   MOBILE RESPONSIVENESS FOR PREMIUM VIZ PANELS
   Scales down all interactive elements for viewports <= 640px.
   Desktop remains visually unchanged.
   ============================================================ */
@media (max-width: 640px) {
  /* Base panel: reduce padding so content starts closer to edges */
  .dgs-pv-panel:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 1.25rem !important;
  }

  /* Head row */

  /* Hub + bus line */

  /* Node graph: stack vertically on narrow screens */

  /* Stat grid */

  /* Tiles */

  /* Node grid */

  /* Timeline */

  /* Role switcher */
  .dgs-pv-role-row:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    gap: 0.6rem 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.2rem;
  }
  .dgs-pv-role:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 52px;
  }
  .dgs-pv-role-photo:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .dgs-pv-role-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.66rem;
  }

  /* Practice cards */
  .dgs-pv-practice-card:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 1.1rem 1.15rem 1.05rem !important;
  }
  .dgs-pv-practice-title:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.92rem;
  }
  .dgs-pv-practice-tag:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.68rem;
  }
  .dgs-pv-practice-chat > p:not(.dgs-pv-chat-reply):where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.78rem;
  }
  .dgs-pv-chat-reply:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem;
  }
  .dgs-pv-practice-stat-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.62rem;
  }
  .dgs-pv-practice-stat-value:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.78rem;
  }
  .dgs-pv-practice-foot:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.7rem;
    margin-top: 0.85rem;
    padding-top: 0.7rem;
  }

  /* Flow nodes */
  .dgs-pv-practice-flow:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    gap: 0.25rem;
  }
  .dgs-pv-flow-node:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 0.38rem 0.55rem;
  }
  .dgs-pv-flow-node-icon:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 16px;
    height: 16px;
  }
  .dgs-pv-flow-node-icon svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 9px;
    height: 9px;
  }
  .dgs-pv-flow-node-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.66rem;
  }
  .dgs-pv-flow-arrow svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 14px;
    height: 14px;
  }

  /* Pipeline */
  .dgs-pv-practice-pipeline:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    gap: 0.4rem;
  }
  .dgs-pv-pipe-stage:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 0.65rem 0.3rem;
    border-radius: 10px;
  }
  .dgs-pv-pipe-count:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 1rem;
  }
  .dgs-pv-pipe-label:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.55rem;
  }

  /* Checklist */
  .dgs-pv-check-row:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    gap: 0.5rem;
  }
  .dgs-pv-check-mark:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 16px;
    height: 16px;
  }
  .dgs-pv-check-mark svg:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    width: 9px;
    height: 9px;
  }
  .dgs-pv-check-text:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.74rem;
  }

  /* Chart */
  .dgs-pv-chart-value:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 1.25rem;
  }
  .dgs-pv-chart-caption:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.68rem;
  }
  .dgs-pv-chart-bars:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    height: 44px;
    gap: 0.3rem;
  }

  /* Role card / tags */

  /* Search stages */

  /* Candidate chips */

  /* Modules */

  /* Matrix table */

  /* Mini timeline */

  /* Stats grid (people panel) */
  .dgs-pv-stats-grid:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.1rem;
  }
  .dgs-pv-stats-grid .dgs-pv-stat-item:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
  .dgs-pv-stat-item:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 0.75rem 0.4rem;
    border-radius: 10px;
  }
  .dgs-pv-stats-grid .dgs-pv-stat-num:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
  .dgs-pv-stat-num:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 1.15rem;
  }
  .dgs-pv-stats-grid .dgs-pv-stat-lbl:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *),
  .dgs-pv-stat-lbl:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 0.66rem;
  }

  /* KPI panel */

  /* Chart card */

  /* Foot */

  /* Pulse dot */

  /* SVG lines */
}

@media (max-width: 420px) {
  .dgs-pv-panel:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    padding: 1rem !important;
  }
  .dgs-pv-chart-value:where(.dgs-css-premium-viz,.dgs-css-premium-viz *,main[data-dgs-css~="dgs-css-premium-viz"],main[data-dgs-css~="dgs-css-premium-viz"] *) {
    font-size: 1.1rem;
  }
}


/* ============================================================
   C19. AUDIT  (scope: .dgs-css-audit)
   Formerly css/dgs-audit.css. Used by:
     audit.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — AUDIT PAGE-SPECIFIC STYLES
   Split from dgs-styles.css for per-page editing in GHL.
   Load order: dgs-common.css FIRST, then this file.
   ============================================================ */

/* --- HERO SECTION --- */
.dgs-hero-actions:where(.dgs-css-audit,.dgs-css-audit *) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* --- PROBLEM CARDS --- */
.dgs-problem-cards-wrap:where(.dgs-css-audit,.dgs-css-audit *) {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .dgs-problem-cards-wrap:where(.dgs-css-audit,.dgs-css-audit *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dgs-problem-card:where(.dgs-css-audit,.dgs-css-audit *) {
  background: var(--surface-navy-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.dgs-problem-card:where(.dgs-css-audit,.dgs-css-audit *)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-teal-soft);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  pointer-events: none;
}

.dgs-problem-card:hover:where(.dgs-css-audit,.dgs-css-audit *) {
  transform: translateY(-5px);
  border-color: var(--action-teal);
  box-shadow: var(--shadow-teal-glow);
}

.dgs-problem-card:hover:where(.dgs-css-audit,.dgs-css-audit *)::before {
  opacity: 1;
}

@media (min-width: 480px) {
  .dgs-problem-card:where(.dgs-css-audit,.dgs-css-audit *) {
    flex-direction: row;
    align-items: flex-start;
  }
}

.dgs-problem-card-icon:where(.dgs-css-audit,.dgs-css-audit *) {
  width: 56px;
  height: 56px;
  background: rgba(0, 179, 159, 0.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--action-teal);
  position: relative;
  z-index: 1;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.dgs-problem-card:hover .dgs-problem-card-icon:where(.dgs-css-audit,.dgs-css-audit *) {
  transform: scale(1.06);
  border-color: rgba(0, 179, 159, 0.4);
}

/* Target SVGs directly to prevent infinite expansion */
.dgs-problem-card-icon svg:where(.dgs-css-audit,.dgs-css-audit *) {
  width: 30px;
  height: 30px;
  max-width: 100%;
  max-height: 100%;
}

.dgs-problem-card-content:where(.dgs-css-audit,.dgs-css-audit *) {
  position: relative;
  z-index: 1;
}

.dgs-problem-card-content h3:where(.dgs-css-audit,.dgs-css-audit *) {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
  color: var(--text-white);
}

.dgs-problem-card-content p:where(.dgs-css-audit,.dgs-css-audit *) {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

/* --- AUDIT GRID & DELIVERABLES --- */

/* --- TIMELINE --- */
.dgs-timeline:where(.dgs-css-audit,.dgs-css-audit *) {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dgs-timeline:where(.dgs-css-audit,.dgs-css-audit *) {
    grid-template-columns: repeat(4, 1fr);
  }

}

.dgs-timeline-step:where(.dgs-css-audit,.dgs-css-audit *) {
  position: relative;
  text-align: center;
  padding: var(--space-lg) var(--space-sm) var(--space-md);
}

.dgs-timeline-number:where(.dgs-css-audit,.dgs-css-audit *) {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-teal);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 auto var(--space-md);
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 18px rgba(0, 179, 159, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--duration-base) var(--ease-out);
}

.dgs-timeline-step:hover .dgs-timeline-number:where(.dgs-css-audit,.dgs-css-audit *) {
  transform: scale(1.08);
}

.dgs-timeline-step h3:where(.dgs-css-audit,.dgs-css-audit *) {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  color: var(--text-white);
}

.dgs-section--light .dgs-timeline-step h3:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--bg-deep-navy);
}

.dgs-section--light .dgs-timeline-step p:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--text-dark-muted);
}

.dgs-timeline-step p:where(.dgs-css-audit,.dgs-css-audit *) {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .dgs-timeline-step:not(:last-child):where(.dgs-css-audit,.dgs-css-audit *)::after {
    content: '';
    position: absolute;
    top: calc(var(--space-lg) + 22px);
    left: calc(50% + 22px);
    /* Was using `right: calc(-50% + 22px)`, which stops at the next
       column's own edge and ignores the grid `gap` between columns —
       so the line was always short by exactly one gap width and never
       reached the next circle. Using left + width (instead of left +
       right) lets us add the gap back in explicitly. */
    width: calc(100% + var(--space-md) - 44px);
    height: 0;
    border-top: 2px solid rgba(0, 179, 159, 0.4);
    z-index: 1;
  }
}

/* --- STATS --- */

.dgs-stat-label:where(.dgs-css-audit,.dgs-css-audit *) {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}

/* --- PREMIUM RESULTS + TESTIMONIALS LAYOUT (sticky left rail) --- */
.dgs-premium-results-layout:where(.dgs-css-audit,.dgs-css-audit *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 900px) {
  .dgs-premium-results-layout:where(.dgs-css-audit,.dgs-css-audit *) {
    grid-template-columns: 4fr 6fr;
    gap: 6rem;
  }

  .dgs-results-sticky:where(.dgs-css-audit,.dgs-css-audit *) {
    /* Sticky position disabled */
  }
}

.dgs-advantage-list:where(.dgs-css-audit,.dgs-css-audit *) {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.dgs-advantage-item:where(.dgs-css-audit,.dgs-css-audit *) {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.dgs-advantage-icon:where(.dgs-css-audit,.dgs-css-audit *) {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 179, 159, 0.12);
  border: 1px solid rgba(0, 179, 159, 0.3);
  color: var(--action-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dgs-advantage-icon svg:where(.dgs-css-audit,.dgs-css-audit *) {
  width: 18px;
  height: 18px;
}

.dgs-advantage-title:where(.dgs-css-audit,.dgs-css-audit *) {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-white);
  display: block;
  margin-bottom: 0.3rem;
}

.dgs-advantage-desc:where(.dgs-css-audit,.dgs-css-audit *) {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin: 0;
}

/* --- Column wrapper: stretches to match the left results rail exactly --- */
.dgs-testimonial-col:where(.dgs-css-audit,.dgs-css-audit *) {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.dgs-testimonial-carousel-head:where(.dgs-css-audit,.dgs-css-audit *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.dgs-testimonial-nav:where(.dgs-css-audit,.dgs-css-audit *) {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.dgs-testimonial-counter:where(.dgs-css-audit,.dgs-css-audit *) {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dgs-testimonial-counter #dgsTestimonialCurrent:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--text-white);
  font-weight: 600;
}

.dgs-testimonial-arrow:where(.dgs-css-audit,.dgs-css-audit *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--surface-border-light);
  background: transparent;
  color: var(--text-secondary);
  transition:
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out);
}

.dgs-testimonial-arrow svg:where(.dgs-css-audit,.dgs-css-audit *) {
  width: 16px;
  height: 16px;
}

.dgs-testimonial-arrow:hover:where(.dgs-css-audit,.dgs-css-audit *) {
  border-color: var(--action-teal);
  color: var(--action-teal);
  background: rgba(0, 179, 159, 0.1);
}

/* --- Carousel viewport + track --- */
.dgs-testimonial-carousel:where(.dgs-css-audit,.dgs-css-audit *) {
  position: relative;
  flex: 1;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.dgs-testimonial-track:where(.dgs-css-audit,.dgs-css-audit *) {
  display: flex;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
  width: 100%;
}

.dgs-testimonial-slide:where(.dgs-css-audit,.dgs-css-audit *) {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
}

/* --- The card itself --- */
.dgs-testimonial-card:where(.dgs-css-audit,.dgs-css-audit *) {
  position: relative;
  width: 100%;
  background: var(--surface-navy-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-xl) var(--radius-xl);
  padding: 2.75rem;
  margin: 0;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dgs-testimonial-card:where(.dgs-css-audit,.dgs-css-audit *)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--action-teal) 0%, transparent 75%);
  z-index: 2;
}

.dgs-testimonial-featured-badge:where(.dgs-css-audit,.dgs-css-audit *) {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--action-mint-hover);
  background: rgba(0, 179, 159, 0.12);
  border: 1px solid rgba(0, 179, 159, 0.3);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.85rem;
  margin-bottom: 1.5rem;
  width: fit-content;
}

.dgs-testimonial-quote-mark:where(.dgs-css-audit,.dgs-css-audit *) {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 6rem;
  color: var(--action-teal);
  opacity: 0.16;
  line-height: 1;
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  z-index: 0;
  pointer-events: none;
}

.dgs-testimonial-card blockquote:where(.dgs-css-audit,.dgs-css-audit *) {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

/* Quote copy: Manrope, regular weight only, per brand direction */
.dgs-testimonial-text:where(.dgs-css-audit,.dgs-css-audit *) {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-white);
  margin-bottom: 2.25rem !important;
  position: relative;
  z-index: 1;
  flex-grow: 1;
}

.dgs-testimonial-footer:where(.dgs-css-audit,.dgs-css-audit *) {
  display: block;
  position: relative;
  z-index: 1;
  padding-top: 2rem !important;
  border-top: 1px solid var(--surface-border) !important;
  margin-top: 0 !important;
}

.dgs-testimonial-name:where(.dgs-css-audit,.dgs-css-audit *) {
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-white);
  display: inline;
}

.dgs-testimonial-role:where(.dgs-css-audit,.dgs-css-audit *) {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-secondary);
  display: inline;
}

/* --- Dot pagination --- */
.dgs-testimonial-dots:where(.dgs-css-audit,.dgs-css-audit *) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.dgs-testimonial-dot:where(.dgs-css-audit,.dgs-css-audit *) {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}

.dgs-testimonial-dot:hover:where(.dgs-css-audit,.dgs-css-audit *) {
  background: rgba(255, 255, 255, 0.35);
}

.dgs-testimonial-dot.is-active:where(.dgs-css-audit,.dgs-css-audit *) {
  width: 22px;
  background: var(--action-teal);
}

/* --- AUDIT CARDS (GENERAL) --- */
/* --- CTA BANNER --- */
.dgs-cta-banner:where(.dgs-css-audit,.dgs-css-audit *) {
  text-align: center;
  padding: var(--space-xl) 1.5rem;
  background:
    radial-gradient(circle at 8% 30%, rgba(0, 179, 159, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 92% 70%, rgba(245, 166, 35, 0.12) 0%, transparent 45%),
    var(--bg-deep-navy);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .dgs-cta-banner:where(.dgs-css-audit,.dgs-css-audit *) {
    padding: var(--space-xl) 3.5rem;
  }
}

/* Fluid layout — relative units for zoom resilience */
#dgs-audit-hero .dgs-hero-content:where(.dgs-css-audit,.dgs-css-audit *) {
  max-width: 75rem;
}

#dgs-audit-hero .dgs-hero-sub:where(.dgs-css-audit,.dgs-css-audit *) {
  max-width: 55rem;
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-d36cdee1b1:where(.dgs-css-audit,.dgs-css-audit *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83f059255b571c8ef45a19.png') !important;
}

.dgs-il-5e630261d4:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--action-teal) !important;
  margin-bottom: 1rem !important;
  display: inline-block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.dgs-il-096e75ec37:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--text-white) !important;
  font-size: clamp(2.2rem, 5.5vw, 4rem) !important;
  line-height: 1.12 !important;
  margin-bottom: 1.75rem !important;
  text-align: center !important;
  max-width: 100% !important;
  letter-spacing: -0.02em !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  font-weight: 800 !important;
}

.dgs-il-048b9a2b26:where(.dgs-css-audit,.dgs-css-audit *) {
  display: block !important;
}

.dgs-il-c278cc0384:where(.dgs-css-audit,.dgs-css-audit *) {
  display: block !important;
  margin-top: 0.25em !important;
  color: var(--action-teal) !important;
  -webkit-text-fill-color: var(--action-teal) !important;
}

.dgs-il-55d1ef1c2a:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--text-secondary) !important;
  font-size: 1.08rem !important;
  line-height: 1.75 !important;
  max-width: 900px !important;
  margin: 0 auto var(--space-xl) !important;
  text-align: center !important;
}

.dgs-il-229869bfa8:where(.dgs-css-audit,.dgs-css-audit *) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 1rem !important;
  margin: 0 auto !important;
}

.dgs-il-ce8ec9897e:where(.dgs-css-audit,.dgs-css-audit *) {
  margin: 0 auto !important;
}

.dgs-il-78c360413a:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--action-teal) !important;
}

.dgs-il-3e883113cf:where(.dgs-css-audit,.dgs-css-audit *) {
  margin-top: var(--space-xl) !important;
}

.dgs-il-b760de5621:where(.dgs-css-audit,.dgs-css-audit *) {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--action-teal) !important;
}

.dgs-il-5bc6667d8b:where(.dgs-css-audit,.dgs-css-audit *) {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.dgs-il-cd1280b97c:where(.dgs-css-audit,.dgs-css-audit *) {
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.25rem !important;
  color: var(--text-white) !important;
  letter-spacing: -0.02em !important;
}

.dgs-il-e712dfd93c:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--text-secondary) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

.dgs-il-ff227d0632:where(.dgs-css-audit,.dgs-css-audit *) {
  margin: 0 !important;
}

.dgs-il-595bac90a5:where(.dgs-css-audit,.dgs-css-audit *) {
  font-family: var(--font-body) !important;
  font-size: 0.98rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

.dgs-il-40aef0b69f:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--action-teal) !important;
  margin-bottom: 0.75rem !important;
  display: inline-block !important;
}

.dgs-il-555b20047d:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--bg-deep-navy) !important;
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

.dgs-il-30e4c778ba:where(.dgs-css-audit,.dgs-css-audit *) {
  color: var(--text-dark-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.dgs-il-2cfbdbb9ba:where(.dgs-css-audit,.dgs-css-audit *) {
  width: 60px !important;
  height: 3px !important;
  background: var(--accent-yellow) !important;
  margin-top: 2rem !important;
}

.dgs-il-d5ab445043:where(.dgs-css-audit,.dgs-css-audit *) {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.dgs-il-246346408f:where(.dgs-css-audit,.dgs-css-audit *) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.16 !important;
  pointer-events: none !important;
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a857bcca3ca3046969bedef.png') !important;
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%) !important;
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%) !important;
}


/* ============================================================
   C20. CAREERS  (scope: .dgs-css-careers)
   Formerly css/dgs-careers.css. Used by:
     career-main-layout.html, careers.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE - CAREERS STYLESHEET (dgs-careers.css)
   ============================================================ */

/* ─── CAREERS HERO OVERRIDES ─── */

/* ─── CAREERS WHY-JOIN + OPEN ROLES SECTIONS ─── */
#careers-why.dgs-section:where(.dgs-css-careers,.dgs-css-careers *),
#careers-hub.dgs-section:where(.dgs-css-careers,.dgs-css-careers *) {
  padding-top: 6rem;
  padding-bottom: 7rem;
  background: var(--bg-white, #ffffff);
}

/* #careers-why and #careers-hub are adjacent siblings — giving both the
   section's full bottom AND top padding stacked them into one oversized
   gap between the pillar row and "Open Roles". #careers-why only needs
   its own top padding; the touching bottom edge is covered by
   #careers-hub's top padding instead. */
#careers-why.dgs-section:where(.dgs-css-careers,.dgs-css-careers *) {
  padding-bottom: 0;
}

@media (min-width: 1024px) {
  #careers-why.dgs-section:where(.dgs-css-careers,.dgs-css-careers *),
  #careers-hub.dgs-section:where(.dgs-css-careers,.dgs-css-careers *) {
    padding-top: 7.5rem;
    padding-bottom: 8.5rem;
  }

  #careers-why.dgs-section:where(.dgs-css-careers,.dgs-css-careers *) {
    padding-bottom: 0;
  }
}

/* Photo left, heading + copy + value grid right */
.dgs-careers-why-layout:where(.dgs-css-careers,.dgs-css-careers *) {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem;
  align-items: center;
}

.dgs-careers-why-media:where(.dgs-css-careers,.dgs-css-careers *) {
  align-self: stretch;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
}

.dgs-careers-why-media img:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  display: block;
}

.dgs-careers-why-content:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (max-width: 900px) {
  .dgs-careers-why-layout:where(.dgs-css-careers,.dgs-css-careers *) {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .dgs-careers-why-media img:where(.dgs-css-careers,.dgs-css-careers *) {
    min-height: 260px;
  }
}

.dgs-careers-why-head:where(.dgs-css-careers,.dgs-css-careers *) {
  text-align: left;
}

/* .dgs-section--light span (dgs-common.css) is a class+element pair —
   more specific than the bare .dgs-eyebrow class — so without this
   scoped override the eyebrow silently rendered navy instead of teal. */
#careers-why .dgs-eyebrow:where(.dgs-css-careers,.dgs-css-careers *),
#careers-hub .dgs-eyebrow:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--action-teal, #00b39f);
}

/* Eyebrow is inline-flex (dgs-common.css), which centers fine under the
   section head's text-align: center — pin it explicitly so it can't
   drift left if that ancestor's layout ever changes. */
#careers-hub .dgs-roles-section-head .dgs-eyebrow:where(.dgs-css-careers,.dgs-css-careers *) {
  justify-content: center;
  width: 100%;
}

.dgs-careers-why-head .dgs-careers-sticky-heading:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.3rem);
  color: var(--bg-deep-navy, #0A1F33);
  font-weight: 800;
  line-height: 1.2;
  margin: 0.75rem 0 0 0;
  letter-spacing: -0.02em;
}

.dgs-careers-why-head-copy:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--bg-deep-navy, #0A1F33);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 1.5rem 0 0 0;
}

/* ─── VALUE STACK & 4 PILLAR ITEMS ─── */
.dgs-careers-values-stack:where(.dgs-css-careers,.dgs-css-careers *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
}

@media (min-width: 600px) {
  .dgs-careers-values-stack:where(.dgs-css-careers,.dgs-css-careers *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Flat icon/title/desc pattern, matching industries.html's
   .dgs-industry-select-card family (no card border/shadow, icon box +
   title + description + bottom divider). */
.dgs-careers-value-pill:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(10, 31, 51, 0.09);
  transition: transform 0.35s var(--ease-out, ease-out);
}

.dgs-careers-value-pill:hover:where(.dgs-css-careers,.dgs-css-careers *) {
  transform: translateY(-3px);
}

.dgs-careers-value-icon:where(.dgs-css-careers,.dgs-css-careers *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(145deg, #e3f7f5 0%, #e7f2fe 100%);
  border: 1px solid rgba(0, 179, 159, 0.22);
  color: var(--bg-deep-navy, #0A1F33);
  margin-bottom: 1.1rem;
  transition: all 0.35s var(--ease-out, ease-out);
}

.dgs-careers-value-pill:hover .dgs-careers-value-icon:where(.dgs-css-careers,.dgs-css-careers *) {
  background: var(--action-teal, #00b39f);
  color: #ffffff;
  border-color: var(--action-teal, #00b39f);
  box-shadow: 0 6px 18px rgba(0, 179, 159, 0.28);
}

/* Without an explicit size, each inline SVG falls back to its own
   intrinsic/default box (browser-dependent, not the viewBox), so the four
   icons rendered at different, inconsistent sizes. Pin them all to the
   same 28px, matching industries.html's .dgs-ind-icon-box svg. */
.dgs-careers-value-icon svg:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 28px;
  height: 28px;
}

/* Scoped under .dgs-careers-value-pill (not bare) so these beat the
   sitewide .dgs-section--light h4/p color rule in dgs-common.css, same
   specificity issue as the talent-community AEO card above. */
.dgs-careers-value-pill .dgs-careers-value-title:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bg-deep-navy, #0A1F33);
  margin: 0 0 0.5rem 0;
  transition: color 0.3s ease;
}

.dgs-careers-value-pill:hover .dgs-careers-value-title:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--action-teal, #00b39f);
}

.dgs-careers-value-pill .dgs-careers-value-desc:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
  color: var(--text-dark-muted, #5a6e85);
  margin: 0;
  line-height: 1.6;
}

/* ─── OPEN ROLES SECTION ───
   Heading size matches .dgs-careers-sticky-heading ("Why join Digital
   GrowthScale?") above it, so the two section headings on this page
   read at the same scale. Selector scoped to its own wrapper (two
   classes, not just .dgs-roles-section-heading alone): "Open Roles"
   is an <h3>, and dgs-common.css's sitewide `.dgs-page h3` rule
   (one class + one type = higher specificity than one bare class)
   was winning over a single-class selector here, quietly shrinking
   this heading back down to the sitewide h3 size no matter what
   font-size got set on the bare class. `.dgs-careers-why-head
   .dgs-careers-sticky-heading` right above uses the same two-class
   scoping for the exact same reason, which is why THAT heading
   already rendered at the intended size. */
.dgs-roles-section-head:where(.dgs-css-careers,.dgs-css-careers *) {
  max-width: 720px;
  margin: 0 auto 1rem;
  text-align: center;
}

.dgs-roles-section-head .dgs-roles-section-heading:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.3rem);
  color: var(--bg-deep-navy, #0A1F33);
  font-weight: 800;
  line-height: 1.2;
  margin: 0.75rem 0 1rem 0;
  letter-spacing: -0.02em;
  text-align: center;
}

.dgs-roles-section-sub:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--text-dark-muted, #5a6e85);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  text-align: center;
}

/* ─── PREMIUM ROLE CARDS ─── */
.dgs-roles-list:where(.dgs-css-careers,.dgs-css-careers *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 700px) {
  .dgs-roles-list:where(.dgs-css-careers,.dgs-css-careers *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .dgs-roles-list:where(.dgs-css-careers,.dgs-css-careers *) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dgs-role-card-premium:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 2rem;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 4px 20px rgba(10, 31, 51, 0.03);
  transition: all 0.35s var(--ease-out, ease-out);
  position: relative;
}

.dgs-role-card-premium:hover:where(.dgs-css-careers,.dgs-css-careers *) {
  border-color: rgba(0, 179, 159, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(10, 31, 51, 0.07);
}

.dgs-role-header-row:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dgs-role-dept-tag:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--action-teal, #00b39f);
  background: rgba(0, 179, 159, 0.08);
  border: 1px solid rgba(0, 179, 159, 0.2);
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
}

.dgs-role-meta-badge:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dark-muted, #5a6e85);
}

.dgs-role-body h4:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--bg-deep-navy, #0A1F33);
  margin: 0 0 0.4rem 0;
  letter-spacing: -0.015em;
  transition: color 0.3s ease;
}

.dgs-role-body h4 a:where(.dgs-css-careers,.dgs-css-careers *) {
  color: inherit;
  text-decoration: none;
}

.dgs-role-card-premium:hover .dgs-role-body h4:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--action-teal, #00b39f);
}

.dgs-role-body p:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.92rem;
  color: var(--text-dark-muted, #5a6e85);
  line-height: 1.6;
  margin: 0;
}

.dgs-role-footer:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

/* ============================================================
   NATIVE GHL CAREERS LISTING WIDGET
   ------------------------------------------------------------
   Careers "Open Roles" is a GHL Blog List widget pointed at the
   Careers blog channel (confirmed live, 2026-09-16 saved copy of
   the Careers page: the widget renders hl-blog-post-home /
   blog-title / blog-description / readme-btn — the same widget
   family the site's own Growth Hub listing uses). This section
   restyles those exact native classes to look like the
   .dgs-role-card-premium grid above instead of GHL's own default
   blog-list look — no DOM is rebuilt, no card markup is hand-authored
   here; every value below targets a real, confirmed selector.
   .dgs-ghl-native-listing-slot is the wrapper career-main-layout.html
   puts around the native widget (replaces .dgs-roles-list's own grid
   with block, since the real grid now lives one level deeper, on the
   widget's own .flex.flex-wrap row).
   ============================================================ */
.dgs-roles-list.dgs-ghl-native-listing-slot:where(.dgs-css-careers,.dgs-css-careers *) {
  display: block;
}

/* Local-preview-only reset: only matches inside
   career-main-layout.html's own .dgs-ghl-native-listing-slot wrapper
   (this class does not exist on the real live page — see the real
   fix below), kept so the local file previews correctly regardless
   of the fix below. */
.dgs-roles-list.dgs-ghl-native-listing-slot:where(.dgs-css-careers,.dgs-css-careers *),
.dgs-roles-list.dgs-ghl-native-listing-slot .hl-blog-post-home:where(.dgs-css-careers,.dgs-css-careers *),
.dgs-roles-list.dgs-ghl-native-listing-slot .hl-blog-post-home > .flex.flex-wrap:where(.dgs-css-careers,.dgs-css-careers *) {
  background-color: transparent !important;
  background-image: none !important;
}

/* THE REAL FIX (confirmed against the live saved DOM, 2026-09-17):
   the "Open Roles" Blog List widget is NOT nested inside #careers-hub
   at all. It's pasted into GHL as its own, separate Custom Code
   element, which GHL wraps in its own top-level Section — a sibling
   AFTER </main> closes, not a descendant of it (verified: in the
   saved HTML, </main> closes, several wrapper divs close right after
   it, then a brand-new <div id="section-...", class="fullSection
   c-section c-wrapper section-..."> begins, and .hl-blog-post-home is
   inside THAT). That Section's own GHL-generated scoped style sets
   `background-color:var(--transparent)` (confirmed, literally
   transparent) — so whatever shows through as "navy" is the page's
   own default canvas color behind it, which every OTHER section on
   this page happens to paint over explicitly (.dgs-section--light,
   .dgs-hero-duotone, etc.) but this bare, separate widget Section
   never did.
   Fix: give the widget's own STABLE wrapper classes an explicit
   opaque white background. Deliberately NOT using the random
   per-element ID class (e.g. section-TVAMz1vWu1 above) since GHL
   regenerates that on every page edit/republish — .fullSection,
   .c-row, .c-column, .c-custom-code, .custom-code-container are the
   same reusable builder classes on every GHL page. Scoped narrowly
   with :has(.hl-blog-post-home) so this can never affect any other
   custom-code Section sitewide (Growth Hub's own listing, the
   footer's own custom-code paste, etc.) — requires a :has()-capable
   browser (all current Chrome/Edge/Safari; no fallback needed for
   GHL's own preview/live rendering). */
.fullSection:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *),
.c-row:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *),
.c-column:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *),
.c-custom-code:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *),
.custom-code-container:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *) {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* WIDTH FIX (confirmed root cause of the grid rendering as narrow,
   left-stuck columns with a huge empty gap on the right, 2026-09-18):
   .hl-blog-post-home's own ancestor chain — .vertical.inner, the
   column/row/section wrappers GHL's page builder puts around every
   Custom Code element — defaults to shrink-to-fit sizing (a builder
   "column" only stretches to its parent's full width when the
   element inside is explicitly full-width; nothing here tells it
   to be). My grid-template-columns below was already correct, but a
   3-equal-column grid inside a shrink-wrapped, content-width
   container still renders as 3 narrow columns bunched at the start
   of the row — exactly the reported symptom. Forcing width:100% up
   the same stable ancestor chain already used for the background fix
   (never the random per-element ID classes, which GHL regenerates on
   every edit) makes the whole chain stretch to the real available
   content width before the grid ever divides it into 3 columns. */
.fullSection:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *),
.c-row:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *),
.c-column:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *),
.c-custom-code:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *),
.custom-code-container:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *),
.vertical.inner:has(.hl-blog-post-home):where(.dgs-css-careers,.dgs-css-careers *) {
  width: 100% !important;
  max-width: 100% !important;
  /* Same ancestor chain also carries GHL's own generated padding
     (confirmed on the Career Detail hero's identical ancestor chain,
     e.g. "padding:20px 0" on the section, "padding:10px 5px" on the
     column) — zeroed here too so the grid gets the FULL available
     width, not width-minus-native-padding. */
  padding: 0 !important;
  margin: 0 !important;
}

/* Belt-and-suspenders: GHL's own scoped style already sets this
   widget's background to white (confirmed:
   .hl-blog-post-home{background-color:#ffffffff} in the live page's
   own generated \3c style>), but restating it here means the widget
   stays white even if that per-page generated rule is ever missing
   or reordered. */
.hl-blog-post-home:where(.dgs-css-careers,.dgs-css-careers *) {
  background-color: #ffffff !important;
  width: 100% !important;
}

/* 3 columns x however many rows GHL's own pagination provides — the
   page-size (6 per page, or whatever the widget's own "posts per
   page" setting is set to in GHL) is controlled entirely by GHL, not
   by this CSS or by any JS in this repo. This grid just lays out
   however many cards are actually present on any given page. */
.hl-blog-post-home > .flex.flex-wrap:where(.dgs-css-careers,.dgs-css-careers *) {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 700px) {
  .hl-blog-post-home > .flex.flex-wrap:where(.dgs-css-careers,.dgs-css-careers *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .hl-blog-post-home > .flex.flex-wrap:where(.dgs-css-careers,.dgs-css-careers *) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   CAREERS PAGE — GHL "GRID" LAYOUT LIST WIDGET
   ------------------------------------------------------------
   Alternate DOM/classes GHL's Blog List widget renders when its own
   layout setting is switched from "Compact" to "Grid" (confirmed
   live, 2026-09-19 saved copy of the Careers page):

     .hl-blog-post-home
       > .flex.flex-wrap
         > .blog-post-wrapper                (single wrapper — GHL's
                                               own live markup mis-nests
                                               every job's
                                               .blog-post-wrapper-list
                                               INSIDE the previous job's
                                               instead of beside it as
                                               a sibling; js/dgs-careers.js's
                                               flattenGridCards() promotes
                                               them all to direct
                                               children of THIS element
                                               first — a CSS grid only
                                               lays out direct children,
                                               so nothing below does
                                               anything useful until
                                               that JS fix has run)
           > .blog-post-wrapper-list.three-col     (repeats per job)
             > .blog-post-wrapper-wrapper
               > .blog-box
                 > a                          (empty image link — no
                                               featured image on any
                                               Careers job, confirmed)
                 > .standard-blog-content
                   > h2.blog-title > a        (job title + link)
                   > .flex.items-center        (category/date slot,
                     > .text-black.text-xs x2   both empty, same as
                                                 the Compact widget)
                   > p.blog-description
                   > .flex.flex-wrap           (empty tags slot)
                   > .flex > a.blog-button.readme-btn  (Read more)

   Every selector below is scoped under .hl-blog-post-home, so this
   can never leak onto Growth Hub's own blog listing or any other GHL
   blog widget elsewhere on the site. Kept as its own block (not
   merged into the Compact rules above) since it targets a completely
   different class family for the same visual result.
   ============================================================ */

/* .blog-post-wrapper is .flex.flex-wrap's ONLY child in Grid mode —
   without this it would be squeezed into just the first track of the
   outer grid above (2/3 columns sitting empty beside it) instead of
   using the full row to lay out its OWN grid of cards below. */
.hl-blog-post-home > .flex.flex-wrap > .blog-post-wrapper:where(.dgs-css-careers,.dgs-css-careers *) {
  grid-column: 1 / -1;
}

.hl-blog-post-home .blog-post-wrapper:where(.dgs-css-careers,.dgs-css-careers *) {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 700px) {
  .hl-blog-post-home .blog-post-wrapper:where(.dgs-css-careers,.dgs-css-careers *) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .hl-blog-post-home .blog-post-wrapper:where(.dgs-css-careers,.dgs-css-careers *) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hl-blog-post-home .blog-post-wrapper-list:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  min-width: 0;
  width: 100%;
}

.hl-blog-post-home .blog-post-wrapper-wrapper:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 4px 20px rgba(10, 31, 51, 0.03);
  transition: all 0.35s var(--ease-out, ease-out);
  overflow: hidden;
}

.hl-blog-post-home .blog-post-wrapper-wrapper:hover:where(.dgs-css-careers,.dgs-css-careers *) {
  border-color: rgba(0, 179, 159, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(10, 31, 51, 0.07);
}

/* Empty image slot: confirmed empty on every live Careers job (no
   featured image) — hidden outright so it can't reserve a
   thumbnail-height area above the text. */
.hl-blog-post-home .blog-box > a:where(.dgs-css-careers,.dgs-css-careers *) {
  display: none !important;
}

.hl-blog-post-home .standard-blog-content:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 2rem;
  width: 100%;
}

/* Category/date meta row: both slots confirmed empty on every live
   Careers posting (same GHL per-list "show category/date" toggle the
   Compact widget above also leaves off) — collapses instead of
   reserving a blank row while it stays empty. */
.hl-blog-post-home .standard-blog-content > .flex.items-center:has(.text-black.text-xs:empty):not(:has(.text-black.text-xs:not(:empty))):where(.dgs-css-careers,.dgs-css-careers *) {
  display: none;
}

.hl-blog-post-home h2.blog-title:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-heading, 'Sora', sans-serif) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.hl-blog-post-home h2.blog-title a:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--bg-deep-navy, #0A1F33) !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.hl-blog-post-home .blog-post-wrapper-wrapper:hover h2.blog-title a:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--action-teal, #00b39f) !important;
}

.hl-blog-post-home p.blog-description:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.92rem !important;
  color: var(--text-dark-muted, #5a6e85) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.hl-blog-post-home .standard-blog-content > .flex.flex-wrap:empty:where(.dgs-css-careers,.dgs-css-careers *) {
  display: none;
}

.hl-blog-post-home a.blog-button.readme-btn:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  color: var(--action-teal, #00b39f) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-top: 0.5rem !important;
}

.hl-blog-post-home a.blog-button.readme-btn svg:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  transition: transform 0.25s var(--ease-out, ease-out);
}

.hl-blog-post-home a.blog-button.readme-btn:hover svg:where(.dgs-css-careers,.dgs-css-careers *) {
  transform: translateX(4px);
}

/* Card unit. GHL's "compact list" layout repeats
   .blog-post-wrapper-compact per job (verified against the one live
   posting; if a listing with 2+ jobs ever shows the repeat happening
   one level down instead, on .blog-post-wrapper-compact-list, move
   these box rules there — .content-width-compact/.blog-title/etc.
   below are unaffected either way). minmax(0,1fr) on the grid
   columns (not plain 1fr) plus min-width:0 here matters specifically
   because this card contains long unbroken text (job titles) — a
   plain 1fr grid track won't shrink narrower than its content's
   intrinsic min-content width by default, which silently overrides
   equal column widths the moment a title is longer than the others. */
.blog-post-wrapper-compact:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 4px 20px rgba(10, 31, 51, 0.03);
  transition: all 0.35s var(--ease-out, ease-out);
  overflow: hidden;
}

.blog-post-wrapper-compact:hover:where(.dgs-css-careers,.dgs-css-careers *) {
  border-color: rgba(0, 179, 159, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(10, 31, 51, 0.07);
}

.blog-post-wrapper-compact .blog-compact-content:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  width: 100%;
}

/* GHL's own compact-list theme (BlogHome.hoI8HRLt.css, confirmed)
   sets .content-width-compact{max-width:60%;width:60%} — a leftover
   from that layout's image-plus-text row (60% text / 40% image);
   every Careers card has no image, so this reserved the other 40% as
   dead space inside each card. Same specificity family, so this
   selector (2 classes) already outranks GHL's own (1 class) without
   needing !important — restated here for clarity, not as a fight. */
.blog-post-wrapper-compact .content-width-compact:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 2rem;
  width: 100%;
  max-width: 100%;
}

/* The empty second column .content-width-compact used to share the
   row with — GHL's reserved image slot, confirmed empty
   (<div><a href="...">\3c !----></a></div>) on every Careers posting
   since none has a featured image. Hidden outright so it can't
   reserve any width at all next to the 100% text column above. */
.blog-post-wrapper-compact .blog-compact-content > div:not(.content-width-compact):where(.dgs-css-careers,.dgs-css-careers *) {
  display: none !important;
}

/* Category/date meta slot: empty on the one confirmed live posting
   (GHL's per-list "show category/date" toggle was off), but a real
   native hook GHL can populate — styled defensively as a dept-tag row
   so it matches .dgs-role-header-row the moment it's turned on, and
   collapses cleanly (no empty gap) while it stays empty. */
.blog-post-wrapper-compact .text-black.text-xs:empty:where(.dgs-css-careers,.dgs-css-careers *) {
  display: none;
}

.blog-post-wrapper-compact .text-black.text-xs:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--action-teal, #00b39f) !important;
  order: -1;
}

.blog-post-wrapper-compact h2.blog-title:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-heading, 'Sora', sans-serif) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.blog-post-wrapper-compact h2.blog-title a:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--bg-deep-navy, #0A1F33) !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.blog-post-wrapper-compact:hover h2.blog-title a:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--action-teal, #00b39f) !important;
}

.blog-post-wrapper-compact p.blog-description:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.92rem !important;
  color: var(--text-dark-muted, #5a6e85) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.blog-post-wrapper-compact a.blog-button.readme-btn:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  color: var(--action-teal, #00b39f) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-top: 0.5rem !important;
}

.blog-post-wrapper-compact a.blog-button.readme-btn svg:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  transition: transform 0.25s var(--ease-out, ease-out);
}

.blog-post-wrapper-compact a.blog-button.readme-btn:hover svg:where(.dgs-css-careers,.dgs-css-careers *) {
  transform: translateX(4px);
}

/* Pagination: only visible once there are enough jobs to paginate;
   kept minimal (GHL drives the disabled/active state itself). */
.hl-blog-post-home .pagination-container:where(.dgs-css-careers,.dgs-css-careers *) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.hl-blog-post-home .pagination-button:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark-muted, #5a6e85);
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md, 6px);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hl-blog-post-home .pagination-button:disabled:where(.dgs-css-careers,.dgs-css-careers *) {
  opacity: 0.4;
  cursor: default;
}

.hl-blog-post-home .pagination-button.active:where(.dgs-css-careers,.dgs-css-careers *) {
  color: #ffffff;
  background: var(--action-teal, #00b39f);
  border-color: var(--action-teal, #00b39f);
}

.hl-blog-post-home .pagination-button:not(:disabled):hover:where(.dgs-css-careers,.dgs-css-careers *) {
  border-color: var(--action-teal, #00b39f);
  color: var(--action-teal, #00b39f);
}

/* ─── HIRING PROCESS (CSR-track format shared with solution pages,
   from dgs-solution-detail.css: .dgs-csr-layout/-sticky/-track/-step) ─── */
#careers-hiring-process.dgs-section:where(.dgs-css-careers,.dgs-css-careers *) {
  padding-top: 6rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 1024px) {
  #careers-hiring-process.dgs-section:where(.dgs-css-careers,.dgs-css-careers *) {
    padding-top: 7.5rem;
    padding-bottom: 4.5rem;
  }
}

/* ─── TALENT COMMUNITY (navy AEO-banner card, adapted from
   dgs-industries-detail.css's .dgs-aeo-navy-banner family, minus the
   ecosystem-stack marquee/badge side) ─── */
#careers-talent-community.dgs-section:where(.dgs-css-careers,.dgs-css-careers *) {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 1024px) {
  #careers-talent-community.dgs-section:where(.dgs-css-careers,.dgs-css-careers *) {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

.dgs-aeo-navy-banner:where(.dgs-css-careers,.dgs-css-careers *) {
  background: #0A1F33;
  border-radius: var(--radius-xl, 24px);
  padding: clamp(2.25rem, 4vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px rgba(10, 31, 51, 0.35);
  position: relative;
  overflow: hidden;
}

.dgs-aeo-navy-banner:where(.dgs-css-careers,.dgs-css-careers *)::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  background: radial-gradient(circle at 100% 50%, rgba(0, 179, 159, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

/* Careers banner gets a soft, contained glow centered under the ring
   composition (kept tight so it reads as a highlight, not a wash over the
   whole card). Scoped to this page only so the shared .dgs-aeo-navy-banner
   on industries pages is untouched. */
#careers-talent-community .dgs-aeo-navy-banner:where(.dgs-css-careers,.dgs-css-careers *)::before {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at var(--ring-cx, 50%) var(--ring-cy, 82%), rgba(0, 179, 159, 0.34) 0%, rgba(0, 179, 159, 0.14) 28%, transparent 55%),
    radial-gradient(circle at calc(var(--ring-cx, 50%) - 12%) calc(var(--ring-cy, 82%) - 38%), rgba(45, 127, 249, 0.14) 0%, transparent 50%);
  animation: dgsGlowPulse 6s ease-in-out infinite;
}

@keyframes dgsGlowPulse {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #careers-talent-community .dgs-aeo-navy-banner:where(.dgs-css-careers,.dgs-css-careers *)::before {
    animation: none;
  }
}

.dgs-aeo-banner-inner:where(.dgs-css-careers,.dgs-css-careers *) {
  position: relative;
  z-index: 1;
}

.dgs-aeo-text-side:where(.dgs-css-careers,.dgs-css-careers *) {
  max-width: 640px;
}

/* Careers "Talent Community" banner: the ring visual's shared circle center
   lives here as custom properties (--ring-cx/--ring-cy) so the glow
   pseudo-elements above and the ring/badges below all stay in sync off one
   source of truth. Mobile stacks text above, ring below, in normal flow;
   from 1200px up the ring becomes an absolutely-positioned overlay bleeding
   into the bottom-right corner and the banner grows tall enough to give it
   room to be a real circle. */
#careers-talent-community .dgs-aeo-navy-banner:where(.dgs-css-careers,.dgs-css-careers *) {
  --ring-cx: 50%;
  --ring-cy: 82%;
}

@media (min-width: 1200px) {
  #careers-talent-community .dgs-aeo-navy-banner:where(.dgs-css-careers,.dgs-css-careers *) {
    --ring-cx: 83%;
    --ring-cy: 88%;
    min-height: 340px;
    display: flex;
    align-items: center;
  }
}

#careers-talent-community .dgs-aeo-banner-inner:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 100%;
}

/* Scoped under .dgs-aeo-navy-banner (not bare .dgs-aeo-q/.dgs-aeo-a) so
   these beat the sitewide .dgs-section--light h2/p/span rule in
   dgs-common.css, which otherwise wins on specificity and forces
   dark-on-dark navy text here, effectively hiding the heading/paragraph. */
.dgs-aeo-navy-banner .dgs-aeo-q:where(.dgs-css-careers,.dgs-css-careers *) {
  font-family: var(--font-heading, 'Sora', sans-serif);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 1.25rem;
}

.dgs-aeo-navy-banner .dgs-text-teal:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--action-teal, #00b39f);
}

.dgs-aeo-navy-banner .dgs-aeo-a:where(.dgs-css-careers,.dgs-css-careers *) {
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 1.75rem;
}

.dgs-aeo-navy-banner .dgs-promise-link:where(.dgs-css-careers,.dgs-css-careers *) {
  color: var(--action-teal, #00b39f);
}

/* Link Actions */
.dgs-promise-link:where(.dgs-css-careers,.dgs-css-careers *) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--action-teal, #00b39f);
  text-decoration: none;
  transition: color 0.3s, gap 0.3s;
}

.dgs-promise-link:hover:where(.dgs-css-careers,.dgs-css-careers *) {
  color: #008f7f;
  gap: 0.65rem;
}

.dgs-promise-link .dgs-btn-icon svg:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 16px;
  height: 16px;
}

/* ─── TALENT COMMUNITY RING VISUAL (responsive) ───
   Two concentric circles whose shared center (--ring-cx/--ring-cy, set on
   .dgs-aeo-navy-banner above) sits inside the card — so only the upper-left
   sweep of each circle arcs across the visible area, like the reference
   composition. Each ring carries a rotating conic-gradient "comet" masked
   to just the stroke, giving the line itself a running, cycling motion
   (the photo badges stay static — only the ring line moves). Badges are
   positioned from the same shared center via translate() offsets (own
   --dx/--dy custom properties) computed so their centers land exactly on
   the outer or inner circumference: 1, 2, 3 = outer; 4, 5 = inner.

   Below 1200px the whole thing sits in NORMAL FLOW, below the text, at a
   scaled-down size (smaller radii + a recentered --ring-cx/--ring-cy).
   From 1200px up it switches to an absolute overlay bleeding into the
   card's bottom-right corner at full size. */
.dgs-talent-ring:where(.dgs-css-careers,.dgs-css-careers *) {
  display: block;
  position: relative;
  height: 260px;
  margin-top: 2.5rem;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 1200px) {
  .dgs-talent-ring:where(.dgs-css-careers,.dgs-css-careers *) {
    position: absolute;
    inset: 0;
    height: auto;
    margin-top: 0;
  }
}

.dgs-talent-ring-circle:where(.dgs-css-careers,.dgs-css-careers *) {
  position: absolute;
  top: var(--ring-cy);
  left: var(--ring-cx);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.dgs-talent-ring-circle--outer:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 284px;
  height: 284px;
  border: 1.5px solid rgba(0, 179, 159, 0.45);
}

.dgs-talent-ring-circle--inner:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 118px;
  height: 118px;
  border: 1.5px solid rgba(45, 127, 249, 0.4);
}

@media (min-width: 1200px) {
  .dgs-talent-ring-circle--outer:where(.dgs-css-careers,.dgs-css-careers *) {
    width: 490px;
    height: 490px;
  }

  .dgs-talent-ring-circle--inner:where(.dgs-css-careers,.dgs-css-careers *) {
    width: 204px;
    height: 204px;
  }
}

.dgs-talent-ring-circle:where(.dgs-css-careers,.dgs-css-careers *)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      transparent 300deg,
      rgba(0, 179, 159, 0.9) 335deg,
      #5be8d3 350deg,
      rgba(0, 179, 159, 0.9) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.dgs-talent-ring-circle--outer:where(.dgs-css-careers,.dgs-css-careers *)::after {
  animation: dgsRingSpin 7s linear infinite;
}

.dgs-talent-ring-circle--inner:where(.dgs-css-careers,.dgs-css-careers *)::after {
  animation: dgsRingSpin 4.5s linear infinite reverse;
}

@keyframes dgsRingSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dgs-talent-ring-circle:where(.dgs-css-careers,.dgs-css-careers *)::after {
    animation: none;
  }
}

.dgs-talent-ring-icon:where(.dgs-css-careers,.dgs-css-careers *) {
  --dx: 0px;
  --dy: 0px;
  position: absolute;
  top: var(--ring-cy);
  left: var(--ring-cx);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(0, 179, 159, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(4, 10, 20, 0.4);
  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
}

@media (min-width: 1200px) {
  .dgs-talent-ring-icon:where(.dgs-css-careers,.dgs-css-careers *) {
    width: 56px;
    height: 56px;
  }
}

.dgs-talent-ring-icon img:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dgs-talent-ring-icon--1:where(.dgs-css-careers,.dgs-css-careers *) {
  --dx: -109px;
  --dy: -92px;
}

.dgs-talent-ring-icon--2:where(.dgs-css-careers,.dgs-css-careers *) {
  --dx: -12px;
  --dy: -142px;
}

.dgs-talent-ring-icon--3:where(.dgs-css-careers,.dgs-css-careers *) {
  --dx: 100px;
  --dy: -100px;
}

.dgs-talent-ring-icon--4:where(.dgs-css-careers,.dgs-css-careers *) {
  --dx: -53px;
  --dy: -25px;
}

.dgs-talent-ring-icon--5:where(.dgs-css-careers,.dgs-css-careers *) {
  --dx: 49px;
  --dy: -34px;
}

@media (min-width: 1200px) {
  .dgs-talent-ring-icon--1:where(.dgs-css-careers,.dgs-css-careers *) {
    --dx: -188px;
    --dy: -158px;
  }

  .dgs-talent-ring-icon--2:where(.dgs-css-careers,.dgs-css-careers *) {
    --dx: -21px;
    --dy: -244px;
  }

  .dgs-talent-ring-icon--3:where(.dgs-css-careers,.dgs-css-careers *) {
    --dx: 173px;
    --dy: -173px;
  }

  .dgs-talent-ring-icon--4:where(.dgs-css-careers,.dgs-css-careers *) {
    --dx: -92px;
    --dy: -43px;
  }

  .dgs-talent-ring-icon--5:where(.dgs-css-careers,.dgs-css-careers *) {
    --dx: 84px;
    --dy: -59px;
  }
}

/* ─── CAREERS IFRAME CONTAINER ─── */
.careers-iframe-container:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg, 6px);
  margin-top: 1rem;
  margin-bottom: 2rem;
  background: transparent;
}

.careers-iframe-container iframe:where(.dgs-css-careers,.dgs-css-careers *) {
  width: 100%;
  border: none;
  min-height: 800px;
  display: block;
  background: transparent;
}

@media (max-width: 768px) {
  .careers-iframe-container iframe:where(.dgs-css-careers,.dgs-css-careers *) {
    min-height: 900px;
  }
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-1d067c7072:where(.dgs-css-careers,.dgs-css-careers *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a8426db9f720b54ef09adaa.png') !important;
}

.dgs-il-f706e30f50:where(.dgs-css-careers,.dgs-css-careers *) {
  margin: 0.5rem 0 1.5rem !important;
}

.dgs-il-1c21f7a172:where(.dgs-css-careers,.dgs-css-careers *) {
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.7 !important;
  font-size: 1.05rem !important;
  margin: 0 !important;
}

.dgs-il-4435ae4781:where(.dgs-css-careers,.dgs-css-careers *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a841d7e45dbba232f6ab7a4.png') !important;
}


/* ============================================================
   C21. CONTACT  (scope: .dgs-css-contact)
   Formerly css/dgs-contact.css. Used by:
     book-date.html, contact.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — CONTACT PAGE-SPECIFIC STYLES
   Split from dgs-styles.css for per-page editing in GHL.
   Load order: dgs-common.css FIRST, then this file.
   ============================================================ */

.dgs-pill:where(.dgs-css-contact,.dgs-css-contact *) {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--surface-border-light);
  color: var(--text-light);
  background: transparent;
  transition: all var(--duration-base) var(--ease-out);
}

.dgs-pill--teal:where(.dgs-css-contact,.dgs-css-contact *) {
  color: #1affeb;
  border-color: rgba(0, 179, 159, 0.4);
  background: rgba(0, 179, 159, 0.15);
}

.dgs-section--light .dgs-pill:where(.dgs-css-contact,.dgs-css-contact *) {
  border-color: #D7DEE0;
  color: var(--bg-deep-navy);
}

.dgs-next-step-num:where(.dgs-css-contact,.dgs-css-contact *) {
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  color: var(--action-teal);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  display: block;
}

.dgs-contact-direct:where(.dgs-css-contact,.dgs-css-contact *) {
  margin-top: 0;
}

.dgs-contact-section-title:where(.dgs-css-contact,.dgs-css-contact *) {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem !important;
  color: var(--text-white);
  margin-top: 0;
}

.dgs-value-pills:where(.dgs-css-contact,.dgs-css-contact *) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-md);
}

.dgs-value-pills .dgs-pill:where(.dgs-css-contact,.dgs-css-contact *) {
  background: rgba(0, 179, 159, 0.15);
  border-color: rgba(0, 179, 159, 0.4);
  color: #1affeb;
  font-size: 0.78rem;
  font-weight: 600;
}

.dgs-section--light .dgs-contact-section-title:where(.dgs-css-contact,.dgs-css-contact *) {
  color: var(--bg-deep-navy);
}

.form-container:where(.dgs-css-contact,.dgs-css-contact *) {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* --- INTERACTIVE LOCATION LIST --- */

/* Hover effects for location items and links */

/* Make contact details and social links teal on hover */

/* Hero content in split layout — uses full column width */
@media (max-width: 860px) {
  .dgs-contact-direct:where(.dgs-css-contact,.dgs-css-contact *) {
    margin-top: var(--space-lg);
  }
}

/* --- CONTACT PAGE RESPONSIVENESS --- */
@media (max-width: 768px) {
  #dgs-contact-hero:where(.dgs-css-contact,.dgs-css-contact *) {
    /* extra space above the hero for small screens */
    padding: 7.3rem 0 4rem !important;
  }
}

/* --- IFRAME AND CONTACT LINK MOBILE OPTIMIZATIONS --- */
.dgs-form-iframe iframe:where(.dgs-css-contact,.dgs-css-contact *) {
  width: 100%;
  min-height: 900px;
  border: none;
  border-radius: var(--radius-md);
  scroll-margin-top: 120px;
}

@media (max-width: 768px) {
  .dgs-form-iframe iframe:where(.dgs-css-contact,.dgs-css-contact *) {
    min-height: 1250px;
  }

  /* Fields were rendering cramped/tiny on mobile because the GHL widget
     (a fluid, percentage-width form) was being squeezed inside the
     .dgs-container's 1.5rem side padding. Since it's a cross-origin
     iframe, we can't reach in and resize its inputs/fonts directly —
     but we CAN give it more width to expand into. Breaking the wrap out
     to full-bleed lets GHL's own fluid layout render fields at a larger,
     more comfortable size. */
  .dgs-form-iframe-wrap:where(.dgs-css-contact,.dgs-css-contact *) {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow-x: hidden;
  }

  .dgs-form-iframe-wrap .dgs-form-iframe:where(.dgs-css-contact,.dgs-css-contact *) {
    padding: 0 0.75rem;
  }
}

/* --- HERO SECTION STYLING (Inherits from dgs-service-detail.css) --- */
#dgs-contact-hero .dgs-hero-content:where(.dgs-css-contact,.dgs-css-contact *) {
  padding-bottom: 0;
}

#dgs-contact-hero .dgs-pill--teal:where(.dgs-css-contact,.dgs-css-contact *) {
  color: #1affeb !important;
  border-color: rgba(0, 179, 159, 0.4) !important;
  background: rgba(0, 179, 159, 0.15) !important;
}

/* Single column contact form & process grid */
.dgs-contact-form-single:where(.dgs-css-contact,.dgs-css-contact *) {
  max-width: 860px;
  margin: 0 auto;
}

.dgs-next-steps-section:where(.dgs-css-contact,.dgs-css-contact *) {
  margin-top: 4.5rem;
  padding-top: 3.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid rgba(10, 31, 51, 0.08);
}

.dgs-next-steps-grid:where(.dgs-css-contact,.dgs-css-contact *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .dgs-next-steps-grid:where(.dgs-css-contact,.dgs-css-contact *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dgs-next-steps-grid:where(.dgs-css-contact,.dgs-css-contact *) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dgs-next-step-card:where(.dgs-css-contact,.dgs-css-contact *) {
  background: var(--surface-navy-card, rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.dgs-next-step-card:hover:where(.dgs-css-contact,.dgs-css-contact *) {
  transform: translateY(-4px);
  border-color: rgba(0, 179, 159, 0.35);
}

/* --- GHL FORM TABS & PLACEHOLDERS --- */

.dgs-inquiry-tab:where(.dgs-css-contact,.dgs-css-contact *) {
  background: var(--bg-white);
  border: 1px solid #DCE1E4;
  border-radius: var(--radius-full);
  padding: 0.55rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bg-deep-navy);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.dgs-inquiry-tab:hover:where(.dgs-css-contact,.dgs-css-contact *) {
  border-color: var(--action-teal);
  color: var(--action-teal);
}

.dgs-inquiry-tab.is-active:where(.dgs-css-contact,.dgs-css-contact *) {
  background: var(--bg-deep-navy);
  color: var(--text-white);
  border-color: var(--bg-deep-navy);
  box-shadow: 0 4px 12px rgba(10, 31, 51, 0.15);
}

.dgs-ghl-panel:where(.dgs-css-contact,.dgs-css-contact *) {
  display: none;
}

.dgs-ghl-panel.is-active:where(.dgs-css-contact,.dgs-css-contact *) {
  display: block;
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-7363a05057:where(.dgs-css-contact,.dgs-css-contact *) {
  background: var(--bg-deep-navy) !important;
  padding: 9rem 0 6rem !important;
  text-align: center !important;
  position: relative !important;
}

.dgs-il-438c81e189:where(.dgs-css-contact,.dgs-css-contact *) {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 30%, rgba(8, 157, 135, 0.15) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.dgs-il-7e62f46c6d:where(.dgs-css-contact,.dgs-css-contact *) {
  position: relative !important;
  z-index: 1 !important;
}

.dgs-il-6acc717522:where(.dgs-css-contact,.dgs-css-contact *) {
  max-width: 960px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.dgs-il-0d8facbb21:where(.dgs-css-contact,.dgs-css-contact *) {
  color: var(--action-teal) !important;
  margin-bottom: 0.5rem !important;
  display: inline-block !important;
}

.dgs-il-1e6deaee4b:where(.dgs-css-contact,.dgs-css-contact *) {
  max-width: 100% !important;
  margin-bottom: var(--space-md) !important;
  color: var(--text-white) !important;
}

.dgs-il-9f84c66f98:where(.dgs-css-contact,.dgs-css-contact *) {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--space-md) !important;
  color: var(--text-secondary) !important;
}

.dgs-il-1b81d27830:where(.dgs-css-contact,.dgs-css-contact *) {
  padding-top: 4rem !important;
}

.dgs-il-ca5dea0f97:where(.dgs-css-contact,.dgs-css-contact *) {
  max-width: 900px !important;
}

.dgs-il-38e8be416e:where(.dgs-css-contact,.dgs-css-contact *) {
  width: 100% !important;
  border:none !important;
  overflow: hidden !important;
}

.dgs-il-40a3710da6:where(.dgs-css-contact,.dgs-css-contact *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a86ad57b3a1bcf4faf3d2d2.png') !important;
}

.dgs-il-fc1acb5626:where(.dgs-css-contact,.dgs-css-contact *) {
  color: var(--action-teal) !important;
  -webkit-text-fill-color: var(--action-teal) !important;
}

.dgs-il-78c360413a:where(.dgs-css-contact,.dgs-css-contact *) {
  color: var(--action-teal) !important;
}

.dgs-il-3a2164d3de:where(.dgs-css-contact,.dgs-css-contact *) {
  background: #ffffff !important;
  padding: 5.5rem 0 6rem 0 !important;
  width: 100% !important;
}

.dgs-il-31fb13f854:where(.dgs-css-contact,.dgs-css-contact *) {
  max-width: 860px !important;
  margin: 0 auto !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 1.25rem !important;
  box-shadow: 0 4px 20px rgba(10, 31, 51, 0.03) !important;
}

/* No height here: GHL's form_embed.js sizes the iframe to the full form
   (inline style height). Forcing a height made the form scroll inside
   its own box, which is hard to use on mobile. */
.dgs-il-6fa029b200:where(.dgs-css-contact,.dgs-css-contact *) {
  width:100% !important;
  border:none !important;
  border-radius:8px !important;
}

.dgs-il-ca6e82709e:where(.dgs-css-contact,.dgs-css-contact *) {
  text-align: center !important;
  margin-bottom: 2.5rem !important;
}

.dgs-il-250cb51cad:where(.dgs-css-contact,.dgs-css-contact *) {
  font-family: var(--font-heading) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #0A1F33 !important;
  margin: 0 !important;
}

.dgs-il-52b372f63a:where(.dgs-css-contact,.dgs-css-contact *) {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 1.75rem !important;
}

.dgs-il-cf34923ccc:where(.dgs-css-contact,.dgs-css-contact *) {
  margin-bottom: 1rem !important;
  color: var(--action-teal) !important;
  font-weight: 800 !important;
  font-size: 1.5rem !important;
}

.dgs-il-400c32a529:where(.dgs-css-contact,.dgs-css-contact *) {
  font-family: var(--font-heading) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0A1F33 !important;
  margin-bottom: 0.5rem !important;
}

.dgs-il-93e5249d36:where(.dgs-css-contact,.dgs-css-contact *) {
  font-size: 0.88rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.dgs-il-09ffe6f85e:where(.dgs-css-contact,.dgs-css-contact *) {
  margin-top: 3.5rem !important;
  text-align: center !important;
}

/* Matches "What Happens Next" (.dgs-il-250cb51cad) exactly: same
   font-size/weight/color, so the two section headings read as one
   consistent style. */
.dgs-il-7cf0ac032b:where(.dgs-css-contact,.dgs-css-contact *) {
  margin-bottom: 0.75rem !important;
  font-family: var(--font-heading) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #0A1F33 !important;
}

/* ---------------------------------------------------------
   PREFER A DIRECT APPROACH: phone/email/LinkedIn + map
   --------------------------------------------------------- */
.dgs-contact-direct-sub:where(.dgs-css-contact,.dgs-css-contact *) {
  font-size: 0.95rem;
  color: #64748B;
  /* `width: 100%` is required for `margin: 0 auto` to actually center this:
     with `width` left at its default `auto`, the browser resolves the auto
     margins to 0 first and lets `max-width` merely cap the right edge,
     which pins the box to the left instead of centering it. Giving it an
     explicit (non-auto) width lets max-width shrink THAT box symmetrically
     via the auto margins.
     `!important` on the margin is required too: the sitewide reset
     ".dgs-page p { margin: 0 }" (class+element, dgs-common.css) has higher
     specificity than this single class and would otherwise win, zeroing
     the auto margins back out and pinning this paragraph to the left —
     same collision class as the icon-color fix above .dgs-contact-info-icon. */
  width: 100%;
  max-width: 46ch;
  margin: 0 auto 2.5rem !important;
  line-height: 1.6;
  text-align: center;
}

.dgs-contact-direct-panel:where(.dgs-css-contact,.dgs-css-contact *) {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  background: var(--bg-white);
  border: 1px solid #E4E8EA;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(10, 31, 51, 0.06);
}

.dgs-contact-info-col:where(.dgs-css-contact,.dgs-css-contact *) {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem;
}

.dgs-contact-info-row:where(.dgs-css-contact,.dgs-css-contact *) {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: #F3F6FB;
  border: 1px solid #E4E8EA;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.dgs-contact-info-row:hover:where(.dgs-css-contact,.dgs-css-contact *) {
  border-color: var(--action-teal);
  background: rgba(0, 179, 159, 0.06);
}

.dgs-contact-info-icon:where(.dgs-css-contact,.dgs-css-contact *) {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-white);
  border: 1px solid #E4E8EA;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* !important required: this is a <span>, and the sitewide
   ".dgs-section--light span" rule (class+element, dgs-common.css) has
   higher specificity than a single class selector and would otherwise
   win, forcing the icon to the light section's dark navy text color
   instead of teal. Same known collision documented in dgs-careers.css
   and dgs-methodology.css. */
.dgs-contact-info-icon:where(.dgs-css-contact,.dgs-css-contact *) {
  color: var(--action-teal) !important;
}

.dgs-contact-info-icon svg:where(.dgs-css-contact,.dgs-css-contact *) {
  width: 19px;
  height: 19px;
}

.dgs-contact-info-text:where(.dgs-css-contact,.dgs-css-contact *) {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  /* Explicit, not incidental: this inherits text-align from the section's
     centered heading wrapper (.dgs-il-09ffe6f85e) otherwise, and since
     flex-direction:column stretches PHONE/EMAIL/LINKEDIN's label+value
     to a shared width, an inherited "center" would center each line
     within that shared width instead of keeping both flush left. */
  text-align: left !important;
}

.dgs-contact-info-text small:where(.dgs-css-contact,.dgs-css-contact *) {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
}

.dgs-contact-info-text span:where(.dgs-css-contact,.dgs-css-contact *) {
  font-size: 0.92rem;
  font-weight: 600;
  color: #0A1F33;
  word-break: break-word;
}

.dgs-contact-map:where(.dgs-css-contact,.dgs-css-contact *) {
  min-height: 320px;
}

.dgs-contact-map iframe:where(.dgs-css-contact,.dgs-css-contact *) {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

@media (max-width: 860px) {
  .dgs-contact-direct-panel:where(.dgs-css-contact,.dgs-css-contact *) {
    grid-template-columns: 1fr;
  }

  .dgs-contact-map:where(.dgs-css-contact,.dgs-css-contact *),
  .dgs-contact-map iframe:where(.dgs-css-contact,.dgs-css-contact *) {
    min-height: 280px;
  }
}


/* ============================================================
   C22. SOLUTIONS  (scope: .dgs-css-solutions)
   Formerly css/dgs-solutions.css. Used by:
     solutions.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — SERVICES PAGE-SPECIFIC STYLES
   Load order: dgs-common.css FIRST, then this file.
   ============================================================ */

#dgs-services-hero:where(.dgs-css-solutions,.dgs-css-solutions *) {
  padding-top: 9rem;
  padding-bottom: 6rem;
  text-align: center;
  background: var(--bg-deep-navy);
  position: relative;
}

#dgs-services-hero .dgs-hero-content:where(.dgs-css-solutions,.dgs-css-solutions *) {
  max-width: 1140px;
  margin: 0 auto;
}

#dgs-services-hero h1:where(.dgs-css-solutions,.dgs-css-solutions *) {
  max-width: 1140px;
  margin: 0 auto 1.5rem;
}

/* Pillar Cards Row */

/* Custom Pillar Cards */

/* Detailed Solutions Grid Block */

/* Media Column styling */

/* Diagonal Overlay on Image */

/* Content Column styling */

/* Best For box */

/* Checklist box */
.dgs-pillar-list:where(.dgs-css-solutions,.dgs-css-solutions *) {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}

.dgs-pillar-list li:where(.dgs-css-solutions,.dgs-css-solutions *) {
  display: block;
}

.dgs-pillar-list li a:where(.dgs-css-solutions,.dgs-css-solutions *) {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 550;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  text-decoration: none;
  background-color: transparent;
  transition: all 0.25s var(--ease-out);
}

.dgs-pillar-list li a:where(.dgs-css-solutions,.dgs-css-solutions *)::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  transition: all 0.25s var(--ease-out);
}

/* Checklist items with colored indicators */

/* AEO Snippet Callout Styles */
.dgs-aeo-snippet:where(.dgs-css-solutions,.dgs-css-solutions *) {
  background: rgba(0, 179, 159, 0.04);
  border-left: 4px solid var(--action-teal);
  padding: 1.8rem 2.2rem;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  margin: 3rem 0;
  text-align: left;
}

.dgs-aeo-snippet p:where(.dgs-css-solutions,.dgs-css-solutions *) {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-white);
  font-weight: 500;
  margin: 0;
}

/* ============================================================
   SOLUTIONS 3.0 — ECOSYSTEM OVERVIEW (LIGHT) + SOLUTION GROUP CARDS
   Ecosystem intro is a WHITE section with a connected product map.
   Solution groups reuse the index.html .dgs-fsol-card component in a
   static grid (no carousel).
   ============================================================ */

/* ---------- Ecosystem overview (white section) ---------- */

/* Connected product map */

/* Flow connector between tiers */

/* AEO snippet re-styled for the white section */


.dgs-sol-groups-head .dgs-eyebrow:where(.dgs-css-solutions,.dgs-css-solutions *) {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--action-teal);
  margin-bottom: 0.9rem;
}

.dgs-sol-groups-head h2:where(.dgs-css-solutions,.dgs-css-solutions *) {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-dark-primary);
  margin: 0;
}

/* ============================================================
   FEATURED SOLUTIONS CARD GRID — duplicated verbatim from dgs-index.css
   so this page no longer depends on dgs-index.css being loaded.
   ============================================================ */

/* ---- Growth-hub-style expanding accordion (light / white theme) ---- */
.dgs-fsol-grid:where(.dgs-css-solutions,.dgs-css-solutions *) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 900px) {
  .dgs-fsol-grid:where(.dgs-css-solutions,.dgs-css-solutions *) {
    flex-direction: row;
    height: 560px;
    gap: 1.5rem;
  }
}

/* Panel — dark navy card, image washed with navy gradient, content anchored to the bottom */
.dgs-fsol-card:where(.dgs-css-solutions,.dgs-css-solutions *) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #0A1F33;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.4);
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  transition: border-color 0.4s ease,
              box-shadow 0.4s ease;
  z-index: 1;
}

/* This card also carries the shared ".dgs-reveal" scroll-reveal class
   (dgs-common.css), which sets its OWN `transition` shorthand for
   opacity/transform. `transition` is exclusive per element — whichever
   single rule wins the specificity fight supplies the ENTIRE property
   list, it does not merge with this rule's border-color/box-shadow
   above. Since that shared rule is now "html.dgs-js .dgs-reveal"
   (raised in specificity to fix a GHL-safety issue), it ties this
   file's own selector on specificity and wins on source order alone
   — which silently dropped this card's hover transition entirely
   (border-color/box-shadow snapping instantly with zero animation).
   Fixed the same way as css/dgs-index.css's identical component: the
   longhand `transition-*` properties (not the shorthand) so hover
   keeps its own 0s delay while the scroll-reveal keeps its intentional
   per-card stagger (--dgs-reveal-i). `html .dgs-fsol-card.dgs-reveal`
   matches the shared rule's specificity exactly and lives in this
   file (loaded after dgs-common.css), so it wins the tie by source
   order. */
html .dgs-fsol-card.dgs-reveal:where(.dgs-css-solutions,.dgs-css-solutions *) {
  transition-property: opacity, transform, border-color, box-shadow;
  transition-duration: 0.7s, 0.7s, 0.4s, 0.4s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1), ease, ease;
  transition-delay: calc(var(--dgs-reveal-i, 0) * 0.08s), calc(var(--dgs-reveal-i, 0) * 0.08s), 0s, 0s;
}

/* Decorative top accent line that grows on hover */
.dgs-fsol-card:where(.dgs-css-solutions,.dgs-css-solutions *)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}
.dgs-fsol-card[data-accent="teal"]:where(.dgs-css-solutions,.dgs-css-solutions *)::before { background: var(--action-teal); }
.dgs-fsol-card[data-accent="blue"]:where(.dgs-css-solutions,.dgs-css-solutions *)::before { background: var(--dgs-blue); }
.dgs-fsol-card[data-accent="amber"]:where(.dgs-css-solutions,.dgs-css-solutions *)::before { background: var(--dgs-amber); }

@media (min-width: 900px) {
  .dgs-fsol-card:where(.dgs-css-solutions,.dgs-css-solutions *) {
    flex: 1;
    min-height: auto;
  }
}

/* Compact padding at tablet/narrow desktop widths to prevent text wrap issues */
@media (min-width: 900px) and (max-width: 1099px) {
  .dgs-fsol-card:where(.dgs-css-solutions,.dgs-css-solutions *) {
    padding: 1.8rem 1.4rem;
  }
}

/* Hover styles for non-touch pointer devices */
@media (hover: hover) {
  html:not(.dgs-is-touch) .dgs-fsol-card:hover:where(.dgs-css-solutions,.dgs-css-solutions *) {
    border-color: var(--action-teal);
    box-shadow: 0 24px 48px -20px rgba(0, 179, 159, 0.28);
  }
  html:not(.dgs-is-touch) .dgs-fsol-card[data-accent="blue"]:hover:where(.dgs-css-solutions,.dgs-css-solutions *) {
    border-color: var(--dgs-blue);
    box-shadow: 0 24px 48px -20px rgba(45, 127, 249, 0.28);
  }
  html:not(.dgs-is-touch) .dgs-fsol-card[data-accent="amber"]:hover:where(.dgs-css-solutions,.dgs-css-solutions *) {
    border-color: var(--dgs-amber);
    box-shadow: 0 24px 48px -20px rgba(245, 166, 35, 0.28);
  }
  html:not(.dgs-is-touch) .dgs-fsol-card:hover:where(.dgs-css-solutions,.dgs-css-solutions *)::before {
    width: 100%;
  }
}

/* Full-bleed image behind the content, washed dark navy so the image fades gracefully into dark navy */
.dgs-fsol-card-bg:where(.dgs-css-solutions,.dgs-css-solutions *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.dgs-fsol-card-bg img:where(.dgs-css-solutions,.dgs-css-solutions *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.65s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-fsol-card-bg:where(.dgs-css-solutions,.dgs-css-solutions *)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 31, 51, 0.25) 0%,
    rgba(10, 31, 51, 0.75) 40%,
    rgba(10, 31, 51, 0.95) 75%,
    #0A1F33 100%);
}

@media (hover: hover) {
  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-fsol-card-bg img:where(.dgs-css-solutions,.dgs-css-solutions *) {
    filter: grayscale(0) contrast(1.02);
    transform: scale(1.04) translate(-4px, -4px);
  }
}

/* On touch devices, keep images colored and static */
html.dgs-is-touch .dgs-fsol-card-bg img:where(.dgs-css-solutions,.dgs-css-solutions *) {
  filter: grayscale(0) contrast(1.02);
}

/* Card body — anchored to the bottom of the panel, above the image wash */
.dgs-fsol-card-inner:where(.dgs-css-solutions,.dgs-css-solutions *) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-fsol-card-inner:where(.dgs-css-solutions,.dgs-css-solutions *) {
    transform: translateY(-4px);
  }
}

/* Collapsed detail (desc + solution list + CTA) — revealed on hover, like the
   Growth Hub panels. Grid-rows 0fr -> 1fr gives a smooth eased reveal. */
.dgs-fsol-reveal:where(.dgs-css-solutions,.dgs-css-solutions *) {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  width: 100%;
  transform: translateY(10px);
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.dgs-fsol-reveal-in:where(.dgs-css-solutions,.dgs-css-solutions *) {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 0.9rem;
}

@media (hover: hover) {
  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-fsol-reveal:where(.dgs-css-solutions,.dgs-css-solutions *) {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
  }
  /* Slide explore arrow to the right on card hover */
  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-promise-link .dgs-btn-icon:where(.dgs-css-solutions,.dgs-css-solutions *) {
    transform: translateX(6px);
  }
}

/* Keep detail always visible on touch-only devices */
html.dgs-is-touch .dgs-fsol-reveal:where(.dgs-css-solutions,.dgs-css-solutions *) {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}

/* Keep active/manual class triggers */
.dgs-fsol-card.active .dgs-fsol-reveal:where(.dgs-css-solutions,.dgs-css-solutions *) {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: stacked cards, detail always visible (no hover to trigger reveal) */
@media (max-width: 899px) {
  .dgs-fsol-card:where(.dgs-css-solutions,.dgs-css-solutions *) {
    min-height: 480px;
    padding-top: 18rem;
  }
  .dgs-fsol-reveal:where(.dgs-css-solutions,.dgs-css-solutions *) {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
  }
}

/* Eyebrow — accent per pillar */
.dgs-pillar-eyebrow:where(.dgs-css-solutions,.dgs-css-solutions *) {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--action-teal);
  margin-bottom: 0.1rem;
}

.dgs-fsol-card[data-accent="blue"] .dgs-pillar-eyebrow:where(.dgs-css-solutions,.dgs-css-solutions *) { color: var(--dgs-blue); }
.dgs-fsol-card[data-accent="amber"] .dgs-pillar-eyebrow:where(.dgs-css-solutions,.dgs-css-solutions *) { color: var(--dgs-amber); }

.dgs-fsol-title:where(.dgs-css-solutions,.dgs-css-solutions *) {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  /* Prevent mid-word breaks for capability development title */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.dgs-fsol-desc:where(.dgs-css-solutions,.dgs-css-solutions *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 38ch;
}

/* Chevron marker, no container (fsol variant) — overrides the circular
   badge from the unscoped .dgs-pillar-list li a::before rule above via
   higher specificity, since .dgs-fsol-card shares that base rule with
   .dgs-pillar-card. */
.dgs-fsol-card .dgs-pillar-list li a:where(.dgs-css-solutions,.dgs-css-solutions *)::before {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.25s var(--ease-out);
}

.dgs-fsol-card[data-accent="teal"] .dgs-pillar-list li a:where(.dgs-css-solutions,.dgs-css-solutions *)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B39F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

.dgs-fsol-card[data-accent="blue"] .dgs-pillar-list li a:where(.dgs-css-solutions,.dgs-css-solutions *)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D7FF9' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

.dgs-fsol-card[data-accent="amber"] .dgs-pillar-list li a:where(.dgs-css-solutions,.dgs-css-solutions *)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

/* Hover — chevron nudges forward (fsol variant) */
.dgs-fsol-card[data-accent="teal"] .dgs-pillar-list li a:hover:where(.dgs-css-solutions,.dgs-css-solutions *)::before,
.dgs-fsol-card[data-accent="blue"] .dgs-pillar-list li a:hover:where(.dgs-css-solutions,.dgs-css-solutions *)::before,
.dgs-fsol-card[data-accent="amber"] .dgs-pillar-list li a:hover:where(.dgs-css-solutions,.dgs-css-solutions *)::before {
  transform: translateX(3px);
}

/* Hover — plain list rows, accent text + slight shift (fsol variant, no container box) */
.dgs-fsol-card[data-accent="teal"] .dgs-pillar-list li a:hover:where(.dgs-css-solutions,.dgs-css-solutions *) {
  color: var(--action-teal);
  gap: 1rem;
}

.dgs-fsol-card[data-accent="blue"] .dgs-pillar-list li a:hover:where(.dgs-css-solutions,.dgs-css-solutions *) {
  color: var(--dgs-blue);
  gap: 1rem;
}

.dgs-fsol-card[data-accent="amber"] .dgs-pillar-list li a:hover:where(.dgs-css-solutions,.dgs-css-solutions *) {
  color: var(--dgs-amber);
  gap: 1rem;
}

/* Explore link pinned to the bottom, accent per pillar */
.dgs-fsol-card-inner .dgs-promise-link:where(.dgs-css-solutions,.dgs-css-solutions *) {
  align-self: flex-start;
}

.dgs-fsol-card[data-accent="blue"] .dgs-promise-link:where(.dgs-css-solutions,.dgs-css-solutions *) { color: var(--dgs-blue) !important; }
.dgs-fsol-card[data-accent="blue"] .dgs-promise-link:where(.dgs-css-solutions,.dgs-css-solutions *)::after { background-color: var(--dgs-blue); }
.dgs-fsol-card[data-accent="amber"] .dgs-promise-link:where(.dgs-css-solutions,.dgs-css-solutions *) { color: var(--dgs-amber) !important; }
.dgs-fsol-card[data-accent="amber"] .dgs-promise-link:where(.dgs-css-solutions,.dgs-css-solutions *)::after { background-color: var(--dgs-amber); }

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-8718819c8b:where(.dgs-css-solutions,.dgs-css-solutions *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7d6cb31eb55bdfc37b3b7a.png') !important;
}

.dgs-il-fc1acb5626:where(.dgs-css-solutions,.dgs-css-solutions *) {
  color: var(--action-teal) !important;
  -webkit-text-fill-color: var(--action-teal) !important;
}

.dgs-il-78c360413a:where(.dgs-css-solutions,.dgs-css-solutions *) {
  color: var(--action-teal) !important;
}

.dgs-il-1432561cbb:where(.dgs-css-solutions,.dgs-css-solutions *) {
  background: #ffffff !important;
  padding: 6rem 0 !important;
  width: 100% !important;
}

.dgs-il-53c59cd9e8:where(.dgs-css-solutions,.dgs-css-solutions *) {
  max-width: 900px !important;
  margin: 0 auto 2.5rem auto !important;
  text-align: center !important;
}

.dgs-il-ef2f100d49:where(.dgs-css-solutions,.dgs-css-solutions *) {
  color: var(--action-teal) !important;
  display: inline-block !important;
  margin-bottom: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.dgs-il-13f3f2750d:where(.dgs-css-solutions,.dgs-css-solutions *) {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #0A1F33 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
}

.dgs-il-140f67013f:where(.dgs-css-solutions,.dgs-css-solutions *) {
  max-width: 760px !important;
  margin: 0 auto 3.5rem auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: center !important;
}

.dgs-il-4a8148a22c:where(.dgs-css-solutions,.dgs-css-solutions *) {
  font-size: 1.08rem !important;
  line-height: 1.8 !important;
  color: #0A1F33 !important;
  margin: 0 auto !important;
}

.dgs-il-0d07d6253e:where(.dgs-css-solutions,.dgs-css-solutions *) {
  color: var(--dgs-blue) !important;
}

.dgs-il-2dc6a749f4:where(.dgs-css-solutions,.dgs-css-solutions *) {
  color: var(--dgs-amber) !important;
}

.dgs-il-77b46ad3b1:where(.dgs-css-solutions,.dgs-css-solutions *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7d6cb3cf50f900f20521f1.png') !important;
}


/* ============================================================
   C23. INDEX  (scope: .dgs-css-index)
   Formerly css/dgs-index.css. Used by:
     index.html, solutions.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — INDEX PAGE-SPECIFIC STYLES
   Split from dgs-styles.css for per-page editing in GHL.
   Load order: dgs-common.css FIRST, then this file.
   ============================================================ */

.dgs-section--dark:where(.dgs-css-index,.dgs-css-index *) {
  background: #0A1F33 !important;
  color: var(--text-light-primary);
  position: relative;
  overflow: hidden;
}

.dgs-section--dark:where(.dgs-css-index,.dgs-css-index *)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh-dark);
  pointer-events: none;
  z-index: 0;
}

.dgs-section--dark>.dgs-container:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  z-index: 1;
}

.dgs-btn--outline-dark:where(.dgs-css-index,.dgs-css-index *) {
  background: transparent;
  border-color: var(--bg-deep-navy);
  color: var(--bg-deep-navy);
}

.dgs-btn--outline-dark:hover:where(.dgs-css-index,.dgs-css-index *) {
  background: var(--bg-deep-navy);
  color: var(--bg-white);
}

.dgs-hero-actions:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* ─── HERO: decorative glass panel (purely visual, no content) ─── */

.dgs-pill:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--surface-border-light);
  color: var(--text-light);
  background: transparent;
  transition: all var(--duration-base) var(--ease-out);
}

.dgs-section--light .dgs-pill:where(.dgs-css-index,.dgs-css-index *) {
  border-color: var(--surface-border-neutral);
  color: var(--bg-deep-navy);
}

/* ─── INDUSTRIES: DUAL-ROW MARQUEE TICKER (replaces card grid) ─── */

@keyframes dgs-marquee-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes dgs-marquee-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.dgs-timeline:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dgs-timeline:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dgs-timeline-step:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  text-align: center;
  padding: var(--space-lg) var(--space-sm) var(--space-md);
}

.dgs-timeline-number:where(.dgs-css-index,.dgs-css-index *) {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-teal);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 auto var(--space-md);
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 18px rgba(0, 179, 159, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--duration-base) var(--ease-out);
}

.dgs-timeline-step:hover .dgs-timeline-number:where(.dgs-css-index,.dgs-css-index *) {
  transform: scale(1.08);
}

.dgs-timeline-step h3:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  color: var(--text-white);
}

.dgs-section--light .dgs-timeline-step h3:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--bg-deep-navy);
}

.dgs-timeline-step p:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .dgs-timeline-step:not(:last-child):where(.dgs-css-index,.dgs-css-index *)::after {
    content: '';
    position: absolute;
    top: calc(var(--space-lg) + 22px);
    left: calc(50% + 22px);
    width: calc(100% + var(--space-md) - 44px);
    height: 0;
    border-top: 2px solid rgba(0, 179, 159, 0.4);
    z-index: 1;
  }
}

/* ─── FOUNDER MESSAGE: quoted headline, plain roomy body copy ─── */

/* ============================================================
   BUSINESS CHALLENGES — white section, sticky intro + chip grid
   ============================================================ */
.dgs-challenges-section:where(.dgs-css-index,.dgs-css-index *) {
  background: var(--bg-white, #ffffff);
  color: var(--bg-deep-navy);
}

/* ── Section header — centered column (heading + intro + dispersing cloud) ── */
.dgs-challenges-head:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  max-width: 72rem;
  margin: 0 auto 3.75rem;
  text-align: center;
}

.dgs-challenges-intro:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  z-index: 2;
}

.dgs-challenges-intro .dgs-eyebrow:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
  display: inline-block;
  margin-bottom: 1rem;
}

.dgs-challenges-intro h2:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--bg-deep-navy);
  font-family: var(--font-heading);
  /* !important to beat the global `.dgs-page h2` clamp (also !important).
     Matches the other index.html section headings' size (e.g. "Real
     results from real businesses." in .dgs-success-header-row) -- this
     one was noticeably smaller (1.55rem/2.85rem vs 2rem/2.8rem min/max
     elsewhere) and read as inconsistent against the rest of the page. */
  font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
}

/* one line on wider screens; wraps naturally on small screens */
@media (min-width: 1000px) {
  .dgs-challenges-intro h2:where(.dgs-css-index,.dgs-css-index *) {
    white-space: nowrap;
  }
}

.dgs-challenges-intro p:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--text-dark-muted, #334155);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 40rem;
  margin: 0 auto;
}

/* ── Dispersing word-cloud (decorative, GSAP-driven) — centered above heading ── */
.dgs-challenge-cloud:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  top: -2.5rem; /* Lowered to prevent overlap with the navy section above */
  left: -10vw; /* Expanded to stretch closer to the screen edges */
  right: -10vw; /* Expanded to stretch closer to the screen edges */
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
  overflow: hidden;
}

.dgs-cloud-column:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 0.85rem; /* Gap between the stacked rows */
  width: 45%;
  will-change: transform, opacity;
}

.dgs-cloud-group:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Feather/Fade out left column marquee towards the center title (right edge) */
.dgs-cloud-column--left .dgs-cloud-group:where(.dgs-css-index,.dgs-css-index *) {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 45%, transparent 95%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 45%, transparent 95%);
}

/* Feather/Fade out right column marquee towards the center title (left edge) */
.dgs-cloud-column--right .dgs-cloud-group:where(.dgs-css-index,.dgs-css-index *) {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 15%, black 45%, transparent 95%);
  mask-image: linear-gradient(to left, transparent 0%, black 15%, black 45%, transparent 95%);
}

/* Infinite Marquee Track */
.dgs-marquee-track:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  gap: 1.5rem;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
}

.dgs-marquee-track--left:where(.dgs-css-index,.dgs-css-index *) {
  animation: dgs-marquee-left--index 35s linear infinite;
}

.dgs-marquee-track--right:where(.dgs-css-index,.dgs-css-index *) {
  animation: dgs-marquee-right--index 35s linear infinite;
}

@keyframes dgs-marquee-left--index {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Translate exactly half of the duplicated track */
    transform: translateX(calc(-50% - 0.75rem));
  }
}

@keyframes dgs-marquee-right--index {
  0% {
    transform: translateX(calc(-50% - 0.75rem));
  }
  100% {
    transform: translateX(0);
  }
}

.dgs-cloud-tag:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 1.35rem; /* Larger pills */
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.6rem; /* Bigger padding */
  border-radius: var(--radius-full);
  border: 1px solid rgba(10, 31, 51, 0.08);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(10, 31, 51, 0.03);
  color: var(--text-dark-muted, #334155);
  white-space: nowrap;
  display: inline-block;
}

/* ============================================================
   INTERACTIVE EXPLORER — accordion (expand to reveal photo + detail)
   ============================================================ */
.dgs-challenges-explorer:where(.dgs-css-index,.dgs-css-index *) {
  margin-top: 0.5rem;
}

.dgs-accordion:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(10, 31, 51, 0.1);
}

.dgs-accord-item:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  border-bottom: 1px solid rgba(10, 31, 51, 0.1);
  transition: background-color 0.4s var(--ease-out);
}

/* Left accent bar grows on hover / open */
.dgs-accord-item:where(.dgs-css-index,.dgs-css-index *)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--action-teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s var(--ease-out);
}

.dgs-accord-item:hover:where(.dgs-css-index,.dgs-css-index *)::before,
.dgs-accord-item.is-open:where(.dgs-css-index,.dgs-css-index *)::before {
  transform: scaleY(1);
}

.dgs-accord-item.is-open:where(.dgs-css-index,.dgs-css-index *) {
  background: linear-gradient(180deg, rgba(0, 179, 159, 0.04), rgba(45, 127, 249, 0.02));
}

/* Header row (always visible) */
.dgs-accord-header:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: clamp(1.15rem, 2.4vw, 1.7rem) clamp(0.6rem, 2vw, 1.5rem);
  transition: padding-left 0.4s var(--ease-out);
}

.dgs-accord-item:hover .dgs-accord-header:where(.dgs-css-index,.dgs-css-index *),
.dgs-accord-item.is-open .dgs-accord-header:where(.dgs-css-index,.dgs-css-index *) {
  padding-left: clamp(1.15rem, 2.6vw, 2.2rem);
}

.dgs-accord-header:focus-visible:where(.dgs-css-index,.dgs-css-index *) {
  outline: 2px solid var(--action-teal);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

.dgs-accord-num:where(.dgs-css-index,.dgs-css-index *) {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(10, 31, 51, 0.3);
  transition: color 0.3s var(--ease-out);
}

.dgs-accord-item:hover .dgs-accord-num:where(.dgs-css-index,.dgs-css-index *),
.dgs-accord-item.is-open .dgs-accord-num:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
}

.dgs-accord-title:where(.dgs-css-index,.dgs-css-index *) {
  flex: 1;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgba(10, 31, 51, 0.5);
  transition: color 0.3s var(--ease-out);
}

.dgs-accord-item:hover .dgs-accord-title:where(.dgs-css-index,.dgs-css-index *),
.dgs-accord-item.is-open .dgs-accord-title:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--bg-deep-navy);
}

/* Round +/× toggle */
.dgs-accord-icon:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(10, 31, 51, 0.18);
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), transform 0.45s var(--ease-out);
}

.dgs-accord-icon:where(.dgs-css-index,.dgs-css-index *)::before,
.dgs-accord-icon:where(.dgs-css-index,.dgs-css-index *)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: var(--radius-xs);
  background: rgba(10, 31, 51, 0.5);
  transform: translate(-50%, -50%);
  transition: background-color 0.3s var(--ease-out);
}

.dgs-accord-icon:where(.dgs-css-index,.dgs-css-index *)::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.dgs-accord-item:hover .dgs-accord-icon:where(.dgs-css-index,.dgs-css-index *) {
  border-color: var(--action-teal);
}

.dgs-accord-item.is-open .dgs-accord-icon:where(.dgs-css-index,.dgs-css-index *) {
  background: var(--action-teal);
  border-color: var(--action-teal);
  transform: rotate(135deg);
}

.dgs-accord-item.is-open .dgs-accord-icon:where(.dgs-css-index,.dgs-css-index *)::before,
.dgs-accord-item.is-open .dgs-accord-icon:where(.dgs-css-index,.dgs-css-index *)::after {
  background: #ffffff;
}

/* Collapsible body — animates via grid-template-rows 0fr -> 1fr */
.dgs-accord-body:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}

.dgs-accord-item.is-open .dgs-accord-body:where(.dgs-css-index,.dgs-css-index *) {
  grid-template-rows: 1fr;
}

.dgs-accord-inner:where(.dgs-css-index,.dgs-css-index *) {
  overflow: hidden;
  min-height: 0;
}

.dgs-accord-grid:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  padding: 0.25rem clamp(0.6rem, 2vw, 1.5rem) clamp(1.6rem, 3vw, 2.25rem);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease-out) 0.08s, transform 0.45s var(--ease-out) 0.08s;
}

.dgs-accord-item.is-open .dgs-accord-grid:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 1;
  transform: none;
}

@media (min-width: 760px) {
  .dgs-accord-grid:where(.dgs-css-index,.dgs-css-index *) {
    /* Images removed — panel is text-only, so it spans a single column. */
    padding-left: clamp(1.15rem, 2.6vw, 2.2rem);
  }
}

.dgs-accord-content:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.dgs-panel-text p:where(.dgs-css-index,.dgs-css-index *) {
  margin: 0 0 0.75rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #33475b;
}

.dgs-panel-text p:last-child:where(.dgs-css-index,.dgs-css-index *) {
  margin-bottom: 0;
}

.dgs-panel-solution-row:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* Recommended solution link styled as a minimal text link with underline hover */
.dgs-panel-solution-link:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--action-teal) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  transition: color var(--duration-base) var(--ease-out);
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.dgs-panel-solution-link:where(.dgs-css-index,.dgs-css-index *)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--action-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.dgs-panel-solution-link:hover:where(.dgs-css-index,.dgs-css-index *)::after {
  transform: scaleX(1);
}

.dgs-panel-solution-link .dgs-btn-icon:where(.dgs-css-index,.dgs-css-index *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.dgs-panel-solution-link .dgs-btn-icon svg:where(.dgs-css-index,.dgs-css-index *) {
  width: 14px;
  height: 14px;
  stroke-width: 2.5px;
}

.dgs-panel-solution-link:hover .dgs-btn-icon:where(.dgs-css-index,.dgs-css-index *) {
  transform: translateX(4px);
}

/* layer badge (reused — now sits in the panel solution row) */
.dgs-challenge-layer:where(.dgs-css-index,.dgs-css-index *) {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all var(--duration-base) var(--ease-out);
}

.dgs-layer--enable:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
  background: rgba(0, 179, 159, 0.04);
  border-color: rgba(0, 179, 159, 0.2);
}

.dgs-layer--enable:hover:where(.dgs-css-index,.dgs-css-index *) {
  background: rgba(0, 179, 159, 0.1);
  border-color: rgba(0, 179, 159, 0.4);
}

.dgs-layer--transform:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--dgs-blue);
  background: rgba(45, 127, 249, 0.04);
  border-color: rgba(45, 127, 249, 0.2);
}

.dgs-layer--transform:hover:where(.dgs-css-index,.dgs-css-index *) {
  background: rgba(45, 127, 249, 0.1);
  border-color: rgba(45, 127, 249, 0.4);
}

.dgs-layer--elevate:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--dgs-steel);
  background: rgba(91, 102, 112, 0.04);
  border-color: rgba(91, 102, 112, 0.2);
}

.dgs-layer--elevate:hover:where(.dgs-css-index,.dgs-css-index *) {
  background: rgba(91, 102, 112, 0.1);
  border-color: rgba(91, 102, 112, 0.4);
}

.dgs-layer--dual:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--dgs-blue);
  background: linear-gradient(90deg, rgba(45, 127, 249, 0.04), rgba(91, 102, 112, 0.04));
  border-color: rgba(45, 127, 249, 0.2);
}

.dgs-layer--dual:hover:where(.dgs-css-index,.dgs-css-index *) {
  background: linear-gradient(90deg, rgba(45, 127, 249, 0.08), rgba(91, 102, 112, 0.08));
  border-color: rgba(45, 127, 249, 0.4);
}

/* ─── SERVICES: PREMIUM ANIMATED CLICKABLE ROW LIST (replaces plain text grid) ─── */
.dgs-services-list:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  border-top: none;
}

@media (min-width: 768px) {
  .dgs-services-list:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dgs-services-list:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dgs-service-row:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2.25rem 2rem;
  border: 1px solid var(--surface-border-neutral);
  border-radius: var(--radius-xl) var(--radius-md) var(--radius-xl) var(--radius-xl);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-white);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.dgs-service-row:hover:where(.dgs-css-index,.dgs-css-index *) {
  transform: translateY(-5px);
  border-color: var(--bg-deep-navy);
  box-shadow: 0 16px 36px rgba(11, 19, 62, 0.08);
}

/* Sweep background on hover */
.dgs-service-row:where(.dgs-css-index,.dgs-css-index *)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-deep-navy);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}

.dgs-service-row:hover:where(.dgs-css-index,.dgs-css-index *)::before,
.dgs-service-row:focus-visible:where(.dgs-css-index,.dgs-css-index *)::before {
  transform: scaleY(1);
}

.dgs-service-row-icon:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 2.75rem;
  display: flex;
  align-items: center;
  color: var(--action-teal);
  transition: color var(--duration-base) var(--ease-out), transform 0.4s var(--ease-out);
}

.dgs-service-row-icon svg:where(.dgs-css-index,.dgs-css-index *) {
  stroke: var(--action-teal);
  transition: stroke var(--duration-base) var(--ease-out);
}

.dgs-service-row:hover .dgs-service-row-icon:where(.dgs-css-index,.dgs-css-index *),
.dgs-service-row:focus-visible .dgs-service-row-icon:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-mint-hover);
  transform: scale(1.08);
}

.dgs-service-row:hover .dgs-service-row-icon svg:where(.dgs-css-index,.dgs-css-index *),
.dgs-service-row:focus-visible .dgs-service-row-icon svg:where(.dgs-css-index,.dgs-css-index *) {
  stroke: var(--action-mint-hover);
}

.dgs-service-row-content:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dgs-service-row-title:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.3;
  color: var(--bg-deep-navy);
  transition: color var(--duration-base) var(--ease-out);
}

.dgs-service-row:hover .dgs-service-row-title:where(.dgs-css-index,.dgs-css-index *),
.dgs-service-row:focus-visible .dgs-service-row-title:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--text-white);
}

.dgs-service-row-benefit:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.9rem;
  color: var(--text-dark-muted);
  line-height: 1.45;
  transition: color var(--duration-base) var(--ease-out);
}

.dgs-service-row:hover .dgs-service-row-benefit:where(.dgs-css-index,.dgs-css-index *),
.dgs-service-row:focus-visible .dgs-service-row-benefit:where(.dgs-css-index,.dgs-css-index *) {
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 640px) {
  .dgs-service-row:where(.dgs-css-index,.dgs-css-index *) {
    padding: 1.75rem 1.5rem;
  }
}

/* ─── SYSTEMS AUDIT SECTION LAYOUT IMPROVEMENTS ─── */

/* Homepage service grid shows names only — full definitions live on /services */

#dgs-hero:where(.dgs-css-index,.dgs-css-index *) {
  padding-top: 4rem;
  padding-bottom: 4.5rem;
}

#dgs-hero .dgs-eyebrow:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
}

#dgs-hero h1:where(.dgs-css-index,.dgs-css-index *) {
  color: #ffffff;
}

#dgs-hero .dgs-hero-sub:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--text-dark-muted);
}

@media (min-width: 768px) {
  #dgs-hero:where(.dgs-css-index,.dgs-css-index *) {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ============================================================
   MOBILE & TABLET RESPONSIVE OVERRIDES
   Reins in section padding, gaps, and image heights that were
   sized for desktop (many set inline in the HTML), so tablets
   and phones don't get excessive whitespace or squeeze.
   ============================================================ */

@media (max-width: 768px) {

  .dgs-hero-actions:where(.dgs-css-index,.dgs-css-index *) {
    gap: 0.75rem !important;
  }

  .dgs-hero-actions .dgs-btn:where(.dgs-css-index,.dgs-css-index *) {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   FLUID LAYOUT — Relative units for zoom resilience
   ============================================================ */
#dgs-hero .dgs-hero-content:where(.dgs-css-index,.dgs-css-index *) {
  max-width: 45rem;
}

#dgs-hero .dgs-hero-sub:where(.dgs-css-index,.dgs-css-index *) {
  max-width: 36.25rem;
}

/* ============================================================
   PREMIUM CENTERED HERO SECTION (RIPPLING STYLE)
   ============================================================ */

#dgs-hero:where(.dgs-css-index,.dgs-css-index *),
.dgs-hero--premium-split:where(.dgs-css-index,.dgs-css-index *) {
  background-color: #0A1F33 !important;
  background-image: url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a6195492d3c3208084f92d0.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--text-white);
  padding: 8rem 0 4rem;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .dgs-hero--premium-split:where(.dgs-css-index,.dgs-css-index *) {
    padding: 10rem 0 5rem;
  }
}

/* Subtle background overlay mesh for depth */
.dgs-hero-mesh-overlay:where(.dgs-css-index,.dgs-css-index *) {
  display: none !important;
}

/* Video sits full-bleed behind the hero on every breakpoint, graded and
   feathered on all sides so it dissolves into the navy hero background
   (#0A1F33, set on .dgs-hero--premium-split) instead of reading as a
   hard-edged clip or box. */
.dgs-hero-bg-video:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0.6;
  filter: grayscale(0.25) contrast(1.1) brightness(0.8) saturate(1.15);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 38%, black 45%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 38%, black 45%, transparent 92%);
}

/* Color-matches the video to the brand navy/teal duotone so its hue
   reads as one surface with the rest of the hero, not a separate photo. */
.dgs-hero-video-tint:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #0A1F33 0%, #0d5f70 55%, #00B39F 100%);
  mix-blend-mode: color;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 38%, black 45%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 38%, black 45%, transparent 92%);
}

@media (max-width: 768px) {
  .dgs-hero-bg-video:where(.dgs-css-index,.dgs-css-index *),
  .dgs-hero-video-tint:where(.dgs-css-index,.dgs-css-index *) {
    mask-image: radial-gradient(ellipse 95% 60% at 50% 32%, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 95% 60% at 50% 32%, black 40%, transparent 90%);
  }

  .dgs-hero-bg-video:where(.dgs-css-index,.dgs-css-index *) {
    opacity: 0.5;
  }
}

/* Soft top spotlight */
.dgs-hero-spotlight:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  left: 50%;
  top: 0;
  width: 70vw;
  height: 45vh;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 0%, 
    rgba(0, 179, 159, 0.1) 0%, 
    rgba(45, 127, 249, 0.05) 50%, 
    transparent 80%
  );
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -15%);
}

/* Animated network globe — decorative, sits above the photo/scrim/
   spotlight background layers but below the hero copy (z-index: 5). */

/* Container content layout */
.dgs-hero-content-container:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
}

.dgs-hero-main-content:where(.dgs-css-index,.dgs-css-index *) {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Tagline styled above header */
.dgs-hero-tagline:where(.dgs-css-index,.dgs-css-index *) {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--action-teal);
  margin-bottom: 1.25rem;
}

/* Massive Display Heading */
.dgs-hero--premium-split h1:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  /* 72px on desktop */
  font-weight: 800;
  /* Sora ExtraBold */
  line-height: 1.06;
  letter-spacing: -0.025em;
  /* Tight -2.5% tracking for giant headers */
  color: #ffffff !important;
  margin-bottom: 1.5rem;
  text-align: left;
  max-width: 100% !important; /* Let text stretch fully on wide viewports */
}

.dgs-hero-title-main:where(.dgs-css-index,.dgs-css-index *) {
  background: linear-gradient(to bottom, #ffffff 60%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  display: inline;
}

.dgs-hero-dot:where(.dgs-css-index,.dgs-css-index *) {
  color: #F5A623;
}

/* Linear-style copy */
.dgs-hero-linear-sub:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9) !important; /* Brighter grey style */
  margin-top: 1.5rem;
  margin-bottom: 2.25rem;
  max-width: 48rem;
  text-align: left;
}

/* Left-aligned hero actions directly below body text */
.dgs-hero-actions:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .dgs-hero-actions:where(.dgs-css-index,.dgs-css-index *) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }
  .dgs-hero-actions .dgs-btn-saas:where(.dgs-css-index,.dgs-css-index *) {
    width: 100%;
  }
}

/* SaaS Button System */
.dgs-btn-saas:where(.dgs-css-index,.dgs-css-index *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-xl);
  font-family: var(--font-body);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
  box-sizing: border-box;
}

/* ── Stopwatch / slot-machine label flip on hover ──────────
   Two identical lines are stacked in a track clipped to one
   line tall; on hover the track slides up so the second line
   (and its icon) rolls into view. */
.dgs-btn-flip:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  display: inline-flex;
  align-items: flex-start; /* let the track keep its full 2-line height */
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4em;
}

.dgs-btn-flip-track:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}

.dgs-btn-flip-line:where(.dgs-css-index,.dgs-css-index *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 1.4em;
  white-space: nowrap;
}

.dgs-btn-saas:hover .dgs-btn-flip-track:where(.dgs-css-index,.dgs-css-index *),
.dgs-btn-saas:focus-visible .dgs-btn-flip-track:where(.dgs-css-index,.dgs-css-index *) {
  transform: translateY(-50%);
}

/* Icon nudges forward as it rolls up, like an arrow taking off */
.dgs-btn-saas:hover .dgs-btn-flip-line .dgs-btn-icon svg:where(.dgs-css-index,.dgs-css-index *) {
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .dgs-btn-flip-track:where(.dgs-css-index,.dgs-css-index *) {
    transition: none;
  }
  .dgs-btn-saas:hover .dgs-btn-flip-track:where(.dgs-css-index,.dgs-css-index *),
  .dgs-btn-saas:focus-visible .dgs-btn-flip-track:where(.dgs-css-index,.dgs-css-index *) {
    transform: none;
  }
}

.dgs-btn-saas--primary:where(.dgs-css-index,.dgs-css-index *) {
  background-color: var(--dgs-amber) !important; /* Signal Amber #F5A623 */
  color: #0A1F33 !important;
  border: 1px solid var(--dgs-amber) !important;
}

.dgs-btn-saas--primary:hover:where(.dgs-css-index,.dgs-css-index *) {
  background-color: #e0961f !important;
  border-color: #e0961f !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245, 166, 35, 0.28);
}

.dgs-btn-saas--secondary:where(.dgs-css-index,.dgs-css-index *) {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.dgs-btn-saas--secondary:hover:where(.dgs-css-index,.dgs-css-index *) {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.dgs-hero-teal-text:where(.dgs-css-index,.dgs-css-index *) {
  color: #00B39F !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  display: inline;
}

/* Bottom elements layout */

/* Trust strip — number-forward, blended seamlessly into the dark hero.
   A single hairline at the top carries a short brand-gradient accent; the
   panel background is a whisper of light that fades out, so it reads as part
   of the section rather than a bordered card. */
.dgs-hero-stats-panel:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  padding: 2.75rem 0 0.75rem !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Gradient glow riding the top hairline. Rests centered; when the cursor
   moves near the top edge, JS drives --accent-x and the glow eases toward
   it with a magnetic trailing motion (see transition below). */
.dgs-hero-stats-panel:where(.dgs-css-index,.dgs-css-index *)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: var(--accent-w, 240px);
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(45, 127, 249, 0.9) 30%,
      rgba(0, 179, 159, 0.95) 60%,
      transparent 100%);
  box-shadow: 0 0 12px rgba(0, 179, 159, 0.45);
  transform: translateX(var(--accent-x, 0px));
  /* magnetic ease — soft catch-up toward the cursor / back to center */
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

@media (min-width: 600px) {
  .dgs-hero-stats-panel:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .dgs-hero-stats-panel:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    align-items: stretch;
    padding-top: 3.25rem !important;
  }
}

.dgs-hero-stat-item:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

@media (min-width: 1024px) {
  .dgs-hero-stat-item:where(.dgs-css-index,.dgs-css-index *) {
    padding: 0 2rem;
  }

  /* faint vertical separators keep the four reading as one strip */
  .dgs-hero-stat-item:not(:last-child):where(.dgs-css-index,.dgs-css-index *) {
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  }
}

/* Icons dropped for the clean, number-led reference look (markup kept) */
.stat-icon-wrapper:where(.dgs-css-index,.dgs-css-index *),
.dgs-hero-stat-item .stat-icon:where(.dgs-css-index,.dgs-css-index *) {
  display: none !important;
}

.stat-meta:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* reserve the kicker band on every column so the big numbers all
     sit on one line, whether or not an item has a "Close to" lead */
  padding-top: 1.15rem;
}

.stat-sub:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
  margin: 0;
}

.stat-val:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3.4vw, 3.1rem);
  font-weight: 600;
  /* Sora SemiBold — matches the hero title weight */
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  background: linear-gradient(180deg, #ffffff 55%, #b9c5d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #ffffff;
}

.stat-lbl:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
  max-width: 18ch;
}

/* ============================================================
   APPLE-STYLE SYSTEMS NODE NETWORK ANIMATION
   ============================================================ */

.dgs-hero-systems-network-centered:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 650px;
  margin: 0;
  overflow: visible;
  z-index: 2;
  opacity: 0.25;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .dgs-hero-systems-network-centered:where(.dgs-css-index,.dgs-css-index *) {
    top: 50%;
    left: auto;
    right: -2rem;
    transform: translateY(-50%);
    width: 48%;
    max-width: 820px;
    opacity: 0.85;
    pointer-events: auto;
  }
}

/* Floating Tooltip for Interactive SVG Nodes */

.dgs-network-tooltip-val:where(.dgs-css-index,.dgs-css-index *) {
  color: #00ffd5;
  font-weight: 700;
  margin-left: 0.25rem;
}

.dgs-network-svg:where(.dgs-css-index,.dgs-css-index *) {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Main background line path */

/* Centered moving pulse stream path */

@keyframes dgsFlowStreamCentered {
  to {
    stroke-dashoffset: 0;
  }
}

/* Nodes styling */
.network-node:where(.dgs-css-index,.dgs-css-index *) {
  cursor: pointer;
  pointer-events: auto;
}

.node-dot:where(.dgs-css-index,.dgs-css-index *) {
  transition: r var(--duration-base) var(--ease-out), filter var(--duration-base) var(--ease-out);
}

.network-node:hover .node-dot:where(.dgs-css-index,.dgs-css-index *) {
  r: 9px;
  filter: drop-shadow(0 0 6px currentColor);
}

/* Pulsing rings around nodes */
.node-pulse:where(.dgs-css-index,.dgs-css-index *) {
  transform-origin: center;
  animation: dgsNodePulse 3s ease-out infinite;
}

/* Staggered pulse delays */
.pulse-ai:where(.dgs-css-index,.dgs-css-index *) {
  animation-delay: 0s;
}

.pulse-crm:where(.dgs-css-index,.dgs-css-index *) {
  animation-delay: 0.6s;
}

.pulse-ops:where(.dgs-css-index,.dgs-css-index *) {
  animation-delay: 1.2s;
}

.pulse-talent:where(.dgs-css-index,.dgs-css-index *) {
  animation-delay: 1.8s;
}

.pulse-data:where(.dgs-css-index,.dgs-css-index *) {
  animation-delay: 2.4s;
}

@keyframes dgsNodePulse {
  0% {
    r: 8px;
    opacity: 0.6;
  }

  100% {
    r: 24px;
    opacity: 0;
  }
}

/* Node labels (text below nodes) */
.node-label:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  fill: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
  transition: fill var(--duration-base) var(--ease-out), font-size var(--duration-base) var(--ease-out);
}

.network-node:hover .node-label:where(.dgs-css-index,.dgs-css-index *) {
  fill: var(--text-white);
  font-size: 0.82rem;
}

.dgs-hero-bottom-row-centered:where(.dgs-css-index,.dgs-css-index *) {
  width: 100%;
  margin-top: 4rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 1024px) {
  .dgs-hero-bottom-row-centered:where(.dgs-css-index,.dgs-css-index *) {
    margin-top: 5.5rem;
  }
}

/* ============================================================
   2.3 BRAND PROMISE SECTION
   ============================================================ */
#dgs-brand-promise:where(.dgs-css-index,.dgs-css-index *),
#dgs-industries-picker:where(.dgs-css-index,.dgs-css-index *),
#dgs-growth-hub:where(.dgs-css-index,.dgs-css-index *) {
  background-color: #0A1F33 !important;
  position: relative;
  overflow: hidden;
}

/* Bluish navy center background glow aura */
#dgs-brand-promise:where(.dgs-css-index,.dgs-css-index *)::before,
#dgs-industries-picker:where(.dgs-css-index,.dgs-css-index *)::before,
#dgs-growth-hub:where(.dgs-css-index,.dgs-css-index *)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  background: radial-gradient(ellipse at center, rgba(20, 65, 145, 0.42) 0%, rgba(12, 40, 95, 0.22) 45%, rgba(10, 31, 51, 0) 75%);
  pointer-events: none;
  z-index: 1;
}

/* Mobile: these sections stack into a single tall column (a 3x4 icon
   list, a multi-line heading, etc.), so their own height can run past
   1400px. The desktop rule above sizes the glow at 85% of THAT height,
   which stretches it into a thin, mostly-invisible vertical band that
   only shows near the section's exact vertical midpoint (wherever that
   happens to land in the middle of the list) instead of the soft round
   glow it's meant to be. Below 768px, decouple the glow's size from the
   section's variable content height entirely: a viewport-width-relative
   square glow, anchored near the top of the section (roughly behind its
   heading) rather than centered in a column several screens tall. */
@media (max-width: 767px) {
  #dgs-brand-promise:where(.dgs-css-index,.dgs-css-index *)::before,
  #dgs-industries-picker:where(.dgs-css-index,.dgs-css-index *)::before,
  #dgs-growth-hub:where(.dgs-css-index,.dgs-css-index *)::before {
    top: 300px;
    width: 130vw;
    height: 62vh;
    max-width: 640px;
    max-height: 560px;
  }
}

#dgs-brand-promise .dgs-container:where(.dgs-css-index,.dgs-css-index *),
#dgs-industries-picker .dgs-container:where(.dgs-css-index,.dgs-css-index *),
#dgs-growth-hub .dgs-container:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  z-index: 2;
}

/* Ensure the visual frame stays solid dark navy so the background glow stays behind it */
#dgs-brand-promise .dgs-promise-visual-frame:where(.dgs-css-index,.dgs-css-index *) {
  background-color: #0A1F33 !important;
}

/* Decorative Background SVGs Container */

/* Two-column editorial composition: interactive list (left) + one
   crossfading visual (right). Stacks on mobile: list, then image. */
.dgs-promise-story:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(2.5rem, 6vw, 4rem);
  width: 100%;
  margin-top: 3.5rem;
}

@media (min-width: 900px) {
  .dgs-promise-story:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}

.dgs-promise-list:where(.dgs-css-index,.dgs-css-index *) {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0 0;
  width: 100%;
}

.dgs-promise-row:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dgs-promise-row:last-child:where(.dgs-css-index,.dgs-css-index *) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Active indicator: a thin teal line that grows on the active/hovered row */
.dgs-promise-row:where(.dgs-css-index,.dgs-css-index *)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0%;
  background: var(--action-teal);
  transform: translateY(-50%);
  transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-promise-row.is-active:where(.dgs-css-index,.dgs-css-index *)::before {
  height: 72%;
}

.dgs-promise-item:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  width: 100%;
  margin: 0;
  padding: clamp(1.15rem, 2vw, 1.65rem) 0 clamp(1.15rem, 2vw, 1.65rem) 1.5rem;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dgs-promise-item:focus-visible:where(.dgs-css-index,.dgs-css-index *) {
  outline: 2px solid var(--action-teal);
  outline-offset: 4px;
}

.dgs-promise-item-num:where(.dgs-css-index,.dgs-css-index *) {
  flex-shrink: 0;
  width: 2.5rem;
  padding-top: 0.2em;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.4s ease;
}

.dgs-promise-row.is-active .dgs-promise-item-num:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
}

.dgs-promise-item-body:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dgs-promise-item-title:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color 0.4s ease;
}

.dgs-promise-row.is-active .dgs-promise-item-title:where(.dgs-css-index,.dgs-css-index *) {
  color: #ffffff;
}

.dgs-promise-item-subtitle:where(.dgs-css-index,.dgs-css-index *) {
  display: block;
  max-width: 42ch;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.4s ease;
}

.dgs-promise-row.is-active .dgs-promise-item-subtitle:where(.dgs-css-index,.dgs-css-index *) {
  color: rgba(255, 255, 255, 0.92);
}

/* Smooth reveal: animate grid-template-rows 0fr -> 1fr (buttery height, no
   max-height jank). The inner wrapper clips content while collapsed. */
.dgs-promise-item-reveal:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-rows: 0fr;
  margin-left: 4rem;
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  opacity: 0;
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease;
}

.dgs-promise-row.is-active .dgs-promise-item-reveal:where(.dgs-css-index,.dgs-css-index *) {
  grid-template-rows: 1fr;
  opacity: 1;
}

.dgs-promise-item-reveal-in:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow: hidden;
  min-height: 0;
  padding-top: 0.75rem;
  padding-bottom: 1.5rem;
}

.dgs-promise-item-desc:where(.dgs-css-index,.dgs-css-index *) {
  max-width: 42ch;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.dgs-promise-visual-frame:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow 0.4s ease;
}

/* Feathered edge: the photo itself fades to transparent (not just a color
   wash), so the navy section background shows through and the image
   dissolves into it instead of sitting in a hard-edged box. Weighted
   toward the top-left, the side that faces the text column, and left
   strongest/sharpest on the bottom-right where the photo needs to read. */
.dgs-promise-visual-img:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(0.15) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 68% 55%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 88% at 68% 55%, #000 55%, transparent 100%);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

/* Same emphasis treatment as the founder's active portrait card on the
   About page (#leadership .dgs-portrait-card): a teal glow border, no
   color wash over the photo itself. */
@media (hover: hover) {
  html:not(.dgs-is-touch) #dgs-brand-promise .dgs-promise-visual-frame:hover:where(.dgs-css-index,.dgs-css-index *) {
    border-color: var(--action-teal) !important;
    box-shadow: 0 20px 50px -10px rgba(0, 179, 159, 0.4), 0 0 30px rgba(0, 179, 159, 0.25);
  }
}

.dgs-promise-visual-img.is-active:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 1;
  animation: dgsPromiseDrift 9s ease-out forwards;
}

@keyframes dgsPromiseDrift {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.dgs-promise-visual-overlay:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Only the bottom scrim remains, to keep the index label legible; the
     left/top blend into navy is now handled by the image's own mask. */
  background: linear-gradient(180deg, rgba(10, 31, 51, 0) 45%, rgba(10, 31, 51, 0.7) 100%);
}

.dgs-promise-visual-index:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  left: clamp(1.25rem, 2.5vw, 2rem);
  bottom: clamp(1.25rem, 2.5vw, 2rem);
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-promise-visual-index-num:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
}

.dgs-promise-visual-index-label:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}

/* Autoplay removed (2026-08-24 user request) — the dwell-timer progress
   line no longer has anything to represent, so it's hidden outright. */
.dgs-promise-visual-progress:where(.dgs-css-index,.dgs-css-index *) {
  display: none;
}

.dgs-promise-visual-progress-fill:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--action-teal);
  border-radius: inherit;
}

.dgs-promise-visual-progress-fill.is-animating:where(.dgs-css-index,.dgs-css-index *) {
  animation-name: dgsPromiseProgress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes dgsPromiseProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dgs-promise-row:where(.dgs-css-index,.dgs-css-index *)::before,
  .dgs-promise-item-num:where(.dgs-css-index,.dgs-css-index *),
  .dgs-promise-item-title:where(.dgs-css-index,.dgs-css-index *),
  .dgs-promise-item-subtitle:where(.dgs-css-index,.dgs-css-index *),
  .dgs-promise-item-reveal:where(.dgs-css-index,.dgs-css-index *),
  .dgs-promise-visual-img:where(.dgs-css-index,.dgs-css-index *),
  .dgs-promise-visual-index:where(.dgs-css-index,.dgs-css-index *) {
    transition-duration: 0.01ms !important;
  }
  .dgs-promise-visual-img.is-active:where(.dgs-css-index,.dgs-css-index *) {
    animation: none !important;
  }
  .dgs-promise-visual-progress:where(.dgs-css-index,.dgs-css-index *) {
    display: none;
  }
}

/* Mobile: image moves above the list (was below it) and the feather flips
   to a top-solid / bottom-fade, so the photo dissolves down into the list
   content that follows it, matching the stacked reference layout. */
@media (max-width: 899px) {
  .dgs-promise-visual:where(.dgs-css-index,.dgs-css-index *) {
    order: -1;
    margin-bottom: 0.5rem;
  }

  .dgs-promise-visual-img:where(.dgs-css-index,.dgs-css-index *) {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 96%);
  }
}

.dgs-promise-link:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--action-teal) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  align-self: flex-start;
  transition: color var(--duration-base) var(--ease-out);
}

.dgs-promise-link:where(.dgs-css-index,.dgs-css-index *)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--action-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.dgs-promise-link:hover:where(.dgs-css-index,.dgs-css-index *)::after {
  transform: scaleX(1);
}

.dgs-promise-link .dgs-btn-icon:where(.dgs-css-index,.dgs-css-index *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.dgs-promise-link .dgs-btn-icon svg:where(.dgs-css-index,.dgs-css-index *) {
  width: 14px;
  height: 14px;
  stroke-width: 2.5px;
}

.dgs-promise-link:hover .dgs-btn-icon:where(.dgs-css-index,.dgs-css-index *) {
  transform: translateX(4px);
}

/* ============================================================
   2.4 FEATURED SOLUTIONS — three feathered dark cards
   Background image fades into the card, like the "People first.
   Automation led." section. Light section, dark cards.
   ============================================================ */
#dgs-featured-solutions:where(.dgs-css-index,.dgs-css-index *) {
  background: var(--bg-white, #ffffff);
  color: var(--bg-deep-navy);
}

/* Header row: title + intro on the left, "Explore All Solutions" on the right */

.dgs-fsol-layout-grid:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.dgs-fsol-copy-col:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: 1040px;
}

.dgs-fsol-copy-col h2:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--bg-deep-navy);
  margin: 0 0 1.2rem 0;
}

/* Intro lede — replaces the boxed callout */
.dgs-fsol-lede:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.72;
  color: var(--text-dark-muted, #334155);
  max-width: 76ch;
  margin: 1.5rem auto 0;
}

.dgs-fsol-lede strong:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--bg-deep-navy);
  font-weight: 700;
}

/* CSR methodology — same dark icon-strip graphic used on the solution
   detail pages (dark navy card, teal corner glow, gradient icons). */
.dgs-method:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

.dgs-method-label:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bg-deep-navy);
}

/* ─── CSR graphic (ported from css/dgs-solution-detail.css) ───
   No supporting copy under the label here (icon + short title only), so
   steps stay pinned to the icon's own width (84px) instead of equal-fill
   — the connecting lines space evenly off the icon box, never off how
   wide a stage's label happens to be. ─── */
.dgs-csr-graphic:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.75rem);
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 179, 159, 0.16) 0%, transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(0, 179, 159, 0.22) 0%, transparent 48%),
    #0A1F33;
}

.dgs-csr-graphic-step:where(.dgs-css-index,.dgs-css-index *) {
  --csr-accent: var(--dgs-teal);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  flex: 0 0 84px;
  width: 84px;
  max-width: 84px;
}

.dgs-csr-graphic-step--blue:where(.dgs-css-index,.dgs-css-index *) {
  --csr-accent: var(--dgs-blue);
}

.dgs-csr-graphic-icon:where(.dgs-css-index,.dgs-css-index *) {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1.5px solid color-mix(in srgb, var(--csr-accent) 40%, transparent);
  background: color-mix(in srgb, var(--csr-accent) 8%, #0A1F33);
  transition: border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.dgs-csr-graphic-icon svg:where(.dgs-css-index,.dgs-css-index *) {
  width: 36px;
  height: 36px;
}

.dgs-csr-graphic-step:hover .dgs-csr-graphic-icon:where(.dgs-css-index,.dgs-css-index *) {
  border-color: var(--csr-accent);
  background: color-mix(in srgb, var(--csr-accent) 16%, #0A1F33);
  transform: translateY(-3px);
}

.dgs-csr-graphic-label:where(.dgs-css-index,.dgs-css-index *) {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  width: max-content;
}

.dgs-csr-graphic-text:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-white);
}

.dgs-csr-graphic-connector:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  flex: 1 1 40px;
  min-width: 24px;
  height: 84px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.dgs-csr-graphic-line:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.dgs-csr-graphic-dot:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dgs-teal);
}

.dgs-csr-graphic-arrow:where(.dgs-css-index,.dgs-css-index *) {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 0.4rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 760px) {
  .dgs-csr-graphic:where(.dgs-css-index,.dgs-css-index *) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
    padding: 1.75rem 1.25rem;
    justify-items: center;
  }

  .dgs-csr-graphic-step:where(.dgs-css-index,.dgs-css-index *) {
    flex: none;
    width: 100%;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
  }

  .dgs-csr-graphic-connector:where(.dgs-css-index,.dgs-css-index *) {
    display: none;
  }

  .dgs-csr-graphic-icon:where(.dgs-css-index,.dgs-css-index *) {
    width: 68px;
    height: 68px;
  }

  .dgs-csr-graphic-icon svg:where(.dgs-css-index,.dgs-css-index *) {
    width: 30px;
    height: 30px;
  }

  .dgs-csr-graphic-label:where(.dgs-css-index,.dgs-css-index *) {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    white-space: nowrap;
  }

  .dgs-csr-graphic-text:where(.dgs-css-index,.dgs-css-index *) {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
  }

  .dgs-csr-graphic-num:where(.dgs-css-index,.dgs-css-index *) {
    font-size: 0.75rem;
    padding-right: 0.5rem;
  }
}

@media (max-width: 380px) {
  .dgs-csr-graphic:where(.dgs-css-index,.dgs-css-index *) {
    gap: 1.5rem 1rem;
    padding: 1.5rem 1rem;
  }

  .dgs-csr-graphic-icon:where(.dgs-css-index,.dgs-css-index *) {
    width: 58px;
    height: 58px;
  }

  .dgs-csr-graphic-icon svg:where(.dgs-css-index,.dgs-css-index *) {
    width: 26px;
    height: 26px;
  }

  .dgs-csr-graphic-text:where(.dgs-css-index,.dgs-css-index *) {
    font-size: 0.72rem;
  }

  .dgs-csr-graphic-num:where(.dgs-css-index,.dgs-css-index *) {
    font-size: 0.68rem;
  }
}

/* ---- Growth-hub-style expanding accordion (light / white theme) ---- */
.dgs-fsol-grid:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

@media (max-width: 899px) {
  .dgs-fsol-grid:where(.dgs-css-index,.dgs-css-index *) {
    margin-top: 1.5rem;
  }
}

@media (min-width: 900px) {
  .dgs-fsol-grid:where(.dgs-css-index,.dgs-css-index *) {
    flex-direction: row;
    height: 600px;
    gap: 1.5rem;
  }
}

/* Panel — dark navy card, image washed with navy gradient, content anchored to the bottom */
.dgs-fsol-card:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #0A1F33;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.4);
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 440px;
  transform: translateZ(0);
  will-change: flex-grow;
  transition: flex-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.4s ease;
  z-index: 1;
}

/* This card also carries the shared ".dgs-reveal" scroll-reveal class
   (dgs-common.css), which sets its OWN `transition` shorthand for
   opacity/transform. `transition` is exclusive per element — whichever
   single rule wins the specificity fight supplies the ENTIRE property
   list, it does not merge with this rule's flex-grow/border-color/
   box-shadow above. Since that shared rule is now "html.dgs-js
   .dgs-reveal" (raised in specificity to fix a GHL-safety issue), it
   ties this file's own selector on specificity, and wins on source
   order alone — which silently dropped this card's hover transition
   entirely (confirmed live: flex-grow/border-color/box-shadow snapped
   instantly with zero animation). Fixed by giving THIS selector every
   property it actually needs, via the longhand `transition-*`
   properties (not the shorthand) so each keeps its own correct
   duration/easing/delay instead of one blunt shared value — in
   particular, hover must stay at 0s delay while the scroll-reveal
   keeps its intentional per-card stagger (--dgs-reveal-i). `html
   .dgs-fsol-card.dgs-reveal` matches the shared rule's specificity
   exactly and lives in this file (loaded after dgs-common.css), so it
   wins the tie by source order. */
html .dgs-fsol-card.dgs-reveal:where(.dgs-css-index,.dgs-css-index *) {
  transition-property: opacity, transform, flex-grow, border-color, box-shadow;
  transition-duration: 0.7s, 0.7s, 0.6s, 0.4s, 0.4s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1), ease, ease;
  transition-delay: calc(var(--dgs-reveal-i, 0) * 0.08s), calc(var(--dgs-reveal-i, 0) * 0.08s), 0s, 0s, 0s;
}

/* Decorative top accent line that grows on hover */
.dgs-fsol-card:where(.dgs-css-index,.dgs-css-index *)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}
.dgs-fsol-card[data-accent="teal"]:where(.dgs-css-index,.dgs-css-index *)::before { background: var(--action-teal); }
.dgs-fsol-card[data-accent="blue"]:where(.dgs-css-index,.dgs-css-index *)::before { background: var(--dgs-blue); }
.dgs-fsol-card[data-accent="amber"]:where(.dgs-css-index,.dgs-css-index *)::before { background: var(--dgs-amber); }

@media (min-width: 900px) {
  .dgs-fsol-card:where(.dgs-css-index,.dgs-css-index *) {
    flex: 1;
    min-height: auto;
  }
}

/* Expanding accordion (desktop) — mirrors the Growth Hub panels: the
   hovered card grows, its siblings compress and drop their secondary text. */
@media (min-width: 900px) {
  .dgs-fsol-grid:has(.dgs-fsol-card:hover) .dgs-fsol-card:hover:where(.dgs-css-index,.dgs-css-index *) {
    flex: 2.3;
  }
  .dgs-fsol-grid:has(.dgs-fsol-card:hover) .dgs-fsol-card:not(:hover):where(.dgs-css-index,.dgs-css-index *) {
    flex: 0.65;
  }
  .dgs-fsol-grid:has(.dgs-fsol-card:hover) .dgs-fsol-card:not(:hover) .dgs-fsol-title:where(.dgs-css-index,.dgs-css-index *),
  .dgs-fsol-grid:has(.dgs-fsol-card:hover) .dgs-fsol-card:not(:hover) .dgs-fsol-desc:where(.dgs-css-index,.dgs-css-index *) {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    pointer-events: none;
  }
}

/* Compact padding at tablet/narrow desktop widths to prevent text wrap issues */
@media (min-width: 900px) and (max-width: 1099px) {
  .dgs-fsol-card:where(.dgs-css-index,.dgs-css-index *) {
    padding: 1.8rem 1.4rem;
  }
}

/* Hover styles for non-touch pointer devices */
@media (hover: hover) {
  html:not(.dgs-is-touch) .dgs-fsol-card:hover:where(.dgs-css-index,.dgs-css-index *) {
    border-color: var(--action-teal);
    box-shadow: 0 24px 48px -20px rgba(0, 179, 159, 0.28);
  }
  html:not(.dgs-is-touch) .dgs-fsol-card[data-accent="blue"]:hover:where(.dgs-css-index,.dgs-css-index *) {
    border-color: var(--dgs-blue);
    box-shadow: 0 24px 48px -20px rgba(45, 127, 249, 0.28);
  }
  html:not(.dgs-is-touch) .dgs-fsol-card[data-accent="amber"]:hover:where(.dgs-css-index,.dgs-css-index *) {
    border-color: var(--dgs-amber);
    box-shadow: 0 24px 48px -20px rgba(245, 166, 35, 0.28);
  }
  html:not(.dgs-is-touch) .dgs-fsol-card:hover:where(.dgs-css-index,.dgs-css-index *)::before {
    width: 100%;
  }
}

/* Full-bleed image behind the content, washed dark navy so the image fades gracefully into dark navy */
.dgs-fsol-card-bg:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.dgs-fsol-card-bg img:where(.dgs-css-index,.dgs-css-index *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.65s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-fsol-card-bg:where(.dgs-css-index,.dgs-css-index *)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 31, 51, 0.25) 0%,
    rgba(10, 31, 51, 0.75) 40%,
    rgba(10, 31, 51, 0.95) 75%,
    #0A1F33 100%);
}

/* Duotone wash, tinted per pillar accent — teal for Transform, blue for
   Enable, amber for Elevate — fades in over the whole photo on hover,
   underneath the navy legibility gradient above. */
.dgs-fsol-duotone:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.dgs-fsol-card[data-accent="teal"] .dgs-fsol-duotone:where(.dgs-css-index,.dgs-css-index *) {
  background: linear-gradient(135deg, #0A1F33 0%, #0d5f70 55%, #00B39F 100%);
}

.dgs-fsol-card[data-accent="blue"] .dgs-fsol-duotone:where(.dgs-css-index,.dgs-css-index *) {
  background: linear-gradient(135deg, #0A1F33 0%, #17408c 55%, #2D7FF9 100%);
}

.dgs-fsol-card[data-accent="amber"] .dgs-fsol-duotone:where(.dgs-css-index,.dgs-css-index *) {
  background: linear-gradient(135deg, #0A1F33 0%, #7a4f14 55%, #F5A623 100%);
}

@media (hover: hover) {
  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-fsol-card-bg img:where(.dgs-css-index,.dgs-css-index *) {
    filter: grayscale(0) contrast(1.02);
    transform: scale(1.04) translate(-4px, -4px);
  }

  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-fsol-duotone:where(.dgs-css-index,.dgs-css-index *) {
    opacity: 1;
  }
}

/* On touch devices, keep images colored and static */
html.dgs-is-touch .dgs-fsol-card-bg img:where(.dgs-css-index,.dgs-css-index *) {
  filter: grayscale(0) contrast(1.02);
}

/* ============================================================
   RIPPLING-STYLE 3-COLUMN MINIMAL LIST GRID (INDUSTRIES)
   ============================================================ */
.dgs-industry-list-grid:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 4rem;
}

@media (min-width: 768px) {
  .dgs-industry-list-grid:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dgs-industry-list-grid:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dgs-industry-list-row:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transition: all 0.3s var(--ease-out);
  box-shadow: none !important;
  filter: none !important;
}

.dgs-industry-list-row:hover:where(.dgs-css-index,.dgs-css-index *) {
  border-bottom-color: var(--action-teal);
  padding-left: 0.85rem;
}

.dgs-ind-row-left:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.dgs-ind-row-icon:where(.dgs-css-index,.dgs-css-index *) {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xl);
  background: rgba(0, 179, 159, 0.1);
  border: 1px solid rgba(0, 179, 159, 0.2);
  color: var(--action-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.dgs-ind-row-icon svg:where(.dgs-css-index,.dgs-css-index *) {
  width: 20px;
  height: 20px;
}

.dgs-industry-list-row:hover .dgs-ind-row-icon:where(.dgs-css-index,.dgs-css-index *) {
  background: var(--action-teal);
  color: var(--bg-deep-navy);
  border-color: var(--action-teal);
}

.dgs-ind-row-title:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  transition: color 0.3s ease;
}

.dgs-industry-list-row:hover .dgs-ind-row-title:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
}

.dgs-ind-row-arrow:where(.dgs-css-index,.dgs-css-index *) {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.dgs-industry-list-row:hover .dgs-ind-row-arrow:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
  transform: translateX(4px);
}

/* Card body — anchored to the bottom of the panel, above the image wash */
.dgs-fsol-card-inner:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-fsol-card-inner:where(.dgs-css-index,.dgs-css-index *) {
    transform: translateY(-4px);
  }
}

/* Collapsed detail (desc + solution list + CTA) — revealed on hover, like the
   Growth Hub panels. Grid-rows 0fr -> 1fr gives a smooth eased reveal. */
.dgs-fsol-reveal:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  width: 100%;
  transform: translateY(10px);
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.dgs-fsol-reveal-in:where(.dgs-css-index,.dgs-css-index *) {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 0.9rem;
}

@media (hover: hover) {
  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-fsol-reveal:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
  }
  /* Slide explore arrow to the right on card hover */
  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-promise-link .dgs-btn-icon:where(.dgs-css-index,.dgs-css-index *) {
    transform: translateX(6px);
  }
}

/* Keep detail always visible on touch-only devices */
html.dgs-is-touch .dgs-fsol-reveal:where(.dgs-css-index,.dgs-css-index *) {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}

/* Keep active/manual class triggers */
.dgs-fsol-card.active .dgs-fsol-reveal:where(.dgs-css-index,.dgs-css-index *) {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: stacked cards, detail always visible (no hover to trigger reveal) */
@media (max-width: 899px) {
  .dgs-fsol-card:where(.dgs-css-index,.dgs-css-index *) {
    min-height: 420px;
    padding-top: 14rem;
  }
  .dgs-fsol-reveal:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
  }
}

/* Eyebrow — accent per pillar */
.dgs-pillar-eyebrow:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--action-teal);
  margin-bottom: 0.1rem;
}

.dgs-fsol-card[data-accent="blue"] .dgs-pillar-eyebrow:where(.dgs-css-index,.dgs-css-index *) { color: var(--dgs-blue); }
.dgs-fsol-card[data-accent="amber"] .dgs-pillar-eyebrow:where(.dgs-css-index,.dgs-css-index *) { color: var(--dgs-amber); }

.dgs-fsol-title:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #ffffff;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  /* Prevent mid-word breaks for capability development title */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  overflow: hidden;
  max-height: 4.5rem;
  opacity: 1;
  transition: opacity 0.25s ease, max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.3s ease;
}

.dgs-fsol-desc:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 38ch;
  overflow: hidden;
  max-height: 4.5rem;
  opacity: 1;
  transition: opacity 0.25s ease, max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.3s ease;
}

/* Pillar icon — same accent-boxed treatment as the CSR methodology icons above */
.dgs-fsol-icon:where(.dgs-css-index,.dgs-css-index *) {
  --fsol-icon-accent: var(--action-teal);
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1.5px solid color-mix(in srgb, var(--fsol-icon-accent) 40%, transparent);
  background: color-mix(in srgb, var(--fsol-icon-accent) 10%, transparent);
  color: var(--fsol-icon-accent);
  transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.4s ease;
}

.dgs-fsol-icon svg:where(.dgs-css-index,.dgs-css-index *) {
  width: 24px;
  height: 24px;
}

.dgs-fsol-card[data-accent="blue"] .dgs-fsol-icon:where(.dgs-css-index,.dgs-css-index *) { --fsol-icon-accent: var(--dgs-blue); }
.dgs-fsol-card[data-accent="amber"] .dgs-fsol-icon:where(.dgs-css-index,.dgs-css-index *) { --fsol-icon-accent: var(--dgs-amber); }

@media (hover: hover) {
  html:not(.dgs-is-touch) .dgs-fsol-card:hover .dgs-fsol-icon:where(.dgs-css-index,.dgs-css-index *) {
    border-color: var(--fsol-icon-accent);
    background: color-mix(in srgb, var(--fsol-icon-accent) 18%, transparent);
    transform: translateY(-3px);
  }
}

/* Solution list — compact clickable rows, light on dark */
.dgs-pillar-list:where(.dgs-css-index,.dgs-css-index *) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.dgs-pillar-list li:where(.dgs-css-index,.dgs-css-index *) {
  display: block;
}

.dgs-pillar-list li a:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.3rem 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 550;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.25s var(--ease-out),
    gap 0.25s var(--ease-out);
}

/* Chevron marker, no container */
.dgs-pillar-list li a:where(.dgs-css-index,.dgs-css-index *)::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.25s var(--ease-out);
}

/* Chevron color per card accent */
.dgs-fsol-card[data-accent="teal"] .dgs-pillar-list li a:where(.dgs-css-index,.dgs-css-index *)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b39f' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

.dgs-fsol-card[data-accent="blue"] .dgs-pillar-list li a:where(.dgs-css-index,.dgs-css-index *)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d7ff9' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

.dgs-fsol-card[data-accent="amber"] .dgs-pillar-list li a:where(.dgs-css-index,.dgs-css-index *)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

/* Hover — chevron nudges forward */
.dgs-fsol-card[data-accent="teal"] .dgs-pillar-list li a:hover:where(.dgs-css-index,.dgs-css-index *)::before,
.dgs-fsol-card[data-accent="blue"] .dgs-pillar-list li a:hover:where(.dgs-css-index,.dgs-css-index *)::before,
.dgs-fsol-card[data-accent="amber"] .dgs-pillar-list li a:hover:where(.dgs-css-index,.dgs-css-index *)::before {
  transform: translateX(3px);
}

/* Hover — plain list rows, accent text + slight shift (no container box) */
.dgs-fsol-card[data-accent="teal"] .dgs-pillar-list li a:hover:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
  gap: 1rem;
}

.dgs-fsol-card[data-accent="blue"] .dgs-pillar-list li a:hover:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--dgs-blue);
  gap: 1rem;
}

.dgs-fsol-card[data-accent="amber"] .dgs-pillar-list li a:hover:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--dgs-amber);
  gap: 1rem;
}

/* Explore link pinned to the bottom, accent per pillar */
.dgs-fsol-card-inner .dgs-promise-link:where(.dgs-css-index,.dgs-css-index *) {
  align-self: flex-start;
}

.dgs-fsol-card[data-accent="blue"] .dgs-promise-link:where(.dgs-css-index,.dgs-css-index *) { color: var(--dgs-blue) !important; }
.dgs-fsol-card[data-accent="blue"] .dgs-promise-link:where(.dgs-css-index,.dgs-css-index *)::after { background-color: var(--dgs-blue); }
.dgs-fsol-card[data-accent="amber"] .dgs-promise-link:where(.dgs-css-index,.dgs-css-index *) { color: var(--dgs-amber) !important; }
.dgs-fsol-card[data-accent="amber"] .dgs-promise-link:where(.dgs-css-index,.dgs-css-index *)::after { background-color: var(--dgs-amber); }

/* ============================================================
   2.5 INDUSTRIES — pick-your-industry grid
   ============================================================ */
.dgs-industry-grid:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-top: var(--space-lg);
}

@media (min-width: 640px) {
  .dgs-industry-grid:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .dgs-industry-grid:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Teal accent link (amber stays reserved for conversion CTAs) */
#dgs-industries-picker .dgs-launch-link:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
}

#dgs-industries-picker .dgs-launch-link:hover:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--dgs-teal-hover, #00c9b3);
}

/* ============================================================
   2.6 OUR TRANSFORMATION FRAMEWORK (CSR Framework)
   ============================================================ */
.dgs-timeline-wrapper:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  width: 100%;
  margin-top: 4rem;
}

/* Vertical Timeline Track Line */
.dgs-timeline-track:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(10, 31, 51, 0.08); /* Faint dark track line */
  transform: translateX(-50%);
  z-index: 1;
}

/* Dynamic Scroll-Following Progress Line */
.dgs-timeline-progress-line:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Full height, revealed by scaleY(0..1) from the JS scroll handler.
     Transform is GPU-composited, so the progress sweep never triggers
     layout the way animating height did. */
  height: 100%;
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
  background: var(--action-teal);
  transition: transform 0.1s ease-out;
}

/* Row Layout */
.dgs-timeline-row:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  position: relative;
  margin-bottom: 3rem;
  z-index: 2;
}

.dgs-timeline-row--reverse:where(.dgs-css-index,.dgs-css-index *) {
  /* Default reverse order for desktop, overridden on mobile */
}

@media (min-width: 900px) {
  .dgs-timeline-row:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: 1fr 100px 1fr;
    align-items: center;
    margin-bottom: 4.5rem;
  }
  
  /* Explicitly define ordering for both columns on desktop to prevent default-order collapse */
  .dgs-timeline-row .dgs-timeline-media:where(.dgs-css-index,.dgs-css-index *) {
    order: 1;
  }
  .dgs-timeline-row .dgs-timeline-dot-container:where(.dgs-css-index,.dgs-css-index *) {
    order: 2;
  }
  .dgs-timeline-row .dgs-timeline-content:where(.dgs-css-index,.dgs-css-index *) {
    order: 3;
  }
  
  .dgs-timeline-row--reverse .dgs-timeline-content:where(.dgs-css-index,.dgs-css-index *) {
    order: 1;
    text-align: left;
  }
  .dgs-timeline-row--reverse .dgs-timeline-dot-container:where(.dgs-css-index,.dgs-css-index *) {
    order: 2;
  }
  .dgs-timeline-row--reverse .dgs-timeline-media:where(.dgs-css-index,.dgs-css-index *) {
    order: 3;
  }
}

/* Content Column (Raw Text, No Boxes) */
.dgs-timeline-content:where(.dgs-css-index,.dgs-css-index *) {
  padding: 0.5rem 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform 0.4s ease;
}

.dgs-timeline-row:hover .dgs-timeline-content:where(.dgs-css-index,.dgs-css-index *) {
  transform: translateX(5px);
}

.dgs-timeline-badge:where(.dgs-css-index,.dgs-css-index *) {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--action-teal); /* Solid teal badge */
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 179, 159, 0.2);
}

.dgs-timeline-content .dgs-step-title:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  font-weight: 700;
  color: var(--bg-deep-navy, #0A1F33);
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.dgs-timeline-content .dgs-step-desc:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-dark-muted, #334155);
  margin: 0;
}

/* Media Column */
.dgs-timeline-media:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(10, 31, 51, 0.07);
  box-shadow: 0 8px 24px rgba(10, 31, 51, 0.05);
}

.dgs-timeline-media img:where(.dgs-css-index,.dgs-css-index *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dgs-timeline-row:hover .dgs-timeline-media img:where(.dgs-css-index,.dgs-css-index *) {
  transform: scale(1.04);
}

/* Floating CSR Icon Badge Overlay on Timeline Photos */
.dgs-timeline-media .dgs-csr-icon-overlay:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  background: rgba(10, 31, 51, 0.85); /* dark backing matching navy */
  border: 1.5px solid color-mix(in srgb, var(--csr-accent, var(--dgs-teal)) 40%, transparent);
  color: var(--csr-accent, var(--dgs-teal));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 10px;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}

.dgs-timeline-media .dgs-csr-icon-overlay svg:where(.dgs-css-index,.dgs-css-index *) {
  width: 24px;
  height: 24px;
}

.dgs-timeline-row:hover .dgs-timeline-media .dgs-csr-icon-overlay:where(.dgs-css-index,.dgs-css-index *) {
  transform: scale(1.05);
  border-color: var(--csr-accent, var(--dgs-teal));
}

/* Center Dot Container */
.dgs-timeline-dot-container:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.dgs-timeline-dot:where(.dgs-css-index,.dgs-css-index *) {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid rgba(10, 31, 51, 0.15);
  transition: all 0.4s ease;
  position: relative;
}

.dgs-timeline-dot:where(.dgs-css-index,.dgs-css-index *)::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: all 0.4s ease;
}

/* Active Dot State when progress line reaches it */
.dgs-timeline-dot.active:where(.dgs-css-index,.dgs-css-index *) {
  background: var(--action-teal);
  border-color: var(--action-teal);
  box-shadow: 0 0 15px rgba(0, 179, 159, 0.8);
}

.dgs-timeline-dot.active:where(.dgs-css-index,.dgs-css-index *)::after {
  border-color: rgba(0, 179, 159, 0.4);
  transform: scale(1.15);
}

/* Mobile Responsive Adjustments */
@media (max-width: 899px) {
  .dgs-timeline-track:where(.dgs-css-index,.dgs-css-index *) {
    left: 20px;
    transform: none;
  }
  
  .dgs-timeline-dot-container:where(.dgs-css-index,.dgs-css-index *) {
    position: absolute;
    left: 10px;
    top: 1.4rem;
    width: 20px;
    height: 20px;
  }
  
  .dgs-timeline-row:where(.dgs-css-index,.dgs-css-index *) {
    padding-left: 3rem;
    margin-bottom: 3.5rem;
    gap: 1.25rem;
  }
  
  .dgs-timeline-media:where(.dgs-css-index,.dgs-css-index *) {
    order: 2;
    aspect-ratio: 16 / 9;
  }

  .dgs-timeline-media .dgs-csr-icon-overlay:where(.dgs-css-index,.dgs-css-index *) {
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    padding: 7px;
  }

  .dgs-timeline-media .dgs-csr-icon-overlay svg:where(.dgs-css-index,.dgs-css-index *) {
    width: 18px;
    height: 18px;
  }

  #dgs-framework .dgs-timeline-content:where(.dgs-css-index,.dgs-css-index *) {
    order: 1;
    padding: 0.5rem 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  #dgs-framework .dgs-timeline-content .dgs-step-title:where(.dgs-css-index,.dgs-css-index *) {
    color: var(--bg-deep-navy, #0A1F33) !important;
  }

  #dgs-framework .dgs-timeline-content .dgs-step-desc:where(.dgs-css-index,.dgs-css-index *) {
    color: var(--text-dark-muted, #334155) !important;
  }
}

/* ============================================================
   2.7 WHY DIGITAL GROWTHSCALE SECTION
   ============================================================ */
#dgs-why-us:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  background: var(--bg-deep-navy);
}

.dgs-why-grid:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 1.5rem;
}

@media (min-width: 600px) {
  .dgs-why-grid:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dgs-why-grid:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dgs-why-card:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.5rem;
  transition: transform 0.4s var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: auto;
}

.dgs-why-card:hover:where(.dgs-css-index,.dgs-css-index *) {
  transform: translateY(-6px);
}

/* Icon Container Box — matches solution-detail challenge-card icon */
.dgs-why-icon-box:where(.dgs-css-index,.dgs-css-index *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgba(0, 179, 159, 0.16) 0%, rgba(45, 127, 249, 0.1) 100%);
  border: 1px solid rgba(0, 179, 159, 0.22);
  color: var(--action-teal);
  margin-bottom: 1.15rem;
  transition: all 0.35s var(--ease-out);
}

.dgs-why-icon-box svg:where(.dgs-css-index,.dgs-css-index *) {
  width: 28px;
  height: 28px;
  transition: transform 0.35s ease;
}

.dgs-why-card:hover .dgs-why-icon-box:where(.dgs-css-index,.dgs-css-index *) {
  border-color: rgba(0, 179, 159, 0.5);
  box-shadow: 0 0 18px rgba(0, 179, 159, 0.22);
}

.dgs-why-card:hover .dgs-why-icon-box svg:where(.dgs-css-index,.dgs-css-index *) {
  transform: scale(1.08);
}

.dgs-why-card h3.dgs-why-title:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.dgs-why-desc:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-light-muted);
  margin: 0;
}

/* ============================================================
   2.8 CLIENT SUCCESS PREVIEW (Case Studies)
   ============================================================ */
#dgs-client-success:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  background: #0A1F33;
}

.dgs-success-header-row:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 5rem;
}

@media (min-width: 768px) {
  .dgs-success-header-row:where(.dgs-css-index,.dgs-css-index *) {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

/* Carousel / Viewport / Controls Deleted - Replaced with Stripe-Style Tab Swapper */
.dgs-success-tabs-container:where(.dgs-css-index,.dgs-css-index *) {
  border-bottom: 1px solid rgba(10, 31, 51, 0.08);
  margin-bottom: 3rem;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none; /* Hide scrollbar for clean top options row */
}
.dgs-success-tabs-container:where(.dgs-css-index,.dgs-css-index *)::-webkit-scrollbar {
  display: none;
}

.dgs-success-tabs:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  gap: 3rem;
  position: relative;
}

.dgs-success-tab:where(.dgs-css-index,.dgs-css-index *) {
  background: transparent;
  border: none;
  padding: 1.2rem 0;
  color: var(--text-dark-muted, #334155);
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease;
  margin-bottom: -1px;
  position: relative;
}

.dgs-success-tab:hover:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--bg-deep-navy, #0A1F33);
}

.dgs-success-tab.active:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--bg-deep-navy, #0A1F33);
}

/* Glowing blue-to-teal gradient underline bar */
.dgs-success-tab.active:where(.dgs-css-index,.dgs-css-index *)::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #0056b3 0%, #00b39f 50%, #00d2ff 100%);
  box-shadow: 0 0 10px rgba(0, 179, 159, 0.6), 0 0 4px rgba(0, 86, 179, 0.3);
  border-radius: var(--radius-sm);
}

/* Panels */
.dgs-success-panels:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  min-height: 420px;
}

.dgs-success-panel:where(.dgs-css-index,.dgs-css-index *) {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dgs-success-panel.active:where(.dgs-css-index,.dgs-css-index *) {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.dgs-success-panel-grid:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .dgs-success-panel-grid:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center; /* Vertically center left and right columns */
  }
}

.dgs-success-panel-media-wrapper:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10; /* Mobile fallback aspect ratio */
  min-height: 320px;
}

@media (min-width: 900px) {
  .dgs-success-panel-media-wrapper:where(.dgs-css-index,.dgs-css-index *) {
    aspect-ratio: auto; /* Remove aspect limit on desktop */
    height: 100%;       /* Match grid cell height exactly */
    min-height: 100%;
  }
}

.dgs-success-panel-media:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(10, 31, 51, 0.06);
  box-shadow: 0 16px 48px rgba(10, 31, 51, 0.05);
}

@media (min-width: 900px) {
  .dgs-success-panel-media:where(.dgs-css-index,.dgs-css-index *) {
    position: absolute;
    inset: 0; /* Stretches absolute elements to fill the wrapper height completely */
  }
}

/* Mobile fix: the media-wrapper's `aspect-ratio: 16/10` + `min-height: 320px`
   gave its grid track a ~512px implied minimum width (320 * 16/10), which blew
   the whole case-study card wider than the phone viewport and got cropped by
   the section's overflow:hidden. Let the grid + its items shrink to the column
   and drop the min-height so the image sizes purely from the aspect ratio. */
@media (max-width: 899px) {
  .dgs-success-panel-grid:where(.dgs-css-index,.dgs-css-index *),
  .dgs-success-panel-grid > *:where(.dgs-css-index,.dgs-css-index *) {
    min-width: 0;
    max-width: 100%;
  }

  .dgs-success-panel-media-wrapper:where(.dgs-css-index,.dgs-css-index *) {
    aspect-ratio: auto !important;
    height: 480px !important;
    min-height: 480px !important;
  }
}

.dgs-success-panel-media img:where(.dgs-css-index,.dgs-css-index *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.dgs-success-panel:hover .dgs-success-panel-media img:where(.dgs-css-index,.dgs-css-index *) {
  transform: scale(1.02);
}

.dgs-success-panel-content:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: flex-start;
  justify-content: center; /* Center items vertically */
  padding: 0.5rem 0;
}

.dgs-success-meta-badge:where(.dgs-css-index,.dgs-css-index *) {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--action-teal);
  background: rgba(0, 179, 159, 0.05);
  border: 1px solid rgba(0, 179, 159, 0.22);
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-xl); /* Clean modern pill shape */
  margin-bottom: 0.1rem;
}

/* Challenge -> Solution as a connected timeline */
.dgs-success-narrative:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  padding-left: 1.9rem;
}

.dgs-success-narrative:where(.dgs-css-index,.dgs-css-index *)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, rgba(0, 179, 159, 0.45), rgba(45, 127, 249, 0.25));
}

.dgs-success-story-field:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.dgs-success-narrative .dgs-success-story-field:where(.dgs-css-index,.dgs-css-index *)::before {
  content: '';
  position: absolute;
  left: -1.9rem;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-white, #ffffff);
  border: 2px solid var(--action-teal);
  box-shadow: 0 0 0 4px rgba(0, 179, 159, 0.08);
}

.dgs-story-label:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--action-teal);
}

.dgs-story-text:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.55;
  color: #33475b;
  margin: 0;
  font-weight: 500;
}

/* Outcome as a featured result card */
.dgs-success-outcome:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0, 179, 159, 0.07), rgba(45, 127, 249, 0.05));
  border: 1px solid rgba(0, 179, 159, 0.18);
}

.dgs-story-highlight:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bg-deep-navy, #0A1F33);
  margin: 0;
  line-height: 1.3;
}

.dgs-story-sub-highlight:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a5b6b;
  margin: 0.15rem 0 0 0;
}

/* ============================================================
   2.9 GROWTH HUB PREVIEW SECTION
   ============================================================ */
#dgs-growth-hub:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  background: var(--bg-deep-navy);
}

.dgs-hub-accordion:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 900px) {
  .dgs-hub-accordion:where(.dgs-css-index,.dgs-css-index *) {
    flex-direction: row;
    height: 520px;
    gap: 1.5rem;
  }
}

.dgs-hub-panel:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  transform: translateZ(0);
  will-change: flex;
  transition: flex 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  z-index: 1;
}

@media (min-width: 900px) {
  .dgs-hub-panel:where(.dgs-css-index,.dgs-css-index *) {
    flex: 1;
    min-height: auto;
  }
}

/* Panel Background Image Overlay - GPU-optimized transform/opacity transitions (no costly blend-mode or filter re-rasterization) */
.dgs-hub-panel-bg:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  transform: scale(1) translateZ(0);
  will-change: opacity, transform;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.dgs-hub-panel-bg:where(.dgs-css-index,.dgs-css-index *)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 31, 51, 0.4) 0%, rgba(10, 31, 51, 0.95) 100%);
  opacity: 0.85;
  transition: opacity 0.5s ease;
  z-index: 2;
}

/* Active and Hover States (Desktop Grid Accordion) */
@media (min-width: 900px) {
  /* Default inactive layout when not hovering (all panels are collapsed equally) */
  .dgs-hub-accordion:not(:hover) .dgs-hub-panel:where(.dgs-css-index,.dgs-css-index *) {
    flex: 1;
  }
  
  /* Hover interactions using :has() */
  .dgs-hub-accordion:has(.dgs-hub-panel:hover) .dgs-hub-panel:hover:where(.dgs-css-index,.dgs-css-index *) {
    flex: 2.3;
    border-color: var(--action-teal);
    box-shadow: 0 20px 48px rgba(0, 179, 159, 0.12);
  }
  .dgs-hub-accordion:has(.dgs-hub-panel:hover) .dgs-hub-panel:not(:hover):where(.dgs-css-index,.dgs-css-index *) {
    flex: 0.65;
  }
  /* Inactive cards fade out and collapse title text so all numbers (01, 02, 03, 04) sit on the exact same baseline */
  .dgs-hub-accordion:has(.dgs-hub-panel:hover) .dgs-hub-panel:not(:hover) .dgs-hub-title:where(.dgs-css-index,.dgs-css-index *) {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    pointer-events: none;
  }
  .dgs-hub-accordion:has(.dgs-hub-panel:hover) .dgs-hub-panel:hover .dgs-hub-title:where(.dgs-css-index,.dgs-css-index *) {
    opacity: 1;
    max-height: 2.5rem;
    margin-top: 0.6rem;
  }
}

/* Mobile tap active trigger */
.dgs-hub-panel.active:where(.dgs-css-index,.dgs-css-index *),
.dgs-hub-panel:hover:where(.dgs-css-index,.dgs-css-index *) {
  background: rgba(255, 255, 255, 0.04);
}

.dgs-hub-panel.active .dgs-hub-panel-bg:where(.dgs-css-index,.dgs-css-index *),
.dgs-hub-panel:hover .dgs-hub-panel-bg:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 0.9;
  transform: scale(1.04) translateZ(0);
}

.dgs-hub-panel.active .dgs-hub-panel-bg:where(.dgs-css-index,.dgs-css-index *)::after,
.dgs-hub-panel:hover .dgs-hub-panel-bg:where(.dgs-css-index,.dgs-css-index *)::after {
  opacity: 0.35;
}

/* Panel Content Layout */
.dgs-hub-panel-content:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  z-index: 2; /* Sits above the background layer */
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  width: 100%;
}

.dgs-hub-num:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
  letter-spacing: -0.04em;
  transition: color 0.4s ease;
}

.dgs-hub-panel.active .dgs-hub-num:where(.dgs-css-index,.dgs-css-index *),
.dgs-hub-panel:hover .dgs-hub-num:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal);
}

.dgs-hub-title:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0.6rem 0 0 0;
  letter-spacing: 0.02em;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  overflow: hidden;
  max-height: 2.5rem;
  opacity: 1;
  transition: opacity 0.25s ease, max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.3s ease;
}

/* Smooth reveal: animate grid-template-rows 0fr -> 1fr (buttery height, no
   max-height jank). The inner wrapper clips content while collapsed. */
@media (min-width: 900px) {
  .dgs-hub-reveal:where(.dgs-css-index,.dgs-css-index *) {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    width: 100%;
    transform: translateY(10px);
    transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
  }
}

@media (max-width: 899px) {
  .dgs-hub-reveal:where(.dgs-css-index,.dgs-css-index *) {
    display: block;
    opacity: 1;
    width: 100%;
    transform: none;
  }
}

.dgs-hub-reveal-in:where(.dgs-css-index,.dgs-css-index *) {
  overflow: hidden;
  min-height: 0;
}

.dgs-hub-desc:where(.dgs-css-index,.dgs-css-index *) {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-light-muted);
  margin: 0.4rem 0 0 0;
  max-width: 38ch;
}

/* Expand content when active/hovered — smooth grid-rows reveal */
.dgs-hub-panel.active .dgs-hub-reveal:where(.dgs-css-index,.dgs-css-index *),
.dgs-hub-panel:hover .dgs-hub-reveal:where(.dgs-css-index,.dgs-css-index *) {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   2.10 CINEMATIC FINAL CTA SECTION
   ============================================================ */
.cinematic-cta-wrapper:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  overflow: hidden;
  --pill-bg-1: rgba(255, 255, 255, 0.03);
  --pill-bg-2: rgba(255, 255, 255, 0.01);
  --pill-shadow: rgba(0, 0, 0, 0.4);
  --pill-highlight: rgba(255, 255, 255, 0.06);
  --pill-border: rgba(255, 255, 255, 0.08);
  
  --pill-bg-1-hover: rgba(255, 255, 255, 0.08);
  --pill-bg-2-hover: rgba(255, 255, 255, 0.03);
  --pill-border-hover: rgba(255, 255, 255, 0.2);
  --pill-shadow-hover: rgba(0, 0, 0, 0.6);
  --pill-highlight-hover: rgba(255, 255, 255, 0.15);
}

/* Kill the off-brand purple .dgs-section--darker::after glow on the cinematic CTA
   (the aurora div provides the on-brand teal/blue glow instead). */
.cinematic-cta-wrapper:where(.dgs-css-index,.dgs-css-index *)::after {
  display: none !important;
}

/* Faded photo background (mirrors the solution-page final CTA) */
.final-cta-photo-bg:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, black, transparent 72%);
}

.final-cta-bg-grid:where(.dgs-css-index,.dgs-css-index *) {
  background-size: 60px 60px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

@keyframes final-cta-breathe {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.85; }
}

.final-cta-aurora:where(.dgs-css-index,.dgs-css-index *) {
  background: radial-gradient(
    circle at 50% 50%, 
    rgba(0, 179, 159, 0.12) 0%, 
    rgba(45, 127, 249, 0.12) 40%, 
    transparent 70%
  );
  animation: final-cta-breathe 8s ease-in-out infinite alternate;
}

.final-cta-text-glow:where(.dgs-css-index,.dgs-css-index *) {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0px 0px 30px rgba(255, 255, 255, 0.12));
}

@keyframes final-cta-scroll-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.final-cta-scroll-marquee:where(.dgs-css-index,.dgs-css-index *) {
  animation: final-cta-scroll-marquee 30s linear infinite;
  display: flex;
  width: max-content;
}

.final-cta-glass-pill:where(.dgs-css-index,.dgs-css-index *) {
  background: linear-gradient(145deg, var(--pill-bg-1) 0%, var(--pill-bg-2) 100%) !important;
  box-shadow: 
      0 10px 30px -10px var(--pill-shadow), 
      inset 0 1px 1px var(--pill-highlight), 
      inset 0 -1px 2px rgba(0, 0, 0, 0.8) !important;
  border: 1px solid var(--pill-border) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.final-cta-glass-pill:hover:where(.dgs-css-index,.dgs-css-index *) {
  background: linear-gradient(145deg, var(--pill-bg-1-hover) 0%, var(--pill-bg-2-hover) 100%) !important;
  border-color: var(--pill-border-hover) !important;
  box-shadow: 
      0 20px 40px -10px var(--pill-shadow-hover), 
      inset 0 1px 1px var(--pill-highlight-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* ============================================================
   MOBILE RESPONSIVENESS OVERRIDES (Homepage)
   ============================================================ */
@media (max-width: 1023px) {
  .dgs-hero--premium-split:where(.dgs-css-index,.dgs-css-index *) {
    padding: 7rem 0 3rem !important;
  }

  .dgs-hero-content-container:where(.dgs-css-index,.dgs-css-index *) {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Shrink ALL title pieces together — the white spans, the teal word, and
     the dot — so "Confidence." matches the rest of the headline on mobile
     instead of inheriting the larger base h1 size and looking oversized. */
  .dgs-hero--premium-split h1:where(.dgs-css-index,.dgs-css-index *),
  .dgs-hero-title-main:where(.dgs-css-index,.dgs-css-index *),
  .dgs-hero-teal-text:where(.dgs-css-index,.dgs-css-index *),
  .dgs-hero-dot:where(.dgs-css-index,.dgs-css-index *) {
    font-size: clamp(1.85rem, 5.5vw, 2.75rem) !important;
  }

  .dgs-hero-linear-sub:where(.dgs-css-index,.dgs-css-index *) {
    font-size: 1rem !important;
  }
}

@media (max-width: 768px) {
  .dgs-section:where(.dgs-css-index,.dgs-css-index *) {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .dgs-hero-bottom-row-centered:where(.dgs-css-index,.dgs-css-index *) {
    padding: 1.5rem 1rem !important;
  }

  .dgs-hero-stats-panel:where(.dgs-css-index,.dgs-css-index *) {
    padding: 1.75rem 0 0.5rem !important;
    gap: 1.75rem !important;
  }

  .dgs-challenges-head:where(.dgs-css-index,.dgs-css-index *) {
    margin-bottom: 2rem !important;
  }

  /* Growth Hub heading: the inline `white-space:nowrap` on the first line runs
     wider than the phone viewport and the section's overflow:hidden crops it.
     Let it wrap (!important beats the inline style) and ease the size down. */
  #dgs-growth-hub .dgs-success-header-row h2:where(.dgs-css-index,.dgs-css-index *) {
    font-size: clamp(1.5rem, 6.4vw, 2rem) !important;
  }

  #dgs-growth-hub .dgs-success-header-row h2 span:where(.dgs-css-index,.dgs-css-index *) {
    white-space: normal !important;
  }

  /* Marquee removed on mobile per request (was reformatted into stacked
     scrolling rows before; now just hidden outright). The descendant
     rules below (.dgs-cloud-column, .dgs-marquee-track, etc.) are dead
     under this display:none but left in place -- harmless, and restores
     the desktop-matching stacked layout for free if this is ever
     un-hidden at a narrower breakpoint later. */
  .dgs-challenge-cloud:where(.dgs-css-index,.dgs-css-index *) {
    display: none !important;
  }

  .dgs-cloud-column:where(.dgs-css-index,.dgs-css-index *) {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
  }

  .dgs-cloud-group:where(.dgs-css-index,.dgs-css-index *) {
    width: 100% !important;
    overflow: visible !important;
  }

  .dgs-cloud-group:where(.dgs-css-index,.dgs-css-index *),
  .dgs-cloud-column--left .dgs-cloud-group:where(.dgs-css-index,.dgs-css-index *),
  .dgs-cloud-column--right .dgs-cloud-group:where(.dgs-css-index,.dgs-css-index *) {
    width: 100% !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .dgs-marquee-track:where(.dgs-css-index,.dgs-css-index *) {
    gap: 1.25rem !important;
  }

  /* Keep mobile clean and compact: 2 rows per group (4 rows total) */
  .dgs-cloud-column .dgs-cloud-group:nth-child(n+3):where(.dgs-css-index,.dgs-css-index *) {
    display: none !important;
  }

  .dgs-cloud-tag:where(.dgs-css-index,.dgs-css-index *) {
    font-size: 0.88rem !important;
    padding: 0.38rem 0.85rem !important;
    white-space: nowrap !important;
  }

  /* The chips fly outward on scroll (JS disperse). Clip the section
     horizontally (clip, not hidden, so it can't break sticky/overflow-y) so
     the outbound transforms vanish off the screen edge instead of widening
     the page and shifting the mobile navbar. */
  .dgs-challenges-section:where(.dgs-css-index,.dgs-css-index *) {
    overflow-x: clip;
  }

  .dgs-accord-header:where(.dgs-css-index,.dgs-css-index *) {
    padding: 1rem 1rem !important;
    gap: 0.75rem !important;
  }

  .dgs-accord-title:where(.dgs-css-index,.dgs-css-index *) {
    font-size: 1.1rem !important;
  }

  .dgs-accord-grid:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #dgs-final-cta:where(.dgs-css-index,.dgs-css-index *) {
    min-height: auto !important;
    padding: 4rem 1.25rem !important;
  }

  #dgs-final-cta h2:where(.dgs-css-index,.dgs-css-index *) {
    font-size: 1.45rem !important;
  }
}

@media (max-width: 480px) {
  .dgs-hero-actions:where(.dgs-css-index,.dgs-css-index *) {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .dgs-hero-actions .dgs-btn-saas:where(.dgs-css-index,.dgs-css-index *) {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .dgs-hero-stats-panel:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ============================================================
   CASE STUDIES PRODUCT UI DIAGRAMS (Framework-Free SaaS Visual System - White + Grid Mist)
   ============================================================ */

.dgs-cs-diagram-container:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 440px;
  background-color: #F0F4F8;
  background-image: 
    radial-gradient(circle at 25% 20%, rgba(0, 179, 159, 0.06) 0%, transparent 60%),
    radial-gradient(circle at 75% 30%, rgba(99, 102, 241, 0.05) 0%, transparent 65%),
    radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 60%);
  background-size: 100% 100%;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 16px 40px rgba(10, 31, 51, 0.05);
  overflow: hidden;
  padding: 1.25rem;
  box-sizing: border-box;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: #0f172a;
  display: flex;
  flex-direction: column;
}

.dgs-cs-canvas:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dgs-cs-svg-overlay:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* --- CASE STUDY 1: PROPOSAL WORKFLOW --- */
.dgs-cs-proposal-canvas:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.dgs-cs-workflow-stack:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  z-index: 2;
  width: 100%;
}

.dgs-cs-wf-card:where(.dgs-css-index,.dgs-css-index *) {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(10, 31, 51, 0.03);
  border-radius: 14px;
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.dgs-cs-diagram-container.is-animated .dgs-cs-wf-card[data-step="1"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-wf-card[data-step="2"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-wf-card[data-step="3"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-wf-card[data-step="4"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-wf-card[data-step="5"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 1.5s; }

.dgs-cs-wf-icon-box:where(.dgs-css-index,.dgs-css-index *) {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #475569;
}
.dgs-cs-wf-icon-box svg:where(.dgs-css-index,.dgs-css-index *) { width: 15px; height: 15px; }

.dgs-cs-wf-info:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}
.dgs-cs-wf-title:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dgs-cs-wf-sub:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.2;
}

.dgs-cs-wf-pill:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 12px;
  background: #f1f5f9;
  color: #64748b;
  flex-shrink: 0;
}
.dgs-cs-pill-check:where(.dgs-css-index,.dgs-css-index *) { background: #dcfce7; color: #166534; }

/* Bottleneck Card Before -> After Morph */
.dgs-cs-bottleneck-card:where(.dgs-css-index,.dgs-css-index *) {
  position: relative;
  overflow: hidden;
  border-color: #fca5a5;
  background: #fef2f2;
}
.dgs-cs-wf-state-before:where(.dgs-css-index,.dgs-css-index *), .dgs-cs-wf-state-after:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
}
.dgs-cs-icon-warn:where(.dgs-css-index,.dgs-css-index *) { background: #fee2e2; color: #dc2626; }
.dgs-cs-warn-text:where(.dgs-css-index,.dgs-css-index *) { color: #dc2626; font-weight: 600; }
.dgs-cs-pill-alert:where(.dgs-css-index,.dgs-css-index *) { background: #fee2e2; color: #b91c1c; font-weight: 700; }

.dgs-cs-wf-state-before:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 1;
  transition: opacity 0.4s ease 1.1s;
}
.dgs-cs-wf-state-after:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  padding: 0.55rem 0.85rem;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 1.2s;
  background: #eef2ff;
}
.dgs-cs-icon-ai:where(.dgs-css-index,.dgs-css-index *) { background: #e0e7ff; color: #4338ca; }
.dgs-cs-pill-ai:where(.dgs-css-index,.dgs-css-index *) { background: #e0e7ff; color: #3730a3; font-weight: 700; }

.dgs-cs-diagram-container.is-animated .dgs-cs-bottleneck-card:where(.dgs-css-index,.dgs-css-index *) {
  border-color: #a5b4fc;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
  transition: border-color 0.5s ease 1.2s, background 0.5s ease 1.2s, box-shadow 0.5s ease 1.2s;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-wf-state-before:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 0;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-wf-state-after:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 1;
  pointer-events: auto;
}

/* Final Success Card */
.dgs-cs-final-card:where(.dgs-css-index,.dgs-css-index *) {
  border-color: rgba(15, 23, 42, 0.08);
}
.dgs-cs-diagram-container.is-animated .dgs-cs-final-card:where(.dgs-css-index,.dgs-css-index *) {
  border-color: #34d399;
  background: #ecfdf5;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
  transition-delay: 1.5s;
}
.dgs-cs-icon-success:where(.dgs-css-index,.dgs-css-index *) { background: #d1fae5; color: #059669; }
.dgs-cs-pill-success:where(.dgs-css-index,.dgs-css-index *) { background: #d1fae5; color: #047857; font-weight: 700; }

/* SVG Connector Path Animation */
.dgs-cs-path-main:where(.dgs-css-index,.dgs-css-index *) {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.4s ease-in-out 0.2s;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-path-main:where(.dgs-css-index,.dgs-css-index *) {
  stroke-dashoffset: 0;
}

/* Horizontal Metrics Row at Canvas Bottom */
.dgs-cs-proposal-horizontal-metrics:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  width: 100%;
  z-index: 3;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 1.7s, transform 0.5s ease 1.7s;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-proposal-horizontal-metrics:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 1;
  transform: translateY(0);
}

.dgs-cs-horiz-metric-pill:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 12px;
  box-sizing: border-box;
}

.dgs-cs-metric-time:where(.dgs-css-index,.dgs-css-index *) {
  background: #0f172a;
  border: 1px solid rgba(0, 210, 180, 0.4);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}
.dgs-cs-time-tag-old:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.75rem;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 500;
}
.dgs-cs-arrow-right:where(.dgs-css-index,.dgs-css-index *) {
  width: 14px;
  height: 14px;
  color: #00d2b4;
  flex-shrink: 0;
}
.dgs-cs-time-tag-new:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.88rem;
  font-weight: 800;
  color: #00d2b4;
}

.dgs-cs-metric-removal:where(.dgs-css-index,.dgs-css-index *) {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.dgs-cs-removal-badge:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.92rem;
  font-weight: 800;
  color: #4f46e5;
  background: #eef2ff;
  padding: 0.15rem 0.45rem;
  border-radius: 8px;
}
.dgs-cs-removal-text:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.72rem;
  color: #475569;
  font-weight: 600;
}

@media (max-width: 600px) {
  .dgs-cs-proposal-horizontal-metrics:where(.dgs-css-index,.dgs-css-index *) {
    flex-direction: column;
    align-items: stretch;
  }
}


/* --- CASE STUDY 2: RECRUITMENT AGENCY --- */
.dgs-cs-recruitment-canvas:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-top: 0.25rem;
}

.dgs-cs-app-icons-grid:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  width: 100%;
  z-index: 2;
}

.dgs-cs-app-icon:where(.dgs-css-index,.dgs-css-index *) {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  border-radius: 10px;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease;
}
.dgs-cs-app-icon svg:where(.dgs-css-index,.dgs-css-index *) { width: 14px; height: 14px; color: #2563eb; }
.dgs-cs-app-icon span:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.6rem; color: #334155; font-weight: 500; }

.dgs-cs-diagram-container.is-animated .dgs-cs-app-icon[data-app="1"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-app-icon[data-app="2"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-app-icon[data-app="3"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-app-icon[data-app="4"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-app-icon[data-app="5"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-app-icon[data-app="6"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-app-icon[data-app="7"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-app-icon[data-app="8"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }

.dgs-cs-line-ray:where(.dgs-css-index,.dgs-css-index *) {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  transition: stroke-dashoffset 0.8s ease 0.5s;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-line-ray:where(.dgs-css-index,.dgs-css-index *) { stroke-dashoffset: 0; }

/* Center Candidate Card */
.dgs-cs-candidate-card:where(.dgs-css-index,.dgs-css-index *) {
  background: #ffffff;
  border: 1px solid rgba(0, 210, 180, 0.4);
  box-shadow: 0 12px 32px rgba(0, 210, 180, 0.12);
  border-radius: 16px;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 3;
  width: 80%;
  margin: 0.5rem 0;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s ease 0.8s, transform 0.5s ease 0.8s, border-color 0.5s ease 0.8s, box-shadow 0.5s ease 0.8s;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-candidate-card:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 1;
  transform: scale(1);
  border-color: #00d2b4;
  box-shadow: 0 8px 24px rgba(0, 210, 180, 0.2);
}
.dgs-cs-cand-avatar:where(.dgs-css-index,.dgs-css-index *) {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e6fffa;
  border: 1px solid #00d2b4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d9488;
  flex-shrink: 0;
}
.dgs-cs-cand-avatar svg:where(.dgs-css-index,.dgs-css-index *) { width: 18px; height: 18px; }
.dgs-cs-cand-info:where(.dgs-css-index,.dgs-css-index *) { display: flex; flex-direction: column; flex-grow: 1; }
.dgs-cs-cand-title:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.85rem; font-weight: 700; color: #0f172a; }
.dgs-cs-cand-match:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.68rem; color: #0d9488; font-weight: 600; }
.dgs-cs-cand-badge:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  flex-shrink: 0;
}

/* Pipeline Steps */
.dgs-cs-pipeline-row:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
  margin-top: 0.2rem;
}
.dgs-cs-pipe-step:where(.dgs-css-index,.dgs-css-index *) {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  border-radius: 12px;
  padding: 0.3rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #475569;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.dgs-cs-pipe-dot:where(.dgs-css-index,.dgs-css-index *) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
}
.dgs-cs-pipe-arrow:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.75rem; color: #94a3b8; }

.dgs-cs-diagram-container.is-animated .dgs-cs-pipe-step[data-pipe="1"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 1.1s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-pipe-step[data-pipe="2"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); transition-delay: 1.3s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-pipe-step[data-pipe="3"]:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.5s;
  border-color: #00d2b4;
  color: #0f172a;
  background: #f0fdf4;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-pipe-step[data-pipe="3"] .dgs-cs-pipe-dot:where(.dgs-css-index,.dgs-css-index *) {
  background: #00d2b4;
  box-shadow: 0 0 6px #00d2b4;
}

/* Metric Chips */
.dgs-cs-rec-metrics:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
  z-index: 2;
}
.dgs-cs-chip:where(.dgs-css-index,.dgs-css-index *) {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  border-radius: 12px;
  padding: 0.4rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 1.6s, transform 0.5s ease 1.6s;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-chip:where(.dgs-css-index,.dgs-css-index *) {
  opacity: 1;
  transform: translateY(0);
}
.dgs-cs-chip-val:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.85rem; font-weight: 800; color: #2563eb; }
.dgs-cs-chip-lbl:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.65rem; color: #475569; }
.dgs-cs-chip-teal:where(.dgs-css-index,.dgs-css-index *) { border-color: #99f6e4; background: #f0fdf4; }
.dgs-cs-chip-teal .dgs-cs-chip-val:where(.dgs-css-index,.dgs-css-index *) { color: #0d9488; }


/* --- CASE STUDY 3: HEALTHCARE CLINIC --- */
.dgs-cs-healthcare-canvas:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(10, 31, 51, 0.05);
  padding: 1rem;
  color: #0f172a;
}

.dgs-cs-hc-header:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #f1f5f9;
}
.dgs-cs-hc-dots:where(.dgs-css-index,.dgs-css-index *) { display: flex; gap: 4px; }
.dgs-cs-hc-dots span:where(.dgs-css-index,.dgs-css-index *) { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; }
.dgs-cs-hc-dots span:nth-child(1):where(.dgs-css-index,.dgs-css-index *) { background: #fca5a5; }
.dgs-cs-hc-dots span:nth-child(2):where(.dgs-css-index,.dgs-css-index *) { background: #fde047; }
.dgs-cs-hc-dots span:nth-child(3):where(.dgs-css-index,.dgs-css-index *) { background: #86efac; }
.dgs-cs-hc-title:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.75rem; font-weight: 600; color: #64748b; }

.dgs-cs-hc-body:where(.dgs-css-index,.dgs-css-index *) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.6rem 0;
}

.dgs-cs-patients-list:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.dgs-cs-patient-card:where(.dgs-css-index,.dgs-css-index *) {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.45rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-patient-card[data-patient="1"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-patient-card[data-patient="2"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateX(0); transition-delay: 0.4s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-patient-card[data-patient="3"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateX(0); transition-delay: 0.6s; }

.dgs-cs-pt-head:where(.dgs-css-index,.dgs-css-index *) { display: flex; flex-direction: column; }
.dgs-cs-pt-name:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.75rem; font-weight: 700; color: #0f172a; }
.dgs-cs-pt-type:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.62rem; color: #64748b; }

.dgs-cs-pt-pill:where(.dgs-css-index,.dgs-css-index *) {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  flex-shrink: 0;
}
.dgs-cs-pill-confirmed:where(.dgs-css-index,.dgs-css-index *) { background: #dcfce7; color: #166534; }
.dgs-cs-pill-paid:where(.dgs-css-index,.dgs-css-index *) { background: #e0f2fe; color: #0369a1; }
.dgs-cs-pill-sent:where(.dgs-css-index,.dgs-css-index *) { background: #f3e8ff; color: #6b21a8; }

/* AI Assistant Bubble */
.dgs-cs-ai-bubble-wrap:where(.dgs-css-index,.dgs-css-index *) { display: flex; align-items: center; }
.dgs-cs-ai-assistant-card:where(.dgs-css-index,.dgs-css-index *) {
  width: 100%;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 14px;
  padding: 0.65rem;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.7s, transform 0.5s ease 0.7s;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-ai-assistant-card:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); }

.dgs-cs-ai-head:where(.dgs-css-index,.dgs-css-index *) { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.dgs-cs-ai-icon:where(.dgs-css-index,.dgs-css-index *) {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(0, 210, 180, 0.2);
  color: #00d2b4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dgs-cs-ai-icon svg:where(.dgs-css-index,.dgs-css-index *) { width: 12px; height: 12px; }
.dgs-cs-ai-name:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.75rem; font-weight: 700; flex-grow: 1; }
.dgs-cs-ai-live:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.58rem; background: rgba(16, 185, 129, 0.2); color: #34d399; padding: 0.1rem 0.35rem; border-radius: 8px; }

.dgs-cs-ai-feed:where(.dgs-css-index,.dgs-css-index *) { display: flex; flex-direction: column; gap: 0.3rem; }
.dgs-cs-feed-item:where(.dgs-css-index,.dgs-css-index *) {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  color: #cbd5e1;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.dgs-cs-feed-item svg:where(.dgs-css-index,.dgs-css-index *) { width: 10px; height: 10px; color: #00d2b4; flex-shrink: 0; }

.dgs-cs-diagram-container.is-animated .dgs-cs-feed-item[data-feed="1"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateX(0); transition-delay: 0.9s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-feed-item[data-feed="2"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateX(0); transition-delay: 1.1s; }
.dgs-cs-diagram-container.is-animated .dgs-cs-feed-item[data-feed="3"]:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateX(0); transition-delay: 1.3s; }

/* Healthcare Analytics Card Below */
.dgs-cs-analytics-card:where(.dgs-css-index,.dgs-css-index *) {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 1.4s, transform 0.5s ease 1.4s;
}
.dgs-cs-diagram-container.is-animated .dgs-cs-analytics-card:where(.dgs-css-index,.dgs-css-index *) { opacity: 1; transform: translateY(0); }

.dgs-cs-stat-block:where(.dgs-css-index,.dgs-css-index *) { display: flex; flex-direction: column; align-items: center; }
.dgs-cs-stat-lbl:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.62rem; color: #64748b; font-weight: 500; }
.dgs-cs-stat-val-wrap:where(.dgs-css-index,.dgs-css-index *) { display: flex; align-items: center; gap: 0.25rem; }
.dgs-cs-stat-val:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.95rem; font-weight: 800; color: #0f172a; }
.dgs-cs-no-show-val:where(.dgs-css-index,.dgs-css-index *) { color: #16a34a; }
.dgs-cs-stat-dir:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.85rem; font-weight: 800; color: #16a34a; }
.dgs-cs-stat-cycle:where(.dgs-css-index,.dgs-css-index *) { font-size: 0.82rem; font-weight: 700; color: #2563eb; }
.dgs-cs-stat-divider:where(.dgs-css-index,.dgs-css-index *) { width: 1px; height: 24px; background: #e2e8f0; }

/* Responsive adjustments for diagram containers on narrow mobile devices */
@media (max-width: 600px) {
  .dgs-success-panel-media-wrapper:where(.dgs-css-index,.dgs-css-index *) {
    height: 480px !important;
    min-height: 480px !important;
  }
  .dgs-cs-diagram-container:where(.dgs-css-index,.dgs-css-index *) {
    min-height: 480px !important;
    padding: 0.85rem;
  }
  .dgs-cs-workflow-stack:where(.dgs-css-index,.dgs-css-index *) {
    width: 100%;
  }
  .dgs-cs-candidate-card:where(.dgs-css-index,.dgs-css-index *) {
    width: 100%;
  }
  .dgs-cs-hc-body:where(.dgs-css-index,.dgs-css-index *) {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ENTERPRISE SAAS OVERLAY UI COMPOSITIONS (WHITE EDGE OVERLAYS)
   ============================================================ */
.dgs-timeline-overlay-container:where(.dgs-css-index,.dgs-css-index *) {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1.5 / 1 !important;
  min-height: 440px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(10, 31, 51, 0.1) !important;
  box-shadow: 0 20px 45px rgba(10, 31, 51, 0.09), 0 2px 6px rgba(10, 31, 51, 0.03) !important;
  background: #f8fafc !important;
  user-select: none;
}

.dgs-timeline-photo:where(.dgs-css-index,.dgs-css-index *) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.dgs-timeline-row:hover .dgs-timeline-photo:where(.dgs-css-index,.dgs-css-index *) {
  transform: scale(1.025);
}

.dgs-overlay-layer:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Base Panel & Badge Styles (Crisp White SaaS Overlay) */

/* IntersectionObserver Triggered Animation */

/* Stagger entrance delays (120ms stagger) */

/* Hover Effects (Edge badges move upward 2–4px, shadow increases) */

/* Panel Header Component */

/* Card 1: Operations Audit Checklist & Workflow */

/* Card 2: Roadmap Timeline & KPI */

/* Card 3: Connected Automation Nodes */

/* Card 4: KPI Widgets Bar & Sparkline */

/* Responsive Overlays for Mobile */
@media (max-width: 640px) {
  .dgs-timeline-overlay-container:where(.dgs-css-index,.dgs-css-index *) {
    aspect-ratio: 1.2 / 1 !important;
    min-height: 340px !important;
  }
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-fc1acb5626:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal) !important;
  -webkit-text-fill-color: var(--action-teal) !important;
}

.dgs-il-78c360413a:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal) !important;
}

.dgs-il-cbc788d266:where(.dgs-css-index,.dgs-css-index *) {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-2xl) !important;
  background-color: #0A1F33 !important;
}

.dgs-il-ca5dea0f97:where(.dgs-css-index,.dgs-css-index *) {
  max-width: 900px !important;
}

.dgs-il-648149cea2:where(.dgs-css-index,.dgs-css-index *) {
  margin-bottom: 0 !important;
}

.dgs-il-f85982a648:where(.dgs-css-index,.dgs-css-index *) {
  padding-bottom: var(--space-2xl) !important;
}

.dgs-il-0d07d6253e:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--dgs-blue) !important;
}

.dgs-il-2dc6a749f4:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--dgs-amber) !important;
}

.dgs-il-7d262de3e5:where(.dgs-css-index,.dgs-css-index *) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 3rem !important;
  width: 100% !important;
}

.dgs-il-2e2094e9d6:where(.dgs-css-index,.dgs-css-index *) {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
  background-color: #0A1F33 !important;
}

.dgs-il-d8a4ccedef:where(.dgs-css-index,.dgs-css-index *) {
  max-width: 900px !important;
  margin: 0 auto 4rem auto !important;
  text-align: center !important;
}

.dgs-il-886cd84182:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal) !important;
  display: inline-block !important;
  margin-bottom: 0.75rem !important;
}

.dgs-il-b8b343d1c3:where(.dgs-css-index,.dgs-css-index *) {
  font-size: clamp(1.6rem, 5vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.25rem !important;
}

.dgs-il-c4b0586076:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--text-secondary) !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  max-width: 65ch !important;
  margin: 0 auto !important;
}

.dgs-il-713d7feed8:where(.dgs-css-index,.dgs-css-index *) {
  padding-top: var(--space-2xl) !important;
  padding-bottom: var(--space-2xl) !important;
  background: var(--bg-white, #ffffff) !important;
  overflow: hidden !important;
}

.dgs-il-8af4a3c93a:where(.dgs-css-index,.dgs-css-index *) {
  max-width: 1000px !important;
  margin: 0 auto 5rem auto !important;
  text-align: center !important;
}

.dgs-il-b1ad660b53:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--bg-deep-navy, #0A1F33) !important;
  line-height: 1.25 !important;
  margin-bottom: var(--space-sm) !important;
}

.dgs-il-e037c2ba35:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--text-dark-muted, #334155) !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  margin: 0 auto !important;
  max-width: 85ch !important;
}

.dgs-il-39ae76d1e8:where(.dgs-css-index,.dgs-css-index *) {
  --csr-accent: var(--dgs-teal) !important;
}

.dgs-il-11b22c5850:where(.dgs-css-index,.dgs-css-index *) {
  --csr-accent: var(--dgs-blue) !important;
}

.dgs-il-4c6e201c20:where(.dgs-css-index,.dgs-css-index *) {
  padding-top: var(--space-2xl) !important;
  padding-bottom: var(--space-2xl) !important;
  background: var(--bg-deep-navy) !important;
}

.dgs-il-8bcf387afd:where(.dgs-css-index,.dgs-css-index *) {
  max-width: 100% !important;
  margin-bottom: 5rem !important;
}

.dgs-il-3b9a6cb983:where(.dgs-css-index,.dgs-css-index *) {
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin-bottom: var(--space-sm) !important;
}

.dgs-il-7b73f4a4bf:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--text-light-muted) !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  max-width: 90ch !important;
}

.dgs-il-8ee34defe8:where(.dgs-css-index,.dgs-css-index *) {
  padding-top: var(--space-2xl) !important;
  padding-bottom: var(--space-2xl) !important;
  background: var(--bg-white, #ffffff) !important;
  color: var(--bg-deep-navy) !important;
  overflow: hidden !important;
}

.dgs-il-50666a574d:where(.dgs-css-index,.dgs-css-index *) {
  position: relative !important;
}

.dgs-il-54a678f0ea:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--bg-deep-navy) !important;
  font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
  line-height: 1.25 !important;
  margin: 0.5rem 0 0 0 !important;
  font-weight: 700 !important;
}

.dgs-il-5f4f8400d1:where(.dgs-css-index,.dgs-css-index *) {
  width:16px !important;
  height:16px !important;
  color: var(--action-teal) !important;
  display:inline-block !important;
  margin-right: 6px !important;
  vertical-align:middle !important;
}

.dgs-il-d4f7536fd4:where(.dgs-css-index,.dgs-css-index *) {
  margin-top: 1.5rem !important;
}

.dgs-il-d0c1c86a19:where(.dgs-css-index,.dgs-css-index *) {
  padding-top: var(--space-2xl) !important;
  padding-bottom: var(--space-2xl) !important;
  background: var(--bg-deep-navy) !important;
  overflow: hidden !important;
}

.dgs-il-23fcde8942:where(.dgs-css-index,.dgs-css-index *) {
  margin-bottom: 4rem !important;
  text-align: center !important;
  justify-content: center !important;
}

.dgs-il-05d67e7b31:where(.dgs-css-index,.dgs-css-index *) {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.dgs-il-8aaeee1823:where(.dgs-css-index,.dgs-css-index *) {
  color: #ffffff !important;
  font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
  line-height: 1.25 !important;
  margin: 0 0 1.25rem 0 !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.dgs-il-93c6e1d4bb:where(.dgs-css-index,.dgs-css-index *) {
  white-space: nowrap !important;
}

.dgs-il-08b603df45:where(.dgs-css-index,.dgs-css-index *) {
  align-self: center !important;
}

.dgs-il-32a5fbbcb0:where(.dgs-css-index,.dgs-css-index *) {
  background-image: linear-gradient(to bottom, rgba(10, 31, 51, 0.4), rgba(10, 31, 51, 0.95)), url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83d03499074f5ef636e0d8.png') !important;
}

.dgs-il-9953930350:where(.dgs-css-index,.dgs-css-index *) {
  background-image: linear-gradient(to bottom, rgba(10, 31, 51, 0.4), rgba(10, 31, 51, 0.95)), url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83bbadfe4291bd1056fa66.png') !important;
}

.dgs-il-256057d338:where(.dgs-css-index,.dgs-css-index *) {
  background-image: linear-gradient(to bottom, rgba(10, 31, 51, 0.4), rgba(10, 31, 51, 0.95)), url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a83bbad9437a276210f33b9.png') !important;
}

.dgs-il-75e655a1a7:where(.dgs-css-index,.dgs-css-index *) {
  background-image: linear-gradient(to bottom, rgba(10, 31, 51, 0.4), rgba(10, 31, 51, 0.95)), url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a7d8800255b571c8ee058f0.webp') !important;
}

.dgs-il-80f56ee2c9:where(.dgs-css-index,.dgs-css-index *) {
  position: relative !important;
  overflow: hidden !important;
  padding: var(--space-2xl) 0 !important;
  background: var(--bg-navy-darkest) !important;
  min-height: 60vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dgs-il-6770b49527:where(.dgs-css-index,.dgs-css-index *) {
  background-image:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a857bcca3ca3046969bedef.png') !important;
}

.dgs-il-055261c8e0:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 70vw !important;
  height: 50vh !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.dgs-il-8e74b3ae80:where(.dgs-css-index,.dgs-css-index *) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.dgs-il-b783b57af6:where(.dgs-css-index,.dgs-css-index *) {
  position: relative !important;
  z-index: 2 !important;
  max-width: 900px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2rem !important;
  box-sizing: border-box !important;
}

.dgs-il-a24c96df24:where(.dgs-css-index,.dgs-css-index *) {
  margin: 0 !important;
  font-size: clamp(3rem, 6.8vw, 5.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

.dgs-il-71e255c773:where(.dgs-css-index,.dgs-css-index *) {
  margin: 0 auto !important;
  max-width: 640px !important;
  font-size: clamp(1rem, 1.8vw, 1.15rem) !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
}

.dgs-il-d46ee4853e:where(.dgs-css-index,.dgs-css-index *) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1.25rem !important;
  margin-top: 1.5rem !important;
  width: 100% !important;
}

.dgs-il-5bc6667d8b:where(.dgs-css-index,.dgs-css-index *) {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.dgs-il-40aef0b69f:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--action-teal) !important;
  margin-bottom: 0.75rem !important;
  display: inline-block !important;
}

.dgs-il-555b20047d:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--bg-deep-navy) !important;
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

.dgs-il-30e4c778ba:where(.dgs-css-index,.dgs-css-index *) {
  color: var(--text-dark-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.dgs-il-2cfbdbb9ba:where(.dgs-css-index,.dgs-css-index *) {
  width: 60px !important;
  height: 3px !important;
  background: var(--accent-yellow) !important;
  margin-top: 2rem !important;
}

.dgs-il-d5ab445043:where(.dgs-css-index,.dgs-css-index *) {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}


/* ============================================================
   C24. THANK-YOU  (scope: .dgs-css-thank-you)
   Formerly css/dgs-thank-you.css. Used by:
     thank-you-application.html, thank-you-audit.html, thank-you-contact.html
     thank-you-training.html, thank-you.html
   ============================================================ */

/* ============================================================
   DIGITAL GROWTHSCALE — THANK-YOU PAGE-SPECIFIC STYLES
   Base hero look (duotone photo, badge, h1, sub, actions) comes
   from .dgs-service-hero in dgs-solution-detail.css / dgs-common.css.
   Load order: dgs-common.css, dgs-solution-detail.css, then this file.
   ============================================================ */

.dgs-thankyou-hero:where(.dgs-css-thank-you,.dgs-css-thank-you *) {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.dgs-thankyou-hero .dgs-hero-content:where(.dgs-css-thank-you,.dgs-css-thank-you *) {
  padding-bottom: 0;
}

.dgs-thankyou-hero h1:where(.dgs-css-thank-you,.dgs-css-thank-you *) {
  margin-bottom: 1.25rem;
}

.dgs-thankyou-ai-note:where(.dgs-css-thank-you,.dgs-css-thank-you *) {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 34rem;
  margin: 2.5rem auto 0;
  padding: 0.65rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 2px solid var(--action-teal);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
}

.dgs-thankyou-ai-note span:where(.dgs-css-thank-you,.dgs-css-thank-you *) {
  flex: 1;
  min-width: 0;
  width: auto;
  max-width: none;
}

@media (max-width: 768px) {
  .dgs-thankyou-hero:where(.dgs-css-thank-you,.dgs-css-thank-you *) {
    min-height: 100vh;
  }

  .dgs-thankyou-ai-note:where(.dgs-css-thank-you,.dgs-css-thank-you *) {
    max-width: none;
  }
}

/* ============================================================
   INLINE STYLES EXTRACTED FROM HTML (migrated from style="" attrs)
   ============================================================ */
.dgs-il-17f9252389:where(.dgs-css-thank-you,.dgs-css-thank-you *) {
  --dgs-duotone-img:url('https://assets.cdn.filesafe.space/UAA13luwQZmtw8ObS1Su/media/6a86adefb3a1bcf4faf40067.png') !important;
}

.dgs-il-427a5607c1:where(.dgs-css-thank-you,.dgs-css-thank-you *) {
  width:14px !important;
  height:14px !important;
}


/* ============================================================
   PART D. ACCESSIBILITY + REDUCED-MOTION GUARANTEES
   Last in the file on purpose: these must win over any page
   section above. Part A already neutralises transitions and
   reveal offsets under prefers-reduced-motion; this block makes
   sure nothing that a motion sequence hides can stay hidden.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dgs-csr-graphic.is-armed .dgs-csr-graphic-icon,
  .dgs-csr-graphic.is-armed .dgs-csr-graphic-label,
  .dgs-csr-graphic.is-armed .dgs-csr-graphic-line {
    opacity: 1 !important;
  }
}

/* Keyboard focus is always visible, including on page-specific
   components that reset outlines. Pointer clicks stay clean via
   :focus-visible. */
.dgs-page :where(a, button, [role="tab"], [tabindex]):focus-visible {
  outline: 2px solid var(--dgs-teal);
  outline-offset: 2px;
}