/* =========================================================
   Whitespace Solutions — Reusable content components
   Value cards, practice matrix, process steps, case chart,
   engagements table.
   ========================================================= */

/* ---------- Value cards (gray tiles under a dark rule) ---------- */
.values {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--tile-gap);
  border-top: 1.5px solid var(--ink);
}

/* Sizes match the live site: 170px art row, 120px-tall icon (90px on small screens) */
.value {
  display: grid;
  grid-template-rows: 170px auto 1fr;
  gap: 14px;
  padding: 24px 22px 30px;
  background: var(--panel);
  transition: background-color 0.35s var(--ease-out);
}

/* Hover/focus: the card darkens one step, as on the live site */
.value:hover,
.value:focus-within {
  background: var(--cell);
}

.value__art {
  display: grid;
  place-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.value__art svg {
  width: auto;
  max-width: 100%;
  height: 120px;
}

.value h3 {
  margin-top: 6px;
  font-size: var(--step-1);
  font-weight: 650;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.value p {
  font-size: 15px;
}

/* ---------- Practice matrix ---------- */
.matrix {
  border-top: 1.5px solid var(--ink);
}

.practice {
  display: grid;
  grid-template-columns: 1fr 3fr;
  border-bottom: 1px solid var(--line);
}

.practice__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px 24px 32px 0;
}

.practice__info h3 {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  letter-spacing: -0.02em;
  font-stretch: 100%;
  max-width: 12ch;
}

.practice__art {
  width: 140px;
  height: 160px;
  margin: 28px 0 auto;
}

.practice__info .link-arrow {
  margin-top: 28px;
}

.practice__cells {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: var(--tile-gap);
  padding-block: var(--tile-gap);
}

.cell {
  display: flex;
  align-items: flex-end;
  padding: 14px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
  background: var(--cell);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.cell--whitespace {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}

.practice.is-active .cell {
  background: var(--cell-dark);
  color: var(--white);
  font-weight: 600;
}

.practice.is-active .cell--whitespace {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
}

.practice.is-active .link-arrow {
  color: var(--ink);
}

/* ---------- Process phases & numbered steps ---------- */
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto repeat(3, auto);
  column-gap: var(--tile-gap);
}

.phase {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}

.phase__art {
  width: 96px;
  height: 100px;
  margin-bottom: 20px;
}

.phase__title {
  font-size: 22px;
  letter-spacing: -0.01em;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}

.phase__steps {
  display: contents;
}

.step {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-content: start;
  padding: 28px 20px 30px;
  margin-top: var(--tile-gap);
  background: var(--panel);
}

.step::before {
  content: attr(value);
  grid-row: span 2;
  font-size: 20px;
  line-height: 1.2;
  color: var(--muted);
}

.step h4 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: 12px;
}

.step p {
  font-size: 15px;
  max-width: 380px;
}

/* ---------- Case study: chart + text ---------- */
.case {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}

.chart {
  padding: 28px 24px 16px;
  background: var(--panel);
}

.chart text {
  font-family: var(--font);
  font-stretch: 88%;
  font-weight: 600;
  font-size: 13px;
  fill: var(--text);
}

.chart__axis text {
  fill: var(--muted);
}

/* Runway chart: lines draw in, then the pivot and end points appear.
   Hidden state only applies with JS (html.js) until site.js sets data-on="true". */
.rw-line {
  fill: none;
  stroke-width: 2.5px;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}

.rw-before {
  stroke: var(--night-muted);
}

.rw-after {
  stroke: var(--ink);
  transition-duration: 1.6s;
  transition-delay: 0.9s;
}

.rw-pivot,
.rw-end {
  transition: opacity 0.4s;
}

.rw-pivot {
  fill: var(--ink);
  transition-delay: 0.8s;
}

.rw-end {
  fill: var(--orange);
  stroke: var(--ink);
  stroke-width: 2px;
  transition-delay: 2.3s;
}

.js [data-reveal]:not([data-on="true"]) .rw-line {
  stroke-dashoffset: 1px;
}

.js [data-reveal]:not([data-on="true"]) .rw-pivot,
.js [data-reveal]:not([data-on="true"]) .rw-end {
  opacity: 0;
}

.case__chart .caption {
  margin-top: 20px;
}

.case__text {
  max-width: 500px;
}

.case__text h3 {
  margin-bottom: 24px;
}

.case__text p {
  font-size: 17px;
}

.case__text .caption {
  margin-top: 24px;
}

/* ---------- Data table ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1.5px solid var(--ink);
  font-size: 17px;
}

.data-table th,
.data-table td {
  padding: 26px 16px 26px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.data-table thead th {
  padding-block: 20px;
  font-stretch: 85%;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
}

.data-table tbody th {
  width: 22%;
  font-weight: 700;
  color: var(--ink);
}

.data-table tbody td:nth-child(2) {
  width: 46%;
  padding-right: 24px;
}

.data-table tbody td:nth-child(3) {
  font-size: 14px;
}

.data-table tbody tr {
  transition: background-color 0.2s ease;
}

.data-table tbody tr:hover {
  background: var(--panel);
}

.data-table td a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.data-table td a:hover {
  color: var(--ink);
}

.data-table .num {
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}

.table-wrap .caption {
  margin-top: 24px;
}

.timeline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--ink);
}

.timeline__bar {
  width: calc(var(--months) * 10px);
  height: 8px;
  background: var(--cell-dark);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .values {
    grid-template-columns: repeat(3, 1fr);
  }

  .practice {
    grid-template-columns: 1fr;
  }

  .practice__info {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    padding-right: 0;
  }

  .practice__art {
    grid-row: span 2;
    width: 110px;
    height: 120px;
    margin: 0;
  }

  .practice__cells {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(110px, auto);
    margin-bottom: 24px;
  }

  .case {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .phases {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 48px;
  }

  .phase {
    grid-row: auto;
    grid-template-rows: none;
  }

  .phase__steps {
    display: block;
  }

  /* Table becomes stacked rows */
  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block;
    width: auto !important;
  }

  .data-table tr {
    padding-block: 20px;
    border-bottom: 1px solid var(--line);
  }

  /* Centred on phones, like every other block (overrides .num's right alignment) */
  .data-table th,
  .data-table td {
    padding: 4px 0 !important;
    border: 0;
    text-align: center !important;
  }

  .data-table tbody th {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .values {
    grid-template-columns: 1fr;
  }

  .value {
    grid-template-rows: 130px auto 1fr;
    padding: 18px 16px 22px;
  }

  .value__art svg {
    height: 90px;
  }

  .practice__cells {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(96px, auto);
  }
}

/* =========================================================
   Positioning components (Home, reused on the pillar pages):
   stat, pull quote, before/after compare, business × technology
   overlap, AI approach steps, client journeys, comparison table,
   offer cards.
   ========================================================= */

/* ---------- Section label (small tag above a section title) ----------
   Hidden for now on every page (user request, 30 Oct). Delete the rule below to bring the labels back. */
.section-label {
  display: none !important;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.section-label::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--orange);
}

/* ---------- Three value cards ---------- */
.values--3 {
  grid-template-columns: repeat(3, 1fr);
}

.value p strong {
  color: var(--ink);
  font-weight: 650;
}

/* ---------- Big number ---------- */
.stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
}

.stat__num {
  font-size: var(--step-5);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.035em;
  line-height: 0.9;
  color: var(--orange);
}

.stat__label {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Pull quote: closing line of a section ---------- */
.pullquote {
  margin-top: var(--head-space);
  padding: 4px 0 4px 24px;
  border-left: 4px solid var(--orange);
  font-size: var(--step-2);
  font-stretch: 100%;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
}

.pullquote strong {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Before → after rows ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  row-gap: var(--tile-gap);
}

.compare__head {
  grid-column: 1;
  padding-bottom: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare__head--to {
  grid-column: 3;
  color: var(--orange-deep);
}

.compare__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: stretch;
}

.compare__from,
.compare__to {
  padding: 22px 24px 24px;
}

.compare__from {
  background: var(--panel);
}

.compare__to {
  background: var(--cell-dark);
  border-left: 4px solid var(--orange);
  color: var(--night-text);
}

.compare h3 {
  margin-bottom: 6px;
  font-size: var(--step-1);
  font-weight: 650;
  font-stretch: 100%;
  letter-spacing: -0.01em;
}

.compare__to h3 {
  color: var(--white);
}

.compare p {
  font-size: 15px;
}

.compare__arrow {
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--orange);
}

/* ---------- Business judgment × technology ---------- */
.overlap {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 0.6fr) 1fr;
  gap: var(--tile-gap);
  border-top: 1.5px solid var(--ink);
  padding-top: var(--tile-gap);
}

.overlap__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 28px;
  background: var(--panel);
}

.overlap__side h3 {
  font-size: var(--step-2);
  font-stretch: 100%;
  letter-spacing: -0.02em;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags li {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--white);
  border: 1px solid var(--line);
}

.blindspot {
  margin-top: auto;
  padding: 16px 18px;
  background: var(--orange-soft);
  border-left: 3px solid var(--orange);
}

.blindspot .caption {
  margin-bottom: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.blindspot p:last-child {
  font-size: 15px;
  color: var(--ink);
}

.overlap__core {
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--orange);
  text-align: center;
}

.overlap__core p {
  font-size: var(--step-3);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

/* ---------- AI approach: five numbered steps ---------- */
.approach {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--tile-gap);
}

.approach li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 30px;
  background: var(--panel);
  border-top: 4px solid var(--ink);
}

.approach li:first-child {
  border-top-color: var(--orange);
}

.approach__num {
  margin-bottom: 28px;
  font-size: var(--step-4);
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1;
  color: var(--line-strong);
}

.approach li:first-child .approach__num {
  color: var(--orange);
}

.approach h3 {
  font-size: var(--step-1);
  font-weight: 650;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.approach p {
  font-size: 15px;
}

/* ---------- Client journeys ---------- */
.journeys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tile-gap);
  margin-bottom: 120px;
}

.journey {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 30px;
  background: var(--panel);
  border-top: 1.5px solid var(--ink);
}

.journey:first-child {
  border-top: 4px solid var(--orange);
}

.journey .caption {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey h3 {
  font-size: var(--step-1);
  font-weight: 650;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.journey p:last-child {
  font-size: 15px;
}

/* ---------- Comparison table (Why Whitespace) ----------
   The Whitespace column sits on a dark raised panel (.why__inner::before) that reaches
   past the top and bottom of the table; the other two columns stay quiet. */
.why__wrap {
  overflow-x: auto;
}

.why__inner {
  position: relative;
  min-width: 720px;
  padding-block: 28px;
}

.why__inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30%;
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(242, 144, 42, 0.18), transparent 70%),
    linear-gradient(180deg, var(--night-2), var(--night));
  border-top: 3px solid var(--orange);
  box-shadow: 0 40px 80px -30px rgba(18, 20, 23, 0.55);
}

