/* ==========================================================================
   LoomReach redesign 2026 · Direction E "Showroom" · Services page
   Loads after site.css and reuses its tokens and components: stage room,
   plinths, mono index chips (.lr-svc__num, navigation only), ceramic sequence
   nodes on an ink rod (.lr-step__node), cards and the coral closing room.
   The page is the full showroom: a shelf of seven objects as the page index,
   then one exhibit per service, each object on its own plinth.
   ========================================================================== */

/* ---------- Page head: copy and the shelf ---------- */
/* the stage padding and the copy rhythm come from the shared page head (site.css), so the H1 lands
   where it does on every inner page; the copy starts at the top of the stage, not in its middle */
.lr-svh__grid { display: grid; gap: 32px; align-items: start; }
.lr-svh__copy { display: grid; justify-items: start; gap: var(--lr-copy-gap); max-width: 620px; min-width: 0; }
.lr-svh__copy .lr-lead { max-width: 30em; }
.lr-svh__copy .lr-actions { margin-top: 4px; }
@media (min-width: 1024px) {
  .lr-svh__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); }
}
@media (max-width: 599px) {
  .lr-svh__copy .lr-actions { width: 100%; }
  .lr-svh__copy .lr-actions .lr-btn { flex: 1 1 100%; }
}

/* The shelf: seven objects on small plinths, numbered with the same mono chips as the homepage showroom */
.lr-shelf { min-width: 0; }
.lr-shelf__title {
  font-family: var(--lr-font-mono); font-size: .75rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lr-ink-2); margin-bottom: 12px;
}
/* phones: the seven tiles are one row that scrolls sideways, as the homepage showroom does
   (scroll snap, the next tile peeks in at the edge): no tile alone on a row, no name broken mid-word */
