/*
 * Production Answers — Professional Theme
 * Visual-only override. It does not replace, remove or rewrite page content.
 * Load after assets/css/site.css.
 */

:root {
  --pro-navy-950: #071a2b;
  --pro-navy-900: #0b2439;
  --pro-navy-800: #12344e;
  --pro-teal-700: #0b6670;
  --pro-teal-600: #0f7b84;
  --pro-teal-100: #dff1f1;
  --pro-copper-600: #c66a3c;
  --pro-copper-100: #fae7dc;
  --pro-gold-600: #b88327;
  --pro-violet-600: #675b9f;
  --pro-ink: #132536;
  --pro-muted: #5f6f7d;
  --pro-canvas: #f4f7f9;
  --pro-surface: #ffffff;
  --pro-surface-alt: #eef3f6;
  --pro-line: #d9e2e8;
  --pro-line-strong: #c8d4dc;
  --pro-radius-sm: 10px;
  --pro-radius: 16px;
  --pro-radius-lg: 24px;
  --pro-shadow-xs: 0 2px 8px rgba(7, 26, 43, .05);
  --pro-shadow-sm: 0 10px 28px rgba(7, 26, 43, .08);
  --pro-shadow: 0 24px 60px rgba(7, 26, 43, .12);
  --pro-max: 1380px;
}

html {
  scroll-behavior: smooth;
  background: var(--pro-canvas);
}

body {
  color: var(--pro-ink);
  background: var(--pro-canvas);
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", Inter, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: #fff;
  background: var(--pro-teal-700);
}

.shell,
.container {
  width: min(calc(100% - 48px), var(--pro-max));
}

a {
  text-underline-offset: .18em;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid rgba(198, 106, 60, .52) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.top-strip {
  display: none !important;
}

.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid rgba(200, 212, 220, .84) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .86), 0 8px 24px rgba(7, 26, 43, .045) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.header-main {
  min-height: 82px !important;
  gap: 34px !important;
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  min-width: max-content;
  color: var(--pro-navy-950) !important;
  text-decoration: none !important;
}

.brand-name {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: .22em;
  color: var(--pro-navy-950) !important;
  font-size: clamp(19px, 1.55vw, 25px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.brand-name::before {
  content: "";
  width: 9px;
  height: 34px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pro-teal-600), var(--pro-copper-600));
  box-shadow: 0 5px 15px rgba(11, 102, 112, .2);
}

.brand-name span {
  display: inline-grid !important;
  place-items: center;
  min-width: 38px;
  min-height: 28px;
  padding: 0 7px;
  border-radius: 6px;
  color: #fff !important;
  background: var(--pro-copper-600) !important;
  font-size: .72em !important;
  letter-spacing: -.04em !important;
}

.main-nav {
  align-items: center !important;
  gap: 5px !important;
}

.main-nav > a {
  position: relative;
  padding: 11px 13px !important;
  border-radius: 9px;
  color: #2b4052 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  text-decoration: none !important;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.main-nav > a:hover,
.main-nav > a[aria-current="page"] {
  color: var(--pro-teal-700) !important;
  background: #edf6f6 !important;
}

.main-nav > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 5px;
  left: 13px;
  height: 2px;
  border-radius: 999px;
  background: var(--pro-teal-600);
}

.main-nav .nav-search {
  gap: 8px !important;
  margin-left: 8px;
  padding: 11px 17px !important;
  border: 1px solid var(--pro-navy-900) !important;
  color: #fff !important;
  background: var(--pro-navy-900) !important;
  box-shadow: 0 8px 20px rgba(7, 26, 43, .13);
}

.main-nav .nav-search:hover {
  color: #fff !important;
  background: var(--pro-teal-700) !important;
  border-color: var(--pro-teal-700) !important;
  transform: translateY(-1px);
}

.menu-button {
  border: 1px solid var(--pro-line) !important;
  border-radius: 10px !important;
  color: var(--pro-navy-900) !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-xs);
}

/* --------------------------------------------------------------------------
   Typography and shared section system
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  color: var(--pro-navy-950);
  font-family: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", Inter, Arial, sans-serif;
  font-weight: 780;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.section {
  position: relative;
  padding-block: clamp(74px, 7vw, 112px) !important;
}

.section-heading {
  align-items: flex-end !important;
  gap: 36px !important;
  margin-bottom: clamp(30px, 4vw, 48px) !important;
}

.section-heading > div {
  max-width: 880px;
}

.section-heading h2 {
  margin: 0 !important;
  font-size: clamp(31px, 3.55vw, 51px) !important;
  line-height: 1.08 !important;
}

.section-heading p {
  max-width: 760px;
  margin-top: 14px !important;
  color: var(--pro-muted) !important;
  font-size: 17px !important;
}

.kicker,
.eyebrow,
.hero-kicker {
  color: var(--pro-teal-700) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.kicker::before,
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  margin-right: 9px;
  vertical-align: middle;
  border-radius: 999px;
  background: currentColor;
}

.text-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: var(--pro-teal-700) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.text-link:hover {
  color: var(--pro-copper-600) !important;
}

.button,
.button.primary,
a.button,
button.primary {
  min-height: 47px;
  padding: 12px 20px !important;
  border: 1px solid var(--pro-teal-700) !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--pro-teal-700) !important;
  box-shadow: 0 9px 24px rgba(11, 102, 112, .17) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.button:hover,
.button.primary:hover,
a.button:hover,
button.primary:hover {
  color: #fff !important;
  background: var(--pro-navy-900) !important;
  border-color: var(--pro-navy-900) !important;
  box-shadow: 0 13px 30px rgba(7, 26, 43, .18) !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Homepage hero
   -------------------------------------------------------------------------- */

.home-hero {
  isolation: isolate;
  min-height: clamp(580px, 68vh, 760px) !important;
  overflow: visible !important;
  color: #fff;
  background: var(--pro-navy-950) !important;
}

.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(7, 26, 43, .36));
}

.hero-media {
  filter: saturate(.8) contrast(1.05);
  transform: scale(1.015);
}

.hero-shade {
  background:
    radial-gradient(circle at 78% 22%, rgba(15, 123, 132, .20), transparent 34%),
    linear-gradient(90deg, rgba(5, 20, 34, .95) 0%, rgba(7, 26, 43, .88) 45%, rgba(7, 26, 43, .38) 76%, rgba(7, 26, 43, .27) 100%) !important;
}

.hero-content {
  position: relative;
  z-index: 12 !important;
  max-width: 920px !important;
  padding-top: clamp(72px, 8vw, 118px) !important;
  padding-bottom: clamp(126px, 13vw, 190px) !important;
}

.hero-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  color: #9ed9dc !important;
}

.hero-kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: var(--pro-copper-600);
}

.home-hero h1 {
  max-width: 900px;
  margin-top: 16px !important;
  margin-bottom: 22px !important;
  color: #fff !important;
  font-size: clamp(47px, 6.15vw, 84px) !important;
  font-weight: 760 !important;
  line-height: .99 !important;
  letter-spacing: -.06em !important;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .22);
}

.home-hero h1 em {
  color: #a6dfe0 !important;
  font-style: normal !important;
}

.hero-content > p {
  max-width: 780px !important;
  margin-bottom: 30px !important;
  color: #d8e4ec !important;
  font-size: clamp(17px, 1.45vw, 21px) !important;
  line-height: 1.55 !important;
}

.hero-search {
  position: relative !important;
  z-index: 10000 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: min(100%, 820px) !important;
  min-height: 68px !important;
  padding: 7px 8px 7px 20px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .25) !important;
}

.hero-search > svg {
  color: var(--pro-teal-700) !important;
}

.hero-search input {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  outline: 0 !important;
  color: var(--pro-ink) !important;
  background: transparent !important;
  font-size: 16px !important;
}

.hero-search input::placeholder {
  color: #778693 !important;
  opacity: 1;
}

.hero-search button {
  min-height: 50px !important;
  padding-inline: 22px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--pro-copper-600) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 18px rgba(198, 106, 60, .20);
}

.hero-search button:hover {
  background: #aa542e !important;
}

.search-suggestions,
.hero-search .search-suggestions {
  position: absolute !important;
  z-index: 2147483000 !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: 0 !important;
  max-height: min(460px, 55vh) !important;
  padding: 9px !important;
  overflow-y: auto !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 14px !important;
  color: var(--pro-ink) !important;
  background: rgba(255, 255, 255, .995) !important;
  box-shadow: 0 30px 72px rgba(7, 26, 43, .28) !important;
  isolation: isolate;
}

.search-suggestions[hidden] {
  display: none !important;
}