.why-table {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.why-table th,
.why-table td {
  padding: 20px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s ease;
}

.why-table thead th {
  width: 21%;
  padding-top: 0;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.why-table thead th:first-child {
  width: 28%;
}

.why-table tbody th {
  padding-left: 0;
  font-weight: 650;
  color: var(--ink);
}

.why-table td {
  color: var(--muted);
}

/* The Whitespace column: light text on the dark panel */
.why-table .why-table__us {
  width: 30%;
  padding-left: 32px;
  color: #fff;
  font-weight: 600;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.why-table thead .why-table__us {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.why-table tbody tr:last-child > * {
  border-bottom: 0;
}

/* Row under the pointer lights up across the table */
.why-table tbody tr:hover > :not(.why-table__us) {
  background: var(--cell);
}

.why-table tbody tr:hover > .why-table__us {
  background: rgba(255, 255, 255, 0.05);
}

.why-table tbody tr:hover .mark--yes {
  transform: scale(1.15);
}

.mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
  position: relative;
  top: -2px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mark--yes {
  background: var(--orange);
  color: var(--ink);
}

.why-table__us .mark--yes {
  box-shadow: 0 0 0 4px rgba(242, 144, 42, 0.18);
}

.mark--no {
  background: var(--cell);
  color: var(--muted);
}

.mark--part {
  border: 1px solid var(--line-strong);
  color: var(--muted);
}

/* ---------- Offer cards ---------- */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tile-gap);
}

.offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(28px, 3.5vw, 48px);
  background: var(--panel);
  border-top: 1.5px solid var(--ink);
}

.offer .caption {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.offer h3 {
  font-size: var(--step-3);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.03em;
}

.offer p strong {
  color: var(--ink);
}

.offer__list {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 15px;
}

.offer__list li {
  position: relative;
  padding-left: 18px;
}

.offer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--orange);
}

.offer .link-arrow {
  margin-top: auto;
}

.offer--dark {
  background: var(--cell-dark);
  border-top: 4px solid var(--orange);
  color: var(--night-text);
}

.offer--dark .caption {
  color: var(--orange);
}

.offer--dark h3,
.offer--dark p strong,
.offer--dark .link-arrow:hover {
  color: var(--white);
}

.offer--dark .link-arrow {
  color: var(--night-text);
}

@media (max-width: 1100px) {
  .approach {
    grid-template-columns: repeat(3, 1fr);
  }

  .journeys {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Three-column card grid (use cases) ---------- */
.journeys--3 {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 0;
}

.journeys--2 {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .journeys--2 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Case study: text + step flow ---------- */
.case-study {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px 64px;
  padding-block: 40px;
  border-top: 1.5px solid var(--ink);
}

.case-study + .case-study {
  border-top-width: 1px;
  border-top-color: var(--line);
}

.case-study__text .caption {
  margin-bottom: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.case-study__text h3 {
  margin-bottom: 16px;
}

.case-study__text p:not(.caption) {
  font-size: 16px;
}

.case-study__result {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 3px solid var(--orange);
  color: var(--ink);
}

.flow {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--tile-gap);
  counter-reset: flow;
}

.flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px 24px;
  background: var(--panel);
  border-top: 3px solid var(--line-strong);
}

.flow li::before {
  counter-increment: flow;
  content: counter(flow, decimal-leading-zero);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.flow h4 {
  font-size: 17px;
  font-weight: 650;
  font-stretch: 100%;
  line-height: 1.2;
}

.flow p {
  font-size: 14px;
  line-height: 1.45;
}

/* The AI step and the human step stand out */
.flow .flow__ai {
  background: var(--orange-soft);
  border-top-color: var(--orange);
}

.flow .flow__person {
  background: var(--cell-dark);
  border-top-color: var(--orange);
  color: var(--night-text);
}

.flow .flow__person h4,
.flow .flow__person::before {
  color: var(--white);
}

.case-study .tags {
  grid-column: 2;
}

/* ---------- Working models (We build / Co-build / Sit in your team) ---------- */
.models {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tile-gap);
}

.model {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 32px;
  background: var(--panel);
  border-top: 1.5px solid var(--ink);
}

.model:nth-child(2) {
  border-top: 4px solid var(--orange);
}

.model__diagram {
  display: grid;
  place-items: center;
  height: 150px;
  margin-bottom: 8px;
  background: var(--white);
}

.model__diagram svg {
  width: 200px;
  height: 110px;
}

.model__diagram text {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.model h3 {
  font-size: var(--step-2);
  font-stretch: 100%;
  letter-spacing: -0.02em;
}

.model p strong {
  color: var(--ink);
}

.tile-group__desc {
  max-width: 640px;
  margin: -4px 0 14px;
  font-size: 15px;
}

@media (max-width: 1100px) {
  .case-study {
    grid-template-columns: 1fr;
  }

  .case-study .tags {
    grid-column: auto;
  }

  .journeys--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Comparison table on phones: one card per criterion, each answer labelled */
@media (max-width: 700px) {
  .why-table,
  .why-table tbody,
  .why-table tr,
  .why-table th,
  .why-table td {
    display: block;
    min-width: 0;
  }

  .why-table thead {
    display: none;
  }

  .why-table tr {
    padding-block: 18px;
    border-bottom: 1px solid var(--line);
  }

  .why-table tbody tr:first-child {
    border-top: 1.5px solid var(--ink);
  }

  .why-table th,
  .why-table td {
    width: auto;
    padding: 6px 0;
    border: 0;
    text-align: center;
  }

  .why-table tbody th {
    width: auto;
    margin-bottom: 6px;
    font-size: var(--step-1);
  }

  .why-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .why__inner {
    min-width: 0;
    padding-block: 0;
  }

  .why__inner::before {
    display: none;
  }

  .why-table .why-table__us {
    width: auto;
    margin-top: 6px;
    padding: 12px 14px;
    background: var(--night);
    border-top: 2px solid var(--orange);
  }

  .why-table .why-table__us::before {
    color: var(--orange);
  }

  .why-table tbody tr:hover > * {
    background: none;
  }

  .why-table tbody tr:hover > .why-table__us {
    background: var(--night);
  }
}

@media (max-width: 900px) {
  .models,
  .journeys--3 {
    grid-template-columns: 1fr;
  }

  .flow {
    grid-auto-flow: row;
  }
}

@media (max-width: 900px) {
  .values--3,
  .offer-grid {
    grid-template-columns: 1fr;
  }

  .compare {
    grid-template-columns: 1fr;
  }

  .compare__head--to {
    display: none;
  }

  .compare__row {
    grid-template-columns: 1fr;
    margin-bottom: 16px;
  }

  .compare__row:last-child {
    margin-bottom: 0;
  }

  .compare__arrow {
    padding-block: 6px;
    transform: rotate(90deg);
  }

  .overlap {
    grid-template-columns: 1fr;
  }

  .overlap__core {
    padding-block: 28px;
  }

  .journeys {
    margin-bottom: 80px;
  }

  /* The card-grid variants end their section, so they keep no bottom margin */
  .journeys--3,
  .journeys--2 {
    margin-bottom: 0;
  }
}

@media (max-width: 600px) {
  .approach,
  .journeys {
    grid-template-columns: 1fr;
  }

  .approach__num {
    margin-bottom: 12px;
  }
}

/* =========================================================
   Inner-page components (About, Careers, Contact, Practices)
   ========================================================= */

/* ---------- Page hero: title + lead left, illustration + note right ---------- */
.page-hero {
  padding-block: clamp(56px, 8vw, 120px);
  overflow-x: clip; /* the 3D hero canvas reaches past its box; never let it widen the page */
}

/* Columns are centred vertically: the illustration column is much taller than the title
   column, and bottom alignment (as on the live site) left a large gap above the title. */
.page-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 48px;
}

.page-hero__text .display {
  max-width: 8.4em;
}

.page-hero__text .lead {
  max-width: 620px;
  margin-top: 28px;
}

.page-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Same as the live site: up to 460px wide, right-aligned, height from the illustration */
.page-hero__art {
  width: min(100%, 460px);
  align-self: flex-end;
}

.page-hero__aside p {
  max-width: 520px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
  font-size: var(--step--1);
  color: var(--muted);
}

.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Tile grid (sectors, services) ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(110px, auto);
  gap: var(--tile-gap);
}

.tiles--short {
  grid-auto-rows: minmax(88px, auto);
}

/* Tile with a line icon on top and the label at the bottom (About: industries) */
.tiles--icons {
  grid-auto-rows: minmax(132px, auto);
}

.cell--icon {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.cell__icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cell__icon .accent {
  stroke: var(--orange);
}

.tile-group + .tile-group {
  margin-top: 24px;
}

.tile-group__label {
  margin-bottom: 10px;
}

/* A link tile fills its grid cell like the plain tiles */
.tiles > li:not(.cell) {
  display: flex;
}

.tiles > li > .cell {
  flex: 1;
}

/* Call-to-action tile at the end of a tile grid */
.cell--link {
  justify-content: space-between;
  gap: 12px;
  background: var(--white);
  border: 1.5px solid var(--orange);
  font-weight: 600;
  color: var(--ink);
}

.cell--link:hover {
  background: var(--orange-soft);
}

/* ---------- Feature columns (What we do) ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1.5px solid var(--ink);
}

.feature {
  padding: 24px 28px 8px;
  border-left: 1px solid var(--line);
}

.feature:first-child {
  padding-left: 0;
  border-left: 0;
}

.feature h3 {
  display: flex;
  gap: 14px;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin-bottom: 12px;
}

.feature__num {
  font-weight: 400;
  color: var(--muted);
}

.feature p {
  font-size: 15px;
  max-width: 320px;
}

/* ---------- Next-page link ---------- */
.next-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-block: 32px;
  border-block: 1px solid var(--line);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--ink);
}

.next-link span {
  transition: transform 0.2s ease;
}

.next-link:hover span {
  transform: translateX(6px);
}

/* ---------- Roles list (Careers) ---------- */
.roles {
  border-top: 1.5px solid var(--ink);
}

.role {
  display: grid;
  grid-template-columns: 1.2fr 2fr auto;
  align-items: start;
  gap: 32px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}

.role h3 {
  font-size: var(--step-2);
  letter-spacing: -0.01em;
}

.role .caption {
  margin-top: 6px;
}

.btn--sm {
  padding: 12px 18px;
  font-size: 15px;
}

/* ---------- Contact page ---------- */
.contact-page {
  padding-block: clamp(56px, 8vw, 120px);
  overflow-x: clip; /* the 3D canvas reaches past its box; never let it widen the page */
}

.contact-page__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-page__intro .lead {
  max-width: 560px;
  margin-top: 28px;
}

/* Contact illustration (deck p.17): your business, technology and the whitespace between them.
   3D via js/page-hero-3d.js; the legend names the three parts, left to right. */
.contact-page__figure {
  width: min(100%, 420px);
  margin: 40px 0 0;
}

.contact-page__art {
  width: 100%;
}

.contact-page__legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

.contact-page__legend-ws {
  color: var(--orange-deep);
}

/* Desktop: the whole page (title, illustration, form and button) fits one screen without
   scrolling. Spacing, title, illustration and message box scale with the screen height. */
@media (min-width: 901px) {
  .contact-page {
    display: grid;
    align-content: center;
    min-height: calc(var(--screen-h) - var(--header-h) - 10px);
    padding-block: clamp(16px, 3.5vh, 48px);
  }

  .contact-page__inner {
    align-items: center;
  }

  .contact-page__intro .display {
    font-size: min(var(--step-5), 9.5vh);
  }

  .contact-page__intro .lead {
    margin-top: clamp(12px, 2.4vh, 28px);
  }

  .contact-page__figure {
    width: min(100%, 420px, 34vh);
    margin-top: clamp(16px, 3vh, 40px);
  }

  .contact-page .field {
    padding-block: clamp(9px, 1.4vh, 14px);
  }

  .contact-page .field textarea {
    min-height: clamp(64px, 13vh, 140px);
  }

  .contact-page .form__footer {
    margin-top: clamp(8px, 1.4vh, 16px);
  }
}

@media (max-width: 600px) {
  .contact-page__legend {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* ---------- Form ---------- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tile-gap);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--panel);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.2s ease;
}

