/* Shared How We Help module (10 solution pages + 10 industry pages).
   Desktop: vertical offering selector + text-led content stage.
   Mobile: single-open accordion.

   Every panel states an offering label, a tagline and its narrative. The only
   difference between the two page families is the length of the narrative:
   solution pages carry one paragraph, industry pages carry the two they were
   written with (what the work is, what the client gets). Since 2026-08-15 there
   is no tagline-less composition. */

.ops-help {
  --ops-help-rust: #a64a40;
  --ops-help-ink: #171717;
  --ops-help-muted: #667074;
  --ops-help-line: #d9dcdd;
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.55fr);
  height: 31rem;
  border-block: 1px solid var(--ops-help-line);
  background: #ffffff;
}

.ops-help__nav {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  border-right: 1px solid var(--ops-help-line);
}

.ops-help__tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 5.75rem;
  padding: var(--space-5) clamp(var(--space-5), 2vw, var(--space-8));
  border: 0;
  border-bottom: 1px solid var(--ops-help-line);
  background: #ffffff;
  color: var(--ops-help-ink);
  text-align: left;
  cursor: pointer;
  transition:
    color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ops-help__tab:last-of-type {
  border-bottom: 0;
}

.ops-help__tab:hover,
.ops-help__tab:focus-visible {
  background: #ffffff;
  color: var(--ops-help-rust);
}

.ops-help__tab[data-open='true'] {
  background: var(--ops-help-rust);
  color: #ffffff;
}

.ops-help__tab[data-open='true']:hover,
.ops-help__tab[data-open='true']:focus-visible {
  background: var(--ops-help-rust);
}

.ops-help__tab:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--ops-help-ink);
  outline-offset: -4px;
}

.ops-help__tab[data-open='true']:focus-visible {
  outline-color: #ffffff;
}

.ops-help__num,
.ops-help__offering {
  font-family: var(--font-eyebrow);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-caps);
  line-height: 1.3;
  text-transform: uppercase;
}

.ops-help__num {
  color: var(--ops-help-rust);
  font-variant-numeric: tabular-nums;
}

.ops-help__tab[data-open='true'] .ops-help__num {
  color: #ffffff;
}

.ops-help__label {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.87rem + 0.22vw, 1.0625rem);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
}

.ops-help__mark {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
}

.ops-help__mark::before,
.ops-help__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}

.ops-help__mark::after {
  transform: rotate(90deg);
}

.ops-help__tab[data-open='true'] .ops-help__mark::after {
  transform: rotate(0);
}

.ops-help__stage {
  position: relative;
  min-width: 0;
  height: 31rem;
  border-block: 1px solid var(--ops-help-line);
  background: #ffffff;
}

.ops-help__panel {
  height: 100%;
}

.ops-help__panel[hidden] {
  display: none;
}

.ops-help__panel-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: clamp(var(--space-10), 5vw, var(--space-20));
}

.ops-help__offering {
  margin: 0 0 clamp(var(--space-5), 2vw, var(--space-8));
  color: var(--ops-help-rust);
}

.ops-help__tagline {
  max-width: 18ch;
  margin: 0 0 clamp(var(--space-6), 2.5vw, var(--space-10));
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.55rem + 1.5vw, 3.25rem);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-tight);
  line-height: 1.05;
  color: var(--ops-help-ink);
}

/* Home-page reveal panels: taglines should render on exactly two lines.
   Widen the wrap column and enable balanced wrapping so short and long
   taglines both split cleanly at two lines. Scoped to .hcl-solution-family
   so per-solution and per-industry pages keep the tighter 18ch measure. */
.hcl-solution-family .ops-help__tagline {
  max-width: 28ch;
  text-wrap: balance;
}

/* Spacing between a panel's narrative paragraphs (the industry composition
   carries two). Adjacency-scoped, so single-narrative solution panels are
   untouched. This is a body-copy rule, not a tagline exception: taglines are
   now present on all twenty pages and use the shared .ops-help__tagline rule
   below unchanged. */
.ops-help__narrative + .ops-help__narrative {
  margin-top: clamp(var(--space-4), 1.4vw, var(--space-6));
}

.ops-help__narrative {
  max-width: 64ch;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.93rem + 0.22vw, 1.125rem);
  font-weight: var(--weight-light);
  line-height: 1.75;
  color: #3f474a;
}