ul.lr-shelf__list[role="list"] {
  display: grid; grid-auto-flow: column; grid-auto-columns: 108px; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--lr-pad) * -1); padding: 2px var(--lr-pad) 6px; scroll-padding-inline: var(--lr-pad);
}
.lr-shelf__list::-webkit-scrollbar { display: none; }
.lr-shelf__item { --plinth: linear-gradient(180deg, #FFEDE5 0%, #FFD9C7 100%); min-width: 0; scroll-snap-align: start; }
.lr-shelf__item--sky { --plinth: linear-gradient(180deg, #E9F8FE 0%, #B5ECFF 100%); }
.lr-shelf__item--mint { --plinth: linear-gradient(180deg, #E8FBF3 0%, #C3F3E0 100%); }
.lr-shelf__item a {
  position: relative; display: flex; flex-direction: column; align-items: stretch; height: 100%;
  padding: 5px; border-radius: 18px; text-align: center;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(17, 18, 22, .12);
  color: var(--lr-ink); text-decoration: none; font-size: .8125rem; font-weight: 600; line-height: 1.25;
  transition: border-color var(--lr-dur-2) linear, background-color var(--lr-dur-2) linear;
}
.lr-shelf__item a:hover { border-color: var(--lr-ink); background: #FFFFFF; }
.lr-shelf__plinth {
  position: relative; flex: none; display: grid; place-items: center;
  height: 76px; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: var(--plinth);
}
.lr-shelf__plinth::after { /* contact shadow */
  content: ""; position: absolute; left: 50%; bottom: 8%; width: 56%; height: 13%; z-index: 0;
  background: var(--lr-obj-floor); transform: translateX(-50%);
}
.lr-shelf__plinth picture { position: relative; z-index: 1; height: 84%; aspect-ratio: 1; margin-top: 4%; transition: transform var(--lr-dur-3) var(--lr-ease); }
.lr-shelf__name { display: flex; align-items: center; justify-content: center; flex: 1; padding: 7px 2px 3px; text-wrap: balance; }
.lr-shelf__obj { width: 100%; height: 100%; object-fit: contain; }
.lr-shelf__plinth .lr-svc__num { display: none; }
/* the three sections without an object: the same printed index as "On this page" on other pages, read across
   in page order (two columns on phones, one row of three from 600 px) */
.lr-shelf__more { margin-top: 14px; grid-auto-flow: row; grid-template-rows: none; }
@media (min-width: 600px) { .lr-shelf__more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 600px) {
  ul.lr-shelf__list[role="list"] { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; overflow: visible; margin-inline: 0; padding: 0; }
  .lr-shelf__item { grid-column: span 3; }
  .lr-shelf__item:nth-child(-n+3) { grid-column: span 4; }
  .lr-shelf__item a { padding: 6px; border-radius: 22px; font-size: .9375rem; }
  .lr-shelf__plinth { height: 112px; border-radius: 17px; }
  .lr-shelf__plinth::before { /* back-wall light */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%);
  }
  .lr-shelf__plinth picture { width: auto; height: 80%; aspect-ratio: 1; margin-top: 6%; }
  .lr-shelf__plinth .lr-svc__num { display: block; top: 8px; left: 8px; padding: 1px 8px; font-size: .75rem; }
  .lr-shelf__name { padding: 10px 6px 6px; }
}
@media (min-width: 1200px) {
  .lr-shelf__plinth { height: 124px; }
  .lr-shelf__item:nth-child(-n+3) .lr-shelf__plinth { height: 148px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lr-shelf__item a:hover picture { transform: translateY(-5px); }
}

/* ---------- The seven exhibits: a tinted stage (title and object), then the placard ---------- */
.lr-exhibits { display: grid; gap: clamp(20px, 2.4vw, 32px); padding-top: calc(var(--lr-section-y) * .7); }
.lr-exh { min-width: 0; scroll-margin-top: 80px; }
.lr-exh--peach { --plinth: linear-gradient(180deg, #FFEDE5 0%, #FFD9C7 100%); }
.lr-exh--sky { --plinth: linear-gradient(180deg, #E9F8FE 0%, #B5ECFF 100%); }
.lr-exh--mint { --plinth: linear-gradient(180deg, #E8FBF3 0%, #C3F3E0 100%); }
.lr-exh__card {
  display: grid; padding: 8px; border-radius: var(--lr-r-xl);
  background: var(--lr-surface); border: 1px solid var(--lr-line);
}
.lr-exh__stage {
  --light-x: 50%;
  position: relative; display: grid; gap: 10px; isolation: isolate; overflow: hidden;
  padding: 50px 18px 26px; border-radius: calc(var(--lr-r-xl) - 7px);
  background: var(--plinth);
}
.lr-exh__stage::before { /* back-wall light behind the object */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(48% 70% at var(--light-x) 38%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 72%);
}
.lr-exh__stage::after { /* the showroom floor: a lighter band the object stands on */
  content: ""; position: absolute; inset: auto 0 0 0; height: 32%; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .42) 100%);
}
.lr-exh__stage .lr-svc__num { top: 14px; left: 14px; }
.lr-exh__intro { position: relative; z-index: 1; }
.lr-exh__title {
  font-size: var(--lr-fs-h2); font-weight: 600; font-stretch: 104%;
  line-height: 1.08; letter-spacing: -.025em; text-wrap: balance;
}
.lr-exh__lead { margin-top: 12px; font-size: var(--lr-fs-lead); line-height: 1.45; color: var(--lr-ink-2); max-width: 34em; text-wrap: pretty; }
/* on phones the object comes first, then its title */
.lr-exh__plinth { order: -1; display: grid; place-items: center; }
.lr-exh__plinth picture { position: relative; z-index: 1; display: block; width: min(50%, 190px); aspect-ratio: 1; }
.lr-exh__plinth picture::after { /* contact shadow, tied to the object so it never drifts */
  content: ""; position: absolute; left: 50%; bottom: 7%; width: 62%; height: 12%; z-index: -1;
  background: var(--lr-obj-floor); transform: translateX(-50%);
}
.lr-exh__obj { width: 100%; height: 100%; object-fit: contain; }

.lr-exh__body { display: grid; gap: 26px; align-content: start; min-width: 0; padding: 24px 14px 14px; }
.lr-exh__label {
  font-family: var(--lr-font-mono); font-size: .75rem; font-weight: 400; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lr-muted); margin-bottom: 12px;
}
/* "What you get" and "Usually connects to" in one disclosure. The markup ships open; on phones
   site.js closes it, so each exhibit shows its title, examples and work links first.
   On wider screens it stays open and the summary is only the column label. */
.lr-exh__more { min-width: 0; }
.lr-exh__sum { display: block; list-style: none; }
.lr-exh__sum::-webkit-details-marker { display: none; }
.lr-exh__more-body { display: grid; gap: 26px; min-width: 0; }
/* a working disclosure at every width (closed on phones, open from 768 px), with its plus and minus */
.lr-exh__sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; }
.lr-exh__sum .lr-exh__label { margin: 0; }
.lr-exh__sum::after { /* plus, turning into minus when open */
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--lr-ink);
  background:
    linear-gradient(var(--lr-ink), var(--lr-ink)) center / 10px 2px no-repeat,
    linear-gradient(var(--lr-ink), var(--lr-ink)) center / 2px 10px no-repeat,
    var(--lr-surface);
}
.lr-exh__more[open] .lr-exh__sum::after {
  background: linear-gradient(var(--lr-ink), var(--lr-ink)) center / 10px 2px no-repeat, var(--lr-surface);
}
.lr-exh__sum:hover .lr-exh__label { color: var(--lr-ink); }
/* wide screens: both disclosures stay open and locked (site.js data-fold-lock), so the summary is only the
   column label: no plus or minus, no pointer, and closing "What you get" can never empty its neighbour */
@media (min-width: 768px) {
  .lr-exh__sum { justify-content: flex-start; gap: 10px; min-height: 20px; margin-bottom: 10px; cursor: default; }
  .lr-exh__more[data-fold-lock] .lr-exh__sum::after { display: none; }
  .lr-exh__sum:hover .lr-exh__label { color: var(--lr-muted); }
}
@media (max-width: 767px) {
  .lr-exh .lr-exh__cols { gap: 0; }
  .lr-exh__ex + .lr-exh__more .lr-exh__sum { border-top: 0; }
  .lr-exh__sum { min-height: 48px; padding: 6px 0; border-top: 1.5px dashed var(--lr-line); border-bottom: 1.5px dashed var(--lr-line); }
  .lr-exh__sum .lr-exh__label { color: var(--lr-ink); }
  .lr-exh__sum::after { width: 28px; height: 28px; }
  .lr-exh__more[open] .lr-exh__sum { border-bottom-color: transparent; margin-bottom: 0; }
  .lr-exh__more[open] .lr-exh__more-body { padding: 10px 0 4px; }
}
.lr-exh__cols { display: grid; gap: 26px; }
.lr-exh .lr-svc__ex { margin-top: 0; gap: 10px; }
.lr-exh .lr-svc__ex li { font-size: 1rem; line-height: 1.5; }
.lr-exh__get { display: grid; gap: 10px; }
.lr-exh__get li { position: relative; padding-left: 30px; font-size: 1rem; line-height: 1.5; color: var(--lr-ink); text-wrap: pretty; }
.lr-exh__get li::before {
  content: ""; position: absolute; left: 0; top: .14em; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--lr-ink);
  background: var(--lr-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.3 L8.6 13.1 L14.4 7.1' fill='none' stroke='%23111216' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* "Usually connects to": plain running text with middots, so nothing here looks like a button or a filter */
.lr-exh__pills { display: block; font-size: 1rem; line-height: 1.6; color: var(--lr-ink-2); }
.lr-exh__pills li { display: inline; }
.lr-exh__pills li:not(:last-child)::after { content: " · "; color: var(--lr-muted); white-space: pre; }
.lr-exh__related {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px;
  padding-top: 18px; border-top: 1.5px dashed var(--lr-line);
}
.lr-exh__related .lr-exh__label { margin: 0; }
.lr-exh__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* phones: the object stands above its title, large (an exhibit, not a thumbnail) */
@media (max-width: 599px) {
  .lr-exh__stage { padding: 18px 18px 22px; gap: 8px; }
  .lr-exh__plinth picture { width: 148px; }
  .lr-exh__stage .lr-svc__num { top: 14px; left: 14px; }
  .lr-exh__body { gap: 20px; padding: 20px 12px 14px; }
}
@media (min-width: 600px) {
  .lr-exh__stage { padding: 52px 32px 30px; }
  .lr-exh__plinth picture { width: min(40%, 200px); }
}
@media (min-width: 768px) {
  .lr-exh__body { padding: 30px 24px 20px; }
  .lr-exh__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1024px) {
  /* title left, object right; every second exhibit swaps sides, so the eye walks down the room */
  .lr-exh__stage { --light-x: 76%; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: 40px; min-height: 290px; padding: 40px 48px 34px; }
  .lr-exh__plinth { order: 0; }
  .lr-exh__plinth picture { width: min(82%, 220px); }
  .lr-exhibits > .lr-exh:nth-child(even) .lr-exh__stage { --light-x: 24%; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lr-exhibits > .lr-exh:nth-child(even) .lr-exh__plinth { order: -1; }
  .lr-exh__body { padding: 32px 40px 26px; }
}
@media (min-width: 1200px) {
  /* the placard: three columns under the stage */
  .lr-exh__body { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; padding: 36px 48px 28px; }
  .lr-exh__cols { display: contents; }
  /* the disclosure spans columns 2 and 3: "What you get" under its label, "Usually connects to"
     beside it with its label lifted to the same line (label 18 px + 12 px gap) */
  .lr-exh__more { grid-column: span 2; }
  .lr-exh__ex { grid-column: auto; }
  .lr-exh__ex .lr-exh__more-body { grid-template-columns: minmax(0, 1fr); }
  .lr-exh__more-body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
  .lr-exh__more-body .lr-exh__conn { margin-top: -30px; }
  .lr-exh__related { grid-column: 1 / -1; }
}

/* ---------- SV2-01 · Demonstration (sky tint inside the integrations exhibit) ---------- */
.lr-demo { margin-top: 12px; border-radius: var(--lr-r-xl); padding: clamp(16px, 3vw, 40px); }
.lr-demo__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.lr-demo__title { font-size: var(--lr-fs-big); font-weight: 600; font-stretch: 103%; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.lr-demo__tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--lr-r-pill);
  background: #FFFFFF; border: 1px solid rgba(17, 18, 22, .18);
  font-family: var(--lr-font-mono); font-size: .75rem; line-height: 1.4; color: var(--lr-ink);
}
.lr-demo__tag-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lr-sky); box-shadow: 0 0 0 1px rgba(17, 18, 22, .35); }
.lr-demo__panels { display: grid; gap: 16px; }
.lr-demo__panel { display: grid; gap: 18px; align-content: start; min-width: 0; padding: clamp(16px, 2.4vw, 28px); border-radius: var(--lr-r-l); }
.lr-demo__top { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.lr-demo__top--tabs { align-items: center; }
.lr-seqx__panel .lr-demo__h { margin: 0; }
.lr-seqx__panel .lr-demo__text { margin-top: -8px; }
/* an opaque C render multiplied into a sand plinth (the exhibit ground), never a tint inside the sky room */
.lr-demo__obj { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #F7F5F1 0%, #ECE8E0 100%); }
.lr-demo__obj picture { width: 100%; height: 100%; }
.lr-demo__obj img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transform: scale(1.14); }
.lr-demo__h { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 4px; }
.lr-demo__text { font-size: 1rem; line-height: 1.5; color: var(--lr-ink-2); text-wrap: pretty; }
@media (min-width: 600px) {
  .lr-demo__top { grid-template-columns: 128px minmax(0, 1fr); gap: 20px; align-items: center; }
  .lr-demo__obj { width: 128px; height: 104px; }
}
@media (min-width: 1024px) {
  .lr-demo__panels { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Scenario tabs: pills, the selected one in ink (only with the script) */
.lr-tabs { display: none; flex-wrap: wrap; gap: 8px; }
.js .lr-tabs { display: flex; }
.lr-tabs__tab {
  min-height: 40px; padding: 0 16px; border: 1.5px solid var(--lr-line-strong); border-radius: var(--lr-r-pill);
  background: #FFFFFF; color: var(--lr-ink); font-weight: 600; font-size: .9375rem; cursor: pointer;
}
.lr-tabs__tab:hover { border-color: var(--lr-ink); }
.lr-tabs__tab[aria-selected="true"] { background: var(--lr-ink); border-color: var(--lr-ink); color: #FBFAF7; }

.lr-seqx__panel { display: grid; gap: 14px; padding: 18px; border-radius: var(--lr-r-m); background: #F7F5F1; }
.lr-seqx__name {
  font-family: var(--lr-font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-ink);
}
.js .lr-seqx__name { display: none; }
.lr-seqx__text { font-size: 1rem; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
/* a sequence: ceramic nodes joined by the ink rod, each step's result as a pill */
.lr-seqx { display: grid; gap: 12px; }
.lr-seqx__row {
  --mk: var(--lr-mint);
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center;
  transition: opacity var(--lr-dur-3) linear;
}
.lr-seqx__row[data-mark="stop"] { --mk: var(--lr-stop); }
.lr-seqx__row[data-mark="hold"] { --mk: #868892; }
.lr-seqx__row[data-mark="person"] { --mk: var(--lr-sky); }
/* the sphere numbers the step (coral, mint, sky, as every sequence); the state is the dot in the result */
.lr-seqx__n {
  --c: var(--lr-brand);
  position: relative; z-index: 1;
  grid-row: span 2; align-self: start; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--lr-ink); font-size: .875rem; font-weight: 650; color: var(--lr-ink);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 46%),
    var(--c);
  box-shadow: inset 0 -3px 6px rgba(17, 18, 22, .14), 0 6px 12px -6px rgba(17, 18, 22, .4);
}
.lr-seqx__row:nth-child(2) .lr-seqx__n { --c: var(--lr-mint); }
.lr-seqx__row:nth-child(3) .lr-seqx__n { --c: var(--lr-sky); }
.lr-seqx__what { font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.lr-seqx__rod { display: none; }
.lr-seqx__out {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 10px; border-radius: var(--lr-r-pill); background: #FFFFFF; border: 1px solid rgba(17, 18, 22, .14);
  font-size: .875rem; font-weight: 500; line-height: 1.35;
}
.lr-seqx__out::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mk); box-shadow: 0 0 0 1px rgba(17, 18, 22, .3); }
.lr-seqx__row:not(:last-child)::after { /* rod from this node to the next */
  content: ""; position: absolute; left: 15px; top: 32px; bottom: -12px; width: 2px; border-radius: 1px; background: var(--lr-ink);
}
@media (min-width: 600px) {
  .lr-seqx__row { grid-template-columns: 32px minmax(0, 1fr) 44px minmax(0, 1fr); column-gap: 12px; }
  .lr-seqx__n { grid-row: auto; align-self: center; }
  .lr-seqx__rod { display: block; position: relative; height: 2px; background: var(--lr-ink); }
  .lr-seqx__rod::after { /* arrowhead */
    content: ""; position: absolute; right: -1px; top: 50%; width: 0; height: 0; transform: translateY(-50%);
    border-left: 7px solid var(--lr-ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  }
  .lr-seqx__row:not(:last-child)::after { top: calc(50% + 16px); bottom: calc(4px - 50%); }
}
.js .lr-seqx__row.is-pending { opacity: .3; }
.lr-seqx__row.is-current .lr-seqx__n { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--lr-ink); }

.lr-playback { display: none; flex-wrap: wrap; gap: 8px; }
.js .lr-playback { display: flex; }
.lr-playback .lr-btn svg { flex: none; }

/* AI step: a switch (button[aria-pressed]) and the route the work takes */
.lr-toggle {
  display: none; align-items: center; gap: 12px; justify-self: start; min-height: 48px; padding: 6px 10px 6px 8px;
  border: 1.5px solid var(--lr-ink); border-radius: var(--lr-r-pill); background: #FFFFFF; color: var(--lr-ink);
  font-weight: 600; font-size: 1rem; cursor: pointer;
}
.js .lr-toggle { display: inline-flex; }
.lr-toggle:hover { background: #F7F5F1; }
.lr-toggle__track {
  position: relative; flex: none; width: 54px; height: 32px; border-radius: var(--lr-r-pill);
  background: #DCD8CF; border: 1.5px solid var(--lr-ink); transition: background-color var(--lr-dur-2) linear;
}
.lr-toggle__thumb {
  position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%;
  background: #FFFFFF; border: 1.5px solid var(--lr-ink); transition: transform var(--lr-dur-2) var(--lr-ease);
}
.lr-toggle[aria-pressed="true"] .lr-toggle__track { background: var(--lr-mint); }
.lr-toggle[aria-pressed="true"] .lr-toggle__thumb { transform: translateX(22px); }
.lr-toggle__state { font-family: var(--lr-font-mono); font-size: .8125rem; font-weight: 400; padding: 2px 10px; border-radius: var(--lr-r-pill); background: var(--lr-sand); }
.lr-toggle__off { display: none; }
.lr-toggle[aria-pressed="false"] .lr-toggle__on { display: none; }
.lr-toggle[aria-pressed="false"] .lr-toggle__off { display: inline; }

.lr-flow { display: grid; gap: 14px; }
.lr-flow__state { display: grid; gap: 10px; }
.lr-flow__k { font-family: var(--lr-font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lr-ink); }
.js .lr-flow__k { display: none; }
.js .lr-flow[data-state="on"] .lr-flow__state--off,
.js .lr-flow[data-state="off"] .lr-flow__state--on { display: none; }
.lr-flow__chain { display: grid; gap: 12px; }
.lr-flow__chain li {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  border-radius: var(--lr-r-m); background: #F7F5F1; font-weight: 600; font-size: .9375rem; line-height: 1.35;
}
.lr-flow__chain li:not(:last-child)::after { /* the ink rod, node to node */
  content: ""; position: absolute; left: 22px; top: calc(50% + 10px); height: calc(100% + 12px - 20px); width: 2px; background: var(--lr-ink);
}
.lr-flow__dot {
  --c: var(--lr-sky); flex: none; position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 46%),
    var(--c);
  box-shadow: inset 0 -2px 4px rgba(17, 18, 22, .14), 0 4px 8px -4px rgba(17, 18, 22, .4);
}
.lr-flow__dot--mint { --c: var(--lr-mint); }
.lr-flow__dot--ink { --c: var(--lr-ink); }
.lr-flow__dot--ok { --c: #0A7A5A; }

/* ---------- SV3-08 · Software for finance teams (a mint room, the same inset as every room) ---------- */
.lr-fin { margin-top: calc(var(--lr-section-y) * .4); scroll-margin-top: 80px; }
.lr-fin .lr-room { padding-block: clamp(36px, 4.6vw, 64px); }
.lr-fin__box { display: grid; gap: 20px; }
.lr-fin__glyph { width: 72px; height: auto; }
.lr-fin__title { font-size: var(--lr-fs-big); font-weight: 600; font-stretch: 103%; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.lr-fin__text { margin-top: 12px; font-size: 1.0625rem; line-height: 1.55; color: var(--lr-ink-2); max-width: 40em; text-wrap: pretty; }
.lr-fin__boundary { color: var(--lr-ink-2); }
.lr-fin .lr-exh__label { color: var(--lr-ink-2); }
.lr-fin .lr-ticks li { font-size: 1rem; line-height: 1.5; color: var(--lr-ink-2); }
@media (min-width: 1024px) {
  .lr-fin__box { grid-template-columns: 88px minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .lr-fin__glyph { width: 88px; margin-top: 4px; }
  .lr-fin__ex { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid rgba(17, 18, 22, .16); }
}

/* ---------- SV3-09 · Taking over a system (peach room, four nodes on one rod) ---------- */
.lr-take { scroll-margin-top: 72px; }
.lr-take .lr-lead { color: var(--lr-ink-2); }
.lr-take__h { font-family: var(--lr-font-mono); font-size: .8125rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 24px; }
.lr-take__steps .lr-step__text { font-size: 1.0625rem; color: var(--lr-ink-2); padding-top: 14px; }
.lr-take__more { margin-top: 36px; }
.lr-take .lr-link--arrow { color: var(--lr-ink); text-decoration-color: var(--lr-ink); }
@media (min-width: 1024px) {
  .lr-take__steps .lr-step { padding-top: 78px; }
  .lr-take__steps .lr-step__text { padding-top: 0; padding-right: 8px; }
}

/* ---------- SV3-10 · Work we turn down: rows on hairlines (title left, the reason right; unordered: the coral tick) ---------- */
.lr-turn { scroll-margin-top: 40px; }
.lr-turn__grid { display: grid; border-top: 2px solid var(--lr-ink); }
.lr-turn__item.lr-card {
  display: grid; row-gap: 6px; align-content: start;
  padding: 18px 0; border: 0; border-bottom: 1px solid var(--lr-line); border-radius: 0; background: transparent;
}
.lr-turn__item .lr-card__title { margin-bottom: 0; }
@media (min-width: 860px) {
  .lr-turn__item.lr-card { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 24px; align-items: baseline; padding-block: 20px; }
}
/* from 1024 px the head's 5/6 tracks: each reason starts on the lead's left edge */
@media (min-width: 1024px) {
  .lr-turn__item.lr-card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--lr-gap); }
}

/* ---------- SV3-11 · Closing call to action ---------- */
.lr-svclose { margin-top: 0; }