.field:focus-within {
  outline-color: var(--orange);
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}

.field label small {
  font-weight: 400;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field ::placeholder {
  color: var(--muted);
}

.form__footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
}

.form__footer p {
  max-width: 340px;
  font-size: 15px;
}

/* .field sets display: flex, so the hidden attribute needs its own rule */
.field[hidden] {
  display: none;
}

/* Validation (js/contact.js): orange outline on the field, message under the input */
.field.is-invalid {
  outline-color: var(--orange-deep);
}

.field__error {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--orange-deep);
}

/* After "Compose email": what happens next, and the address as a fallback */
.form__status {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding: 14px 16px;
  font-size: 15px;
  background: var(--orange-soft);
  border-left: 3px solid var(--orange);
}

.form__status strong {
  color: var(--ink);
}

.form__status a {
  color: var(--ink);
  text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }

  .feature:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  /* Three items: stay in one row instead of wrapping 2 + 1 */
  .features--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .features--3 .feature:nth-child(odd):not(:first-child) {
    padding-left: 28px;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 800px) {
  .features--3 {
    grid-template-columns: 1fr;
  }

  .features--3 .feature,
  .features--3 .feature:nth-child(odd):not(:first-child) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .page-hero__inner,
  .contact-page__inner {
    grid-template-columns: 1fr;
  }

  .page-hero__art {
    width: min(100%, 460px);
    align-self: flex-start;
  }

  .role {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .role .btn {
    justify-self: start;
  }
}

@media (max-width: 600px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(88px, auto);
  }

  .features {
    grid-template-columns: 1fr;
  }

  .feature {
    padding-left: 0;
    border-left: 0;
  }

  .form {
    grid-template-columns: 1fr;
  }

  .form__footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Industry groups (About): icon tile with a group name and its industries ---------- */
.tiles--groups {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}

/* Text starts right under the icon, so group names line up across a row */
.tiles--groups .cell {
  justify-content: flex-start;
  padding: 24px 22px;
  gap: 28px;
}

.tiles--groups h3 {
  margin-bottom: 8px;
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.2;
  color: var(--ink);
}

.tiles--groups p {
  font-size: 15px;
  font-weight: 400;
}

@media (max-width: 900px) {
  .tiles--groups {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .tiles--groups {
    grid-template-columns: 1fr;
  }
}

/* ---------- Industry icons (Industries): slow line animations, Nalar-style cards ----------
   Each icon loops gently on its own; hovering a card warms it with an orange glow. */
.tiles--live .cell {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1b1d21 0%, #23252a 60%, #2a2724 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.4s ease;
}

.tiles--live .cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 15% 0%, rgba(242, 144, 42, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.tiles--live .cell:hover {
  border-color: rgba(242, 144, 42, 0.35);
}

.tiles--live .cell:hover::before {
  opacity: 1;
}

.ind-icon {
  position: relative;
  width: 68px;
  height: 68px;
  fill: none;
  stroke: #c3c8ce;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.ind-icon .accent {
  stroke: var(--orange);
}

.ind-rail,
.ind-route,
.ind-base {
  stroke: rgba(255, 255, 255, 0.28);
}

.ind-rail,
.ind-route {
  stroke-dasharray: 2 4;
}

/* Retail: goods ride the rail and fade into the store */
.ind-item {
  fill: var(--orange);
  stroke: none;
  animation: ind-ride 3s linear infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ind-ride {
  0% { transform: translateX(0); opacity: 0; }
  15%, 75% { opacity: 1; }
  100% { transform: translateX(28px); opacity: 0; }
}

/* Food: leaves sway around the stem */
.ind-leaf {
  transform-box: view-box;
  transform-origin: 28px 32px;
  animation: ind-sway 5s ease-in-out infinite;
}

.ind-leaf--r {
  animation-delay: -2.5s;
}

.ind-seed {
  fill: var(--orange);
  stroke: none;
  animation: ind-breathe 2.5s ease-in-out infinite;
}

@keyframes ind-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes ind-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Energy: sparks leave the bolt along both wires, the bolt flickers softly */
.ind-spark {
  fill: var(--orange);
  stroke: none;
  animation: ind-spark-l 2.4s ease-out infinite;
}

.ind-spark--r {
  animation-name: ind-spark-r;
}

.ind-bolt {
  animation: ind-breathe 2.4s ease-in-out infinite;
}

@keyframes ind-spark-l {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-12px); opacity: 0; }
}

@keyframes ind-spark-r {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(12px); opacity: 0; }
}

/* Logistics: the route flows and a parcel travels it */
.ind-route {
  animation: ind-dash 1.2s linear infinite;
}

.ind-parcel {
  fill: var(--orange);
  stroke: none;
  offset-path: path("M10 42c10 0 10-26 22-26h14");
  animation: ind-travel 4s ease-in-out infinite;
}

@keyframes ind-dash {
  to { stroke-dashoffset: -6; }
}

@keyframes ind-travel {
  0% { offset-distance: 0%; opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Health & finance: a short bright stretch runs along the pulse line */
.ind-pulse {
  stroke-dasharray: 0.28 0.72;
  stroke-dashoffset: 0.28;
  animation: ind-pulse 2.8s linear infinite;
}

@keyframes ind-pulse {
  to { stroke-dashoffset: -0.72; }
}

/* Technology & media: signal rings fade out from the phone */
.ind-wave {
  opacity: 0;
  animation: ind-wave 2.4s ease-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ind-wave {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ind-icon * {
    animation: none !important;
  }

  .ind-wave,
  .ind-item,
  .ind-parcel {
    opacity: 1;
  }
}

/* =====================================================================
   Services, Industries and Insights (menu restructure, October 2026)
   ===================================================================== */

/* Section variants: tinted band, and a section that follows a hero without a rule */
.section--tint {
  background: var(--panel);
}

.section--flush {
  padding-top: 0;
  border-top: 0;
}

/* Page hero without an illustration (Insights) */
.page-hero--plain .lead {
  max-width: 640px;
  margin-top: 28px;
}

/* ---------- Service rows (services.html) ----------
   One row per service: illustration, name, what it covers, arrow. The whole row is one link. */
.service-list {
  border-top: 1.5px solid var(--ink);
}

.service-row {
  border-bottom: 1px solid var(--line);
}

.service-row__link {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.1fr) 48px;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding-block: 36px;
  color: inherit;
}

/* Full-width tint on hover, behind the row */
.service-row__link::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -1);
  z-index: -1;
  background: var(--panel);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.service-row__link:hover::before,
.service-row__link:focus-visible::before {
  opacity: 1;
}

.service-row__art .iso {
  height: 130px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-row__link:hover .service-row__art .iso {
  transform: translateY(-6px);
}

.service-row__num {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--orange-deep);
}

.service-row__head h3 {
  font-size: var(--step-3);
  font-weight: 750;
  font-stretch: 100%;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
}

.service-row__lead {
  margin-top: 12px;
  font-size: var(--step-1);
}

.service-row__items {
  display: grid;
  gap: 10px;
  font-size: 15px;
}

.service-row__items li {
  position: relative;
  padding-left: 20px;
}

.service-row__items li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--orange);
}

.service-row__go {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 20px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.service-row__link:hover .service-row__go {
  background: var(--orange);
  border-color: var(--orange);
  transform: translateX(4px);
}

/* ---------- Client journeys with numbered steps (industries.html) ---------- */
/* Cards align to the top, so opening a step only grows its own card */
.journeys--steps {
  align-items: start;
  margin-bottom: 0;
}

.journey__steps {
  margin-top: 8px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Insight cards (insights.html, services.html, under each article) ---------- */
.insight-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding-top: 24px;
  border-top: 1.5px solid var(--ink);
}

.insight-filter {
  min-height: 40px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.insight-filter:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.insight-filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.insight-filters__count {
  margin-left: auto;
  font-size: var(--step--1);
  color: var(--muted);
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 24px;
}

.insight-card[hidden] {
  display: none;
}

.insight-card__link {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  color: inherit;
}

.insight-card__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cell);
}

.section--tint .insight-card__art {
  background: var(--white);
}

/* Width and height both set, so tall illustrations (tower) shrink to fit instead of being cut off */
.insight-card__art .iso {
  width: 62%;
  height: 78%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.insight-card__link:hover .insight-card__art .iso {
  transform: scale(1.06) translateY(-4px);
}

.insight-card__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.insight-card__meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.insight-card h2,
.insight-card h3 {
  font-size: var(--step-2);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.25s ease;
}

.insight-card__link:hover h2,
.insight-card__link:hover h3 {
  color: var(--orange-deep);
}

.insight-card__text > p:not(.insight-card__meta) {
  font-size: 15px;
}

.insight-card .link-arrow {
  margin-top: auto;
  padding-top: 4px;
  font-size: 15px;
  color: var(--ink);
}

.insight-card__link:hover .link-arrow span {
  transform: translateX(4px);
}

/* Featured: the first insight takes the whole row, art left and text right */
.insight-card--featured {
  grid-column: 1 / -1;
}

.insight-card--featured .insight-card__link {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}

.insight-card--featured .insight-card__art {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(70% 60% at 80% 20%, rgba(242, 144, 42, 0.12), transparent 70%),
    var(--cell);
}

.insight-card--featured .insight-card__art .iso {
  width: 46%;
  height: 74%;
}

.insight-card--featured h2 {
  font-size: var(--step-3);
  font-weight: 750;
  font-stretch: 100%;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.insight-card--featured .insight-card__text > p:not(.insight-card__meta) {
  font-size: var(--step-1);
}

.insight-card--featured .insight-card__text {
  flex: none;
  gap: 16px;
}

/* ---------- Article (insights/<slug>.html) ---------- */
.article-hero {
  padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 96px);
}

.article-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
}

.article-hero__meta {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.article-hero .title {
  max-width: 14em;
  font-size: clamp(34px, 4.4vw, 64px);
}

.article-hero .lead {
  max-width: 620px;
  margin-top: 24px;
}

.article-hero__art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-height: 380px;
  background: var(--panel);
}

.article-hero__art .iso {
  width: 64%;
  height: 78%;
}