.ops-help__panel[data-entering='true'] .ops-help__panel-inner {
  animation: ops-help-panel-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ops-help__mobile-panel {
  display: none;
}

@keyframes ops-help-panel-in {
  from {
    opacity: 0;
    clip-path: inset(0 4% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}

[data-theme='dark'] .ops-help {
  --ops-help-ink: #f3f3f1;
  --ops-help-muted: #b9c4c6;
  --ops-help-line: #3b3d3d;
  background: #191a1a;
}

[data-theme='dark'] .ops-help__stage,
[data-theme='dark'] .ops-help__panel {
  background: #191a1a;
}

[data-theme='dark'] .ops-help__tab {
  background: #ffffff;
  color: #171717;
}

[data-theme='dark'] .ops-help__tab:hover,
[data-theme='dark'] .ops-help__tab:focus-visible {
  background: #ffffff;
  color: var(--ops-help-rust);
}

[data-theme='dark'] .ops-help__tab[data-open='true'],
[data-theme='dark'] .ops-help__tab[data-open='true']:hover,
[data-theme='dark'] .ops-help__tab[data-open='true']:focus-visible {
  background: var(--ops-help-rust);
}

[data-theme='dark'] .ops-help__narrative {
  color: #d3d6d6;
}

@media (max-width: 900px) {
  .ops-help {
    display: block;
    height: auto;
    border: 1px solid var(--ops-help-line);
  }

  .ops-help__nav {
    display: block;
    border-right: 0;
  }

  .ops-help__tab {
    min-height: 4.25rem;
    padding: var(--space-4) var(--space-5);
  }

  .ops-help__tab:last-of-type {
    border-bottom: 1px solid var(--ops-help-line);
  }

  .ops-help__stage {
    display: none;
  }

  .ops-help__mobile-panel {
    display: grid;
    grid-template-rows: 0fr;
    background: #ffffff;
    border-bottom: 0 solid var(--ops-help-line);
    overflow: hidden;
    transition:
      grid-template-rows 420ms cubic-bezier(0.76, 0, 0.24, 1),
      border-width 420ms cubic-bezier(0.76, 0, 0.24, 1);
  }

  .ops-help__mobile-panel[data-open='true'] {
    grid-template-rows: 1fr;
    border-bottom: 1px solid var(--ops-help-line);
  }

  .ops-help__mobile-panel > .ops-help__panel {
    min-height: 0;
    overflow: hidden;
  }

  .ops-help__panel-inner {
    min-height: 0;
    padding: clamp(var(--space-8), 9vw, var(--space-12)) var(--space-5);
  }

  .ops-help__offering {
    margin-bottom: var(--space-5);
  }

  .ops-help__tagline {
    max-width: 20ch;
    margin-bottom: var(--space-6);
    font-size: clamp(1.75rem, 1.45rem + 1.6vw, 2.25rem);
  }

  .ops-help__narrative {
    font-size: 1rem;
    line-height: 1.7;
  }

  [data-theme='dark'] .ops-help__mobile-panel {
    background: #191a1a;
  }
}

@media (prefers-color-scheme: no-preference-forced-off) {
  :root:not([data-theme='light']) .ops-help {
    --ops-help-ink: #f3f3f1;
    --ops-help-muted: #b9c4c6;
    --ops-help-line: #3b3d3d;
    background: #191a1a;
  }

  :root:not([data-theme='light']) .ops-help__stage,
  :root:not([data-theme='light']) .ops-help__panel,
  :root:not([data-theme='light']) .ops-help__mobile-panel {
    background: #191a1a;
  }

  :root:not([data-theme='light']) .ops-help__tab {
    background: #ffffff;
    color: #171717;
  }

  :root:not([data-theme='light']) .ops-help__tab:hover,
  :root:not([data-theme='light']) .ops-help__tab:focus-visible {
    background: #ffffff;
    color: var(--ops-help-rust);
  }

  :root:not([data-theme='light']) .ops-help__tab[data-open='true'] {
    background: var(--ops-help-rust);
  }

  :root:not([data-theme='light']) .ops-help__narrative {
    color: #d3d6d6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops-help__panel[data-entering='true'] .ops-help__panel-inner {
    animation: none;
  }

  .ops-help__mobile-panel {
    transition: none;
  }
}

/* Operations CTA: a flat rust close with matched glass-outline actions. */
.cta.cta--operations-rust,
[data-theme='dark'] .cta.cta--operations-rust {
  background: #a64a40;
  background-image: none;
  color: #ffffff;
}

.cta--operations-rust::before,
.cta--operations-rust::after,
.cta--operations-rust .cta__cv {
  display: none;
}

.cta--operations-rust .cta__title,
.cta--operations-rust .cta__title .accent,
.cta--operations-rust .cta__lede {
  color: #ffffff;
}

.cta--operations-rust .cta__actions .btn {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0);
  transition:
    background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
    color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-backdrop-filter 240ms cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cta--operations-rust .cta__actions .btn:hover,
.cta--operations-rust .cta__actions .btn:focus-visible {
  background: rgb(255 255 255 / 0.16);
  border-color: #ffffff;
  color: #ffffff;
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.34),
    0 10px 26px rgb(59 23 20 / 0.16);
}

.cta--operations-rust .cta__actions .btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

@media (prefers-color-scheme: no-preference-forced-off) {
  :root:not([data-theme='light']) .cta.cta--operations-rust {
    background: #a64a40;
    background-image: none;
    color: #ffffff;
  }
}