/* ============================================================
   INTELLICAMP — Industry pages
   Only what the homepage does not already provide. Cards, stats,
   work tiles, quotes, accordion and footer are all reused as-is,
   so these pages inherit the same motion without new JS.
   ============================================================ */

/* ---------- 1. Hero ----------
   Deliberately .ind-hero and not .hero: the boot curtain in motion.js is
   gated on .hero, and a five-second lockup belongs to the landing page,
   not to a page someone reached from a menu. */
.ind-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
}

/* a faint ledger grid — ruled columns, the texture of money software */
.ind-hero__ledger {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px),
    linear-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 92px 100%, 100% 46px;
  mask-image: radial-gradient(120% 80% at 20% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 80% at 20% 0%, #000 10%, transparent 72%);
  opacity: 0.7;
}

.ind-hero__inner { position: relative; z-index: 1; }

.ind-hero h1 {
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 16ch;
  margin-bottom: 1.4rem;
}

.ind-hero .lede { max-width: 58ch; margin-bottom: 2rem; }
.ind-hero .hero__cta { margin-bottom: 2.4rem; }

/* ---------- 2. Breadcrumb ---------- */
.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
  font-size: 0.74rem;
  color: var(--muted-3);
}

.crumb a { color: var(--muted-2); transition: color 0.25s ease; }
.crumb a:hover { color: var(--accent-ink); }
.crumb b { color: var(--paper); font-weight: 600; }

/* ---------- 3. Compliance badges ---------- */
.ind-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ind-badges .tag {
  border-color: var(--line);
  color: var(--muted);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.35s var(--ease);
}

.ind-badges .tag:hover { border-color: var(--accent-ink); color: var(--accent-ink); transform: translateY(-2px); }

/* the current industry, marked in the mega menu */
.mega__link.is-here strong { color: var(--accent-ink); }

/* ============================================================
   TYPE SCALE
   Every section title below is var(--step-1) and every label
   0.72rem, so nothing drifts out of step. Body copy stays Inter
   and headings Space Grotesk, matching the homepage.
   ============================================================ */

/* ---------- 4. Inline CTA band ---------- */
.ind-cta {
  display: grid;
  gap: 1.4rem;
  align-items: center;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(var(--accent-rgb), 0.09), transparent 58%),
    var(--ink-2);
}

@media (min-width: 820px) {
  .ind-cta { grid-template-columns: 1fr auto; gap: 2.4rem; }
}

.ind-cta h3 { font-size: clamp(1.15rem, 2.6vw, 1.65rem); letter-spacing: -0.02em; max-width: 26ch; }
.ind-cta p { color: var(--muted-2); font-size: var(--step--1); margin-top: 0.6rem; max-width: 60ch; }

/* ============================================================
   5. Compliance — drawn check-rings on a tinted grid
   ============================================================ */
.cmp {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.cmp__item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.3rem, 2.8vw, 1.8rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--accent-rgb), 0.07), transparent 55%),
    var(--ink-2);
  transition: border-color 0.4s ease, transform 0.5s var(--ease);
}

.cmp__item:hover { border-color: rgba(var(--accent-rgb), 0.45); transform: translateY(-4px); }

/* ledger grid in the card's own colour, faded out before it reaches the text */
.cmp__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--pc) 1px, transparent 1px),
    linear-gradient(90deg, var(--pc) 1px, transparent 1px);
  background-size: 100% 26px, 26px 100%;
  opacity: 0.07;
  mask-image: radial-gradient(90% 80% at 100% 0%, #000 5%, transparent 70%);
  -webkit-mask-image: radial-gradient(90% 80% at 100% 0%, #000 5%, transparent 70%);
  transition: opacity 0.5s ease, transform 0.9s var(--ease);
}

.cmp__item:hover .cmp__grid { opacity: 0.16; transform: translate(-6px, 6px); }

.cmp__ghost {
  position: absolute;
  right: 0.6rem;
  bottom: -1.2rem;
  z-index: -1;
  font-family: var(--font-display);
  font-size: 5.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pc);
  opacity: 0.07;
  pointer-events: none;
  transition: transform 0.7s var(--ease), opacity 0.5s ease;
}

.cmp__item:hover .cmp__ghost { transform: translateY(-6px); opacity: 0.13; }

.cmp__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.09), transparent 65%);
  transition: opacity 0.4s ease;
}

.cmp__item:hover::before { opacity: 1; }

/* ring draws, then the tick lands */
.cmp__ring { display: block; width: 44px; height: 44px; overflow: visible; margin-bottom: 1rem; }

