/* ═══════════ Inner pages — shared fixes (loaded after the page stylesheet on every page except home) ═══════════ */

/* ── Scroll reveal ──
   Cards and rows carry both .rv and their own hover class (.truth-card, .svc-row, .why-cell…). The hover
   class's `transition` came later and replaced the reveal's, so ~180 elements popped in instead of fading up.
   One merged list keeps both; the stagger delay applies to the reveal only, never to hover. */
.rv.rv{
  transition-property: opacity, transform, background-color, padding-left, color, border-color;
  transition-duration: .9s, .9s, .3s, .3s, .2s, .2s;
  transition-timing-function: var(--ease);
  transition-delay: 0s;
}
.rv.rv.d1{ transition-delay: .1s, .1s, 0s, 0s, 0s, 0s; }
.rv.rv.d2{ transition-delay: .2s, .2s, 0s, 0s, 0s, 0s; }
.rv.rv.d3{ transition-delay: .3s, .3s, 0s, 0s, 0s, 0s; }
.rv.rv.d4{ transition-delay: .4s, .4s, 0s, 0s, 0s, 0s; }

/* ── Scroll motion (inner-motion.js adds html.im-on) ── */
.im-on .split-word{ display: inline-block; } /* words need a box to rise / fade individually */

/* Swipe-stack: big process steps stick under the header and the next one slides over */
.im-stack > *{
  position: sticky;
  top: calc(var(--k-header-h) + 16px);
  background: var(--stack-bg);
}
.im-stack > * > *{ will-change: transform, opacity; }

/* Timeline: the step crossing the middle of the screen lights its number */
.proc-n, .step-n{ transition: color .45s var(--ease); }
/* !important: inner-light.css pins step-number colours with !important in the lightened sections */
.im-on .is-lit .proc-n, .im-on .is-lit .step-n{ color: var(--color-secondary) !important; }

/* Count-up numbers keep a steady width while the digits change */
.hs-n, .result-n, .stat-n, .ss-n, .case-metric-n, .res-n, .fr-n, .cred-n{ font-variant-numeric: tabular-nums; }

/* ── Phone layer ──
   The page stylesheets only had a tablet breakpoint, so on phones they kept desktop-sized gaps (56–80px),
   roomy card padding (32–52px) and 2–3 column grids. This brings them to the homepage's tighter rhythm. */
@media (max-width: 560px){

  /* ── Hero ── */
  .hero{ padding-top: 48px; }
  .hero-cta-row{ margin-bottom: 40px; }
  .hero-sub{ margin-bottom: 32px; }

  /* Hero stats: one row per stat (number + label side by side) instead of three cramped columns */
  .hero-stats{ grid-template-columns: 1fr !important; margin-top: 40px; }
  .hero-stats > *{
    display: grid;
    /* number column ≥104px (grows for unbreakable values like "B2B+B2C"), so long values can't squeeze the label */
    grid-template-columns: minmax(104px, max-content) minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
    padding: 16px 0 !important; /* beats inline padding-left on /work/ */
    border-right: 0 !important;
    border-bottom: 1px solid var(--rul, var(--line));
  }
  .hero-stats > :last-child{ border-bottom: 0; }
  /* /work/: the stats sit outside the container (they used inline padding-left), so give them the page gutter */
  .filter-bar + .hero-stats,
  .filter-bar{ padding-inline: var(--gutter); }
  .hero-stats .hs-n{ margin: 0; font-size: clamp(26px, 7.5vw, 34px); }
  .hero-stats .hs-l{ letter-spacing: .08em; line-height: 1.5; }

  /* ── Section intros: heading block → content ── */
  .model-top, .deliver-top, .markets-top, .ev-top, .mirror-top, .replaces-top, .together-top,
  .problem-inner, .gap-inner, .prob-inner, .stack-intro, .why-inner, .related-hl{ margin-bottom: 32px; }
  .ev-grid{ margin-bottom: 40px; }
  .cta-body{ margin-bottom: 36px; }

  /* ── Content blocks that open a section's body ── */
  .item-rows, .disc-rows, .cred-strip, .qa-list, .contact-strip, .service-rows, .method-steps,
  .eng-grid, .results-grid, .fw-rows, .faq-items, .svc-rows, .model-rows, .for-cells,
  .deliverables-grid, .diff-grid, .proc-steps, .report-cards, .process-steps, .hero-statement,
  .principle-rows, .channel-rows, .types-grid, .plat-rows, .cro-grid, .type-rows, .anatomy-rows,
  .test-grid, .tech-rows, .compare-grid, .guar-cells, .next-cta-row, .next-right, .filter-bar{ margin-top: 36px; }

  /* ── Card grids: single column (they overflowed or squeezed copy into ~160px columns) ── */
  .pains-grid, .deliver-grid, .guar-cells, .ev-grid, .arc-grid, .featured-results, .truth-cards,
  .prob-cells, .why-cells, .compare-g, .types-grid, .problem-stats, .work-grid{ grid-template-columns: 1fr !important; }
  .work-grid > *{ grid-column: auto !important; } /* a featured card spanning 2 columns re-created a second track */

  /* ── Card padding: 32–52px sides → 22px on a ~330px column ── */
  .reality-resolve, .guar-cell, .market-cell, .ev-cell, .mirror-cell, .res-case, .fr-cell, .case-inner,
  .pull-quote, .highlight-box, .rel-card, .truth-card, .eng-card, .compare-col, .for-cell, .del-cell,
  .prob-cell, .report-card, .ps-cell, .work-inner, .why-cell, .pain-cell, .arc-cell, .c-col, .type-card{
    padding: 28px 22px;
  }

  /* Inline-styled boxes (e.g. the /work/ testimonial card) */
  main [style*="padding:40px"]{ padding: 28px 22px !important; }

  /* Journal article: section headings */
  .prose h2{ margin-top: 36px; padding-top: 36px; }

  /* ── Numbers grids stay two-up, just tighter ── */
  .results-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .result-cell{ padding: 28px 16px 28px 0; }
  .result-cell:nth-child(2n){ padding-left: 16px; padding-right: 0; }
}

