/* ============================================================
   [BRANDNAME] — Design System
   All colors/type/spacing via CSS custom properties. No hardcoded hex.
   ============================================================ */

:root {
  /* Brand palette — deep, confident emerald, not a generic success-green */
  --color-primary:        #0E6E4E;  /* deep emerald — links, buttons, icons */
  --color-primary-bright: #17B87F;  /* brighter emerald — hero glow, gradients, hover highlights, 3D "resolved" state */
  --color-secondary:      #0A5A40;  /* darker emerald-teal — button hover/active */

  /* Dark neutral (hero, nav, CTA band, footer, page-title banners) */
  --color-bg-dark:            #0B1310;
  --color-bg-dark-alt:        #101C17;
  --color-text-on-dark:       #FAF7EF;
  --color-text-on-dark-muted: #A9B3AC;

  /* Warm off-white (light sections) */
  --color-bg:             #FAF7EF;  /* primary light background */
  --color-bg-alt:         #F1EBDC;  /* deeper warm cream — alternates with --color-bg */
  --color-surface:        #FFFFFF; /* cards/stat strips that need to pop */

  /* Text & borders (light sections) */
  --color-text:           #14201B;
  --color-text-muted:     #5C6B64;
  --color-border:         #E3DCC8;
  --color-white:          #FFFFFF;
  --color-danger:         #EF4444;
  --color-danger-rgb:     239, 68, 68;

  /* Bootstrap 5 variable overrides */
  --bs-primary:            #0E6E4E;
  --bs-primary-rgb:        14, 110, 78;
  --bs-link-color:         #0E6E4E;
  --bs-link-hover-color:   #0A5A40;

  /* Typography — geometric sans for headings, readable sans for body */
  --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-base:    'Inter', system-ui, -apple-system, sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.65;

  /* Spacing */
  --section-py: 5.5rem;

  /* Shadows — warm-tinted, not cool gray */
  --shadow-card:       0 1px 2px rgba(20,32,27,.05), 0 6px 20px rgba(20,32,27,.07);
  --shadow-card-hover: 0 4px 10px rgba(20,32,27,.08), 0 16px 36px rgba(20,32,27,.12);
  --shadow-navbar:     0 1px 0 rgba(255,255,255,.06);

  /* Radius */
  --radius-card: 0.875rem;
  --radius-btn:  0.5rem;
  --radius-pill: 2rem;
}
@media (max-width: 575.98px) {
  :root { --section-py: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

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

::selection { background: var(--color-primary-bright); color: var(--color-bg-dark); }
::-moz-selection { background: var(--color-primary-bright); color: var(--color-bg-dark); }

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

img { max-width: 100%; height: auto; }

section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.bg-au-dark   { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.bg-au-dark h1, .bg-au-dark h2, .bg-au-dark h3 { color: var(--color-text-on-dark); }
.bg-au-dark p, .bg-au-dark .text-muted { color: var(--color-text-on-dark-muted); }
.bg-au-alt    { background: var(--color-bg-alt); }
.bg-au-surface{ background: var(--color-surface); }

.btn-primary {
  /* Bootstrap's :active state uses a compound selector with higher
     specificity than a simple .btn-primary:active override can beat, so it
     resolves color through these locally-scoped variables instead — same
     mechanism Bootstrap itself uses, just re-pointed at our palette. */
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-secondary);
  --bs-btn-hover-border-color: var(--color-secondary);
  --bs-btn-active-bg: var(--color-secondary);
  --bs-btn-active-border-color: var(--color-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(20, 32, 27, .125);
  --bs-btn-focus-shadow-rgb: 23, 184, 127;
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
  border-radius:    var(--radius-btn);
  font-weight: 600;
  padding: .625rem 1.5rem;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-secondary);
  border-color:     var(--color-secondary);
  transform: translateY(-1px);
}
.btn:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(23, 184, 127, .35);
}
.btn-outline-light {
  border-radius: var(--radius-btn);
  font-weight: 600;
  padding: .625rem 1.5rem;
  transition: background .2s, transform .15s;
}
.btn-outline-light:hover { transform: translateY(-1px); }
.btn-link-accent {
  color: var(--color-primary-bright);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.btn-link-accent:hover { color: var(--color-primary); text-decoration: underline; }

.au-navbar {
  background: var(--color-bg-dark);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: var(--shadow-navbar);
}
.au-navbar .navbar-brand {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-on-dark) !important;
}
.au-navbar .navbar-brand span { color: var(--color-primary-bright); }
.au-navbar .nav-link { color: var(--color-text-on-dark-muted) !important; font-weight: 500; }
.au-navbar .nav-link.active, .au-navbar .nav-link:hover { color: var(--color-text-on-dark) !important; }

.au-page-title {
  background: var(--color-bg-dark);
  padding: 3.5rem 0 3rem;
}
.au-page-title h1 { color: var(--color-text-on-dark); }
.au-page-title p { color: var(--color-text-on-dark-muted); }

.au-section-label {
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8125rem;
  margin-bottom: .5rem;
}

.au-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s, transform .2s;
  height: 100%;
  color: var(--color-text);
}
.au-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.au-card i.bi { color: var(--color-primary-bright); }