.cmp__ring circle {
  fill: none;
  stroke: var(--pc, var(--accent));
  stroke-width: 1.6;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  rotate: -90deg;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transition: stroke-dashoffset 1.1s var(--ease) var(--d, 0s);
}

.cmp__ring path {
  fill: none;
  stroke: var(--pc, var(--accent));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset 0.5s var(--ease) calc(var(--d, 0s) + 0.7s);
}

.cmp.is-in .cmp__ring circle,
.cmp.is-in .cmp__ring path { stroke-dashoffset: 0; }
.cmp__item:hover .cmp__ring circle { stroke-dashoffset: -126; transition-duration: 0.9s; transition-delay: 0s; }

.cmp__item b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 0.6rem;
}

.cmp__item p { color: var(--muted-2); font-size: var(--step--1); line-height: 1.6; }

/* the deliverable, revealed on hover */
.cmp__out { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.cmp__item:hover .cmp__out { grid-template-rows: 1fr; }
.cmp__out > span { overflow: hidden; display: block; font-size: 0.72rem; color: var(--accent-ink); }
.cmp__out i { display: block; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); font-style: normal; }

/* ============================================================
   6. Where we work — rail and a panel that re-tints
   ============================================================ */
.exp { display: grid; gap: 1.6rem; }

/* centred: the panel is short and the rail is six items tall */
@media (min-width: 880px) {
  .exp { grid-template-columns: 268px 1fr; gap: 3rem; align-items: center; }
}

.exp__rail { position: relative; display: grid; gap: 2px; border-left: 1px solid var(--line-soft); }

.exp__mark {
  position: absolute;
  left: -1px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.45s var(--ease), height 0.35s var(--ease), width 0.35s var(--ease);
}

.exp__tab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.7rem 0.8rem 1rem;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--muted-2);
  transition: color 0.25s ease, background 0.3s ease, padding-left 0.35s var(--ease);
}

.exp__tab:hover { color: var(--paper); background: var(--ink-2); }
.exp__tab.is-on { color: var(--paper); background: var(--ink-3); padding-left: 1.25rem; }
.exp__tab:focus-visible { outline: 1px solid var(--accent-ink); outline-offset: -1px; }

.exp__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc, var(--accent)); flex-shrink: 0; transition: box-shadow 0.4s ease; }
.exp__tab.is-on .exp__dot { box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.14); }
.exp__n { margin-left: auto; font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; color: var(--muted-3); }

.exp__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  min-height: 320px;
  display: grid;
  align-content: center;
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(var(--accent-rgb), 0.06), transparent 55%),
    var(--ink-2);
}

.exp__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--pc, var(--accent)) 1px, transparent 1px),
    linear-gradient(90deg, var(--pc, var(--accent)) 1px, transparent 1px);
  background-size: 100% 34px, 34px 100%;
  opacity: 0.08;
  mask-image: radial-gradient(85% 90% at 100% 0%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(85% 90% at 100% 0%, #000 5%, transparent 72%);
}

.exp__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 70% at 88% 12%, var(--pc, var(--accent)), transparent 68%);
  opacity: 0.1;
  transition: background 0.6s ease;
}

.exp__ghost {
  position: absolute;
  right: 1.2rem;
  bottom: -1.6rem;
  z-index: -1;
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pc, var(--accent));
  opacity: 0.08;
  pointer-events: none;
  transition: color 0.6s ease;
}

/* only the words animate on a switch, so the surface can cross-fade */
.exp__item[hidden] { display: none; }
.exp__item.is-in { animation: exp-in 0.5s var(--ease) both; }

@keyframes exp-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(5px); }
  to { opacity: 1; transform: none; filter: none; }
}

.exp__item h3 { font-size: clamp(1.4rem, 3.2vw, 2.1rem); letter-spacing: -0.03em; margin-bottom: 0.7rem; }
.exp__item p { color: var(--muted-2); font-size: var(--step-0); line-height: 1.6; max-width: 56ch; }

.exp__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }

.exp__chips .tag {
  font-size: 0.78rem;
  padding: 0.4rem 0.8rem;
  animation: chip-in 0.45s var(--ease) both;
  animation-delay: calc(var(--i) * 0.05s);
  transition: border-color 0.3s ease, color 0.3s ease, transform 0.35s var(--ease);
}

.exp__chips .tag:hover { border-color: var(--accent-ink); color: var(--accent-ink); transform: translateY(-3px); }

@keyframes chip-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   7. Non-negotiables — homepage work tiles, reused
   ============================================================ */
.nn__body { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }

.nn__n {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
  margin-bottom: 0.8rem;
}