/* Lightened sections: the white secondary button would read as a second solid black one after the
   automatic mapping in inner-light.css, so make it an outline button (beats it on specificity). */
.inner .is-light a.btn-wh{
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(20, 18, 16, .28) !important;
}
.inner .is-light a.btn-wh:hover{ border-color: var(--text-primary) !important; }

/* ═══════════ Compact layout on phones/tablets (inner-compact.js adds html.cmp-on ≤860px) ═══════════ */

/* ── Scroll galleries (card groups + big process steps) ──
   Specificity is doubled on purpose: inner-light.css pins card backgrounds/borders with !important. */
.cmp-on .im-sl .im-sl-track.im-sl-track{
  background: none !important;
  border: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
}
.cmp-on .im-sl .im-slide.im-slide{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 0 !important;
  min-height: 0 !important;
}

/* the gallery must never widen the grid column / page it sits in (its row of items is wider than the screen) */
.cmp-on .im-sl, .im-sl.is-sliding{ min-width: 0; max-width: 100%; contain: inline-size; }
/* sliding on any width (phones; card groups on desktop too): plain track, no grid gaps/lines */
.im-sl.is-sliding .im-sl-track.im-sl-track{ background: none !important; border: 0 !important; gap: 0 !important; margin: 0 !important; }

/* sliding: one row, items side by side (phones, and card groups on desktop) */
.im-sl.is-sliding .im-sl-stage{
  position: sticky;
  top: var(--sl-top, calc(var(--k-header-h) + 16px));
  overflow: hidden;
  margin-left: calc(-1 * var(--sl-l, 0px));
  margin-right: calc(-1 * var(--sl-r, 0px));
  padding-left: var(--sl-l, 0px);
  padding-right: var(--sl-r, 0px);
}
.im-sl.is-sliding .im-sl-track.im-sl-track{
  display: flex !important;
  width: auto;
  will-change: transform;
}
.im-sl.is-sliding .im-slide.im-slide{
  flex: 0 0 78%;
  padding: 26px 24px 8px 0 !important;
  margin-right: 24px;
  border-top: 0 !important;
  border-right: 1px solid var(--line) !important;
}
.im-sl.is-sliding .im-slide.im-slide:last-child{ border-right: 0 !important; margin-right: 0; }

.im-sl-foot{ display: none; }
.im-sl.is-sliding .im-sl-foot{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.im-sl-bar{ position: relative; flex: 1; height: 1px; background: var(--line); }
.im-sl-bar i{
  position: absolute; inset: 0;
  background: var(--text-primary);
  transform: scaleX(0);
  transform-origin: left;
}
.im-sl-count{ font: 500 11px/1 var(--font-body); letter-spacing: .12em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.im-sl-count b{ font-weight: 500; color: var(--text-primary); }

/* big decorative numbers inside gallery items become a small index label */
.cmp-on .im-sl :is(.ms-number, .ps-num, .pr-num, .pr-number, .an-num, .mr-num, .truth-icon){
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .14em;
  margin: 0 0 14px !important;
  color: var(--text-tertiary) !important;
  opacity: 1 !important;
}

/* ── Accordions (long row lists) ── */
.cmp-on .im-acc{ position: relative; cursor: pointer; padding-right: 48px; overflow: hidden; }
.cmp-on .im-acc:not(.is-open) .im-acc-part{ display: none !important; }
.cmp-on .im-acc:not(.is-open){ padding-top: 18px !important; padding-bottom: 18px !important; gap: 8px; }
.im-acc-btn{ display: none; }
.cmp-on .im-acc-btn{
  display: block;
  position: absolute;
  top: 18px; right: 0;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background-color .3s, border-color .3s, transform .45s var(--ease);
}
.cmp-on .im-acc-btn span{
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 1px;
  background: var(--text-primary);
  transform: translate(-50%, -50%);
  transition: background-color .3s;
}
.cmp-on .im-acc-btn span + span{ transform: translate(-50%, -50%) rotate(90deg); }
.cmp-on .im-acc.is-open .im-acc-btn{ transform: rotate(45deg); background: var(--text-primary); border-color: var(--text-primary); }
.cmp-on .im-acc.is-open .im-acc-btn span{ background: #fff; }
/* big decorative numbers ("01" at 80px, overlapping the title) become a small label above it */
.cmp-on .im-acc :is(.ms-number, .ps-num, .pr-num, .pr-number, .an-num, .mr-num){
  display: block;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: .14em;
  margin: 0 0 10px !important;
  color: var(--text-tertiary) !important;
}