.search-suggestions a,
.search-suggestions button,
.search-suggestions > div {
  border-radius: 9px !important;
}

.search-suggestions a {
  display: block !important;
  padding: 11px 13px !important;
  color: var(--pro-ink) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.4;
  text-decoration: none !important;
}

.search-suggestions a:hover,
.search-suggestions a:focus {
  color: var(--pro-teal-700) !important;
  background: #edf6f6 !important;
}

.popular-searches {
  position: relative;
  z-index: 9;
  gap: 9px !important;
  margin-top: 18px !important;
}

.popular-searches > span {
  color: #c1d3df !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.popular-searches a {
  padding: 6px 10px !important;
  border: 1px solid rgba(255, 255, 255, .19) !important;
  border-radius: 999px !important;
  color: #e7eff4 !important;
  background: rgba(255, 255, 255, .07) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

.popular-searches a:hover {
  border-color: rgba(255, 255, 255, .34) !important;
  background: rgba(255, 255, 255, .13) !important;
}

.hero-stats {
  position: absolute !important;
  z-index: 8 !important;
  right: 0;
  bottom: 28px !important;
  left: 0;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 14px !important;
  background: rgba(8, 32, 51, .68) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(16px);
}

.hero-stats .stat {
  min-height: 89px !important;
  padding: 19px 24px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .14) !important;
  text-align: left !important;
  background: transparent !important;
}

.hero-stats .stat:first-child {
  border-left: 0 !important;
}

.hero-stats .stat strong {
  display: block;
  color: #fff !important;
  font-size: 27px !important;
  font-weight: 780 !important;
  line-height: 1.05 !important;
}

.hero-stats .stat span {
  display: block;
  margin-top: 5px;
  color: #bcd0dc !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .015em;
}

/* --------------------------------------------------------------------------
   Production stages — cleaner editorial card treatment
   -------------------------------------------------------------------------- */

.production-stage-section,
.stage-highlight-section {
  color: var(--pro-ink) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(15, 123, 132, .10), transparent 27rem),
    linear-gradient(180deg, #eef3f6 0%, #f7f9fa 100%) !important;
  border-top: 1px solid #fff;
  border-bottom: 1px solid var(--pro-line);
}

.production-stage-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pro-teal-600), var(--pro-copper-600), #d1a247);
}

.production-stage-section .kicker,
.production-stage-section .section-heading h2,
.production-stage-section .section-heading p,
.production-stage-section .text-link {
  color: inherit !important;
}

.production-stage-section .kicker,
.production-stage-section .text-link {
  color: var(--pro-teal-700) !important;
}

.process-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.process-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 176px minmax(0, 1fr) !important;
  min-height: 360px !important;
  overflow: hidden !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  color: var(--pro-ink) !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-xs) !important;
  text-decoration: none !important;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.process-card:hover {
  border-color: #a9c5cc !important;
  box-shadow: var(--pro-shadow-sm) !important;
  transform: translateY(-5px) !important;
}

.process-card img {
  position: relative !important;
  inset: auto !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 176px !important;
  object-fit: cover !important;
  filter: saturate(.78) contrast(1.04) !important;
  transition: transform .35s ease, filter .35s ease !important;
}

.process-card:hover img {
  filter: saturate(.94) contrast(1.03) !important;
  transform: scale(1.035) !important;
}

.process-card .image-overlay {
  display: none !important;
}

.process-card > div {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: 20px 19px 22px !important;
  color: var(--pro-ink) !important;
  background: #fff !important;
  text-shadow: none !important;
}

.process-card > div > span:first-child {
  order: -1;
  display: inline-flex !important;
  width: auto !important;
  margin: 0 0 10px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: var(--pro-teal-700) !important;
  background: var(--pro-teal-100) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.process-card h3 {
  margin: 0 0 8px !important;
  color: var(--pro-navy-950) !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
  text-shadow: none !important;
}

.process-card p {
  margin: 0 !important;
  color: var(--pro-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Route cards, problem cards, pack cards and answer cards
   -------------------------------------------------------------------------- */

.start-section,
.section-blue {
  background:
    radial-gradient(circle at 7% 10%, rgba(15, 123, 132, .07), transparent 24rem),
    #f7fafb !important;
  border-bottom: 1px solid var(--pro-line);
}

.start-grid {
  gap: 20px !important;
}

.start-card {
  position: relative;
  overflow: hidden;
  min-height: 265px !important;
  padding: 30px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius-lg) !important;
  color: var(--pro-ink) !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-xs) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.start-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--pro-teal-600);
}

.start-card.start-pack::before {
  background: var(--pro-copper-600);
}

.start-card.start-stage::before,
.start-card:nth-child(3)::before {
  background: var(--pro-gold-600);
}

.start-card:hover {
  border-color: var(--pro-line-strong) !important;
  box-shadow: var(--pro-shadow-sm) !important;
  transform: translateY(-5px) !important;
}

.start-card .step {
  display: inline-grid !important;
  place-items: center;
  width: 39px !important;
  height: 39px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 50% !important;
  color: var(--pro-teal-700) !important;
  background: #fff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.start-card h3 {
  color: var(--pro-navy-950) !important;
  font-size: 24px !important;
  line-height: 1.16 !important;
}

.start-card p {
  color: var(--pro-muted) !important;
}

.start-card svg {
  color: var(--pro-teal-700) !important;
}