.nn__body h3 { font-size: var(--step-1); letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.nn__body p { color: var(--text-2); font-size: var(--step--1); line-height: 1.6; max-width: 44ch; }

/* ============================================================
   8. Case notes — 2x2, ghost numerals, drawn rules
   ============================================================ */
.cn {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 1.6rem;
}

@media (min-width: 760px) { .cn { grid-template-columns: 1fr 1fr; } }

.cn__item { position: relative; overflow: hidden; background: var(--ink); padding: clamp(1.6rem, 3.4vw, 2.4rem); transition: background 0.4s ease; }
.cn__item:hover { background: var(--ink-3); }

.cn__ghost {
  position: absolute;
  right: -0.4rem;
  top: -1.4rem;
  font-family: var(--font-display);
  font-size: clamp(5rem, 11vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  opacity: 0.04;
  pointer-events: none;
  transition: transform 0.7s var(--ease), opacity 0.5s ease;
}

.cn__item:hover .cn__ghost { transform: translate(-6px, 4px) scale(1.06); opacity: 0.08; }

.cn__k {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.9rem;
}

.cn__rule { display: block; height: 2px; width: 100%; background: var(--line); margin-bottom: 1.1rem; overflow: hidden; }
.cn__rule i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease) var(--d, 0s); }
.cn.is-in .cn__rule i { transform: scaleX(1); }
.cn__item p { color: var(--muted); font-size: var(--step-0); line-height: 1.65; max-width: 46ch; }

/* ============================================================
   8b. Quote band
   A slab rather than a card: its own lit surface, so it reads as the
   pay-off to the case study instead of another panel in the grid.
   The right half carries the before/after, because a two-line quote
   cannot fill this width on its own.
   ============================================================ */
.qb {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(85% 130% at 6% 0%, rgba(var(--accent-rgb), 0.14), transparent 60%),
    linear-gradient(128deg, var(--ink-3) 0%, var(--ink-2) 58%, var(--ink) 100%);
}

/* the page's ledger motif again, so the slab belongs to this page */
.qb__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent) 1px, transparent 1px);
  background-size: 100% 38px, 38px 100%;
  opacity: 0.06;
  mask-image: radial-gradient(80% 100% at 0% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(80% 100% at 0% 0%, #000 10%, transparent 72%);
}

/* an oversized closing mark, bleeding off the corner */
@keyframes qb-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-10px, 8px) rotate(-2deg); }
}

.qb__mark {
  position: absolute;
  right: -1.5rem;
  top: -5.5rem;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(14rem, 26vw, 22rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-ink);
  opacity: 0.07;
  pointer-events: none;
  animation: qb-drift 14s ease-in-out infinite;
}

.qb__inner { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }

@media (min-width: 900px) {
  .qb__inner { grid-template-columns: 1.35fr 0.65fr; align-items: center; }
}

/* a short accent rule that draws in above the quote */
.qb__rule { display: block; width: 62px; height: 2px; background: var(--line); overflow: hidden; margin-bottom: 1.4rem; }
.qb__rule i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease) 0.2s; }
.qb[data-reveal].is-in .qb__rule i { transform: scaleX(1); }

/* set larger and to a tighter measure, so it forms a block instead of a
   two-line ribbon with a hole beside it */
.qb__text {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.9vw, 2.1rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--paper);
  max-width: 24ch;
  margin: 0 0 1.8rem;
}

.qb__by { display: flex; align-items: center; gap: 0.85rem; }
.qb__by strong { display: block; font-size: 0.94rem; color: var(--paper); }
.qb__by span span { font-size: 0.8rem; color: var(--muted-2); }
.qb:hover .avatar { transform: rotate(-8deg) scale(1.1); }

/* ---- before / after ---- */
.qb__side {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  padding-left: clamp(0rem, 2vw, 2rem);
}

@media (min-width: 900px) {
  .qb__side { border-left: 1px solid var(--line-soft); padding-left: clamp(1.5rem, 3vw, 2.6rem); }
}

.qb__stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--muted-2);
  line-height: 1.05;
}

.qb__stat span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.qb__stat--now b { color: var(--accent-ink); }

.qb__arrow { color: var(--muted-3); transition: transform 0.5s var(--ease), color 0.4s ease; }
.qb:hover .qb__arrow { transform: translateY(4px); color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .qb__mark { animation: none; }
  .qb__rule i { transform: scaleX(1); }
}

:root[data-motion="off"] .qb__mark { animation: none; }
:root[data-motion="off"] .qb__rule i { transform: scaleX(1) !important; }

