/* ==========================================================================
   Hero + PRISME sections (home, /methodology, service pages). Loaded only where used ($pageStyles).
   Same identity as style.css: navy, Playfair Display / Inter, square corners, hairlines.
   Logical properties only (inline-start/end), so the RTL build needs no override.
   Motion is limited to a short fade-in, and only when the visitor has not asked for reduced motion.
   ========================================================================== */

.prisme-journey [hidden],
.prisme-selector [hidden] { display: none !important; }

.section-head { max-width: 46rem; margin-inline: auto; }
.prisme-note { font-size: .875rem; color: #475569; max-width: 44rem; margin-inline: auto; }
.prisme-disclaimer {
  max-width: 46rem; margin: 2rem auto 0; font-size: .8125rem; line-height: 1.6; color: #475569;
  border-inline-start: 2px solid var(--line-strong); padding-inline-start: .9rem;
}

/* ---------- Hero ---------- */
.hero-prisme { padding: 1.5rem 0 3.5rem; }
@media (min-width: 768px) { .hero-prisme { padding: 2rem 0 5rem; } }
.hero-prisme-body { max-width: 56rem; margin-inline: auto; }
.hero-title-prisme { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.45rem); line-height: 1.15; text-wrap: balance; }
.hero-lead { max-width: 46rem; margin: 1.25rem auto 0; font-size: 1.0625rem; line-height: 1.7; }
.hero-shifts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
  margin: 2rem auto 0; padding: 0; max-width: 52rem;
}
@media (min-width: 768px) { .hero-shifts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero-shifts li {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1rem .4rem;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--navy); padding: .8rem .6rem;
}
.shift-from { flex-basis: 100%; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--navy-label); }
.shift-arrow { color: var(--navy-label); }
.shift-to { color: var(--navy); font-size: 1rem; line-height: 1.3; }
.hero-actions { margin-top: 2rem; }
.hero-trust { margin: 1.5rem auto 0; max-width: 40rem; font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--navy); }

/* ---------- Problems ---------- */
.problem-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.5rem; padding: 0; margin: 0; }
.problem-list li { border-top: 2px solid var(--navy); padding-top: 1rem; }

/* ---------- PRISME journey ---------- */
.prisme-stage { scroll-margin-top: 7rem; }
.prisme-tab {
  display: flex; align-items: center; gap: .9rem; width: 100%; padding: .9rem 0; text-align: start;
  background: none; border: 0; color: var(--navy); font: inherit; cursor: pointer; position: relative; min-height: 44px;
}
.prisme-letter {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: 1px solid var(--navy); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; color: var(--navy); background: var(--paper);
}
.prisme-tab-name { display: flex; flex-direction: column; font-weight: 600; line-height: 1.25; }
.prisme-alt { font-size: .75rem; font-weight: 500; color: var(--navy-label); }
.prisme-tab:hover .prisme-letter { background: rgba(28, 46, 66, .1); }
.prisme-tab[aria-expanded="true"] .prisme-letter { background: var(--navy); color: #fff; }

.prisme-panel { background: #fff; border: 1px solid var(--line); padding: 1.25rem; margin: .25rem 0 1.25rem; }
.prisme-panel-letter {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-inline-end: .35rem;
  border-radius: 50%; background: var(--navy); color: #fff; font-size: .95rem; vertical-align: middle;
}
.prisme-objective { font-family: var(--font-serif); font-size: 1.15rem; color: var(--navy); margin: .5rem 0 1.25rem; }
.prisme-panel-grid { display: grid; gap: 1.5rem; }
.prisme-facts { display: grid; gap: 1.1rem 2rem; grid-template-columns: 1fr; }
.prisme-facts dt, .prisme-list-title {
  font-family: var(--font-sans); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em;
  color: var(--navy-label); font-weight: 600; margin: 0 0 .25rem;
}
.prisme-facts dd { margin: 0; color: #334155; }
.prisme-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.25rem; }
.prisme-chips li { padding: .25rem .65rem; border: 1px solid var(--line-strong); font-size: .8125rem; color: var(--navy); background: var(--paper); }
.prisme-benefit {
  margin: 1.5rem 0 0; padding: .75rem 1rem; background: var(--paper);
  border-inline-start: 3px solid var(--navy); color: var(--navy); font-weight: 500;
}
.prisme-benefit-label { display: block; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--navy-label); font-weight: 600; }
.prisme-more { display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--navy); }
.prisme-letters-note { direction: rtl; }