.article {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 760px);
  gap: clamp(32px, 6vw, 120px);
  padding-top: 40px;
  border-top: 1.5px solid var(--ink);
}

.article__aside {
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.article__facts {
  display: grid;
  gap: 20px;
}

.article__facts dt {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.article__facts dd {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.article__facts a {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 4px;
}

.article__body > * + * {
  margin-top: 20px;
}

.article__body h2 {
  margin-top: 56px;
  font-size: var(--step-2);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.article__body h2:first-child {
  margin-top: 0;
}

.article__body > p,
.article__list {
  font-size: var(--step-1);
  line-height: 1.6;
}

.article__body .overlap,
.article__body .flow,
.article__body .approach,
.article__body .tags {
  margin-top: 28px;
}

.article__body .pullquote {
  margin-top: 56px;
}

.article__list {
  display: grid;
  gap: 14px;
}

.article__list li {
  position: relative;
  padding-left: 24px;
}

.article__list li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--orange);
}

.article__list strong {
  color: var(--ink);
}

.tags--wide li {
  padding: 8px 14px;
  font-size: 15px;
  background: var(--panel);
}

.article__body .overlap {
  grid-template-columns: 1fr;
}

/* ---------- Use-case flow (insights/where-a-use-case-lives): two vocabularies feed one node ----------
   Chips on each side send a dashed line to a trunk, the trunk feeds the core. The dashes move toward
   the core and the chips light up one after another. */
.usecase-flow {
  --uf-gap: 56px;
  --uf-wire: rgba(255, 255, 255, 0.32);
  margin-inline: 0;
  margin-top: 28px;
  padding: clamp(20px, 3vw, 32px);
  background: #141518;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  color: #c3c8ce;
}

.usecase-flow__label {
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d838b;
}

.usecase-flow__map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.8fr) minmax(0, 1fr);
  grid-template-areas:
    "bh . th"
    "bl core tl"
    "bb . tb";
  column-gap: var(--uf-gap);
  row-gap: 16px;
  align-items: center;
}

.usecase-flow__head {
  font-size: 15px;
  font-weight: 650;
  color: #fff;
}

.usecase-flow__head--business { grid-area: bh; }
.usecase-flow__head--tech { grid-area: th; }
.usecase-flow__chips--business { grid-area: bl; }
.usecase-flow__chips--tech { grid-area: tl; }
.usecase-flow__blind--business { grid-area: bb; }
.usecase-flow__blind--tech { grid-area: tb; }

.usecase-flow__chips {
  position: relative;
  display: grid;
  gap: 8px;
  align-self: start;
}

.usecase-flow__chips li {
  position: relative;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #d5d8dc;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  animation: uf-chip 8s ease-in-out infinite;
}

.usecase-flow__chips li:nth-child(2) { animation-delay: 1s; }
.usecase-flow__chips li:nth-child(3) { animation-delay: 2s; }
.usecase-flow__chips li:nth-child(4) { animation-delay: 3s; }
.usecase-flow__chips li:nth-child(5) { animation-delay: 4s; }
.usecase-flow__chips li:nth-child(6) { animation-delay: 5s; }
.usecase-flow__chips li:nth-child(7) { animation-delay: 6s; }
.usecase-flow__chips li:nth-child(8) { animation-delay: 7s; }

/* Wires: chip → trunk (horizontal), trunk (vertical), trunk → core (horizontal) */
.usecase-flow__chips li::after,
.usecase-flow__core::before,
.usecase-flow__core::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--uf-gap) / 2);
  height: 1px;
  background: linear-gradient(90deg, var(--uf-wire) 50%, transparent 0) 0 0 / 8px 1px repeat-x;
  animation: uf-flow 0.9s linear infinite;
}

.usecase-flow__chips--business li::after { left: 100%; }
.usecase-flow__chips--tech li::after { right: 100%; animation-direction: reverse; }

.usecase-flow__chips::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, var(--uf-wire) 50%, transparent 0) 0 0 / 1px 8px repeat-y;
}

.usecase-flow__chips--business::before { right: calc(var(--uf-gap) / -2); }
.usecase-flow__chips--tech::before { left: calc(var(--uf-gap) / -2); }

.usecase-flow__core {
  grid-area: core;
  position: relative;
  display: grid;
  gap: 6px;
  padding: 26px 14px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(150deg, #f6a24a, #e07d14);
  border-radius: 16px;
  animation: uf-glow 3s ease-in-out infinite;
}

.usecase-flow__core::before { right: 100%; }
.usecase-flow__core::after { left: 100%; animation-direction: reverse; }

.usecase-flow__core span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(21, 23, 26, 0.7);
}

.usecase-flow__core strong {
  font-size: var(--step-1);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}

.usecase-flow__blind {
  align-self: start;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.usecase-flow__blind .caption {
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

.usecase-flow__blind p:last-child {
  font-size: 14px;
  line-height: 1.5;
  color: #c3c8ce;
}

@keyframes uf-flow {
  to { background-position: 8px 0; }
}

@keyframes uf-chip {
  0%, 14%, 100% { border-color: rgba(255, 255, 255, 0.12); color: #d5d8dc; }
  5%, 9% { border-color: var(--orange); color: #fff; }
}

@keyframes uf-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 144, 42, 0); }
  50% { box-shadow: 0 0 36px 2px rgba(242, 144, 42, 0.35); }
}

/* Narrow: top to bottom, chips wrap, one vertical wire into and out of the core */
@media (max-width: 640px) {
  .usecase-flow__map {
    grid-template-columns: 1fr;
    grid-template-areas: "bh" "bl" "bb" "core" "th" "tl" "tb";
    row-gap: 14px;
  }

  .usecase-flow__chips {
    display: flex;
    flex-wrap: wrap;
  }

  .usecase-flow__chips::before,
  .usecase-flow__chips li::after {
    display: none;
  }

  .usecase-flow__core {
    margin-block: 28px;
  }

  .usecase-flow__core::before,
  .usecase-flow__core::after {
    left: 50%;
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, var(--uf-wire) 50%, transparent 0) 0 0 / 1px 8px repeat-y;
    animation: none;
  }

  .usecase-flow__core::before { top: auto; right: auto; bottom: 100%; }
  .usecase-flow__core::after { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .usecase-flow *,
  .usecase-flow *::before,
  .usecase-flow *::after {
    animation: none !important;
  }
}

/* ---------- AI uses grid (insights/ai-is-moving-faster): twelve tiles + the agents tile ----------
   Same dark card as the use-case flow; tiles light up in turn (uf-chip), the agents tile glows (uf-glow). */
.ai-uses {
  margin: 28px 0 0;
  padding: clamp(20px, 3vw, 32px);
  background: #141518;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
}

.ai-uses__label {
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d838b;
}

.ai-uses__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ai-uses__grid li {
  display: grid;
  gap: 2px;
  padding: 14px 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  animation: uf-chip 12s ease-in-out infinite;
}

.ai-uses__grid svg {
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
  fill: none;
  stroke: #c3c8ce;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-uses__grid svg .accent {
  stroke: var(--orange);
}

.ai-uses__grid strong {
  font-size: 15px;
  font-weight: 650;
  color: #fff;
}

.ai-uses__grid span {
  font-size: 13px;
  line-height: 1.4;
  color: #8d939b;
}

/* Lights move across the grid in reading order */
.ai-uses__grid li:nth-child(2) { animation-delay: 1s; }
.ai-uses__grid li:nth-child(3) { animation-delay: 2s; }
.ai-uses__grid li:nth-child(4) { animation-delay: 3s; }
.ai-uses__grid li:nth-child(5) { animation-delay: 4s; }
.ai-uses__grid li:nth-child(6) { animation-delay: 5s; }
.ai-uses__grid li:nth-child(7) { animation-delay: 6s; }
.ai-uses__grid li:nth-child(8) { animation-delay: 7s; }
.ai-uses__grid li:nth-child(9) { animation-delay: 8s; }
.ai-uses__grid li:nth-child(10) { animation-delay: 9s; }
.ai-uses__grid li:nth-child(11) { animation-delay: 10s; }
.ai-uses__grid li:nth-child(12) { animation-delay: 11s; }

.ai-uses__agents {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 8px;
  padding: 20px 22px;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(150deg, #f6a24a, #e07d14);
  border-radius: 14px;
  animation: uf-glow 3s ease-in-out infinite;
}

.ai-uses__tag {
  font-size: var(--step-1);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ai-uses__agents p:last-child {
  font-size: 15px;
  font-weight: 500;
  color: rgba(21, 23, 26, 0.78);
}

/* Numbered variant (insights/it-diagnostic): seven dimensions + one orange summary tile */
.ai-uses__grid .ai-uses__num {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
}

.ai-uses--dims .ai-uses__grid li {
  align-content: start;
  animation-duration: 8s;
}

.ai-uses--dims .ai-uses__grid strong {
  line-height: 1.3;
}

.ai-uses__grid .ai-uses__sum {
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(150deg, #f6a24a, #e07d14);
  border-color: transparent;
  animation: uf-glow 3s ease-in-out infinite;
}

.ai-uses__sum .ai-uses__num,
.ai-uses__sum strong {
  color: var(--ink);
}

@media (max-width: 640px) {
  .ai-uses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-uses *,
  .ai-uses {
    animation: none !important;
  }
}

/* ---------- Step flow (insight articles): numbered nodes on a dashed wire ----------
   Set --steps on the figure and --i on each step; steps light up one after another.
   --ai steps get the orange card, --person steps a light tag. */
.step-flow {
  --sf-node: 44px;
  --sf-gap: 14px;
  --sf-beat: 1.6s;
  margin: 28px 0 0;
  padding: clamp(20px, 3vw, 32px);
  background: #141518;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
}

.step-flow__label {
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d838b;
}

.step-flow__list {
  display: grid;
  gap: var(--sf-gap);
}

.step-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--sf-node) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* Wire from this node down to the next one */
.step-flow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: var(--sf-node);
  bottom: calc(var(--sf-gap) * -1);
  left: calc(var(--sf-node) / 2);
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 50%, transparent 0) 0 0 / 1px 8px repeat-y;
  animation: sf-wire 0.9s linear infinite;
}

.step-flow__node {
  display: grid;
  place-items: center;
  width: var(--sf-node);
  height: var(--sf-node);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #c3c8ce;
  background: #1d1f23;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  animation: sf-node calc(var(--steps) * var(--sf-beat)) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--sf-beat));
}

.step-flow__card {
  display: grid;
  gap: 4px;
  padding: 14px 18px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  animation: sf-card calc(var(--steps) * var(--sf-beat)) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--sf-beat));
}

.step-flow__card h3 {
  font-size: 16px;
  font-weight: 650;
  color: #fff;
}

.step-flow__card p {
  font-size: 14px;
  line-height: 1.5;
  color: #9aa0a8;
}

.step-flow__card .step-flow__tag {
  justify-self: start;
  margin-bottom: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}