.section-coral,
.problem-section {
  background: linear-gradient(180deg, #fbf6f2 0%, #fff 100%) !important;
  border-top: 1px solid #f0e3dc;
  border-bottom: 1px solid #f0e3dc;
}

.section-teal,
.pack-section {
  background: linear-gradient(180deg, #eff7f6 0%, #f9fbfb 100%) !important;
  border-top: 1px solid #d9eae8;
  border-bottom: 1px solid #d9eae8;
}

.section-violet {
  background: linear-gradient(180deg, #f4f2f9 0%, #fbfbfd 100%) !important;
  border-top: 1px solid #e2dfed;
  border-bottom: 1px solid #e2dfed;
}

.section-gold,
.industry-section {
  background: linear-gradient(180deg, #faf7ef 0%, #fff 100%) !important;
  border-top: 1px solid #ede4cf;
  border-bottom: 1px solid #ede4cf;
}

.problem-grid,
.pack-grid,
.answer-grid,
.industry-card-grid,
.directory-grid,
.hub-grid,
.topic-grid,
.link-grid {
  gap: 18px !important;
}

.problem-card,
.pack-card,
.answer-card,
.industry-card,
.directory-card,
.hub-card,
.topic-card,
.result-card,
.search-result-card {
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  color: var(--pro-ink) !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-xs) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.problem-card:hover,
.pack-card:hover,
.answer-card:hover,
.industry-card:hover,
.directory-card:hover,
.hub-card:hover,
.topic-card:hover,
.result-card:hover,
.search-result-card:hover {
  border-color: #abc2cc !important;
  box-shadow: var(--pro-shadow-sm) !important;
  transform: translateY(-4px) !important;
}

.problem-card,
.pack-card {
  min-height: 170px;
  padding: 22px !important;
}

.problem-card h3,
.pack-card h3,
.answer-card h3,
.industry-card h3,
.directory-card h3,
.hub-card h3,
.topic-card h3 {
  color: var(--pro-navy-950) !important;
}

.problem-card p,
.pack-card p,
.answer-card p,
.industry-card p,
.directory-card p,
.hub-card p,
.topic-card p {
  color: var(--pro-muted) !important;
}

.problem-icon,
.pack-icon,
.card-icon {
  display: grid !important;
  place-items: center;
  width: 48px !important;
  height: 48px !important;
  border-radius: 13px !important;
  color: var(--pro-teal-700) !important;
  background: var(--pro-teal-100) !important;
}

.problem-card:nth-child(3n+2) .problem-icon,
.pack-card:nth-child(3n+2) .pack-icon {
  color: var(--pro-copper-600) !important;
  background: var(--pro-copper-100) !important;
}

.problem-card:nth-child(3n) .problem-icon,
.pack-card:nth-child(3n) .pack-icon {
  color: var(--pro-violet-600) !important;
  background: #ece9f7 !important;
}

.answer-card {
  overflow: hidden;
  min-height: 295px !important;
  padding: 0 !important;
}

.answer-card > a {
  display: flex !important;
  flex-direction: column !important;
  min-height: inherit !important;
  padding: 25px !important;
  color: inherit !important;
  text-decoration: none !important;
}

.answer-card-top {
  align-items: center !important;
  gap: 12px;
}

.answer-card .eyebrow {
  color: var(--pro-teal-700) !important;
  font-size: 10px !important;
  line-height: 1.3;
}

.answer-card .eyebrow::before {
  display: none;
}

.answer-card h3 {
  margin-top: 18px !important;
  margin-bottom: 12px !important;
  font-size: 21px !important;
  line-height: 1.26 !important;
}

.answer-card p {
  font-size: 14px !important;
  line-height: 1.58 !important;
}

.answer-arrow {
  display: grid !important;
  place-items: center;
  width: 37px !important;
  height: 37px !important;
  flex: 0 0 37px;
  border: 1px solid var(--pro-line) !important;
  border-radius: 50% !important;
  color: var(--pro-teal-700) !important;
  background: #fff !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.answer-card:hover .answer-arrow {
  color: #fff !important;
  background: var(--pro-teal-700) !important;
  border-color: var(--pro-teal-700) !important;
}

.tag-row {
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 18px !important;
}

.tag-row span,
.meta-chip,
.pill,
.badge {
  padding: 5px 8px !important;
  border: 1px solid #dce6eb !important;
  border-radius: 999px !important;
  color: #526674 !important;
  background: #f5f8fa !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Industry link lists */
.industry-grid,
.industry-links {
  gap: 10px !important;
}

.industry-grid a,
.industry-links a,
.industry-list a {
  position: relative;
  padding: 13px 42px 13px 16px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 10px !important;
  color: #31485a !important;
  background: rgba(255, 255, 255, .8) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.industry-grid a:hover,
.industry-links a:hover,
.industry-list a:hover {
  color: var(--pro-teal-700) !important;
  background: #fff !important;
  border-color: #aac8cc !important;
}

/* --------------------------------------------------------------------------
   Method section and footer
   -------------------------------------------------------------------------- */

.method-section {
  overflow: hidden;
  color: #fff !important;
  background:
    radial-gradient(circle at 85% 15%, rgba(15, 123, 132, .23), transparent 26rem),
    linear-gradient(135deg, var(--pro-navy-950), var(--pro-navy-800)) !important;
}

.method-section::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -170px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .018);
}

.method-section .kicker,
.method-section h2,
.method-section p {
  color: #fff !important;
}

.method-section .kicker {
  color: #9ed9dc !important;
}

.method-section p {
  color: #cfdee7 !important;
}

.method-grid {
  position: relative;
  z-index: 2;
  gap: 72px !important;
}

.method-steps {
  gap: 12px !important;
}

.method-steps li {
  padding: 18px 19px !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .055) !important;
  backdrop-filter: blur(8px);
}

.method-steps li > span {
  display: grid !important;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  color: var(--pro-navy-950) !important;
  background: #a6dfe0 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.method-steps strong {
  color: #fff !important;
}

.method-steps p {
  margin-top: 3px !important;
  margin-bottom: 0 !important;
  color: #c5d6e0 !important;
  font-size: 13px !important;
}

.site-footer {
  padding-top: 68px !important;
  color: #c6d4dd !important;
  background: #061623 !important;
  border-top: 4px solid var(--pro-teal-700) !important;
}

.site-footer .brand-name {
  color: #fff !important;
}

.site-footer h2 {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

.site-footer a {
  color: #b9cad4 !important;
  text-decoration: none !important;
}

.site-footer a:hover {
  color: #fff !important;
}

.footer-brand p,
.footer-note {
  color: #91a6b4 !important;
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, .10) !important;
  color: #8197a5 !important;
}

/* --------------------------------------------------------------------------
   Directory, hub and archive pages
   -------------------------------------------------------------------------- */

.page-hero,
.directory-hero,
.hub-hero,
.archive-hero,
.search-hero,
.index-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(70px, 8vw, 116px) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 84% 20%, rgba(15, 123, 132, .24), transparent 28rem),
    linear-gradient(125deg, var(--pro-navy-950), var(--pro-navy-800)) !important;
}

.page-hero::after,
.directory-hero::after,
.hub-hero::after,
.archive-hero::after,
.search-hero::after,
.index-hero::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -260px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .02), 0 0 0 140px rgba(255, 255, 255, .015);
}

.page-hero h1,
.directory-hero h1,
.hub-hero h1,
.archive-hero h1,
.search-hero h1,
.index-hero h1 {
  position: relative;
  z-index: 2;
  max-width: 980px;
  color: #fff !important;
  font-size: clamp(41px, 5.2vw, 70px) !important;
  line-height: 1.02 !important;
}

.page-hero p,
.directory-hero p,
.hub-hero p,
.archive-hero p,
.search-hero p,
.index-hero p {
  position: relative;
  z-index: 2;
  max-width: 820px;
  color: #cfdee7 !important;
  font-size: 18px !important;
}

.breadcrumbs,
.breadcrumb,
.breadcrumb-list {
  color: #70808d !important;
  font-size: 12px !important;
}

.breadcrumbs a,
.breadcrumb a,
.breadcrumb-list a {
  color: inherit !important;
  text-decoration: none !important;
}

.hub-summary,
.directory-summary,
.intro-card,
.summary-card,
.info-card,
.application-card {
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-xs) !important;
}

details,
.faq-item,
.accordion-item,
.hub-details {
  overflow: hidden;
  border: 1px solid var(--pro-line) !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-xs) !important;
}

summary {
  padding: 17px 19px !important;
  color: var(--pro-navy-950) !important;
  font-weight: 750 !important;
  cursor: pointer;
}

details[open] > summary {
  border-bottom: 1px solid var(--pro-line) !important;
  color: var(--pro-teal-700) !important;
  background: #f3f8f8 !important;
}

/* --------------------------------------------------------------------------
   Search page
   -------------------------------------------------------------------------- */

.search-page,
.search-library,
.results-section {
  background: var(--pro-canvas) !important;
}

.search-form,
.search-box,
.search-controls,
.library-controls {
  overflow: visible !important;
  padding: 22px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

.search-form input,
.search-box input,
.library-controls input,
.search-controls input,
.search-form select,
.search-controls select,
.filter-panel select,
.filter-panel input {
  min-height: 47px !important;
  border: 1px solid var(--pro-line-strong) !important;
  border-radius: 9px !important;
  color: var(--pro-ink) !important;
  background: #fff !important;
}

.search-layout,
.results-layout {
  gap: 28px !important;
}

.filter-panel,
.search-filters,
.filters-panel,
.filters {
  padding: 22px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-xs) !important;
}

.filter-panel h2,
.search-filters h2,
.filters-panel h2 {
  color: var(--pro-navy-950) !important;
  font-size: 18px !important;
}

.results-bar,
.results-summary {
  padding: 13px 16px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 10px !important;
  color: #526674 !important;
  background: #fff !important;
}

/* --------------------------------------------------------------------------
   Answer / article pages
   -------------------------------------------------------------------------- */

.answer-page,
.article-page,
.question-page {
  background: var(--pro-canvas) !important;
}

.answer-hero,
.article-hero,
.question-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 7vw, 104px) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 84% 20%, rgba(15, 123, 132, .22), transparent 25rem),
    linear-gradient(125deg, var(--pro-navy-950), #123852) !important;
}

.answer-hero h1,
.article-hero h1,
.question-hero h1 {
  max-width: 1050px;
  color: #fff !important;
  font-size: clamp(38px, 5vw, 66px) !important;
  line-height: 1.05 !important;
}

.answer-hero p,
.article-hero p,
.question-hero p,
.article-deck {
  max-width: 900px;
  color: #cfdee7 !important;
  font-size: 18px !important;
}

.answer-layout,
.article-layout,
.question-layout,
.article-grid {
  align-items: start !important;
  gap: clamp(32px, 5vw, 70px) !important;
  padding-block: clamp(50px, 6vw, 90px) !important;
}

.answer-main,
.article-main,
.question-main,
.article-content {
  min-width: 0;
}

.answer-sidebar,
.article-sidebar,
.question-sidebar,
.article-toc {
  position: sticky !important;
  top: 106px !important;
  padding: 20px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: var(--pro-shadow-xs) !important;
}

.answer-sidebar a,
.article-sidebar a,
.question-sidebar a,
.article-toc a {
  color: #506575 !important;
  text-decoration: none !important;
}

.answer-sidebar a:hover,
.article-sidebar a:hover,
.question-sidebar a:hover,
.article-toc a:hover {
  color: var(--pro-teal-700) !important;
}