/* ============================================================
   8c. Engagement models
   Three ways in. The middle one is flagged rather than made bigger,
   so the comparison stays honest — all three cards are the same
   size and the recommendation is a label, not a layout trick.
   ============================================================ */
.eng {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items: stretch;
}

.eng__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  transition: border-color 0.4s ease, transform 0.5s var(--ease);
}

.eng__card:hover { border-color: rgba(var(--accent-rgb), 0.45); transform: translateY(-5px); }
.eng__card--lead { border-color: var(--line); }

/* a wash in the card's colour, lifting on hover */
.eng__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(115% 90% at 0% 0%, var(--pc, var(--accent)), transparent 62%);
  opacity: 0.07;
  transition: opacity 0.45s ease;
}

.eng__card:hover .eng__glow { opacity: 0.16; }

.eng__flag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.3rem 0.7rem;
  border-radius: 0 var(--radius-lg) 0 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eng__top { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.7rem; }

.eng__n {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pc, var(--accent));
}

.eng__top h3 { font-size: var(--step-1); letter-spacing: -0.02em; }
.eng__for { color: var(--muted); font-size: var(--step--1); line-height: 1.55; margin-bottom: 1.3rem; }

/* duration and pricing, stated plainly rather than hidden behind "contact us" */
.eng__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 1.2rem;
}

.eng__meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.eng__meta span {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-3);
}

.eng__list { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 1.4rem; }

.eng__list li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--muted-2);
  font-size: var(--step--1);
  line-height: 1.55;
}

.eng__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pc, var(--accent));
  opacity: 0.7;
}

/* pinned to the bottom so the three start-dates line up across the row */
.eng__start {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  align-self: flex-start;
  padding: 0.34rem 0.78rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted-2);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.eng__start::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.eng__card:hover .eng__start { border-color: var(--accent-ink); color: var(--accent-ink); }

/* ============================================================
   9. Foundations — the stack, drawn as strata
   Ordered the way the architecture actually sits rather than by
   number, with assurance as a band across the lot. Nothing is
   hidden behind a click: the reason for each choice is the point
   of the section, so it stays on screen.
   ============================================================ */
.strata { display: grid; gap: 0.9rem; }

@media (min-width: 900px) { .strata { grid-template-columns: 128px 1fr; gap: 0 1.8rem; } }

/* the depth ruler down the left */
.strata__axis { display: none; }

@media (min-width: 900px) {
  .strata__axis {
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: end;
    text-align: right;
    gap: 0.8rem;
    padding: 0.4rem 0 3.6rem;
  }

  .strata__axis span {
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-3);
    max-width: 11ch;
    line-height: 1.4;
  }

  .strata__axis i {
    width: 1px;
    justify-self: end;
    margin-right: 3px;
    background: linear-gradient(var(--p5), var(--p4), var(--p1), var(--p2), var(--p3));
    opacity: 0.5;
  }
}

.strata__stack { display: grid; gap: 0.55rem; }

/* each layer is a slab, stepped in slightly so the set reads as a stack */
.stratum {
  position: relative;
  overflow: hidden;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.4rem) clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(100deg, rgba(var(--accent-rgb), 0.03), transparent 42%),
    var(--ink-2);
  transition: transform 0.45s var(--ease), border-color 0.35s ease, background 0.35s ease;
}

/* a stepped indent, deepest layer furthest in */
@media (min-width: 900px) {
  .stratum { margin-left: calc(var(--i) * 14px); }
}

.stratum:hover {
  transform: translateX(8px);
  border-color: rgba(var(--accent-rgb), 0.4);
  background:
    linear-gradient(100deg, rgba(var(--accent-rgb), 0.07), transparent 46%),
    var(--ink-3);
}

/* the coloured edge that marks the layer */
.stratum__edge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--pc, var(--accent));
  opacity: 0.55;
  transition: width 0.4s var(--ease), opacity 0.35s ease;
}

.stratum:hover .stratum__edge { width: 7px; opacity: 1; }

.stratum__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem 0.9rem; margin-bottom: 0.55rem; }

.stratum__n {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted-3);
  transition: color 0.3s ease;
}

.stratum:hover .stratum__n { color: var(--pc, var(--accent)); }
.stratum__head h3 { font-size: var(--step-1); letter-spacing: -0.02em; }

.stratum__meta {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted-3);
  white-space: nowrap;
}

.stratum__why { color: var(--muted-2); font-size: var(--step--1); line-height: 1.6; max-width: 68ch; margin-bottom: 0.9rem; }