@media (min-width: 768px) {
  .prisme-panel { padding: 1.75rem 2rem; }
  .prisme-journey[data-mode="home"] .prisme-facts { grid-template-columns: 1fr 1fr; }
  .prisme-journey[data-mode="full"] .prisme-panel-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* Without JavaScript: every stage is a card in a column and the buttons/hint are hidden. */
.prisme-journey:not(.is-enhanced) .prisme-tab,
.prisme-journey:not(.is-enhanced) .prisme-hint { display: none; }

/* Enhanced, narrow screens: vertical timeline (accordion) */
.prisme-journey.is-enhanced .prisme-stage:not(.is-open) .prisme-panel { display: none; }
.prisme-journey.is-enhanced .prisme-flow {
  border-inline-start: 1px solid var(--line-strong); margin-inline-start: 1.25rem; padding-inline-start: 1.1rem;
}
.prisme-journey.is-enhanced .prisme-letter { margin-inline-start: -2.4rem; }
.prisme-journey.is-enhanced .prisme-panel { border: 0; padding: .25rem 0 1rem; background: transparent; }
.prisme-journey.is-enhanced .prisme-panel-title { display: none; } /* the button already names the stage */

/* Enhanced, wide screens: horizontal track + one open panel underneath */
@media (min-width: 992px) {
  .prisme-journey.is-enhanced .prisme-flow {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: .5rem;
    border: 0; margin-inline-start: 0; padding-inline-start: 0;
  }
  .prisme-journey.is-enhanced .prisme-stage { display: contents; }
  .prisme-journey.is-enhanced .prisme-tab { grid-row: 1; flex-direction: column; text-align: center; gap: .6rem; padding: .5rem .25rem 1rem; }
  .prisme-journey.is-enhanced .prisme-tab-name { align-items: center; }
  .prisme-journey.is-enhanced .prisme-letter { margin-inline-start: 0; width: 3rem; height: 3rem; font-size: 1.2rem; }
  .prisme-journey.is-enhanced .prisme-panel { grid-row: 2; grid-column: 1 / -1; background: #fff; border: 1px solid var(--line); padding: 1.75rem 2rem; margin: 0; }
  .prisme-journey.is-enhanced .prisme-panel-title { display: block; }
  .prisme-stage:nth-of-type(1) .prisme-tab { grid-column: 1; }
  .prisme-stage:nth-of-type(2) .prisme-tab { grid-column: 2; }
  .prisme-stage:nth-of-type(3) .prisme-tab { grid-column: 3; }
  .prisme-stage:nth-of-type(4) .prisme-tab { grid-column: 4; }
  .prisme-stage:nth-of-type(5) .prisme-tab { grid-column: 5; }
  .prisme-stage:nth-of-type(6) .prisme-tab { grid-column: 6; }
  /* connector line between two letters */
  .prisme-journey.is-enhanced .prisme-stage:not(:last-child) .prisme-tab::before {
    content: ""; position: absolute; top: calc(.5rem + 1.5rem); height: 1px; background: var(--line-strong);
    inset-inline-start: calc(50% + 1.9rem); inset-inline-end: calc(-50% + 1.9rem - .5rem);
  }
}

/* Engagement selector: stages that do not apply are dashed, those that do are tinted */
.prisme-stage.is-in .prisme-letter { background: rgba(28, 46, 66, .12); }
.prisme-stage.is-out .prisme-letter { border-style: dashed; color: var(--navy-label); background: transparent; }
.prisme-stage.is-out .prisme-tab-title { color: var(--navy-label); }
.prisme-tab[aria-expanded="true"] .prisme-letter { background: var(--navy) !important; color: #fff !important; border-style: solid !important; }

.prisme-selector { margin-top: 3.5rem; }
.prisme-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; border: 0; padding: 0; margin: 0 0 1rem; }
.prisme-pill { position: relative; margin: 0; }
.prisme-pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.prisme-pill span {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; background: #fff;
  border: 1px solid var(--line-strong); font-size: .8125rem; font-weight: 500; color: var(--navy);
}
.prisme-pill input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.prisme-pill input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.prisme-selector-out { background: #fff; border: 1px solid var(--line); padding: 1rem 1.25rem; margin: 0 auto 1rem; max-width: 46rem; text-align: center; }
.prisme-sel-seq { font-weight: 600; color: var(--navy); margin: 0 0 .35rem; }
.prisme-sel-text { margin: 0 0 .5rem; color: #475569; }
.prisme-table-wrap { background: #fff; border: 1px solid var(--line); }
.prisme-table { --bs-table-bg: transparent; }
.prisme-table thead th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--navy-label); }
.prisme-table thead abbr { text-decoration: none; }
.prisme-table tbody th { font-weight: 600; color: var(--navy); min-width: 14rem; }
.prisme-row-link { color: var(--navy); }
.prisme-mark { color: var(--navy-label); }
.prisme-mark.is-on { color: var(--navy); }

@keyframes prisme-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .prisme-journey.is-enhanced .prisme-stage.is-open .prisme-panel { animation: prisme-in .22s ease-out; }
}

/* ---------- Value pyramid ---------- */
.pyramid-flow { font-weight: 600; color: var(--navy); font-size: .95rem; }
.pyramid { list-style: none; margin: 0 auto; padding: 0; max-width: 56rem; display: flex; flex-direction: column-reverse; align-items: center; gap: .4rem; }
.pyramid-level {
  width: 100%; display: grid; grid-template-columns: 5.5rem 1fr; grid-template-areas: "num name" "num text";
  column-gap: 1rem; row-gap: .1rem; padding: .85rem 1.25rem; align-items: baseline;
}
.pyramid-num { grid-area: num; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.pyramid-name { grid-area: name; font-family: var(--font-serif); font-size: 1.1rem; }
.pyramid-text { grid-area: text; font-size: .875rem; }
.pyramid-level-1 { background: #eef2f6; color: var(--navy); }
.pyramid-level-2 { background: #dfe7ee; color: var(--navy); }
.pyramid-level-3 { background: #c9d6e2; color: var(--navy); }
.pyramid-level-4 { background: #25425c; color: #fff; }
.pyramid-level-5 { background: #1c2e42; color: #fff; }
.pyramid-level-6 { background: #101a26; color: #fff; }
@media (min-width: 768px) {
  .pyramid-level-2 { width: 92%; }
  .pyramid-level-3 { width: 84%; }
  .pyramid-level-4 { width: 76%; }
  .pyramid-level-5 { width: 68%; }
  .pyramid-level-6 { width: 60%; }
}
.values-block { margin-top: 5rem; }

/* ---------- Where we create value ---------- */
.value-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; padding: 0; margin: 0; }
.value-grid li { background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--navy); padding: 1.25rem; }

/* ---------- Equations ("A + B + C") ---------- */
.equation { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.7rem; padding: 0; }
.equation li {
  position: relative; padding: .4rem .9rem; background: #fff; border: 1px solid var(--line-strong);
  color: var(--navy); font-weight: 600; font-size: .9rem;
}
.equation li + li::before {
  content: "+"; position: absolute; inset-inline-start: -1.15rem; top: 50%; transform: translateY(-50%);
  color: var(--navy-label); font-weight: 400;
}
.equation-light li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); color: #fff; }
.equation-light li + li::before { color: rgba(255, 255, 255, .8); }
.why-block .outcome-list, .outcome-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: 0; margin: 0; }
.outcome-list li { padding: .35rem .8rem; background: #fff; border: 1px solid var(--line-strong); color: var(--navy); font-size: .875rem; }

/* ---------- Differentiation band ---------- */
.diff-eyebrow { color: rgba(255, 255, 255, .78) !important; }
.diff-lead { color: rgba(255, 255, 255, .82); }
.diff-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 2rem; }
.diff-facts > div { border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 1rem; }
.diff-fact-text { color: rgba(255, 255, 255, .82); }

/* ---------- From problem to value ---------- */
.example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1.25rem; }
.example-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 1.5rem; }
.example-card dt { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--navy-label); font-weight: 600; margin-bottom: .2rem; }
.example-card dd { margin: 0 0 1rem; }
.prisme-path { display: flex; flex-wrap: wrap; gap: .35rem .5rem; padding: 0; margin: 0; }
.prisme-path li {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--navy);
  border: 1px solid var(--line-strong); padding: .15rem .55rem .15rem .15rem; padding-inline: .15rem .55rem;
}
.prisme-path-letter {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: .7rem; font-weight: 700;
}

/* ---------- Service pages: "how PRISME applies" ---------- */
.svc-prisme { border: 1px solid var(--line); background: #fff; padding: 1.5rem; }
.svc-prisme .prisme-path { margin: 1rem 0; }

/* ---------- Home: "how we work" (the five steps, reusing .timeline) ---------- */
.how-block { margin-top: 4rem; }

.prisme-path li a { display: inline-flex; align-items: center; gap: .35rem; color: var(--navy); text-decoration: none; }
.prisme-path li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prisme-path-links li { padding: 0; border: 0; }
.prisme-path li a { border: 1px solid var(--line-strong); padding-block: .15rem; padding-inline: .15rem .55rem; }