/* The AI step is the engine: orange card, like the core of the use-case flow */
.step-flow__step--ai .step-flow__card {
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(150deg, #f6a24a, #e07d14);
  border-color: transparent;
  animation: uf-glow 3s ease-in-out infinite;
}

.step-flow__step--ai .step-flow__card h3 {
  color: var(--ink);
}

.step-flow__step--ai .step-flow__card p {
  color: rgba(21, 23, 26, 0.78);
}

.step-flow__step--ai .step-flow__card .step-flow__tag {
  color: var(--ink);
  border-color: rgba(21, 23, 26, 0.4);
}

@keyframes sf-wire {
  to { background-position: 0 8px; }
}

@keyframes sf-node {
  0%, 22%, 100% { color: #c3c8ce; background: #1d1f23; border-color: rgba(255, 255, 255, 0.16); }
  4%, 16% { color: var(--ink); background: var(--orange); border-color: var(--orange); }
}

@keyframes sf-card {
  0%, 22%, 100% { border-color: rgba(255, 255, 255, 0.1); }
  4%, 16% { border-color: rgba(242, 144, 42, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .step-flow *,
  .step-flow *::before {
    animation: none !important;
  }
}

@media (max-width: 1100px) {
  .service-row__link {
    grid-template-columns: 140px minmax(0, 1fr) 48px;
  }

  .service-row__items {
    grid-column: 2 / 3;
  }

  .service-row__go {
    grid-column: 3;
    grid-row: 1;
  }

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

@media (max-width: 900px) {
  .insight-card--featured .insight-card__link,
  .article-hero__inner,
  .article {
    grid-template-columns: 1fr;
  }

  .article-hero__art {
    display: none;
  }

  .article__aside {
    position: static;
  }

  .article__facts {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .journeys--steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .service-row__link {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-row__art {
    display: none;
  }

  .service-row__items,
  .service-row__go {
    grid-column: auto;
    grid-row: auto;
  }

  .insight-grid,
  .journeys--steps {
    grid-template-columns: 1fr;
  }

  .insight-filters__count {
    width: 100%;
    margin-left: 0;
  }
}

/* ---------- Practice cards with points that open, as on nalarx.com (Home "Three ways we help", Industries journeys) ----------
   Cards align to the top, so opening a point only grows its own card. Without JS every point
   stays open (the panels only collapse under html.js). */
.solutions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
}

.solution {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color 0.3s var(--ease-out);
}

.solution:hover,
.solution:focus-within {
  border-color: var(--line-strong);
}

.solution__head {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  column-gap: 18px;
  padding: 26px 26px 24px;
  background: linear-gradient(160deg, var(--orange-soft), var(--panel) 65%);
  border-bottom: 1px solid var(--line);
}

#practice-transformation .solution__head {
  background: linear-gradient(160deg, var(--cell), var(--panel) 65%);
}

#practice-fractional .solution__head {
  background: linear-gradient(160deg, #eef1f4, var(--panel) 65%);
}

.solution__art svg {
  width: 72px;
  height: 72px;
}

.solution__head h3 {
  font-size: var(--step-1);
  font-weight: 650;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.solution__head .caption {
  margin-top: 4px;
}

.solution__lead {
  grid-column: 1 / -1;
  margin-top: 20px;
  font-size: 15px;
  color: var(--text);
}

.solution__points {
  margin: 10px 26px 0;
  border-bottom: 1px solid var(--line);
}

.point--whitespace .point__toggle {
  color: var(--orange-deep);
}

.solution__link {
  margin: 20px 26px 24px;
  align-self: flex-start;
}

/* Narrower screens: cards swipe sideways, as on nalarx.com, instead of stacking ~2,600px tall */
@media (max-width: 1100px) {
  .solutions {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 420px);
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .solutions::-webkit-scrollbar {
    display: none;
  }

  .solution {
    scroll-snap-align: start;
  }
}

/* Industries client journeys as practice cards: two across, a numbered step list, the last step
   (where the work leads) in orange. Phones keep the sideways swipe from the rule above. */
@media (min-width: 1101px) {
  .solutions--journeys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Head as the earlier journey cards: industry in small capitals, the journey name below it */
.solutions--journeys .solution__head {
  display: block;
  background: var(--panel);
}

.solutions--journeys .solution__head .caption {
  margin: 0 0 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.solutions--journeys .solution__head h3 {
  font-size: var(--step-2);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.solutions--journeys .solution__points {
  margin-bottom: 22px;
}

.solution__points .point__num {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.point--goal .point__toggle,
.point--goal .point__num {
  color: var(--orange-deep);
  font-weight: 600;
}

/* ---------- Points that open (li.point > button.point__toggle + div.point__panel) ----------
   Opened on point by js/site.js (Home practice cards, Industries client journeys). Without JS every
   point stays open. Plus icon turns into a cross when open. */
.point + .point {
  border-top: 1px solid var(--line);
}

.point__toggle {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 13px 0;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.point__toggle:hover,
.point.is-open .point__toggle {
  color: var(--ink);
}

.point.is-open .point__toggle {
  font-weight: 600;
}

/* Plus that turns into a cross when the point is open */
.point__icon {
  position: relative;
  order: -1;
  flex: none;
  width: 10px;
  height: 10px;
  color: var(--muted);
  transition: transform 0.35s var(--ease-out), color 0.2s ease;
}

.point__icon::before,
.point__icon::after {
  content: "";
  position: absolute;
  inset: 4.5px 0 auto;
  height: 1px;
  background: currentColor;
}

.point__icon::after {
  transform: rotate(90deg);
}

.point__toggle:hover .point__icon {
  color: var(--ink);
}

.point.is-open .point__icon {
  transform: rotate(45deg);
  color: var(--orange-deep);
}

.point__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}

.point__panel > div {
  overflow: hidden;
}

.point__panel p {
  margin: 0 0 16px 4px;
  padding: 2px 0 2px 18px;
  border-left: 1px solid var(--line-strong);
  font-size: 14px;
  color: var(--text);
}

.point.is-open .point__panel p {
  border-left-color: var(--orange);
}

.js .point:not(.is-open) .point__panel {
  grid-template-rows: 0fr;
}

.point__panel .link-arrow {
  display: inline-flex;
  margin-top: 8px;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .point__panel,
  .point__icon {
    transition: none;
  }
}

/* Client journeys: numbered steps that open; number left, plus icon right */
.journey__steps .point:first-child {
  border-top: 1px solid var(--line);
}

.journey__steps .point__toggle {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 10px;
  align-items: baseline;
  gap: 0;
  padding: 11px 0;
  font-size: 15px;
}

.journey__steps .point__num {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.journey__steps .point__icon {
  order: 0;
  align-self: center;
}

.journey__steps .point:last-child .point__toggle {
  font-weight: 650;
  color: var(--ink);
}

.journey__steps .point:last-child .point__num,
.journey__steps .point.is-open .point__num {
  color: var(--orange-deep);
}

.journey__steps .point__panel p {
  margin-left: 0;
  margin-right: 10px;
}

/* ---------- Black and white bands, as on nalarx.com ----------
   Content sections alternate: after the white hero, black, white, black … then the black CTA and
   footer. Dark bands re-map the colour tokens, so the components inside them need no colours of
   their own; the few with fixed light colours are re-coloured at the end of this block. */
.section--dark {
  --ink: var(--white);
  --text: #c3c8ce;
  --muted: var(--night-muted);
  --line: var(--night-line);
  --line-strong: #474c53;
  --panel: var(--night-2);
  --cell: #24282d;
  --cell-dark: #2b3036;
  --orange-deep: var(--orange);
  --orange-soft: rgba(242, 144, 42, 0.14);
  color: var(--text);
  background: var(--night);
}

/* Black bands sit as rounded cards inset from the page edges, as on nalarx.com. The container
   inside gets the inset back, so content still lines up with the white sections. */
.section--dark {
  --band-inset: clamp(8px, 1.2vw, 20px);
  margin: var(--band-inset);
  border-radius: clamp(20px, 2.4vw, 36px);
  overflow: clip;
}

.section--dark > .container {
  width: min(100% - 2 * (var(--gutter) - var(--band-inset)), var(--container));
}

/* The colour change marks the break between bands, so the hairline between sections goes */
.section--dark,
.section--dark + .section,
.section--dark + .dark {
  border-top: 0;
}

.section--dark .flow .flow__ai h4 {
  color: var(--white);
}

/* A black band right before the black CTA + footer: leave a clear white gap between the two */
main > .section--dark:last-child {
  margin-bottom: clamp(32px, 5vw, 80px);
}

/* Fixed light colours inside a dark band */
.section--dark .tags li {
  background: var(--panel);
}

.section--dark .insight-card__art {
  background: var(--cell);
}

/* Last line of a headline on a dark band: orange to light-orange gradient */
.title-accent {
  background: linear-gradient(100deg, var(--orange) 10%, #ffd2a1 90%);
  /* Each wrapped line gets the full gradient */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Nodes and pipelines, as on nalarx.com ----------
   One look for step lists across the site: rounded nodes joined by dashed arrows whose dashes
   flow, and a highlight that walks the steps (.is-active, set by js/motion.js; hover takes over).
   Used by the AI approach, case-study flows, "What we do" features, Services rows and the
   Industries client journeys. */
:root {
  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23888d94' stroke-width='1.4'/%3E%3C/svg%3E");
  --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888d94' stroke-width='1.4'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --node-ease: 0.5s var(--ease-out);
}

/* Arrows between nodes: --link is the gap they cross, --dash their colour. They point right;
   a list whose nodes stack sets the --a-* switches (see "Down arrows" below) to point them down. */
.approach--pipeline > li:not(:last-child)::after,
.flow--diagram > li:not(:last-child)::after,
.features--linked > .feature:not(:last-child)::after,
.journeys--steps .point:not(:last-child)::after {
  --dash: var(--line-strong);
  content: "";
  position: absolute;
  top: var(--a-top, 50%);
  left: var(--a-left, calc(100% + 1px));
  width: var(--a-width, calc(var(--link) - 2px));
  height: var(--a-height, 10px);
  margin-top: var(--a-shift, -5px);
  background: var(--a-head, var(--arrow-right)) var(--a-head-at, right center) / var(--a-head-size, 6px 10px) no-repeat,
    linear-gradient(var(--a-angle, 90deg), var(--dash) 50%, transparent 0) var(--a-dash-at, 0 50%) / var(--a-dash-size, 8px 1.5px) var(--a-repeat, repeat-x);
  pointer-events: none;
}

.approach--pipeline > li.is-active::after,
.flow--diagram > li.is-active::after,
.features--linked > .feature.is-active::after,
.journeys--steps .point.is-open::after {
  --dash: var(--orange);
}

@keyframes dash-flow-x {
  to { background-position: right center, 8px 50%; }
}

@keyframes dash-flow-y {
  to { background-position: center bottom, 50% 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .approach--pipeline > li:not(:last-child)::after,
  .flow--diagram > li:not(:last-child)::after,
  .features--linked > .feature:not(:last-child)::after,
  .journeys--steps .point:not(:last-child)::after {
    animation: var(--a-flow, dash-flow-x) 0.7s linear infinite;
  }
}

/* Down arrows: always between journey steps; elsewhere once the nodes stack */
.journeys--steps .journey__steps {
  --a-top: calc(100% + 1px);
  --a-left: 23px;
  --a-width: 10px;
  --a-height: calc(var(--link) - 2px);
  --a-shift: 0;
  --a-head: var(--arrow-down);
  --a-head-at: center bottom;
  --a-head-size: 10px 6px;
  --a-angle: 180deg;
  --a-dash-at: 50% 0;
  --a-dash-size: 1.5px 8px;
  --a-repeat: repeat-y;
  --a-flow: dash-flow-y;
}

@media (max-width: 1100px) {
  .approach--pipeline {
    --a-top: calc(100% + 1px);
    --a-left: 34px;
    --a-width: 10px;
    --a-height: calc(var(--link) - 2px);
    --a-shift: 0;
    --a-head: var(--arrow-down);
    --a-head-at: center bottom;
    --a-head-size: 10px 6px;
    --a-angle: 180deg;
    --a-dash-at: 50% 0;
    --a-dash-size: 1.5px 8px;
    --a-repeat: repeat-y;
    --a-flow: dash-flow-y;
  }
}

@media (max-width: 1000px) {
  .features--linked {
    --a-top: calc(100% + 1px);
    --a-left: 42px;
    --a-width: 10px;
    --a-height: calc(var(--link) - 2px);
    --a-shift: 0;
    --a-head: var(--arrow-down);
    --a-head-at: center bottom;
    --a-head-size: 10px 6px;
    --a-angle: 180deg;
    --a-dash-at: 50% 0;
    --a-dash-size: 1.5px 8px;
    --a-repeat: repeat-y;
    --a-flow: dash-flow-y;
  }
}

@media (max-width: 700px) {
  .flow--diagram {
    --a-top: calc(100% + 1px);
    --a-left: 24px;
    --a-width: 10px;
    --a-height: calc(var(--link) - 2px);
    --a-shift: 0;
    --a-head: var(--arrow-down);
    --a-head-at: center bottom;
    --a-head-size: 10px 6px;
    --a-angle: 180deg;
    --a-dash-at: 50% 0;
    --a-dash-size: 1.5px 8px;
    --a-repeat: repeat-y;
    --a-flow: dash-flow-y;
  }
}

/* Panel around a diagram: rounded, with a small caps label */
.diagram {
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.045), transparent 55%), var(--panel);
}

.diagram__label {
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- AI approach: five steps in a row (AI Implementation) ----------
   The bar along the bottom fills while a step is active. */
.approach--pipeline {
  --link: 36px;
  --step-time: 2.8s;
  gap: var(--link);
}

.approach--pipeline li {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(var(--orange), var(--orange)) 0 100% / 0 3px no-repeat,
    var(--panel);
  transition: border-color var(--node-ease), background-color var(--node-ease),
    box-shadow var(--node-ease), translate var(--node-ease);
}

.approach--pipeline li:first-child {
  border-top-color: var(--line);
}

/* Small numbered box, as in .features--nodes */
.approach--pipeline .approach__num,
.approach--pipeline li:first-child .approach__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 650;
  font-stretch: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  transition: color var(--node-ease), border-color var(--node-ease), background-color var(--node-ease);
}

.approach--pipeline li.is-active {
  border-color: var(--orange);
  background-color: var(--white);
  background-size: 100% 3px, auto;
  box-shadow: 0 22px 44px -28px rgba(242, 144, 42, 0.7);
  translate: 0 -4px;
  transition: border-color var(--node-ease), background-color var(--node-ease),
    box-shadow var(--node-ease), translate var(--node-ease), background-size var(--step-time) linear;
}

.approach--pipeline li.is-active .approach__num {
  border-color: transparent;
  background: var(--orange);
  color: var(--ink);
}

@media (max-width: 1100px) {
  /* One step per row: number on the left, the arrows run down between the rows */
  .approach--pipeline {
    --link: 28px;
    grid-template-columns: 1fr;
  }

  .approach--pipeline li {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 18px;
    align-items: start;
    padding: 20px 22px;
  }

  .approach--pipeline .approach__num,
  .approach--pipeline li:first-child .approach__num {
    grid-row: span 2;
    margin-bottom: 0;
  }
}

/* ---------- Case-study flow (AI Implementation) ----------
   The AI node glows orange with a grain, as the centre card on nalarx.com. */
.flow--diagram {
  --link: 34px;
  gap: var(--link);
}

.flow--diagram li {
  padding: 18px 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color var(--node-ease), background-color var(--node-ease),
    box-shadow var(--node-ease), translate var(--node-ease);
}

.flow--diagram li::before {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.flow--diagram li.is-active {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.06);
  translate: 0 -3px;
}

/* The AI step: orange glass with a grain */
.flow--diagram .flow__ai {
  border-color: rgba(255, 200, 150, 0.45);
  background: var(--grain) 0 0 / 160px,
    radial-gradient(120% 90% at 15% 0%, #ffb15e, transparent 60%),
    linear-gradient(150deg, #f2902a, #9c4a08);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: 0 24px 50px -24px rgba(242, 144, 42, 0.65);
  color: rgba(255, 255, 255, 0.86);
}

.flow--diagram .flow__ai::before {
  content: counter(flow, decimal-leading-zero) "  ·  AI";
  color: #ffe2c2;
}

.flow--diagram .flow__ai.is-active {
  border-color: #ffd2a1;
  box-shadow: 0 0 0 4px rgba(242, 144, 42, 0.18), 0 26px 60px -20px rgba(242, 144, 42, 0.85);
}

/* The human step: orange outline */
.flow--diagram .flow__person {
  border-color: rgba(242, 144, 42, 0.6);
  background: rgba(242, 144, 42, 0.07);
  color: var(--text);
}

.flow--diagram .flow__person::before {
  content: counter(flow, decimal-leading-zero) "  ·  People";
  color: var(--orange);
}

.flow--diagram .flow__person.is-active {
  border-color: var(--orange);
  background-color: rgba(242, 144, 42, 0.14);
}

/* ---------- "What we do" as nodes (AI, BT, FL practice pages) ----------
   .features--linked adds arrows, for capabilities that follow one another. */
.features--nodes {
  --link: 34px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: var(--link);
  border-top: 0;
}

.features--nodes .feature,
.features--nodes .feature:first-child,
.features--nodes .feature:nth-child(odd):not(:first-child) {
  position: relative;
  padding: 26px 26px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color var(--node-ease), background-color var(--node-ease),
    box-shadow var(--node-ease), translate var(--node-ease);
}

.features--nodes .feature h3 {
  flex-direction: column;
  gap: 18px;
}

.features--nodes .feature__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 14px;
  font-weight: 650;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: color var(--node-ease), border-color var(--node-ease), background-color var(--node-ease);
}

.features--nodes .feature.is-active {
  border-color: rgba(242, 144, 42, 0.7);
  background-color: rgba(242, 144, 42, 0.07);
  box-shadow: 0 24px 50px -30px rgba(242, 144, 42, 0.7);
  translate: 0 -3px;
}

.features--nodes .feature.is-active .feature__num {
  border-color: transparent;
  background: var(--orange);
  color: var(--night);
}

@media (max-width: 1000px) {
  .features--nodes {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Linked capabilities stack, so the arrows can keep pointing to the next one */
  .features--linked {
    --link: 28px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .features--nodes {
    grid-template-columns: 1fr;
  }
}

/* ---------- Services rows as cards (services.html) ---------- */
.service-list--cards {
  display: grid;
  gap: 14px;
  border-top: 0;
}

.service-list--cards .service-row {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.045), transparent 55%), var(--panel);
  overflow: hidden;
  transition: border-color var(--node-ease), box-shadow var(--node-ease);
}

.service-list--cards .service-row__link {
  padding: 30px clamp(22px, 2.6vw, 40px);
}

/* Orange wash from the left instead of the full-width tint */
.service-list--cards .service-row__link::before {
  inset: 0;
  z-index: 0;
  background: radial-gradient(70% 140% at 0% 50%, rgba(242, 144, 42, 0.16), transparent 70%);
  transition: opacity var(--node-ease);
}

.service-list--cards .service-row__link > * {
  position: relative;
}

.service-list--cards .service-row.is-active {
  border-color: rgba(242, 144, 42, 0.6);
  box-shadow: 0 30px 60px -40px rgba(242, 144, 42, 0.8);
}

.service-list--cards .service-row.is-active .service-row__link::before {
  opacity: 1;
}

.service-list--cards .service-row.is-active .service-row__art .iso {
  transform: translateY(-6px);
}

/* Items as chips, as the tool list on nalarx.com */
.service-list--cards .service-row__items {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
  font-size: 14px;
}

.service-list--cards .service-row__items li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  line-height: 1.3;
}

.service-list--cards .service-row__items li::before {
  position: static;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.service-list--cards .service-row__go {
  border-radius: 14px;
}

.service-list--cards .service-row.is-active .service-row__go {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--night);
  transform: translateX(4px);
}

/* ---------- Industries client journeys as diagrams (industries.html) ----------
   Each journey is a rounded panel; its steps are nodes joined by down arrows. The step that
   is open, or the last one (where the work leads), is marked in orange. */
.journeys--steps {
  gap: 14px;
}

.journeys--steps .journey,
.journeys--steps .journey:first-child {
  padding: 26px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
}

.journeys--steps .journey__steps {
  --link: 22px;
  display: grid;
  gap: var(--link);
  margin-top: 20px;
  border-bottom: 0;
}

.journeys--steps .point,
.journeys--steps .point:first-child,
.journeys--steps .point + .point {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  transition: border-color var(--node-ease), box-shadow var(--node-ease);
}

.journeys--steps .point__toggle {
  padding: 12px 14px;
}

.journeys--steps .point__panel p {
  margin: 0 14px 12px 44px;
}

.journeys--steps .point:last-child {
  border-color: rgba(242, 144, 42, 0.55);
  background: var(--orange-soft);
}

.journeys--steps .point.is-open {
  border-color: var(--orange);
  box-shadow: 0 16px 34px -24px rgba(242, 144, 42, 0.8);
}

@media (max-width: 700px) {
  .flow--diagram {
    --link: 28px;
    grid-auto-flow: row;
  }
}

/* Fixed journeys (fractional-leadership.html): the same nodes without opening, in one row
   while the cards are wide; the arrows point right again ("initial" falls back to the defaults) */
@media (min-width: 1101px) {
  /* One journey per row: name on the left, the steps across the rest */
  .journeys--row {
    grid-template-columns: 1fr;
  }

  .journeys--row .journey,
  .journeys--row .journey:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(24px, 3vw, 56px);
    align-items: start;
  }

  .journeys--row .journey__steps {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
    --a-top: initial;
    --a-left: initial;
    --a-width: initial;
    --a-height: initial;
    --a-shift: initial;
    --a-head: initial;
    --a-head-at: initial;
    --a-head-size: initial;
    --a-angle: initial;
    --a-dash-at: initial;
    --a-dash-size: initial;
    --a-repeat: initial;
    --a-flow: initial;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .journeys--row .point__toggle {
    height: 100%;
    align-content: start;
  }
}

.journeys--row .point__toggle {
  grid-template-columns: 30px minmax(0, 1fr);
  cursor: default;
}

/* ---------- Practice areas as panels (business-transformation.html "Services") ----------
   Four rounded panels in a 2 × 2 grid: number, name, line and an isometric illustration on top,
   the services as chips below. The highlight walks the panels (js/motion.js): the active panel
   turns black with an orange glow, as the dark bands and nalarx.com cards. */
.tile-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  counter-reset: panel;
}

.tile-panels .tile-group,
.tile-panels .tile-group + .tile-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 0;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--node-ease), background-color var(--node-ease), box-shadow var(--node-ease);
}

/* Orange glow in the corner, shown on the active panel */
.tile-panels .tile-group::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 90% at 100% 0%, rgba(242, 144, 42, 0.28), transparent 65%);
  opacity: 0;
  transition: opacity var(--node-ease);
}

.tile-group__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(96px, 9vw, 140px);
  align-items: start;
  gap: 20px;
}

.tile-group__art {
  height: clamp(84px, 8vw, 120px);
  transition: transform var(--node-ease);
}

.tile-panels .tile-group__label {
  margin-bottom: 12px;
  font-size: var(--step-2);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: none;
  color: var(--ink);
  transition: color var(--node-ease);
}

.tile-panels .tile-group__label::before {
  counter-increment: panel;
  content: counter(panel, decimal-leading-zero) " / 04";
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.16em;
  color: var(--orange-deep);
}

.tile-panels .tile-group__desc {
  max-width: 460px;
  margin: 0;
  transition: color var(--node-ease);
}

.tile-panels .tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tile-panels .cell {
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  transition: border-color var(--node-ease), background-color var(--node-ease), color var(--node-ease);
}

.tile-panels .tiles > .cell::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

.tile-panels .cell--link {
  border-color: var(--orange);
  background: var(--orange-soft);
}

/* The active panel */
.tile-panels .tile-group.is-active {
  border-color: rgba(242, 144, 42, 0.45);
  background-color: var(--night);
  box-shadow: 0 34px 70px -40px rgba(242, 144, 42, 0.75);
}

.tile-panels .tile-group.is-active::before {
  opacity: 1;
}

.tile-panels .tile-group.is-active .tile-group__art {
  transform: translateY(-6px);
}

.tile-panels .tile-group.is-active .tile-group__label {
  color: var(--white);
}

.tile-panels .tile-group.is-active .tile-group__label::before {
  color: var(--orange);
}

.tile-panels .tile-group.is-active .tile-group__desc {
  color: var(--night-text);
}

.tile-panels .tile-group.is-active .cell {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e3e6e9;
}

.tile-panels .tile-group.is-active .cell--link {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--night);
}

.tile-panels .tile-group .cell:hover {
  border-color: var(--orange);
}

@media (max-width: 900px) {
  .tile-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .tile-group__head {
    grid-template-columns: minmax(0, 1fr) 64px;
  }

  .tile-group__art {
    height: 64px;
  }
}

/* ---------- Capability list as nodes (insights/tender-engine "What the engine does") ----------
   Rounded cards with a round number, as the step-flow above them; the highlight walks the list. */
.tags--nodes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  counter-reset: tag;
}

.tags--nodes li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  transition: border-color var(--node-ease), background-color var(--node-ease), box-shadow var(--node-ease);
}

.tags--nodes li::before {
  counter-increment: tag;
  content: counter(tag, decimal-leading-zero);
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  transition: color var(--node-ease), border-color var(--node-ease), background-color var(--node-ease);
}

.tags--nodes li.is-active {
  border-color: var(--orange);
  background-color: var(--white);
  box-shadow: 0 18px 40px -28px rgba(242, 144, 42, 0.8);
}

.tags--nodes li.is-active::before {
  border-color: transparent;
  background: var(--orange);
  color: var(--ink);
}

@media (max-width: 600px) {
  .tags--nodes {
    grid-template-columns: 1fr;
  }
}

/* ---------- Working models on a canvas (AI Implementation "Three ways to work with us") ----------
   Rounded cards; each diagram sits on a dark dotted canvas, as the platform panel on nalarx.com,
   with the orange "US" block glowing. The highlight walks the cards and replays their diagram. */
.models--canvas {
  gap: 14px;
}

.models--canvas .model,
.models--canvas .model:nth-child(2) {
  gap: 12px;
  padding: 14px 14px 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  transition: border-color var(--node-ease), background-color var(--node-ease), box-shadow var(--node-ease),
    translate var(--node-ease);
}

.models--canvas .model > :not(.model__diagram) {
  margin-inline: 14px;
}

.models--canvas .model__diagram {
  position: relative;
  height: 200px;
  margin-bottom: 14px;
  border-radius: 16px;
  background:
    radial-gradient(60% 70% at 50% 55%, rgba(242, 144, 42, 0.14), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.4px) 0 0 / 16px 16px,
    var(--night);
  overflow: hidden;
}

.models--canvas .model__diagram svg {
  width: 230px;
  height: 126px;
  overflow: visible;
}

/* The client's boxes: outlined in white on the canvas */
.models--canvas .model__diagram rect[fill="#fff"] {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.5;
}

.models--canvas .model__diagram rect {
  rx: 8px;
}

.models--canvas .model__diagram .m-piece {
  rx: 3px;
  stroke: var(--night);
}

.models--canvas :is(.m-you, .m-it, .m-team) text {
  fill: var(--white);
}

.models--canvas .m-team text {
  fill: var(--night-muted);
}

.models--canvas .m-us rect {
  filter: drop-shadow(0 0 14px rgba(242, 144, 42, 0.55));
}

/* Number as a small box, as in .features--nodes */
.models--canvas .model > .caption {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 650;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: color var(--node-ease), border-color var(--node-ease), background-color var(--node-ease);
}

.models--canvas .model.is-active {
  border-color: var(--orange);
  background-color: var(--white);
  box-shadow: 0 30px 60px -40px rgba(242, 144, 42, 0.85);
  translate: 0 -4px;
}

.models--canvas .model.is-active > .caption {
  border-color: transparent;
  background: var(--orange);
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .models--canvas .model.is-active .m-us rect {
    animation: us-glow 1.6s ease-in-out infinite alternate;
  }
}

@keyframes us-glow {
  to { filter: drop-shadow(0 0 26px rgba(242, 144, 42, 0.95)); }
}

/* ---------- Folded extra content (AI Implementation "And many more ways…") ----------
   A native <details>: the summary is a full-width bar with a pill and a plus that turns into a
   cross; the content slides open where the browser can animate to height: auto. */
.more {
  interpolate-size: allow-keywords;
}

.more__toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  list-style: none;
  cursor: pointer;
}

.more__toggle::-webkit-details-marker {
  display: none;
}

.more__toggle .caption {
  margin-right: auto;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.more__hint {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.more__hide,
.more[open] .more__show {
  display: none;
}

.more[open] .more__hide {
  display: inline;
}

/* Plus in a rounded box; its two lines turn 45° into a cross when open */
.more__icon {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.more__icon::before,
.more__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: var(--ink);
  transition: background-color 0.3s ease, transform 0.5s var(--ease-out);
}

.more__icon::after {
  transform: rotate(90deg);
}

.more__toggle:hover .caption {
  color: var(--ink);
}

.more__toggle:hover .more__icon,
.more[open] .more__icon {
  border-color: var(--orange);
  background: var(--orange);
}

.more__toggle:hover .more__icon::before,
.more__toggle:hover .more__icon::after,
.more[open] .more__icon::before,
.more[open] .more__icon::after {
  background: var(--night);
}

.more[open] .more__icon::before {
  transform: rotate(45deg);
}

.more[open] .more__icon::after {
  transform: rotate(135deg);
}

.more__toggle:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 8px;
}

.more::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.6s var(--ease-out), content-visibility 0.6s allow-discrete;
}

.more[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .more::details-content {
    transition: none;
  }
}

/* The cards inside: rounded, as the other nodes */
.journeys--more {
  gap: 14px;
  padding-bottom: 8px;
}

.journeys--more .journey,
.journeys--more .journey:first-child {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

@media (max-width: 600px) {
  .more__hint {
    display: none;
  }
}

/* Case studies with a diagram: no white rule above the first one, the section head is enough */
.case-study:has(> .diagram):first-of-type {
  border-top: 0;
}

/* ---------- Inner page heroes fit the first screen (desktop) ----------
   All text sits in the left column (title, lead, then the note), the illustration alone on the
   right. The illustration is capped at the window height under the sticky header, so the whole
   hero fits the first screen; the hero is only as tall as its content, so no empty band is left
   under it. .page-hero__aside dissolves (display: contents) so its note and art can take their
   own grid cells. The svg keeps its default "meet" fit and the 3D canvas follows it
   (js/iso-gl.js). */
@media (min-width: 901px) {
  .page-hero:has(.page-hero__art) {
    --hero-pad: clamp(24px, 5vh, 72px);
    padding-block: var(--hero-pad);
  }

  .page-hero:has(.page-hero__art) .page-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(32px, 4vw, 72px);
    row-gap: 0;
    align-items: center;
  }

  .page-hero:has(.page-hero__art) .page-hero__text {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  /* No note under the lead (About): the text centres against the illustration */
  .page-hero:has(.page-hero__art):not(:has(.page-hero__aside p)) .page-hero__text {
    grid-row: 1 / span 2;
    align-self: center;
  }

  .page-hero:has(.page-hero__art) .page-hero__aside {
    display: contents;
  }

  .page-hero:has(.page-hero__art) .page-hero__aside p {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    max-width: 560px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }

  .page-hero:has(.page-hero__art) .page-hero__art {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    width: min(100%, 600px);
  }

  .page-hero__art svg {
    max-height: max(240px, calc(var(--screen-h) - var(--header-h) - 10px - 2 * var(--hero-pad)));
  }
}

/* Hero headline with a long word (.display--fit: "Implementation", "Transformation"): the type shrinks to the
   column width so the word never runs under the illustration (cqi = 1% of .page-hero__text).
   Other headlines keep the full size. */
.page-hero__text {
  container-type: inline-size;
}

.page-hero__text .display--fit {
  font-size: min(var(--step-5), 10.4cqi);
}

/* Pillar heroes: the button under the lead */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}
/* ---------- Mobile: headlines and their sub-headlines centred ----------
   One column from 900px down, so every section head, inner-page hero and CTA box is centred.
   Home hero: css/home.css. Content below the heads (cards, tables, forms) stays left-aligned. */
@media (max-width: 900px) {
  .section-label,
  .breadcrumb {
    justify-content: center;
  }

  .split--head,
  .page-hero__text,
  .contact-page__intro,
  .contact__box {
    text-align: center;
  }

  .split--head .lead {
    justify-self: center;
  }

  .page-hero__text .display,
  .page-hero__text .lead,
  .contact-page__intro .lead,
  .contact__box {
    margin-inline: auto;
  }

  .contact__box p,
  .contact-page__figure,
  .contact-page__art {
    margin-inline: auto;
  }

  /* Value cards (Home, About), before → after rows (Home "The problem"),
     and the Home engagement example + runway case text */
  .value,
  .compare,
  .case-study__text,
  .case__chart .caption,
  .case__text {
    text-align: center;
  }

  /* AI Implementation (and the same components elsewhere): feature columns, case-study flow
     steps, use-case cards, working models */
  .feature,
  .flow li,
  .cases__more,
  .journey,
  .model,
  .approach li {
    text-align: center;
  }

  .flow li,
  .approach li {
    align-items: center;
  }

  /* Desktop columns have padding on the right only, which pushed the centred text left.
     Equal padding both sides: centred in one column, clear of the divider in two.
     !important beats the per-column padding-left rules above (:nth-child(odd), :first-child). */
  .feature {
    padding-inline: 14px !important;
  }

  /* Number above the title instead of beside it, so the title centres cleanly */
  .feature h3 {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .feature p {
    margin-inline: auto;
  }

  /* Service groups (Business Transformation): label and description centred; the tiles stay as they are */
  .tile-group__label,
  .tile-group__desc,
  .table-wrap .caption {
    text-align: center;
  }

  .tile-group__desc {
    margin-inline: auto;
  }

  /* Open roles (Careers): title, level, description and the Apply button centred */
  .role {
    text-align: center;
  }

  .role .btn {
    justify-self: center;
  }

  /* Result line: the orange rule moves from the left edge to the top */
  .case-study__result {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 3px solid var(--orange);
  }

  .case__text {
    margin-inline: auto;
  }

  /* Inner-page hero: illustration and the note under it (About, Careers, pillar pages) */
  .page-hero__aside {
    text-align: center;
  }

  .page-hero__art {
    align-self: center;
  }

  .page-hero__aside p {
    margin-inline: auto;
  }

  /* Industry group tiles (About): icon, group name and industries centred */
  .tiles--groups .cell {
    align-items: center;
    text-align: center;
  }

  /* Fewer lines on phones: br.br-wide only breaks on desktop. A .title--fit heading follows the
     column width (cqi) so its longest line fits, e.g. Home "Start small, prove it, / then grow."
     (10.6em wide → 9.2cqi). */
  .br-wide {
    display: none;
  }

  .split--head:has(.title--fit) {
    container-type: inline-size;
  }

  .title--fit {
    font-size: min(var(--step-4), 9.2cqi);
  }
}

/* ---------- Phones and tablets: nodes meet the centred mobile layout ----------
   Section heads, heroes and cards are centred below 900px; the node components follow:
   hero button and model numbers centre, the feature arrows run down the middle, and the
   approach steps (number beside the text) stay left-aligned as a list. */
@media (max-width: 900px) {
  .page-hero__actions {
    justify-content: center;
  }

  .features--linked {
    --a-left: calc(50% - 5px);
  }

  .approach--pipeline li {
    text-align: left;
  }

  .models--canvas .model > .caption {
    margin-inline: auto;
  }
}

/* ---- Home "The problem": shimmer on "slide deck" (fallback for the letter wave below) ---- */
.problem .title-accent {
  display: block;
  width: fit-content;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(100deg, var(--orange) 0%, #ffd2a1 30%, var(--orange) 60%, #ffd2a1 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: slide-deck-shimmer 6s ease-in-out infinite alternate;
}
@keyframes slide-deck-shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .problem .title-accent { animation: none; }
}

/* Colour run (js/slide-deck-wave.js splits the letters and sets --n, the letter count): about 70%
   of the word is orange and the rest white at any moment, and the boundary keeps travelling left to right
   and round again, like a row of dots changing colour one by one. The letters stay still.
   Each letter is orange for ~70% of the cycle; the cycle is --n steps long and each letter starts
   one step after the one before, so the same share of letters is orange at all times. */
.problem .title-accent.is-wave {
  --step: 0.32s;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--white);
  animation: none;
}
.problem .title-accent.is-wave .ch {
  display: inline-block;
  white-space: pre;
  animation: slide-deck-run calc(var(--n) * var(--step)) linear infinite;
  /* Negative delays: already running on load, the run moving from left to right */
  animation-delay: calc((var(--i) - var(--n)) * var(--step));
}
@keyframes slide-deck-run {
  0%   { color: var(--white); }
  6%   { color: var(--orange); }
  70%  { color: var(--orange); }
  76%  { color: var(--white); }
  100% { color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .problem .title-accent.is-wave { color: var(--orange); }
  .problem .title-accent.is-wave .ch { animation: none; }
}

/* ---- Home practice cards: one font size (15px) for lead, points, opened text and link ---- */
.solution__lead,
.solution__points .point__toggle,
.solution__points .point__panel p,
.solution__link {
  font-size: 15px;
}

/* ---------- Careers: open roles as a filterable table (js/roles-table.js) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.roles-table__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 18px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--night-line);
}
.roles-table__field { display: grid; gap: 6px; flex: 1 1 220px; max-width: 340px; }
.roles-table__field span { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-muted); }
.roles-table__field input,
.roles-table__field select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--white);
  background: var(--night-2);
  border: 1px solid var(--night-line);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.roles-table__field input::placeholder { color: var(--night-muted); }
.roles-table__field select option { color: #15171a; background: #fff; }
.roles-table__field input:focus,
.roles-table__field select:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 144, 42, 0.25); }
.roles-table__reset {
  height: 44px;
  padding: 0 4px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange);
  background: none;
  border: 0;
  cursor: pointer;
}
.roles-table__reset:hover { text-decoration: underline; }
.roles-table__count { margin: 0 0 12px auto; font-size: 14px; color: var(--night-muted); }

.roles-table table { width: 100%; border-collapse: collapse; text-align: left; }
.roles-table thead th {
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  border-bottom: 1px solid var(--night-line);
}
.roles-table tbody tr { transition: background-color 0.2s ease; }
.roles-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.roles-table tbody tr:hover { background: rgba(242, 144, 42, 0.1); }
.roles-table tbody th,
.roles-table tbody td { padding: 22px 20px; vertical-align: middle; border-bottom: 1px solid var(--night-line); color: var(--night-text); font-size: 15px; line-height: 1.5; }
.roles-table tbody th { width: 28%; font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); font-weight: 700; letter-spacing: -0.01em; color: var(--white); }
.roles-table td[data-label="Level"] { width: 16%; white-space: nowrap; }
.roles-table__tag { display: inline-block; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--orange); border: 1px solid rgba(242, 144, 42, 0.5); border-radius: 999px; }
.roles-table__act { width: 1%; text-align: right; white-space: nowrap; }
.roles-table [hidden] { display: none; }
.roles-table__empty { padding: 28px 20px; color: var(--night-text); }
.roles-table__empty a { color: var(--orange); }

@media (max-width: 820px) {
  .roles-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .roles-table table, .roles-table tbody { display: block; }
  .roles-table tbody tr { display: grid; gap: 8px; padding: 20px 16px; border-bottom: 1px solid var(--night-line); }
  .roles-table tbody tr[hidden] { display: none; }
  .roles-table tbody th, .roles-table tbody td { display: block; width: auto; padding: 0; border: 0; }
  .roles-table td[data-label="Level"] { order: 1; }
  .roles-table__act { text-align: left; padding-top: 6px !important; }
  .roles-table__count { margin-left: 0; width: 100%; }
}

/* ---------- Services dropdown (desktop): list on the left, summary of the hovered item on the right ----------
   Markup is unchanged (li > a > strong + span). Each span is lifted into the right-hand pane and only the
   hovered / focused item (first one by default) shows. Phones keep the stacked list from base.css. */
@media (min-width: 901px) {
  .nav__menu {
    --pane-x: 292px;
    display: none;
    grid-template-columns: 268px;
    align-content: start;
    gap: 2px;
    width: min(780px, 100%);
    padding: 14px 14px 16px;
    counter-reset: svc;
    background:
      linear-gradient(var(--orange), var(--orange)) var(--pane-x) 22px / 2px calc(100% - 44px) no-repeat,
      var(--hb-bg);
    border: 1px solid var(--hb-line);
    border-radius: 22px;
    overflow: visible;
    box-shadow: var(--hb-shadow);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
  }
  .nav__dropdown.is-open .nav__menu {
    display: grid;
    animation: svc-in 0.28s var(--ease-out);
  }
  @keyframes svc-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  .nav__menu li:last-child:nth-child(odd) { grid-column: auto; }

  .nav__menu a {
    position: static;
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    padding: 16px 16px;
    border-radius: 14px;
    background: transparent;
    color: var(--hb-strong);
    transition: background-color 0.25s, color 0.25s;
  }
  .nav__menu a::before {
    counter-increment: svc;
    content: "0" counter(svc);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    transition: color 0.25s;
  }
  .nav__menu a::after {
    content: "→";
    margin-left: auto;
    color: var(--orange);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s, transform 0.25s var(--ease-out);
  }
  .nav__menu strong { margin: 0; font-size: 1rem; }

  /* Right-hand pane */
  .nav__menu span {
    position: absolute;
    top: 32px;
    left: calc(var(--pane-x) + 36px);
    right: 32px;
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.4rem);
    line-height: 1.45;
    color: var(--hb-strong);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
  }
  .nav__menu span::before {
    content: "In short";
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange-deep);
  }

  /* Active item: hovered, keyboard-focused, or the first one while nothing else is */
  .nav__menu li:hover > a,
  .nav__menu li:focus-within > a,
  .nav__menu:not(:has(li:hover, li:focus-within)) li:first-child > a {
    background: rgba(242, 144, 42, 0.14);
  }
  .header.is-dark .nav__menu li:hover > a::before,
  .header.is-dark .nav__menu li:focus-within > a::before,
  .header.is-dark .nav__menu:not(:has(li:hover, li:focus-within)) li:first-child > a::before,
  .header.is-dark .nav__menu span::before { color: var(--orange); }
  .nav__menu li:hover > a::before,
  .nav__menu li:focus-within > a::before,
  .nav__menu:not(:has(li:hover, li:focus-within)) li:first-child > a::before { color: var(--orange-deep); }
  .nav__menu li:hover > a::after,
  .nav__menu li:focus-within > a::after,
  .nav__menu:not(:has(li:hover, li:focus-within)) li:first-child > a::after { opacity: 1; transform: none; }
  .nav__menu li:hover span,
  .nav__menu li:focus-within span,
  .nav__menu:not(:has(li:hover, li:focus-within)) li:first-child span {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .nav__dropdown.is-open .nav__menu { animation: none; }
  .nav__menu span, .nav__menu a::after { transition: none; }
}

/* Careers hero: bold sub-heading between the title and the intro text */
.page-hero__sub {
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  font-size: var(--step-2);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.page-hero__sub + .lead { margin-top: clamp(16px, 2vw, 24px); }

/* ---------- Phones and tablets: lighter header glass ----------
   A live blur behind the sticky bar is redrawn on every scroll step, which iPhones feel most.
   On touch / narrow screens the bar drops the blur and is a touch more opaque instead, so it
   looks almost the same. */
@media (pointer: coarse), (max-width: 900px) {
  .header { --hb-bg: rgba(255, 255, 255, 0.96); }
  .header.is-dark { --hb-bg: rgba(32, 36, 42, 0.96); }
  .header__inner::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}