/*
 * Premium refinement layer
 *
 * The existing landing stylesheet owns component behavior and the established
 * square-edged editorial system. This layer improves hierarchy, contrast,
 * spacing, and responsive composition without changing the content model.
 */

:root {
  --refine-canvas: var(--canvas);
  --refine-ink: var(--ink);
  --refine-copy: var(--ink-soft);
  --refine-line: var(--line-structural);
  --refine-line-strong: var(--line-structural-strong);
  --refine-brass: var(--brass);
}

html {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--scrollbar-track); }
html::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
html::-webkit-scrollbar-thumb:active { background-color: var(--scrollbar-thumb-active); }

body {
  color: var(--refine-ink);
  background: #94a49d;
}

.page-atmosphere {
  background:
    radial-gradient(circle at 9% 12%, rgba(255, 255, 255, 0.74), transparent 29%),
    radial-gradient(circle at 84% 14%, rgba(226, 202, 142, 0.22), transparent 25%),
    radial-gradient(circle at 66% 76%, rgba(7, 88, 73, 0.13), transparent 34%),
    linear-gradient(135deg, #acbab4 0%, #8b9c95 54%, #c8d2ce 100%);
}

.site-frame {
  background:
    linear-gradient(135deg, rgba(244, 248, 246, 0.93), rgba(213, 224, 219, 0.88)),
    var(--refine-canvas);
  box-shadow:
    0 38px 100px rgba(18, 46, 39, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.site-header {
  min-height: 4.65rem;
  padding-inline: 1rem;
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(246, 249, 247, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 13px 34px rgba(22, 53, 45, 0.09);
}

.site-header.is-scrolled {
  background: rgba(247, 250, 248, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 15px 38px rgba(18, 49, 41, 0.14);
}

.brand { padding-inline: 0; }
.brand strong { color: var(--refine-ink); font-size: 1.18rem; letter-spacing: -0.025em; }
.brand span { color: #61746d; font-size: 0.7rem; }

.main-nav {
  gap: 0.9rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.main-nav a {
  position: relative;
  padding-inline: 0.3rem;
  color: #355149;
  background: transparent;
  box-shadow: none;
  font-size: 0.79rem;
}

.main-nav a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 0.28rem;
  width: 0;
  height: 1px;
  background: var(--brand);
  transform: translateX(50%);
  transition: width var(--duration-fast) var(--ease-out);
}

.main-nav a:hover,
.main-nav a[aria-current] {
  color: var(--brand-rich);
  background: transparent;
  box-shadow: none;
}

.main-nav a:hover::after,
.main-nav a[aria-current]::after { width: 100%; }

.button--primary {
  background: linear-gradient(135deg, #076151, #043f35);
  box-shadow:
    0 14px 30px rgba(2, 73, 60, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.button--primary:hover {
  background: linear-gradient(135deg, #08705d, #06493e);
  box-shadow:
    0 19px 38px rgba(2, 73, 60, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.hero {
  min-height: 52rem;
  padding: 1.15rem clamp(1.5rem, 3.5vw, 3.5rem) 1.2rem;
  background:
    radial-gradient(circle at 71% 43%, rgba(255, 255, 255, 0.44), transparent 29%),
    linear-gradient(90deg, rgba(191, 205, 199, 0.5) 0%, #e1e8e5 34%, #e5ebe8 100%);
}

.hero-main {
  position: relative;
  grid-template-columns: minmax(25rem, 0.95fr) minmax(35rem, 1.05fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  min-height: 37rem;
}

.hero-main::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 12.8rem;
  right: 1rem;
  left: 1rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 2%,
    rgba(185, 133, 53, 0.36) 12%,
    rgba(185, 133, 53, 0.7) 39%,
    rgba(7, 88, 73, 0.22) 58%,
    transparent 94%
  );
  pointer-events: none;
}

.hero-copy { max-width: 42rem; }

.hero-kicker {
  margin-bottom: 1.55rem;
  color: #35554c;
  border-bottom-color: var(--refine-line-strong);
  font-size: 0.75rem;
  font-weight: 560;
}

.hero h1 {
  max-width: 42rem;
  margin-bottom: 1.25rem;
  color: var(--refine-ink);
  font-size: clamp(3rem, 4.2vw, 4.65rem);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 1.2;
  text-wrap: balance;
}

.hero h1 em { color: #076050; }

.hero-lead {
  max-width: 36rem;
  margin-bottom: 1.7rem;
  color: var(--refine-copy);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 2.05;
}

.hero-actions { gap: 1rem; }
.hero-actions .button { min-width: 13.2rem; }

.credentials {
  margin-top: 1.45rem;
  color: #526b63;
  border-color: rgba(42, 82, 71, 0.2);
  font-size: 0.73rem;
}

.ecosystem-render-wrap { width: min(49rem, 100%); }
.hero-ecosystem-image {
  filter: drop-shadow(0 34px 48px rgba(27, 52, 46, 0.17));
  transform: scale(1.25);
}

.trust-strip {
  gap: 0;
  margin-top: 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--refine-line);
}

.trust-card {
  grid-template-columns: 8.25rem minmax(0, 1fr);
  min-height: 10.75rem;
  padding: 0.85rem 1.2rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.trust-card + .trust-card { border-right: 1px solid var(--refine-line); }
.trust-card img { width: 7.9rem; height: 7.9rem; }
.trust-card h3 { color: var(--refine-ink); font-size: 1.02rem; }
.trust-card p { color: #526b63; font-size: 0.76rem; }

.section { padding-block: clamp(5rem, 7.5vw, 8rem); }

.section-heading { max-width: 58rem; margin-bottom: 2.5rem; }
.section-heading--split { padding-bottom: 1.65rem; }

.section-label {
  margin-bottom: 0.65rem;
  color: var(--refine-brass);
  font-size: 0.72rem;
  letter-spacing: 0;
}

.section-label::before { background: var(--refine-brass); }

.section-heading h2,
.compact-heading h2,
.ecosystem-copy h2,
.assessment-copy h2 {
  color: var(--refine-ink);
  font-weight: 745;
  letter-spacing: -0.045em;
  line-height: 1.34;
  text-wrap: balance;
}

.section-heading p,
.compact-heading p,
.ecosystem-copy > p,
.assessment-copy > p {
  color: var(--refine-copy);
  font-size: 0.98rem;
}

.problem-explorer {
  grid-template-columns: minmax(30rem, 1fr) minmax(30rem, 1fr);
  border-color: var(--refine-line);
}

.problem-visual {
  min-height: 41rem;
  padding: 1.7rem 2.2rem 1.7rem 0;
  border-left-color: var(--refine-line);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.56), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 68%);
}

.problem-visual-number {
  color: rgba(7, 88, 73, 0.25);
  font-size: 3.6rem;
}

.problem-visual img {
  width: min(29rem, 94%);
  height: 27rem;
  filter: drop-shadow(0 25px 30px rgba(31, 58, 51, 0.16));
}

.problem-visual-copy { padding-top: 1.15rem; }
.problem-visual-copy strong { color: var(--refine-ink); font-size: 1.05rem; }
.problem-visual-copy span { color: #526b63; font-size: 0.78rem; }

.problem-explorer .problem-grid { grid-template-columns: 1fr; }

.problem-explorer .problem-card,
.problem-explorer .problem-card:nth-child(even),
.problem-explorer .problem-card:nth-last-child(-n + 2) {
  min-height: 6.82rem;
  padding: 1.05rem 1.25rem;
  border-right: 0;
  border-bottom: 1px solid var(--refine-line);
}

.problem-explorer .problem-card:last-child { border-bottom: 0; }
.problem-explorer .problem-card:hover { background: rgba(255, 255, 255, 0.3); }

.problem-explorer .problem-card[aria-pressed="true"] {
  border-inline-start: 0;
  background: rgba(248, 251, 249, 0.64);
  box-shadow: inset 0 0 0 1px var(--refine-line-strong);
}

.problem-explorer .problem-card[aria-pressed="true"]::after {
  left: 1.1rem;
  bottom: 0.7rem;
  color: #9b6c25;
  font-size: 0.6rem;
}

.problem-explorer .problem-card span { color: rgba(7, 88, 73, 0.34); font-size: 1.4rem; }
.problem-explorer .problem-text { color: #355149; font-size: 0.84rem; }
.section-closing { color: #355149; font-size: 0.9rem; }

.solutions-section { margin-bottom: clamp(5rem, 8vw, 8rem); }
.service-grid { column-gap: 2.5rem; }

.service-card {
  grid-template-columns: 10.5rem minmax(0, 1fr);
  min-height: 15.8rem;
  padding: 1.35rem 0.35rem 1.35rem 1.4rem;
  transition: background var(--duration-fast) var(--ease-out);
}

.service-card:nth-child(even) { padding-right: 2rem; border-right-color: var(--refine-line); }
.service-card img {
  width: 10rem;
  height: 10rem;
  filter: drop-shadow(0 22px 27px rgba(31, 58, 51, 0.16));
  transition: transform var(--duration-base) var(--ease-out);
}

.service-number { color: rgba(7, 88, 73, 0.2); font-size: 2.5rem; }
.service-card h3 { color: var(--refine-ink); font-size: 1.12rem; }
.service-card p { color: #506860; font-size: 0.81rem; }
.service-card li { color: #3e6057; font-size: 0.67rem; }

.compact-heading h2 { font-size: clamp(1.7rem, 2.6vw, 2.45rem); }
.tag-cloud span { color: #38584f; font-size: 0.74rem; }
.engagement-grid h3 { color: var(--refine-ink); font-size: 0.8rem; }
.engagement-grid p { color: #5a7069; font-size: 0.64rem; }

.flow-selector button {
  color: #4c675f;
  font-size: 0.77rem;
}

.flow-selector button[aria-pressed="true"] {
  color: var(--brand-rich);
  box-shadow: inset -3px 0 0 var(--brand);
}

.ecosystem-detail strong { color: var(--refine-ink); font-size: 0.81rem; }
.ecosystem-detail span { color: #59716a; font-size: 0.68rem; }

.process-list li { min-height: 11.5rem; }
.process-list i { color: #075849; font-size: 1.85rem; }
.process-list h3 { color: var(--refine-ink); font-size: 0.94rem; }
.process-list p { color: #576e67; font-size: 0.68rem; }

.scenario-card h3,
.advantage-grid h3 { color: var(--refine-ink); }
.scenario-card p { color: #506860; font-size: 0.81rem; }
.scenario-card small,
.advantage-grid p { color: #5a716a; }

.advisor-bio p { color: #425e56; }
.faq-list summary { color: var(--refine-ink); font-size: 0.88rem; }
.faq-list details p { color: #4d665e; font-size: 0.79rem; }

.assessment-section { border-color: var(--refine-line); }
.qualification-note p,
.privacy-note { color: #4c675f; }

.form-grid label { color: #2b4b42; font-size: 0.76rem; }
.form-grid input,
.form-grid select,
.form-grid textarea {
  border-bottom: 1px solid rgba(42, 82, 71, 0.2);
  color: var(--refine-ink);
  background: rgba(250, 252, 251, 0.56);
}

.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover { background: rgba(255, 255, 255, 0.72); }

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 -2px 0 #075849;
}

.form-grid textarea { resize: none; }

.field-error {
  display: block;
  min-height: 1.25rem;
  margin-top: -0.12rem;
  color: var(--danger);
  font-size: 0.66rem;
  font-weight: 520;
  line-height: 1.7;
}

.form-submit.button--primary {
  min-height: 3.75rem;
  color: #075849;
  font-size: 0.98rem;
}

.form-submit.button--primary:hover { color: #043f35; background: rgba(255, 255, 255, 0.24); }

.site-footer { color: #516960; }

@media (hover: hover) and (pointer: fine) {
  .service-card:hover { background: rgba(255, 255, 255, 0.22); }
  .service-card:hover img { transform: translateY(-0.35rem) scale(1.025); }
}

@media (max-width: 1180px) {
  .main-nav { gap: 0.45rem; }
  .hero-main { grid-template-columns: minmax(22rem, 0.9fr) minmax(30rem, 1.1fr); }
  .hero h1 { font-size: clamp(2.9rem, 4.7vw, 4rem); }
  .problem-explorer { grid-template-columns: minmax(25rem, 0.9fr) minmax(30rem, 1.1fr); }
  .service-card { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .service-card img { width: 8.2rem; height: 8.2rem; }
}

@media (max-width: 940px) {
  .site-header { grid-template-columns: 1fr auto auto; }
  .main-nav {
    right: 0;
    left: 0;
    justify-self: stretch;
    width: 100%;
    gap: 0.25rem;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: rgba(245, 249, 247, 0.97);
  }
  .main-nav a { justify-content: center; }
  .main-nav a::after { bottom: 0.12rem; }
  .hero-main::after { display: none; }
  .problem-explorer { grid-template-columns: 1fr; }
  .problem-visual { min-height: 29rem; padding-inline: 0; }
  .problem-visual img { height: 20rem; }
}

@media (max-width: 700px) {
  html { scrollbar-gutter: auto; }

  .site-frame { background: #e3eae7; }

  .site-header {
    top: 0;
    width: 100%;
    min-height: 4.55rem;
    margin-top: 0;
    padding-inline: 1rem;
    border-inline: 0;
    background: rgba(247, 250, 248, 0.92);
  }

  .brand strong { font-size: 1.02rem; }
  .brand span { font-size: 0.61rem; }

  .menu-toggle {
    color: var(--refine-ink);
    background: rgba(255, 255, 255, 0.42);
  }

  .hero {
    padding: 0.8rem 0.8rem 3.25rem;
    background: linear-gradient(180deg, #eef3f1 0%, #dfe7e3 48%, #d9e2de 100%);
  }

  .hero-main { gap: 0.55rem; padding-top: 1.75rem; }
  .hero-kicker { font-size: 0.61rem; }

  .hero h1 {
    max-width: 22rem;
    font-size: clamp(2.2rem, 9.4vw, 2.5rem);
    letter-spacing: -0.045em;
    line-height: 1.36;
  }

  .hero-lead {
    max-width: 23rem;
    font-size: 0.83rem;
    line-height: 1.9;
  }

  .hero-actions { gap: 0.5rem; }
  .hero-actions .button { min-width: 0; }
  .hero-actions .button--glass { min-height: 2.75rem; }

  .hero-visual {
    width: calc(100% + 1.6rem);
    margin-top: -0.35rem;
    margin-inline: -0.8rem;
  }

  .ecosystem-render-wrap { width: min(26rem, 108%); }
  .hero-ecosystem-image { transform: none; }

  .credentials { width: min(23rem, 100%); }

  .trust-strip { border-top-color: rgba(255, 255, 255, 0.75); }
  .trust-card { grid-template-columns: 6.5rem 1fr; min-height: 8.4rem; padding-inline: 0.45rem; }
  .trust-card + .trust-card { border-right: 0; border-top: 1px solid var(--refine-line); }
  .trust-card img { width: 6.2rem; height: 6.2rem; }

  .section { width: calc(100% - 2rem); padding-block: 4.75rem; }
  .section-heading { margin-bottom: 1.8rem; }
  .section-heading h2,
  .compact-heading h2,
  .ecosystem-copy h2,
  .assessment-copy h2 { font-size: 1.82rem; }
  .section-heading p,
  .compact-heading p,
  .ecosystem-copy > p,
  .assessment-copy > p { font-size: 0.86rem; }

  .problem-visual { min-height: 25rem; }
  .problem-visual img { height: 16rem; }
  .problem-explorer .problem-card,
  .problem-explorer .problem-card:nth-child(even),
  .problem-explorer .problem-card:nth-last-child(-n + 2) { min-height: 7.15rem; padding-inline: 0.9rem; }
  .problem-explorer .problem-card:last-child { border-bottom: 0; }

  .service-card,
  .service-card:nth-child(even) {
    grid-template-columns: 7rem minmax(0, 1fr);
    min-height: 12.8rem;
    padding: 1rem 0;
  }
  .service-card img { width: 6.8rem; height: 6.8rem; }
  .service-card h3 { font-size: 0.94rem; }
  .service-card p { font-size: 0.72rem; }

  .form-grid label { font-size: 0.74rem; }
}

@media (max-width: 430px) {
  .hero h1 { font-size: clamp(2.12rem, 9.3vw, 2.35rem); }
  .hero-kicker span + span::before { margin-inline: 0.22rem; }
  .problem-explorer .problem-text { font-size: 0.78rem; }
  .service-card { grid-template-columns: 6.4rem minmax(0, 1fr); }
  .service-card img { width: 6.2rem; height: 6.2rem; }
}

@media (forced-colors: active) {
  html { scrollbar-color: CanvasText Canvas; }
  .main-nav a::after,
  .hero-main::after { background: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav a::after,
  .service-card,
  .service-card img { transition: none; }
}

/*
 * Concept-fidelity pass
 *
 * The selected 09/10 concept sheets now own the visible composition. These
 * overrides deliberately remove the framed demonstration treatment and restore
 * the concept's full-bleed mist canvas, measured hero, and editorial ledgers.
 */

body {
  background: #e8eeec;
}

.page-atmosphere { display: none; }

.site-frame {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  background: #e7edeb;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header {
  top: 0;
  width: 100%;
  min-height: 7.25rem;
  margin: 0;
  padding: 1.4rem 2rem;
  border: 0;
  border-bottom: 1px solid rgba(42, 82, 71, 0.13);
  background: rgba(248, 250, 249, 0.93);
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
}

.site-header.is-scrolled {
  background: rgba(248, 250, 249, 0.96);
  box-shadow: 0 12px 30px rgba(24, 54, 46, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 4.2rem;
  padding: 0;
}

.brand-mark {
  flex: 0 0 auto;
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
}

.brand-copy {
  display: grid;
  line-height: 1.35;
}

.brand-copy strong {
  color: #082f28;
  font-size: 1.35rem;
  font-weight: 780;
}

.brand-copy > span {
  margin-top: 0.18rem;
  color: #6c7f78;
  font-size: 0.76rem;
}

.main-nav { gap: 1.5rem; }

.main-nav a {
  min-height: 3rem;
  padding-inline: 0.25rem;
  color: #203f37;
  font-size: 0.85rem;
  font-weight: 590;
}

.header-cta {
  min-width: 15.2rem;
  min-height: 3.65rem;
  border-radius: 0.6rem !important;
  font-size: 1rem;
}

.button--primary {
  background: #075849;
  box-shadow: 0 13px 28px rgba(2, 73, 60, 0.16);
}

.button--primary:hover {
  background: #064f42;
  box-shadow: 0 17px 34px rgba(2, 73, 60, 0.23);
}

.hero {
  min-height: 61.25rem;
  padding: 0;
  background:
    radial-gradient(circle at 75% 45%, rgba(255, 255, 255, 0.64), transparent 31%),
    linear-gradient(90deg, #f2f5f4 0%, #f4f6f5 45%, #dce5e2 100%);
}

.hero::before {
  z-index: 0;
  top: 2rem;
  right: 0;
  width: 56%;
  height: 43rem;
  border-radius: 0;
  background: radial-gradient(ellipse at 70% 43%, rgba(255, 255, 255, 0.72), transparent 66%);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 14.55rem;
  bottom: 4.55rem;
  left: 4.8rem;
  width: 1px;
  background: rgba(185, 133, 53, 0.52);
  pointer-events: none;
}

.hero-main {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 45rem;
}

.hero-main::after {
  top: 14.55rem;
  right: auto;
  left: 4.8rem;
  width: calc(50% - 4.8rem);
  background: rgba(185, 133, 53, 0.52);
}

.hero-copy {
  align-self: center;
  width: 100%;
  max-width: none;
  padding-right: 2.2rem;
  padding-left: 4.8rem;
}

.hero h1 {
  max-width: 39rem;
  margin-bottom: 1.7rem;
  font-size: clamp(3.7rem, 4.75vw, 4.35rem);
  font-weight: 765;
  letter-spacing: -0.058em;
  line-height: 1.22;
}

.hero-lead {
  max-width: 37rem;
  margin-bottom: 2.55rem;
  color: #3d5750;
  font-size: clamp(1.2rem, 1.55vw, 1.43rem);
  font-weight: 410;
  line-height: 2.02;
}

.hero-actions { gap: 1.35rem; }

.hero-actions .button {
  min-width: 17.25rem;
  min-height: 4.15rem;
  border-radius: 0.62rem !important;
  font-size: 1.02rem;
}

.hero-actions .button--glass {
  min-width: 16rem;
  padding-inline: 1.4rem;
  border: 1px solid rgba(7, 88, 73, 0.38);
  color: #173d35;
  background: rgba(255, 255, 255, 0.18);
}

.hero-actions .button--glass:hover {
  border-color: #075849;
  background: rgba(255, 255, 255, 0.4);
}

.hero-visual {
  align-self: stretch;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ecosystem-render-wrap {
  width: 100%;
  height: 45rem;
  aspect-ratio: auto;
}

.hero-ecosystem-image {
  object-fit: contain;
  filter: drop-shadow(0 34px 48px rgba(27, 52, 46, 0.13));
  transform: scale(1.34);
  -webkit-mask-image: radial-gradient(ellipse 83% 80% at center, #000 69%, rgba(0,0,0,.92) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 83% 80% at center, #000 69%, rgba(0,0,0,.92) 84%, transparent 100%);
}

.trust-strip {
  min-height: 11.8rem;
  margin: 0 4.8rem;
  border-top: 1px solid rgba(42, 82, 71, 0.18);
  border-bottom: 1px solid rgba(42, 82, 71, 0.18);
}

.trust-card {
  grid-template-columns: 7.9rem minmax(0, 1fr);
  min-height: 11.8rem;
  padding: 1.05rem 1.35rem;
}

.trust-card + .trust-card { border-right-color: rgba(42, 82, 71, 0.19); }
.trust-card img { width: 7.7rem; height: 7.7rem; }
.trust-card h3 { font-size: 1rem; }
.trust-card p { max-width: 21rem; font-size: 0.76rem; line-height: 1.9; }

.scroll-cue {
  height: 4.55rem;
  margin-top: 0;
}

.section {
  width: calc(100% - 9.6rem);
  max-width: 80rem;
  padding-block: 7.25rem;
}

.problems-section { padding-bottom: 5.25rem; }

.section-heading {
  max-width: 61rem;
  margin-bottom: 3.1rem;
}

.section-heading h2,
.compact-heading h2,
.ecosystem-copy h2,
.assessment-copy h2 {
  font-size: clamp(2.3rem, 3.1vw, 3.25rem);
  letter-spacing: -0.052em;
  line-height: 1.36;
}

.section-heading p {
  max-width: 61rem;
  font-size: 0.96rem;
}

.problem-explorer {
  grid-template-columns: minmax(31rem, 1.02fr) minmax(31rem, 0.98fr);
  min-height: 42rem;
  border-top-color: rgba(42, 82, 71, 0.23);
  border-bottom-color: rgba(42, 82, 71, 0.23);
}

.problem-visual {
  min-height: 42rem;
  padding: 2.2rem 3rem 2.2rem 0;
}

.problem-visual-number { display: none; }

.problem-visual img {
  width: min(31rem, 96%);
  height: 29rem;
  filter: drop-shadow(0 28px 34px rgba(31, 58, 51, 0.14));
}

.problem-visual-copy {
  gap: 0.55rem;
  padding-top: 1.55rem;
}

.problem-visual-copy strong { font-size: 1.04rem; }
.problem-visual-copy span { font-size: 0.82rem; }

.problem-explorer .problem-card,
.problem-explorer .problem-card:nth-child(even),
.problem-explorer .problem-card:nth-last-child(-n + 2) {
  grid-template-columns: 4.2rem minmax(0, 1fr);
  align-items: center;
  min-height: 7rem;
  padding: 1rem 4.25rem 1rem 1.4rem;
  border-bottom: 1px solid rgba(42, 82, 71, 0.15);
  overflow: visible;
}

.problem-explorer .problem-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.35rem;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid rgba(42, 82, 71, 0.24);
  border-radius: 50%;
  background: rgba(245, 248, 247, 0.76);
  transform: translateY(-50%);
}

.problem-explorer .problem-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: calc(100% - 0.32rem);
  width: 0.64rem;
  height: 0.64rem;
  border: 2px solid #e7edeb;
  border-radius: 50%;
  color: transparent;
  background: #aabbb5;
  transform: translateY(-50%);
}

.problem-explorer .problem-card[aria-pressed="true"] {
  border: 1px solid #0b6d5b;
  background: rgba(249, 251, 250, 0.7);
  box-shadow: none;
}

.problem-explorer .problem-card[aria-pressed="true"]::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 0;
  color: #fff;
  background: #08715d;
  font-family: var(--font-fa);
  font-size: 0.75rem;
  font-weight: 760;
}

.problem-explorer .problem-card[aria-pressed="true"]::after { background: #08715d; }

.problem-explorer .problem-card > span:first-child {
  color: rgba(7, 88, 73, 0.26);
  font-size: 2.1rem;
  text-align: center;
}

.problem-explorer .problem-card[aria-pressed="true"] > span:first-child { color: #08715d; }
.problem-explorer .problem-text { color: #3b554e; font-size: 0.84rem; }

.section-closing {
  width: 100%;
  justify-content: center;
  min-height: 5.5rem;
  margin-top: 0;
  border-bottom: 1px solid rgba(42, 82, 71, 0.18);
}

.solutions-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 5rem max(4.8rem, calc((100% - 80rem) / 2));
  border: 0;
  background: #dde5e2;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.solutions-section .section-heading,
.solutions-section .service-grid {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

.solutions-section .section-heading { margin-bottom: 2.1rem; }

.section-heading--split {
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(42, 82, 71, 0.2);
}

.section-heading--split > div { max-width: 40rem; }

.section-heading--split > p {
  max-width: 32rem;
  min-height: 6.75rem;
  margin: 0;
  padding: 1.3rem 3.2rem 1.3rem 0;
  border-right: 1px solid rgba(42, 82, 71, 0.22);
}

.service-grid {
  gap: 0;
  border-bottom: 1px solid rgba(42, 82, 71, 0.2);
}

.service-card {
  grid-template-columns: 10rem minmax(0, 1fr);
  min-height: 15.5rem;
  padding: 1.35rem 1.7rem;
  border-bottom: 1px solid rgba(42, 82, 71, 0.19);
  background: transparent;
}

.service-card:nth-child(even) {
  padding: 1.35rem 2.15rem 1.35rem 1.7rem;
  border-right: 1px solid rgba(42, 82, 71, 0.2);
}

.service-card:nth-last-child(-n + 2) { border-bottom: 0; }

.service-card img {
  width: 9.7rem;
  height: 9.7rem;
  object-fit: contain;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at center, #000 47%, rgba(0,0,0,.9) 66%, transparent 88%);
  mask-image: radial-gradient(circle at center, #000 47%, rgba(0,0,0,.9) 66%, transparent 88%);
}

.service-number {
  top: 1.2rem;
  left: 1.25rem;
  font-size: 2.7rem;
}

.service-card h3 { font-size: 1.08rem; }
.service-card p { max-width: 27rem; font-size: 0.78rem; }
.service-card li { border-radius: 0; background: transparent; }

@media (max-width: 1180px) {
  .site-header { padding-inline: 1.4rem; }
  .brand-mark { width: 3.65rem; height: 3.65rem; }
  .main-nav { gap: 0.7rem; }
  .hero h1 { font-size: clamp(3.25rem, 5vw, 3.85rem); }
  .hero-lead { font-size: 1.12rem; }
  .hero-actions .button { min-width: 14.5rem; }
  .trust-strip { margin-inline: 3rem; }
  .hero::after,
  .hero-main::after { left: 3rem; }
  .hero-main::after { width: calc(50% - 3rem); }
  .hero-copy { padding-left: 3rem; }
  .section { width: calc(100% - 6rem); }
  .solutions-section { width: 100%; padding-inline: 3rem; }
}

@media (max-width: 940px) {
  .site-header {
    top: 0;
    min-height: 4.8rem;
    padding: 0.6rem 1rem;
  }

  .brand { min-height: 3.4rem; }
  .brand-mark { width: 3.25rem; height: 3.25rem; }
  .brand-copy strong { font-size: 1.08rem; }
  .brand-copy > span { font-size: 0.63rem; }

  .main-nav {
    top: 100%;
    border-inline: 0;
    border-radius: 0;
    box-shadow: 0 18px 34px rgba(24, 54, 46, 0.1);
  }

  .hero {
    min-height: auto;
    background: linear-gradient(180deg, #f3f6f5 0%, #dce5e2 72%, #d8e1de 100%);
  }

  .hero::before,
  .hero::after,
  .hero-main::after { display: none; }

  .hero-main {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual";
    min-height: 0;
  }

  .hero-copy {
    padding: 4.3rem 2rem 2.4rem;
    text-align: center;
  }

  .hero h1,
  .hero-lead { margin-inline: auto; }

  .hero h1 {
    max-width: 35rem;
    font-size: clamp(2.75rem, 7.7vw, 3.45rem);
  }

  .hero-lead { max-width: 38rem; }
  .hero-actions { justify-content: center; }
  .hero-visual { width: 100%; margin: 0; }
  .ecosystem-render-wrap { width: min(45rem, 100%); height: 31rem; }
  .hero-ecosystem-image { transform: scale(1.16); }
  .trust-strip { margin-inline: 2rem; }

  .problem-explorer { grid-template-columns: 1fr; }
  .problem-visual { min-height: 31rem; padding-inline: 0; }
  .problem-visual img { height: 22rem; }
  .problem-explorer .problem-card::after { display: none; }

  .section-heading--split > p {
    min-height: 0;
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 700px) {
  .site-header { grid-template-columns: 1fr auto; grid-template-areas: "brand menu"; }
  .brand-mark { display: none; }
  .header-cta { display: none; }
  .menu-toggle { border-radius: 0.55rem !important; }

  .hero-copy { padding: 3.4rem 1.35rem 1.4rem; }
  .hero h1 {
    max-width: 23rem;
    margin-bottom: 1.4rem;
    font-size: clamp(2.25rem, 10.4vw, 2.65rem);
    line-height: 1.34;
  }

  .hero-lead {
    max-width: 23rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    line-height: 2;
  }

  .hero-actions { display: grid; }
  .hero-actions .button { width: min(23rem, 100%); min-width: 0; min-height: 3.55rem; }
  .hero-actions .button--glass { min-height: 3.2rem; }
  .ecosystem-render-wrap { height: 25rem; }
  .hero-ecosystem-image { transform: scale(1.24); }

  .trust-strip { margin-inline: 1rem; }
  .trust-card { grid-template-columns: 6.6rem 1fr; min-height: 9.2rem; }

  .section { width: calc(100% - 2rem); padding-block: 5rem; }
  .section-heading h2,
  .compact-heading h2,
  .ecosystem-copy h2,
  .assessment-copy h2 { font-size: 2rem; }

  .problem-explorer { min-height: 0; }
  .problem-visual { min-height: 26rem; }
  .problem-visual img { height: 17rem; }
  .problem-explorer .problem-card,
  .problem-explorer .problem-card:nth-child(even),
  .problem-explorer .problem-card:nth-last-child(-n + 2) {
    grid-template-columns: 3.4rem 1fr;
    min-height: 7.2rem;
    padding: 1rem 3.4rem 1rem 0.85rem;
  }
  .problem-explorer .problem-card::before { left: 0.75rem; }

  .solutions-section { width: 100%; padding: 4rem 1rem; }
  .solutions-section .section-heading { display: grid; }
  .service-card,
  .service-card:nth-child(even) {
    grid-template-columns: 7.2rem minmax(0, 1fr);
    min-height: 13.2rem;
    padding: 1rem 0;
    border-right: 0;
  }
  .service-card:nth-child(odd) { border-left: 0; }
  .service-card:nth-last-child(2) { border-bottom: 1px solid rgba(42, 82, 71, 0.19); }
  .service-card img { width: 7rem; height: 7rem; }
  .service-number { left: 0.2rem; font-size: 2rem; }
}

@media (forced-colors: active) {
  .problem-explorer .problem-card::before,
  .problem-explorer .problem-card::after { forced-color-adjust: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ecosystem-image,
  .brand-mark { transition: none; }
}

/* Editorial feedback: compact problem selectors without ornamental status marks. */
.problem-explorer .problem-card,
.problem-explorer .problem-card:nth-child(even),
.problem-explorer .problem-card:nth-last-child(-n + 2) {
  grid-template-columns: 3rem minmax(0, 1fr);
  min-height: 5.65rem;
  padding: 0.75rem 1.15rem;
  overflow: hidden;
}

.problem-explorer .problem-card::before,
.problem-explorer .problem-card::after,
.problem-explorer .problem-card[aria-pressed="true"]::before,
.problem-explorer .problem-card[aria-pressed="true"]::after {
  content: none;
  display: none;
}

.problem-explorer .problem-card[aria-pressed="true"] {
  border: 0;
  border-bottom: 1px solid rgba(42, 82, 71, 0.15);
  box-shadow: inset -2px 0 0 #08715d;
}

.problem-explorer .problem-card:last-child[aria-pressed="true"] {
  border-bottom: 0;
}

.problem-explorer .problem-card > span:first-child {
  font-size: 1.32rem;
}

.problem-explorer .problem-card .problem-text {
  color: #3b554e;
  font-size: 0.84rem;
  line-height: 1.85;
}

/* Phosphor duotone glyphs are two overlaid font layers; grid must share one cell in RTL. */
.process-list i.ph-duotone::before,
.process-list i.ph-duotone::after,
.scenario-card > i.ph-duotone::before,
.scenario-card > i.ph-duotone::after {
  grid-area: 1 / 1;
  margin: 0;
}

@media (max-width: 700px) {
  .problem-explorer .problem-card,
  .problem-explorer .problem-card:nth-child(even),
  .problem-explorer .problem-card:nth-last-child(-n + 2) {
    grid-template-columns: 2.7rem minmax(0, 1fr);
    min-height: 5.4rem;
    padding: 0.7rem 0.85rem;
  }

  .problem-explorer .problem-card > span:first-child { font-size: 1.16rem; }
  .problem-explorer .problem-card .problem-text { font-size: 0.78rem; }
}