.au-cta-band {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  text-align: center;
  border-radius: var(--radius-card);
}
.au-cta-band h2 { color: var(--color-text-on-dark); }

.au-checklist { list-style: none; padding: 0; margin: 0; columns: 1; }
@media (min-width: 768px) { .au-checklist.au-checklist-2col { columns: 2; column-gap: 2rem; } }
.au-checklist li {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .5rem 0; break-inside: avoid;
}
.au-checklist li i { color: var(--color-primary-bright); margin-top: .2rem; }

.au-filter-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  padding: .5rem 1.25rem;
  font-weight: 600;
  font-size: .875rem;
  transition: background .2s, color .2s, border-color .2s;
}
.au-filter-btn.active, .au-filter-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

footer.au-footer { background: var(--color-bg-dark); color: var(--color-text-on-dark-muted); padding: 3.5rem 0 1.5rem; }
footer.au-footer a { color: var(--color-text-on-dark-muted); text-decoration: none; }
footer.au-footer a:hover { color: var(--color-text-on-dark); }
footer.au-footer h6 { color: var(--color-text-on-dark); font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; }
footer.au-footer .navbar-brand span { color: var(--color-primary-bright); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

.au-timeline-track { position: relative; }
.au-timeline-line { width: 100%; position: absolute; }
.au-timeline-line--h { top: 24px; left: 0; height: 4px; }
.au-timeline-line--v { top: 0; left: 26px; width: 4px; height: 100%; }
.au-timeline-line path { fill: none; stroke: var(--color-primary-bright); stroke-width: 4; stroke-linecap: round; }
.au-timeline-row { display: flex; flex-direction: column; gap: 2rem; position: relative; z-index: 1; }
@media (min-width: 768px) { .au-timeline-row { flex-direction: row; justify-content: space-between; gap: .75rem; align-items: flex-start; } }
.au-timeline-node { flex: 1; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.au-timeline-node.is-visible { opacity: 1; transform: none; }
/* Mobile: left-aligned icon-and-card row so the badge center lines up with
   the vertical connector, instead of a centered badge floating over it */
@media (max-width: 767.98px) {
  .au-timeline-node { display: flex; align-items: flex-start; gap: 1rem; text-align: left; }
  .au-timeline-waypoint { margin: 0; flex-shrink: 0; }
  .au-timeline-card { flex: 1; }
}

.au-timeline-waypoint {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 1.2rem;
  box-shadow: inset 0 1px 3px rgba(20, 32, 27, .08);
  transition: background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.au-timeline-node.is-visible .au-timeline-waypoint {
  background: var(--color-surface);
  border-color: var(--color-primary-bright);
  color: var(--color-primary);
  box-shadow: 0 0 0 6px rgba(23, 184, 127, .14), 0 8px 18px rgba(20, 32, 27, .12);
  transform: scale(1.06);
}
.au-timeline-pulse {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--color-primary-bright);
  opacity: 0;
  pointer-events: none;
}
.au-timeline-node.is-visible .au-timeline-pulse { animation: au-pulse-ring 1s ease-out 1; }
@keyframes au-pulse-ring {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.85); }
}

.au-timeline-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.15rem;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.au-timeline-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-bright);
  transform: translateY(-2px);
}
.au-timeline-card p { margin-bottom: 0; font-size: .9rem; }
.au-timeline-year { display: block; font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); margin-bottom: .5rem; }