.stratum__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.stratum__tags .tag { transition: border-color 0.3s ease, color 0.3s ease, transform 0.35s var(--ease); }
.stratum:hover .stratum__tags .tag { border-color: var(--line); color: var(--muted); }
.stratum__tags .tag:hover { border-color: var(--pc, var(--accent)); color: var(--paper); transform: translateY(-2px); }

/* assurance is not a layer — it wraps the five above it */
.stratum--wrap {
  margin-top: 0.9rem;
  border-style: dashed;
  border-color: var(--line);
  background: none;
}

@media (min-width: 900px) {
  .stratum--wrap { grid-column: 2; margin-left: 0; }
}

.stratum--wrap:hover { background: var(--ink-2); transform: none; border-color: rgba(var(--accent-rgb), 0.4); }
.stratum--wrap .stratum__n { color: var(--accent-ink); }

/* a bracket, showing it spans everything above */
.stratum--wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 60%);
  opacity: 0.5;
}

/* ============================================================
   10. Delivery — one spine, cards slide in, week span on the right
   ============================================================ */
.dlv { position: relative; padding-left: 46px; }
.dlv::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--line-soft); }
.dlv__fill { position: absolute; left: 15px; top: 8px; width: 2px; height: 0; background: linear-gradient(var(--p1), var(--p4), var(--p6)); transition: height 1.6s var(--ease); }

.dlv__step { position: relative; margin-bottom: 1rem; }

.dlv__node {
  position: absolute;
  left: -38px;
  top: 1.4rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  transition: border-color 0.4s ease, transform 0.45s var(--ease), box-shadow 0.4s ease;
}

.dlv__node::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity 0.35s ease; }
.dlv__step.lit .dlv__node { border-color: var(--accent-ink); transform: scale(1.15); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.08); }
.dlv__step.lit .dlv__node::after { opacity: 1; }

.dlv__card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  transform: translateX(26px);
  opacity: 0;
  transition: transform 0.6s var(--ease), opacity 0.5s ease, border-color 0.35s ease, background 0.35s ease;
}

.dlv__step.lit .dlv__card { transform: none; opacity: 1; }
.dlv__card:hover { border-color: rgba(var(--accent-rgb), 0.4); background: var(--ink-3); }

/* words on the left, when it happens on the right */
.dlv__inner { display: grid; gap: 1.4rem; }
@media (min-width: 820px) { .dlv__inner { grid-template-columns: 1fr 210px; gap: 2rem; align-items: center; } }

.dlv__when { border-left: 1px solid var(--line-soft); padding-left: 1.4rem; }
@media (max-width: 819px) { .dlv__when { border-left: 0; border-top: 1px solid var(--line-soft); padding: 1.1rem 0 0; } }

.dlv__wk { display: block; font-family: var(--font-display); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-3); margin-bottom: 0.4rem; }
.dlv__dur { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--paper); margin-bottom: 0.9rem; }

/* twenty-week track with this phase's span lit */
.dlv__track { display: flex; gap: 2px; height: 26px; align-items: flex-end; }

.dlv__track i {
  flex: 1;
  border-radius: 1px;
  background: var(--line);
  height: 34%;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease), background 0.4s ease, height 0.4s ease;
  transition-delay: calc(var(--i) * 0.022s);
}

.dlv__step.lit .dlv__track i { transform: scaleY(1); }
.dlv__track i.on { background: var(--pc, var(--accent)); height: 100%; }
.dlv__card:hover .dlv__track i.on { box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45); }

.dlv__top { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.45rem; }
.dlv__n { font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-ink); }
.dlv__card h3 { font-size: var(--step-1); letter-spacing: -0.02em; }
.dlv__card p { color: var(--muted-2); font-size: var(--step--1); line-height: 1.6; max-width: 62ch; }

.dlv__out {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--muted-2);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.dlv__card:hover .dlv__out { border-color: var(--accent-ink); color: var(--accent-ink); }
.dlv__out::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ---------- 11. Motion off / reduced ---------- */
:root[data-motion="off"] .ind-hero__ledger { display: none; }

:root[data-motion="off"] .cmp__ring circle,
:root[data-motion="off"] .cmp__ring path { stroke-dashoffset: 0 !important; }
:root[data-motion="off"] .cn__rule i { transform: none !important; }
:root[data-motion="off"] .dlv__card { transform: none !important; opacity: 1 !important; }
:root[data-motion="off"] .dlv__track i { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cmp__ring circle, .cmp__ring path { stroke-dashoffset: 0; }
  .cn__rule i { transform: none; }
  .dlv__card { transform: none; opacity: 1; }
  .dlv__track i { transform: none; }
  .exp__chips .tag { animation: none; }
  .stratum, .stratum__edge { transition: none; }
}