.quick-answer,
.quick-answer-card,
.answer-box,
.direct-answer {
  position: relative;
  margin-bottom: 34px !important;
  padding: 28px 30px 28px 34px !important;
  border: 1px solid #bad9d8 !important;
  border-left: 5px solid var(--pro-teal-600) !important;
  border-radius: 0 var(--pro-radius) var(--pro-radius) 0 !important;
  color: var(--pro-navy-950) !important;
  background: linear-gradient(135deg, #e9f5f4, #f8fbfb) !important;
  box-shadow: var(--pro-shadow-xs) !important;
}

.quick-answer h2,
.quick-answer-card h2,
.answer-box h2,
.direct-answer h2 {
  color: var(--pro-teal-700) !important;
}

.quick-answer p,
.quick-answer-card p,
.answer-box p,
.direct-answer p {
  color: var(--pro-navy-950) !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
}

.check-panel,
.check-section,
.first-checks,
.causes-panel,
.cause-section,
.likely-causes,
.actions-panel,
.action-section,
.improvement-panel,
.evidence-panel,
.specification-panel,
.application-panel,
.context-panel,
.faq-panel,
.faq-section,
.solution-panel,
.solution-route {
  margin-block: 26px !important;
  padding: 27px !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-xs) !important;
}

.check-panel,
.check-section,
.first-checks {
  border-top: 4px solid #3b8b69 !important;
  background: linear-gradient(180deg, #f3faf6, #fff) !important;
}

.causes-panel,
.cause-section,
.likely-causes {
  border-top: 4px solid var(--pro-gold-600) !important;
  background: linear-gradient(180deg, #fbf8ef, #fff) !important;
}

.actions-panel,
.action-section,
.improvement-panel {
  border-top: 4px solid var(--pro-teal-600) !important;
  background: linear-gradient(180deg, #f0f8f8, #fff) !important;
}

.evidence-panel,
.specification-panel {
  border-top: 4px solid var(--pro-navy-800) !important;
  background: linear-gradient(180deg, #f2f6f8, #fff) !important;
}

.application-panel,
.context-panel {
  border-top: 4px solid var(--pro-copper-600) !important;
  background: linear-gradient(180deg, #fcf4ef, #fff) !important;
}

.faq-panel,
.faq-section {
  border-top: 4px solid var(--pro-violet-600) !important;
  background: linear-gradient(180deg, #f6f4fb, #fff) !important;
}

.solution-panel,
.solution-route,
.solution-box {
  border: 1px solid rgba(255, 255, 255, .10) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(15, 123, 132, .24), transparent 20rem),
    var(--pro-navy-950) !important;
  box-shadow: var(--pro-shadow) !important;
}

.solution-panel h2,
.solution-route h2,
.solution-box h2,
.solution-panel p,
.solution-route p,
.solution-box p {
  color: #fff !important;
}

.article-content h2,
.answer-main h2,
.question-main h2 {
  margin-top: clamp(38px, 5vw, 62px) !important;
  color: var(--pro-navy-950) !important;
  font-size: clamp(27px, 3vw, 38px) !important;
  line-height: 1.18 !important;
}

.article-content p,
.answer-main p,
.question-main p,
.article-content li,
.answer-main li,
.question-main li {
  color: #3c5060 !important;
}

.article-content ul li::marker,
.answer-main ul li::marker,
.question-main ul li::marker {
  color: var(--pro-teal-600);
}

.related-section,
.related-answers {
  background: #eef3f6 !important;
  border-top: 1px solid var(--pro-line) !important;
}

/* Forms */
.form-card,
.enquiry-form,
.contact-form,
.ask-form {
  padding: clamp(22px, 4vw, 38px) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

label {
  color: var(--pro-navy-900);
  font-weight: 700;
}

input,
select,
textarea {
  border-color: var(--pro-line-strong) !important;
  border-radius: 9px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--pro-teal-600) !important;
  box-shadow: 0 0 0 3px rgba(15, 123, 132, .12) !important;
}

/* Tables */
table {
  overflow: hidden;
  border: 1px solid var(--pro-line) !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--pro-shadow-xs);
}

th {
  color: #fff !important;
  background: var(--pro-navy-800) !important;
}

td,
th {
  border-color: var(--pro-line) !important;
}

tbody tr:nth-child(even) {
  background: #f7f9fa !important;
}

/* --------------------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .main-nav > a {
    padding-inline: 10px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 1040px) {
  .header-main {
    min-height: 74px !important;
  }

  .main-nav {
    top: 74px !important;
    right: 20px !important;
    left: 20px !important;
    padding: 12px !important;
    border: 1px solid var(--pro-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: var(--pro-shadow) !important;
  }

  .main-nav > a {
    padding: 12px 14px !important;
  }

  .main-nav .nav-search {
    margin: 6px 0 0 !important;
  }

  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .answer-sidebar,
  .article-sidebar,
  .question-sidebar,
  .article-toc {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .shell,
  .container {
    width: min(calc(100% - 28px), var(--pro-max));
  }

  .brand-name {
    font-size: 19px !important;
  }

  .brand-name::before {
    width: 6px;
    height: 29px;
    margin-right: 5px;
  }

  .home-hero {
    min-height: 680px !important;
  }

  .hero-content {
    padding-top: 62px !important;
    padding-bottom: 174px !important;
  }

  .home-hero h1 {
    font-size: clamp(42px, 13vw, 61px) !important;
  }

  .hero-search {
    grid-template-columns: auto minmax(0, 1fr) !important;
    padding: 7px 8px 8px 15px !important;
  }

  .hero-search button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 5px;
  }

  .hero-stats {
    bottom: 20px !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .hero-stats .stat {
    min-height: 78px !important;
    padding: 15px 11px !important;
    text-align: center !important;
  }

  .hero-stats .stat strong {
    font-size: 23px !important;
  }

  .hero-stats .stat span {
    font-size: 10px !important;
  }

  .section-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .process-card {
    min-height: 345px !important;
  }

  .process-card,
  .process-card img {
    grid-template-rows: 155px auto !important;
    height: auto;
  }

  .process-card img {
    height: 155px !important;
  }

  .answer-grid,
  .problem-grid,
  .pack-grid,
  .directory-grid,
  .hub-grid,
  .topic-grid {
    grid-template-columns: 1fr !important;
  }

  .method-grid {
    gap: 38px !important;
  }

  .footer-grid {
    gap: 34px !important;
  }
}

@media (max-width: 500px) {
  .process-grid {
    grid-template-columns: 1fr !important;
  }

  .process-card {
    grid-template-rows: 205px auto !important;
    min-height: 0 !important;
  }

  .process-card img {
    height: 205px !important;
  }

  .hero-stats {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: 32px !important;
  }

  .home-hero {
    min-height: auto !important;
  }

  .hero-content {
    padding-bottom: 50px !important;
  }

  .hero-stats .stat {
    border-top: 0 !important;
  }

  .start-card,
  .answer-card > a,
  .problem-card,
  .pack-card {
    padding: 21px !important;
  }

  .solution-panel,
  .solution-route,
  .solution-box {
    padding: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .answer-sidebar,
  .article-sidebar,
  .article-toc,
  .search-suggestions {
    display: none !important;
  }

  body,
  .answer-page,
  .article-page,
  .question-page {
    color: #000 !important;
    background: #fff !important;
  }

  .answer-main,
  .article-main,
  .question-main {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Mobile navigation and flow safeguards (kept last to beat legacy layout rules). */
.home-hero {
  display: block !important;
}

@media (max-width: 1040px) {
  .menu-button {
    display: inline-grid !important;
    place-items: center;
  }

  .main-nav {
    display: none !important;
  }

  .main-nav.open,
  .main-nav.is-open,
  .main-nav[data-open="true"],
  .site-header.menu-open .main-nav,
  .site-header.nav-open .main-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
}


/* ========================================================================
   Professional V2 — unique production photography, stronger hierarchy,
   customer-facing presentation and guaranteed text contrast.
   ======================================================================== */
:root{
  --v2-navy:#061b2d;
  --v2-navy-2:#0b304b;
  --v2-blue:#106b9f;
  --v2-teal:#087b7d;
  --v2-teal-dark:#075e61;
  --v2-coral:#d56b3e;
  --v2-gold:#d49a2b;
  --v2-violet:#6659a5;
  --v2-ink:#102638;
  --v2-copy:#43596a;
  --v2-soft:#f4f8fa;
  --v2-line:#d6e2e8;
}
body{background:#f6f8fa!important;color:var(--v2-ink)!important}
body p,body li{color:var(--v2-copy)}
.site-header{background:rgba(255,255,255,.985)!important;border-bottom:1px solid #cfdae1!important;box-shadow:0 8px 30px rgba(5,29,48,.07)!important}
.header-main{min-height:78px!important}
.brand-name{font-weight:900!important;letter-spacing:-.052em!important}
.brand-name::before{background:linear-gradient(180deg,#087b7d 0%,#2f94a7 52%,#d56b3e 100%)!important}
.brand-name span{background:linear-gradient(135deg,#d56b3e,#b9502d)!important;box-shadow:0 5px 13px rgba(213,107,62,.24)}
.main-nav>a{color:#243d50!important;font-weight:760!important}
.main-nav>a:hover{background:#eaf4f6!important;color:#075e61!important}
.main-nav .nav-search{background:linear-gradient(135deg,var(--v2-navy),var(--v2-navy-2))!important;border-color:var(--v2-navy)!important;box-shadow:0 10px 24px rgba(6,27,45,.17)!important}

/* Hero: the image remains visible while every word sits on a dependable dark field. */
.home-hero{min-height:650px!important;background:var(--v2-navy)!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.12)}
.hero-media{background-position:center 48%!important;filter:saturate(.93) contrast(1.05) brightness(.86)!important;transform:scale(1.006)!important}
.hero-shade{background:linear-gradient(90deg,rgba(3,19,33,.985) 0%,rgba(4,24,40,.94) 38%,rgba(5,29,47,.75) 61%,rgba(6,30,48,.34) 82%,rgba(6,30,48,.20) 100%)!important}
.home-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,transparent 44%,rgba(3,19,33,.45) 100%)}
.hero-content{z-index:20!important;max-width:900px!important;padding-top:clamp(72px,7vw,104px)!important}
.hero-kicker{color:#a8e2e4!important;text-shadow:0 2px 9px rgba(0,0,0,.45)}
.home-hero h1{max-width:850px!important;color:#fff!important;font-size:clamp(49px,5.7vw,78px)!important;line-height:1.01!important;text-shadow:0 4px 30px rgba(0,0,0,.42)!important}
.home-hero h1 em{color:#a9e6e4!important}
.hero-content>p{max-width:760px!important;color:#edf5f8!important;font-size:clamp(18px,1.4vw,21px)!important;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.hero-search{border:1px solid rgba(255,255,255,.68)!important;background:#fff!important;box-shadow:0 24px 65px rgba(0,0,0,.34)!important}
.hero-search input{color:#102638!important}
.hero-search button{background:linear-gradient(135deg,#d56b3e,#b84e2d)!important;box-shadow:0 9px 22px rgba(184,78,45,.25)!important}
.hero-search button:hover{background:linear-gradient(135deg,#bf5831,#9f4126)!important}
.popular-searches>span,.popular-searches a{color:#f0f7fa!important;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.popular-searches a{background:rgba(5,29,47,.58)!important;border-color:rgba(255,255,255,.34)!important;backdrop-filter:blur(6px)}
.hero-stats{background:rgba(5,26,43,.91)!important;border:1px solid rgba(255,255,255,.29)!important;box-shadow:0 22px 55px rgba(0,0,0,.28)!important}
.hero-stats .stat strong{color:#fff!important}
.hero-stats .stat span{color:#d5e5ed!important}
.search-suggestions,.hero-search .search-suggestions{z-index:2147483640!important;background:#fff!important;color:#102638!important;box-shadow:0 32px 90px rgba(2,18,31,.38)!important}

/* Production journey: larger cards, distinct photographs and clearer steps. */
.production-stage-section{padding-top:clamp(68px,6vw,94px)!important;background:linear-gradient(180deg,#edf4f7 0%,#f8fafb 48%,#fff 100%)!important;border-top:0!important}
.production-stage-section::before{height:6px!important;background:linear-gradient(90deg,#087b7d 0%,#1694a1 26%,#106b9f 52%,#6659a5 76%,#d56b3e 100%)!important}
.production-stage-section .section-heading h2{color:var(--v2-navy)!important}
.production-stage-section .section-heading p{color:#496174!important;font-size:17px!important}
.production-stage-section .process-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px!important}
.production-stage-section .process-card{grid-template-rows:210px minmax(0,1fr)!important;min-height:430px!important;border:1px solid #cfdae1!important;border-radius:20px!important;background:#fff!important;box-shadow:0 14px 36px rgba(5,29,48,.09)!important}
.production-stage-section .process-card::before{content:"";position:absolute;z-index:5;top:0;right:0;left:0;height:5px;background:#087b7d}
.production-stage-section .process-card:nth-child(4n+2)::before{background:#106b9f}
.production-stage-section .process-card:nth-child(4n+3)::before{background:#6659a5}
.production-stage-section .process-card:nth-child(4n)::before{background:#d56b3e}
.production-stage-section .process-card:hover{border-color:#a8c5cf!important;box-shadow:0 23px 55px rgba(5,29,48,.15)!important;transform:translateY(-7px)!important}
.production-stage-section .process-card img{height:210px!important;filter:saturate(.92) contrast(1.05)!important}
.production-stage-section .process-card>div{padding:23px 22px 25px!important;background:#fff!important}
.production-stage-section .process-card>div>span:first-child{margin-bottom:12px!important;color:#075e61!important;background:#dff2f1!important;font-size:10px!important}
.production-stage-section .process-card h3{color:#071e31!important;font-size:21px!important;line-height:1.18!important}
.production-stage-section .process-card p{color:#52687a!important;font-size:14px!important;line-height:1.55!important}
.production-stage-section .process-card .text-link{margin-top:auto!important;padding-top:15px!important;color:#075e61!important;font-size:14px!important}
.production-stage-section .process-card:nth-child(9){grid-column:2}

/* Clear section zoning and more distinctive customer pathways. */
.start-section{background:linear-gradient(180deg,#fff 0%,#f5f9fa 100%)!important}
.problem-section{background:linear-gradient(180deg,#fff5ef 0%,#fffaf7 100%)!important;border-color:#f0d6c8!important}
.pack-section{background:linear-gradient(180deg,#eaf7f6 0%,#f7fbfb 100%)!important;border-color:#cfe6e3!important}
.section-violet{background:linear-gradient(180deg,#f1eff9 0%,#faf9fd 100%)!important;border-color:#ddd7ee!important}
.industry-section{background:linear-gradient(180deg,#fff8e9 0%,#fffdf8 100%)!important;border-color:#eadfbd!important}
.section-heading h2{color:#061b2d!important}
.section-heading p{color:#4c6273!important}
.problem-card,.pack-card,.answer-card,.directory-card,.source-card{box-shadow:0 8px 24px rgba(5,29,48,.065)!important}
.problem-card{border-top:4px solid #d56b3e!important}
.pack-card{border-top:4px solid #087b7d!important}
.answer-card{border-top:4px solid #6659a5!important}
.problem-card h3,.pack-card h3,.answer-card h3{color:#071e31!important}
.problem-card p,.pack-card p,.answer-card p{color:#506778!important}
.industry-grid a,.industry-links a,.industry-list a{color:#203b4f!important;background:#fff!important;box-shadow:0 4px 14px rgba(5,29,48,.045)}
.industry-grid a:hover,.industry-links a:hover,.industry-list a:hover{color:#075e61!important;background:#eef8f7!important}

/* Page and question heroes always retain white text, regardless of the underlying image or gradient. */
.page-hero,.directory-hero,.hub-hero,.archive-hero,.search-hero,.index-hero,.question-hero,.answer-hero,.article-hero{background:linear-gradient(125deg,#061b2d 0%,#0b3653 58%,#087b7d 135%)!important;color:#fff!important}
.page-hero h1,.directory-hero h1,.hub-hero h1,.archive-hero h1,.search-hero h1,.index-hero h1,.question-hero h1,.answer-hero h1,.article-hero h1{color:#fff!important;text-shadow:0 3px 20px rgba(0,0,0,.28)}
.page-hero p,.directory-hero p,.hub-hero p,.archive-hero p,.search-hero p,.index-hero p,.question-hero p,.answer-hero p,.article-hero p{color:#dbe9ef!important}
.page-hero .eyebrow,.directory-hero .eyebrow,.hub-hero .eyebrow,.archive-hero .eyebrow,.search-hero .eyebrow,.index-hero .eyebrow,.question-hero .eyebrow,.answer-hero .eyebrow,.article-hero .eyebrow{color:#a9e6e4!important}
.breadcrumbs,.breadcrumbs a,.breadcrumbs span{color:#e2edf2!important}
.quick-answer-card,.answer-summary,.direct-answer{border-top-color:#087b7d!important;background:linear-gradient(180deg,#eaf7f6,#fff)!important}
.checks-panel,.checks-section{background:linear-gradient(180deg,#eff8f4,#fff)!important}
.causes-panel,.causes-section{background:linear-gradient(180deg,#fff8e8,#fff)!important}
.actions-panel,.action-section,.improvement-panel{background:linear-gradient(180deg,#eef6fb,#fff)!important;border-top-color:#106b9f!important}
.faq-panel,.faq-section{background:linear-gradient(180deg,#f4f1fb,#fff)!important}
.solution-panel,.solution-route,.solution-box{background:linear-gradient(135deg,#061b2d,#0b3653)!important}
.solution-panel p,.solution-route p,.solution-box p{color:#dbe9ef!important}

/* Footer wording and contrast. */
.method-section{background:radial-gradient(circle at 84% 14%,rgba(22,148,161,.25),transparent 27rem),linear-gradient(135deg,#061b2d,#0b3653)!important}
.method-section p{color:#dce9ef!important}
.site-footer{background:#041522!important;border-top-color:#087b7d!important}
.site-footer a{color:#c9d9e2!important}
.site-footer a:hover{color:#fff!important}
.footer-brand p,.footer-note{color:#a9bbc7!important}
.footer-bottom{color:#98adb9!important}

@media(max-width:1280px){
  .production-stage-section .process-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .production-stage-section .process-card:nth-child(9){grid-column:auto}
}
@media(max-width:900px){
  .production-stage-section .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .production-stage-section .process-card{grid-template-rows:190px minmax(0,1fr)!important;min-height:405px!important}
  .production-stage-section .process-card img{height:190px!important}
  .hero-shade{background:linear-gradient(90deg,rgba(3,19,33,.98) 0%,rgba(4,24,40,.91) 66%,rgba(5,29,47,.64) 100%)!important}
}
@media(max-width:560px){
  .home-hero h1{font-size:clamp(42px,12.4vw,58px)!important}
  .hero-content>p{font-size:17px!important}
  .production-stage-section .process-grid{grid-template-columns:1fr!important}
  .production-stage-section .process-card{grid-template-rows:220px auto!important;min-height:0!important}
  .production-stage-section .process-card img{height:220px!important}
  .hero-shade{background:linear-gradient(90deg,rgba(3,19,33,.985),rgba(5,29,47,.84))!important}
}

/* Prevent decorative elements or long cards from creating a horizontal page scrollbar. */
html,body{max-width:100%;overflow-x:clip!important}
@supports not (overflow:clip){html,body{overflow-x:hidden!important}}

/* ========================================================================== 
   V3 INDUSTRIAL EDITORIAL REDESIGN — distinct production photography and a
   calmer, higher-value visual system. Content, URLs and search structure stay
   unchanged.
   ========================================================================== */

:root{
  --v3-navy:#061a2b;
  --v3-navy-2:#0b2c45;
  --v3-teal:#087a78;
  --v3-teal-dark:#05625f;
  --v3-copper:#c76339;
  --v3-canvas:#f3f6f8;
  --v3-line:#d6e0e6;
  --v3-copy:#405568;
  --v3-shadow:0 16px 44px rgba(6,26,43,.10);
  --v3-shadow-hover:0 24px 58px rgba(6,26,43,.16);
}

/* Brand and navigation: quieter, sharper and easier to scan. */
.site-header{
  border-bottom:1px solid #dbe3e8!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 8px 28px rgba(6,26,43,.055)!important;
}
.header-main{min-height:76px!important}
.brand-name{
  gap:.26em!important;
  font-size:clamp(20px,1.45vw,24px)!important;
  font-weight:850!important;
  letter-spacing:-.038em!important;
}
.brand-name::before{
  width:4px!important;
  height:30px!important;
  margin-right:10px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,var(--v3-teal),var(--v3-copper))!important;
  box-shadow:none!important;
}
.brand-name span{
  display:inline!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border-radius:0!important;
  color:var(--v3-copper)!important;
  background:transparent!important;
  font-size:1em!important;
  letter-spacing:inherit!important;
}
.main-nav{gap:3px!important}
.main-nav>a{
  padding:10px 12px!important;
  color:#263e52!important;
  font-size:13.5px!important;
  font-weight:720!important;
}
.main-nav>a:hover,
.main-nav>a[aria-current="page"]{background:#edf5f5!important;color:var(--v3-teal-dark)!important}
.main-nav .nav-search{
  margin-left:10px!important;
  padding:10px 17px!important;
  border-radius:9px!important;
  border-color:var(--v3-navy)!important;
  background:var(--v3-navy)!important;
  box-shadow:0 8px 18px rgba(6,26,43,.14)!important;
}

/* Hero: modern automation photography with dependable contrast behind copy. */
.home-hero{
  min-height:640px!important;
  background:var(--v3-navy)!important;
  box-shadow:inset 0 -1px rgba(255,255,255,.12)!important;
}
.hero-media{
  background-position:center 48%!important;
  filter:saturate(.92) contrast(1.08) brightness(.93)!important;
  transform:scale(1.005)!important;
}
.hero-shade{
  background:
    linear-gradient(90deg,rgba(3,16,28,.99) 0%,rgba(4,22,37,.96) 35%,rgba(5,28,46,.78) 60%,rgba(5,28,46,.32) 82%,rgba(5,28,46,.16) 100%)!important;
}
.home-hero::before{
  background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,transparent 45%,rgba(3,18,30,.48) 100%)!important;
}
.hero-content{
  max-width:830px!important;
  padding-top:clamp(72px,7vw,108px)!important;
  padding-bottom:clamp(145px,13vw,190px)!important;
}
.hero-kicker{color:#a8deda!important;letter-spacing:.15em!important}
.home-hero h1{
  max-width:820px!important;
  font-size:clamp(48px,5.45vw,76px)!important;
  font-weight:770!important;
  line-height:1.015!important;
  letter-spacing:-.057em!important;
  text-shadow:0 5px 32px rgba(0,0,0,.42)!important;
}
.home-hero h1 em{color:#f0a27d!important}
.hero-content>p{
  max-width:735px!important;
  color:#edf4f7!important;
  font-size:clamp(17px,1.35vw,20px)!important;
  line-height:1.58!important;
  text-shadow:0 2px 15px rgba(0,0,0,.4)!important;
}
.hero-search{
  width:min(100%,780px)!important;
  min-height:64px!important;
  padding:6px 7px 6px 18px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 25px 68px rgba(0,0,0,.35)!important;
}
.hero-search button{
  min-height:49px!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,var(--v3-copper),#a94727)!important;
  box-shadow:0 8px 20px rgba(169,71,39,.28)!important;
}
.hero-search button:hover{background:linear-gradient(135deg,#b9522f,#8f3b22)!important}
.popular-searches a{
  color:#f5f9fb!important;
  background:rgba(4,25,42,.66)!important;
  border-color:rgba(255,255,255,.30)!important;
}
.hero-stats{
  bottom:26px!important;
  border-radius:12px!important;
  background:rgba(4,23,38,.90)!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:0 20px 52px rgba(0,0,0,.30)!important;
}
.hero-stats .stat{min-height:82px!important;padding:17px 24px!important}
.hero-stats .stat strong{font-size:25px!important}

/* Production journey: compact editorial rows rather than large image tiles. */
.production-stage-section{
  padding-top:clamp(70px,6vw,96px)!important;
  padding-bottom:clamp(78px,7vw,110px)!important;
  background:
    radial-gradient(circle at 91% 8%,rgba(8,122,120,.075),transparent 29rem),
    linear-gradient(180deg,#f1f5f7 0%,#f8fafb 54%,#fff 100%)!important;
  border-top:0!important;
  border-bottom:1px solid #dde5ea!important;
}
.production-stage-section::before{
  height:4px!important;
  background:linear-gradient(90deg,var(--v3-teal) 0%,#0f6a90 48%,var(--v3-copper) 100%)!important;
}
.production-stage-section .section-heading{
  align-items:flex-end!important;
  margin-bottom:38px!important;
}
.production-stage-section .section-heading>div{max-width:850px!important}
.production-stage-section .section-heading h2{
  max-width:800px!important;
  color:var(--v3-navy)!important;
  font-size:clamp(34px,3.35vw,48px)!important;
  font-weight:760!important;
  line-height:1.08!important;
}
.production-stage-section .section-heading p{
  max-width:760px!important;
  color:#486073!important;
  font-size:16px!important;
  line-height:1.58!important;
}
.production-stage-section .process-grid{
  counter-reset:production-stage;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px!important;
  align-items:stretch!important;
}
.production-stage-section .process-card{
  counter-increment:production-stage;
  display:grid!important;
  grid-template-columns:228px minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  min-height:232px!important;
  overflow:hidden!important;
  border:1px solid var(--v3-line)!important;
  border-radius:18px!important;
  color:var(--v3-navy)!important;
  background:#fff!important;
  box-shadow:var(--v3-shadow)!important;
  transform:translateZ(0)!important;
}
.production-stage-section .process-card::before{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  top:0!important;
  right:auto!important;
  bottom:0!important;
  left:0!important;
  width:4px!important;
  height:auto!important;
  background:var(--v3-teal)!important;
}
.production-stage-section .process-card:nth-child(3n+2)::before{background:#176b94!important}
.production-stage-section .process-card:nth-child(3n)::before{background:var(--v3-copper)!important}
.production-stage-section .process-card:hover{
  border-color:#a9beca!important;
  box-shadow:var(--v3-shadow-hover)!important;
  transform:translateY(-5px)!important;
}
.production-stage-section .process-card img{
  position:relative!important;
  inset:auto!important;
  grid-column:1!important;
  grid-row:1!important;
  width:228px!important;
  height:100%!important;
  min-height:232px!important;
  object-fit:cover!important;
  filter:saturate(.90) contrast(1.055)!important;
  transform:none!important;
}
.production-stage-section .process-card:hover img{
  filter:saturate(1) contrast(1.04)!important;
  transform:scale(1.025)!important;
}
.production-stage-section .process-card .image-overlay{display:none!important}
.production-stage-section .process-card>div{
  position:relative!important;
  inset:auto!important;
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  min-width:0!important;
  min-height:232px!important;
  padding:25px 27px 23px!important;
  color:var(--v3-navy)!important;
  background:#fff!important;
}
.production-stage-section .process-card>div::before{
  content:counter(production-stage,decimal-leading-zero);
  position:absolute;
  top:21px;
  right:24px;
  color:#d8e3e8;
  font-size:30px;
  font-weight:850;
  line-height:1;
  letter-spacing:-.05em;
}
.production-stage-section .process-card>div>span:first-child{
  max-width:calc(100% - 52px)!important;
  margin:0 0 12px!important;
  padding:5px 9px!important;
  color:var(--v3-teal-dark)!important;
  background:#e4f3f2!important;
  font-size:9.5px!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
}
.production-stage-section .process-card h3{
  max-width:92%!important;
  margin:0 0 9px!important;
  color:var(--v3-navy)!important;
  font-size:21px!important;
  font-weight:780!important;
  line-height:1.18!important;
  letter-spacing:-.03em!important;
}
.production-stage-section .process-card p{
  margin:0!important;
  color:#52687a!important;
  font-size:13.5px!important;
  line-height:1.52!important;
}
.production-stage-section .process-card .text-link{
  margin-top:auto!important;
  padding-top:15px!important;
  color:var(--v3-teal-dark)!important;
  font-size:13px!important;
  font-weight:850!important;
}
.production-stage-section .process-card:nth-child(9){grid-column:auto!important}

/* Sharper shared surfaces without changing any copy or structure. */
.section-heading h2{font-weight:760!important;letter-spacing:-.04em!important}
.start-card,.problem-card,.pack-card,.answer-card,.directory-card,.source-card{
  border-radius:16px!important;
  border-color:#d8e2e8!important;
  box-shadow:0 9px 28px rgba(6,26,43,.07)!important;
}
.start-card:hover,.problem-card:hover,.pack-card:hover,.answer-card:hover,.directory-card:hover,.source-card:hover{
  box-shadow:0 18px 42px rgba(6,26,43,.12)!important;
}
.problem-section{background:linear-gradient(180deg,#faf6f3,#fff)!important}
.pack-section{background:linear-gradient(180deg,#f1f7f7,#fff)!important}
.section-violet{background:linear-gradient(180deg,#f5f4f8,#fff)!important}
.industry-section{background:linear-gradient(180deg,#faf8f2,#fff)!important}
.page-hero,.directory-hero,.hub-hero,.archive-hero,.search-hero,.index-hero,.question-hero,.answer-hero,.article-hero{
  background:linear-gradient(125deg,var(--v3-navy) 0%,var(--v3-navy-2) 64%,var(--v3-teal) 145%)!important;
}
.site-footer{background:#041522!important}

/* Do not allow any card, image or decorative rule to create a page scrollbar. */
html,body,main,.section,.shell{max-width:100%!important}
html,body{overflow-x:clip!important}
@supports not (overflow:clip){html,body{overflow-x:hidden!important}}

@media(max-width:1150px){
  .production-stage-section .process-grid{grid-template-columns:1fr!important}
  .production-stage-section .process-card{grid-template-columns:260px minmax(0,1fr)!important}
  .production-stage-section .process-card img{width:260px!important}
}
@media(max-width:780px){
  .header-main{min-height:72px!important}
  .main-nav{top:72px!important}
  .production-stage-section .process-card{grid-template-columns:190px minmax(0,1fr)!important}
  .production-stage-section .process-card img{width:190px!important}
  .production-stage-section .process-card>div{padding:23px 22px 21px!important}
  .production-stage-section .process-card h3{font-size:19px!important}
  .hero-shade{background:linear-gradient(90deg,rgba(3,16,28,.99) 0%,rgba(4,22,37,.94) 66%,rgba(5,28,46,.68) 100%)!important}
}
@media(max-width:560px){
  .home-hero{min-height:670px!important}
  .home-hero h1{font-size:clamp(40px,12vw,56px)!important}
  .hero-content>p{font-size:16.5px!important}
  .production-stage-section .process-card{
    grid-template-columns:1fr!important;
    grid-template-rows:205px auto!important;
    min-height:0!important;
  }
  .production-stage-section .process-card img{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:205px!important;
    min-height:205px!important;
  }
  .production-stage-section .process-card>div{
    grid-column:1!important;
    grid-row:2!important;
    min-height:235px!important;
  }
  .production-stage-section .process-card>div::before{top:22px!important;right:22px!important}
}

/* ========================================================================
   Production Answers — Professional V4
   Darker executive palette, PA wordmark and packaging-line hero.
   Content and page structure remain unchanged.
   ======================================================================== */
:root{
  --v4-obsidian:#030b12;
  --v4-charcoal:#06131f;
  --v4-navy:#081d2d;
  --v4-navy-2:#0d2c42;
  --v4-slate:#15384d;
  --v4-teal:#168e8a;
  --v4-teal-light:#7ed5d0;
  --v4-copper:#d97648;
  --v4-copper-dark:#aa4b2c;
  --v4-cream:#f7f4ef;
  --v4-canvas:#f2f5f7;
  --v4-card:#fbfcfd;
  --v4-line:#cfd9e0;
  --v4-ink:#0c2030;
  --v4-copy:#405769;
  --v4-shadow:0 18px 48px rgba(3,17,29,.13);
  --v4-shadow-hover:0 28px 68px rgba(3,17,29,.20);
}

html,body{background:var(--v4-canvas)!important}
body{color:var(--v4-ink)!important}
body p,body li{color:var(--v4-copy)}
::selection{background:var(--v4-copper)!important;color:#fff!important}

/* Dark executive navigation and the new Production Answers wordmark. */
.site-header{
  background:rgba(4,14,23,.985)!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 13px 36px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(18px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(125%)!important;
}
.header-main{min-height:82px!important}
.brand,.brand:hover{color:#fff!important}
.brand-name{
  gap:.30em!important;
  color:#fff!important;
  font-size:clamp(18px,1.45vw,23px)!important;
  font-weight:900!important;
  letter-spacing:-.046em!important;
}
.brand-name::before{
  content:"PA"!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  margin-right:8px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:10px!important;
  color:#fff!important;
  background:linear-gradient(145deg,var(--v4-copper),var(--v4-copper-dark))!important;
  box-shadow:0 10px 24px rgba(0,0,0,.28)!important;
  font-size:14px!important;
  font-weight:950!important;
  letter-spacing:-.03em!important;
  line-height:1!important;
}
.brand-name span{
  display:inline!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border-radius:0!important;
  color:#f0a27d!important;
  background:none!important;
  box-shadow:none!important;
  font-size:1em!important;
  letter-spacing:inherit!important;
}
.main-nav>a{
  color:#d7e3ea!important;
  font-weight:720!important;
}
.main-nav>a:hover,.main-nav>a[aria-current="page"]{
  color:#fff!important;
  background:rgba(255,255,255,.075)!important;
}
.main-nav>a[aria-current="page"]::after{background:var(--v4-copper)!important}
.main-nav .nav-search{
  color:#fff!important;
  background:linear-gradient(135deg,var(--v4-copper),var(--v4-copper-dark))!important;
  border-color:var(--v4-copper)!important;
  box-shadow:0 11px 25px rgba(0,0,0,.28)!important;
}
.main-nav .nav-search:hover{
  color:#fff!important;
  background:linear-gradient(135deg,#e18458,#b55231)!important;
  border-color:#e18458!important;
}
.menu-button{
  color:#fff!important;
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.18)!important;
}

/* A true packaging-line hero with a deeper premium overlay. */
.home-hero{
  min-height:660px!important;
  background:var(--v4-charcoal)!important;
  border-bottom:4px solid var(--v4-copper)!important;
}
.hero-media{
  background-position:center 52%!important;
  filter:saturate(.82) contrast(1.11) brightness(.78)!important;
  transform:scale(1.008)!important;
}
.hero-shade{
  background:
    linear-gradient(90deg,rgba(2,9,16,.995) 0%,rgba(4,17,28,.965) 34%,rgba(5,24,39,.82) 58%,rgba(6,28,45,.42) 80%,rgba(6,28,45,.18) 100%)!important;
}
.home-hero::before{
  background:
    linear-gradient(180deg,rgba(0,0,0,.13) 0%,transparent 44%,rgba(2,11,19,.61) 100%),
    radial-gradient(circle at 78% 50%,rgba(22,142,138,.13),transparent 31rem)!important;
}
.hero-content{max-width:865px!important}
.hero-kicker{color:var(--v4-teal-light)!important}
.home-hero h1{
  color:#fff!important;
  font-weight:790!important;
  text-shadow:0 6px 34px rgba(0,0,0,.56)!important;
}
.home-hero h1 em{color:#f0a27d!important}
.hero-content>p{color:#edf4f7!important;text-shadow:0 3px 18px rgba(0,0,0,.55)!important}
.hero-search{
  border:1px solid rgba(255,255,255,.82)!important;
  background:#fff!important;
  box-shadow:0 28px 72px rgba(0,0,0,.42)!important;
}
.hero-search button{
  background:linear-gradient(135deg,var(--v4-copper),var(--v4-copper-dark))!important;
  box-shadow:0 9px 22px rgba(93,34,17,.34)!important;
}
.hero-search button:hover{background:linear-gradient(135deg,#e18458,#9e4025)!important}
.popular-searches a{
  color:#fff!important;
  background:rgba(3,17,28,.76)!important;
  border-color:rgba(255,255,255,.28)!important;
}
.hero-stats{
  background:rgba(3,14,24,.94)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.40)!important;
}
.hero-stats .stat{border-color:rgba(255,255,255,.13)!important}
.hero-stats .stat strong{color:#fff!important}
.hero-stats .stat span{color:#cbdbe4!important}

/* Dark production-stage band creates a stronger professional break. */
.production-stage-section{
  background:
    radial-gradient(circle at 90% 8%,rgba(22,142,138,.17),transparent 33rem),
    radial-gradient(circle at 5% 88%,rgba(217,118,72,.10),transparent 28rem),
    linear-gradient(145deg,#06131f 0%,#0a2235 58%,#0d2c42 100%)!important;
  border-top:0!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
}
.production-stage-section::before{
  height:4px!important;
  background:linear-gradient(90deg,var(--v4-copper) 0%,var(--v4-teal) 50%,#3a6f91 100%)!important;
}
.production-stage-section .kicker{color:var(--v4-teal-light)!important}
.production-stage-section .section-heading h2{color:#fff!important;text-shadow:0 3px 20px rgba(0,0,0,.22)!important}
.production-stage-section .section-heading p{color:#c5d5de!important}
.production-stage-section .section-heading .text-link{color:#f0a27d!important}
.production-stage-section .section-heading .text-link:hover{color:#ffc0a2!important}
.production-stage-section .process-card{
  border-color:rgba(255,255,255,.17)!important;
  background:var(--v4-card)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.24)!important;
}
.production-stage-section .process-card:hover{
  border-color:rgba(126,213,208,.48)!important;
  box-shadow:0 30px 70px rgba(0,0,0,.34)!important;
}
.production-stage-section .process-card::before{background:var(--v4-copper)!important}
.production-stage-section .process-card:nth-child(3n+2)::before{background:var(--v4-teal)!important}
.production-stage-section .process-card:nth-child(3n)::before{background:#487da1!important}
.production-stage-section .process-card>div{background:var(--v4-card)!important}
.production-stage-section .process-card>div::before{color:#d6e0e6!important}
.production-stage-section .process-card h3{color:var(--v4-ink)!important}
.production-stage-section .process-card p{color:#4d6476!important}
.production-stage-section .process-card>div>span:first-child{
  color:#075d5a!important;
  background:#dff1ef!important;
}
.production-stage-section .process-card .text-link{color:#075d5a!important}

/* Strong but controlled section contrast below the production journey. */
.start-section{background:linear-gradient(180deg,#f6f8fa 0%,#fff 100%)!important}
.pack-section{background:linear-gradient(180deg,#edf5f5 0%,#fbfdfd 100%)!important}
.problem-section{background:linear-gradient(180deg,#f7f2ee 0%,#fff 100%)!important}
.industry-section{background:linear-gradient(180deg,#f4f1ea 0%,#fbfaf7 100%)!important}
.start-card,.problem-card,.pack-card,.answer-card,.directory-card,.source-card{
  border-color:var(--v4-line)!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(4,20,33,.08)!important;
}
.start-card:hover,.problem-card:hover,.pack-card:hover,.answer-card:hover,.directory-card:hover,.source-card:hover{
  border-color:#a8bac5!important;
  box-shadow:0 22px 52px rgba(4,20,33,.15)!important;
}
.problem-card{border-top-color:var(--v4-copper)!important}
.pack-card{border-top-color:var(--v4-teal)!important}
.answer-card{border-top-color:#4a7194!important}
.section-heading h2{color:var(--v4-ink)!important}
.section-heading p{color:#4a6071!important}

/* Dark application-preparation panel and darker internal page headers. */
.method-section{
  background:
    radial-gradient(circle at 82% 13%,rgba(22,142,138,.19),transparent 29rem),
    linear-gradient(135deg,#030b12 0%,#071a2b 48%,#0b2c43 100%)!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
.method-section .kicker{color:var(--v4-teal-light)!important}
.method-section h2{color:#fff!important}
.method-section p{color:#ccdbe4!important}
.method-section .button{
  background:linear-gradient(135deg,var(--v4-copper),var(--v4-copper-dark))!important;
  border-color:var(--v4-copper)!important;
}
.method-steps li{
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.14)!important;
}
.method-steps li>span{background:var(--v4-copper)!important;color:#fff!important}
.method-steps strong{color:#fff!important}
.method-steps p{color:#c6d6df!important}
.page-hero,.directory-hero,.hub-hero,.archive-hero,.search-hero,.index-hero,.question-hero,.answer-hero,.article-hero{
  background:
    radial-gradient(circle at 88% 10%,rgba(22,142,138,.18),transparent 32rem),
    linear-gradient(125deg,#030b12 0%,#071a2b 56%,#0d344d 100%)!important;
}
.site-footer{background:#02090f!important;border-top:1px solid rgba(255,255,255,.08)!important}
.site-footer h2,.site-footer .brand-name{color:#fff!important}
.site-footer a{color:#b8cbd6!important}
.site-footer a:hover{color:#fff!important}
.footer-note,.footer-bottom{color:#829aa8!important}

/* Search results and dropdowns must always remain readable above sections. */
.search-suggestions,.hero-search .search-suggestions{
  z-index:2147483640!important;
  border-color:#bfcdd6!important;
  background:#fff!important;
  color:var(--v4-ink)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.38)!important;
}
.search-suggestions a{color:var(--v4-ink)!important}
.search-suggestions a:hover{color:#064f50!important;background:#e9f5f4!important}

@media(max-width:1040px){
  .main-nav,.main-nav.open,.main-nav.is-open,.main-nav[data-open="true"],.site-header.menu-open .main-nav,.site-header.nav-open .main-nav{
    background:#06131f!important;
    border-bottom-color:rgba(255,255,255,.12)!important;
    box-shadow:0 24px 55px rgba(0,0,0,.34)!important;
  }
  .main-nav>a{color:#d7e3ea!important}
  .main-nav>a:hover{color:#fff!important;background:rgba(255,255,255,.075)!important}
}
@media(max-width:780px){
  .brand-name{font-size:17px!important}
  .brand-name::before{width:38px!important;height:38px!important;margin-right:5px!important}
  .hero-media{background-position:58% center!important}
  .hero-shade{background:linear-gradient(90deg,rgba(2,9,16,.995) 0%,rgba(4,17,28,.95) 67%,rgba(5,27,44,.64) 100%)!important}
}
@media(max-width:520px){
  .brand-name{gap:.24em!important;font-size:15.5px!important}
  .brand-name::before{width:36px!important;height:36px!important;font-size:12px!important}
  .hero-media{background-position:62% center!important}
  .production-stage-section .section-heading h2{font-size:clamp(34px,10vw,44px)!important}
}