.au-process-step { position: relative; text-align: center; padding-top: 1rem; }
.au-process-number {
  position: relative;
  z-index: 1;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-white);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
@media (min-width: 768px) {
  .au-process-step:not(:last-child)::after {
    content: '';
    position: absolute; top: calc(1rem + 24px - 1px); left: calc(50% + 24px); width: calc(100% - 48px);
    height: 2px; background: var(--color-border);
    z-index: 0;
  }
}

.au-platform-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem 1rem;
  text-align: center;
  font-weight: 600;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.au-platform-card-sm {
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem .75rem;
  font-size: .875rem;
  color: var(--color-text);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.au-platform-card-sm:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--color-primary-bright);
}
.au-platform-card-sm i { font-size: 1.4rem; color: var(--color-primary-bright); }
.au-platform-card-more {
  color: var(--color-primary);
  border-style: dashed;
  border-color: var(--color-border);
}
.au-platform-card-more i { color: var(--color-primary); }
.au-platform-card-more:hover { background: var(--color-bg-alt); border-color: var(--color-primary-bright); }
.au-callout {
  background: var(--color-surface);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-card);
}

/* FAQ accordion — override Bootstrap's default blue active/focus state.
   Bootstrap sets --bs-accordion-active-color etc. as LOCAL custom properties
   directly on the `.accordion` element itself, so a :root override gets
   shadowed (a declaration on the element beats an inherited one, regardless
   of source order). Overriding the resolved properties on Bootstrap's own
   `.accordion-button` selectors — which load after bootstrap.min.css — wins
   on source order instead. */
.accordion-button:not(.collapsed) {
  color: var(--color-primary);
  background-color: rgba(14, 110, 78, .08);
  box-shadow: inset 0 -1px 0 var(--color-border);
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2317B87F'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
.accordion-button:focus {
  border-color: var(--color-primary-bright);
  box-shadow: 0 0 0 .25rem rgba(23, 184, 127, .25);
}

/* Site-wide sweep of every other Bootstrap default-blue we actually use:
   form focus rings, checked checkboxes (contact form), the active item in
   the "What We Automate" nav dropdown, and keyboard focus rings on nav
   links / the mobile menu toggle. Same approach as above — override the
   resolved property on Bootstrap's own selector rather than a custom
   property, since several of these are local-scoped and would otherwise
   get shadowed. */
.form-control:focus,
.form-check-input:focus {
  border-color: var(--color-primary-bright);
  box-shadow: 0 0 0 .25rem rgba(23, 184, 127, .25);
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 .25rem rgba(var(--color-danger-rgb), .25);
}
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.navbar-toggler:focus {
  box-shadow: 0 0 0 .25rem rgba(23, 184, 127, .35);
}

/* ============================================================
   Compatibility shim — a handful of the existing shared
   Sections/*.cshtml block partials (ctaStrip, faqAccordion,
   featuresSection, howItWorksSteps) are reused as-is on automation
   pages rather than forked, since their markup is otherwise generic
   Bootstrap layout. These rules give their pc-* classes automation's
   own look, entirely inside this isolated stylesheet — the shared
   site.css is never touched and never loads on the same page as this
   file, so there is no cross-theme coupling.
   ============================================================ */
:root { --color-bg-light: var(--color-bg); }

.pc-section-label { display: inline-block; color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; margin-bottom: .5rem; }
.pc-section-title { font-family: var(--font-heading); }
.pc-section-sub { color: var(--color-text-muted); }
.pc-callout {
  background: var(--color-surface);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-card);
}

.pc-cta-strip {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  text-align: center;
  border-radius: var(--radius-card);
  padding: 3.5rem 1.5rem;
}
.pc-cta-strip h2 { color: var(--color-text-on-dark); }
.pc-cta-strip p { color: var(--color-text-on-dark-muted); }

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  height: 100%;
  transition: box-shadow .2s, transform .2s;
}
.feature-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.feature-card .icon-wrap { font-size: 1.75rem; color: var(--color-primary-bright); margin-bottom: .75rem; }
.feature-card .learn-more { color: var(--color-primary-bright); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .375rem; }
.feature-card .learn-more:hover { color: var(--color-primary); text-decoration: underline; }

.step-item { position: relative; text-align: center; padding-top: 1rem; }
.step-number {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-white);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}