/* Labsit Switzerland: case studies (cards, listing, deck) */
:root {
  --cs-bg: #232323;
  --cs-ink: #fff;
  --cs-ink-2: rgba(255, 255, 255, .72);
  --cs-ink-3: rgba(255, 255, 255, .5);
  --cs-line: rgba(255, 255, 255, .13);
  --cs-glass: rgba(255, 255, 255, .045);
  --cs-glass-2: rgba(255, 255, 255, .08);
  --cs-accent: #6f86ff;
  --cs-accent-2: #2946f3;
  --cs-ok: #3ddc97;
  --cs-warn: #f5b942;
  --cs-bad: #ff6b6b;
  --cs-violet: #b69cff;
  --cs-teal: #3cc8d6;
  --cs-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- logos ---------- */
.logo { display: inline-block; flex: 0 0 auto; width: 34px; height: 34px; background: rgba(255, 255, 255, .88);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: background .3s; }
.logo--color { -webkit-mask: none; mask: none; background: rgba(255, 255, 255, .94); border-radius: 9px; padding: 5px; display: grid; place-items: center; }
.logo--color img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo--ph { -webkit-mask: none; mask: none; background: transparent; border: 1px dashed rgba(255, 255, 255, .35); border-radius: 9px; display: grid; place-items: center;
  font: 600 11px/1 Inter, sans-serif; color: var(--cs-ink-2); letter-spacing: .04em; }
.case-card:hover .logo:not(.logo--color):not(.logo--ph), .techgrid li:hover .logo:not(.logo--color):not(.logo--ph), .techgrid li.is-on .logo:not(.logo--color):not(.logo--ph) { background: var(--brand, #fff); }

/* ---------- badges, chips, status ---------- */
.evb { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 Inter, sans-serif; letter-spacing: .03em; padding: 5px 9px 5px 8px; border-radius: 99px;
  border: 1px solid currentColor; white-space: nowrap; background: rgba(0, 0, 0, .18); }
.evb::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.evb--delivered { color: var(--cs-ok); }
.evb--reported { color: var(--cs-teal); }
.evb--documented { color: var(--cs-accent); }
.evb--measured { color: #fff; background: rgba(61, 220, 151, .22); border-color: var(--cs-ok); }
.evb--measured::before { background: var(--cs-ok); }
.evb--modelled { color: var(--cs-violet); border-style: dashed; }
.evb--modelled::before { background: transparent; border: 1.5px solid currentColor; }
.evb--indelivery { color: var(--cs-warn); }
.chip { font: 500 12px/1 Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-ink-2); padding: 6px 10px; border: 1px solid var(--cs-line); border-radius: 99px; }
.status { font: 500 12px/1 Inter, sans-serif; display: inline-flex; align-items: center; gap: 7px; color: var(--cs-ink-2); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cs-ok); box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); }
.status--in-delivery::before { background: var(--cs-warn); animation: cs-pulse 2s infinite; }
@keyframes cs-pulse { 70% { box-shadow: 0 0 0 9px rgba(245, 185, 66, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 185, 66, 0); } }

/* ---------- cards ---------- */
.case-card { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 30px; border: 1px solid var(--cs-line); border-radius: 8px; overflow: hidden;
  background: linear-gradient(160deg, var(--cs-glass-2), var(--cs-glass)); color: var(--cs-ink); text-decoration: none; isolation: isolate;
  transition: border-color .4s, transform .5s var(--cs-ease), background .4s; will-change: transform; }
.case-card:hover { border-color: rgba(111, 134, 255, .6); color: var(--cs-ink); }
.case-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(111, 134, 255, .18), transparent 60%); }
.case-card:hover::after { opacity: 1; }
.case-card__glyph { position: absolute; right: -10px; top: -6px; width: 56%; max-width: 360px; opacity: .55; z-index: -1; pointer-events: none; }
.case-card__glyph .g-lines path { fill: none; stroke: rgba(111, 134, 255, .5); stroke-width: 1; stroke-dasharray: 220; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--cs-ease); }
.case-card__glyph .g-dots circle { fill: var(--cs-accent); }
.case-card:hover .case-card__glyph .g-lines path { animation: cs-draw 1.4s var(--cs-ease); }
@keyframes cs-draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
.case-card__meta { display: flex; align-items: center; justify-content: flex-start; gap: 8px 16px; flex-wrap: wrap; }
.case-card__title { margin: 0; font-weight: 400; color: #fff; line-height: 1.2; font-size: 1.45rem; max-width: 30ch; }
.case-card__sum { margin: 0; color: var(--cs-ink-2); font-size: 15px; line-height: 1.6; max-width: 56ch; }
.case-card__metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding-top: 10px; }
.case-card__metric .num { font-size: 2.4rem; line-height: 1; color: #fff; font-weight: 300; letter-spacing: -.02em; }
.case-card__metric .lbl { color: var(--cs-ink-2); font-size: 14px; line-height: 1.3; flex: 1 1 140px; }
.case-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--cs-line); padding-top: 16px; }
.case-card__logos { display: flex; gap: 10px; align-items: center; }
.case-card__logos .logo { width: 26px; height: 26px; }
.case-card__more { font-size: 14px; color: #fff; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.case-card__more i { transition: transform .3s; }
.case-card:hover .case-card__more i { transform: translate(3px, -3px); }
.case-card--feature { padding: 40px; min-height: 100%; }
.case-card--feature .case-card__title { font-size: clamp(1.8rem, 2.6vw, 2.6rem); max-width: 20ch; }
.case-card--feature .case-card__metric .num { font-size: clamp(3rem, 5vw, 5rem); }
.case-card--list { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 28px; padding: 22px 28px; }
.case-card--list .case-card__title { font-size: 1.15rem; flex: 1 1 280px; }
.case-card--list .case-card__meta { flex: 0 0 auto; flex-direction: column; align-items: flex-start; }
.case-card--list .case-card__metric { margin: 0; padding: 0; flex: 1 1 260px; }
.case-card--list .case-card__metric .num { font-size: 1.7rem; }
.case-card--list .case-card__foot { border: 0; padding: 0; flex: 0 0 auto; }
.case-card--list .case-card__glyph { display: none; }

/* ---------- homepage grid ---------- */
.cs-home { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
.cs-home__side { display: grid; gap: 20px; grid-template-rows: 1fr 1fr; }
.cs-home__list { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 991px) {
  .cs-home, .cs-home__list { grid-template-columns: 1fr; }
  .case-card--feature { padding: 28px; }
  .case-card { padding: 24px; }
}

/* ---------- listing ---------- */
.cs-h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.cs-filters { margin-bottom: 36px; display: grid; gap: 22px; }
.cs-search { position: relative; display: block; }
.cs-search i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--cs-ink-2); font-size: 22px; }
.cs-search input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--cs-line); color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.9rem); padding: 14px 0 14px 40px; outline: 0; transition: border-color .3s; }
.cs-search input:focus { border-color: var(--cs-accent); }
.cs-search input::placeholder { color: var(--cs-ink-3); }
.cs-fgroups { display: grid; gap: 12px; }
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fgroup__l { font: 500 12px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-ink-3); width: 96px; flex: 0 0 96px; }
.fchip { background: transparent; color: var(--cs-ink-2); border: 1px solid var(--cs-line); border-radius: 99px; padding: 8px 14px; font: 400 14px/1 Inter, sans-serif; cursor: pointer; transition: all .25s; }
.fchip:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }
.fchip[aria-pressed="true"] { background: #fff; color: #232323; border-color: #fff; }
.cs-bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; color: var(--cs-ink-2); font-size: 14px; }
.cs-bar label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cs-bar select { background: transparent; color: #fff; border: 1px solid var(--cs-line); border-radius: 6px; padding: 6px 10px; margin-left: 6px; }
.cs-bar select option { color: #232323; }
#cs-clear { background: none; border: 0; color: var(--cs-accent); cursor: pointer; text-decoration: underline; padding: 0; }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cs-item { min-width: 0; }
.cs-item[hidden] { display: none; }
.cs-empty { text-align: center; padding: 70px 20px; border: 1px dashed var(--cs-line); border-radius: 8px; }
.cs-empty h3 { color: #fff; font-weight: 400; }
@media (max-width: 767px) { .cs-grid { grid-template-columns: 1fr; } .fgroup__l { flex-basis: 100%; width: 100%; } }

/* =====================  DECK  ===================== */
.case-page { background: var(--cs-bg); color: var(--cs-ink-2); font-family: Inter, "Plus Jakarta Sans", sans-serif; }
.case-page h1, .case-page h2, .case-page h3 { color: #fff; font-weight: 400; letter-spacing: -.015em; margin: 0; }
.case-page p { margin: 0; }
.case-page a { color: inherit; }
.deck-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.deck-bg i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .32; will-change: transform; }
.deck-bg i:nth-child(1) { background: radial-gradient(circle, #2946f3, transparent 65%); left: -20vmax; top: -25vmax; }
.deck-bg i:nth-child(2) { background: radial-gradient(circle, #7a4cff, transparent 65%); right: -25vmax; bottom: -30vmax; opacity: .22; }
.deck-bg i:nth-child(3) { background: radial-gradient(circle, #1ea3b1, transparent 65%); left: 30vmax; top: 20vmax; opacity: .12; }

.deck-corner { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 3.5vw, 56px); }
.deck-corner__r { display: flex; align-items: center; gap: 18px; }
.deck-brand img { height: 28px; width: auto; display: block; }
.deck-back { font-size: 13px; color: #fff; text-decoration: none; border: 1px solid var(--cs-line); border-radius: 99px; padding: 8px 14px; line-height: 1; background: var(--cs-glass); transition: background .25s, border-color .25s; }
.deck-back:hover { background: var(--cs-accent-2); border-color: var(--cs-accent-2); color: #fff; }
.deck-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.deck-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cs-accent-2), var(--cs-accent)); transform-origin: left; transform: scaleX(0); }
.deck-count { font-size: 13px; color: var(--cs-ink-3); display: flex; gap: 6px; }
.deck-count b { color: #fff; font-weight: 500; }

.deck-track { position: relative; z-index: 1; }
.slide { position: relative; }
.slide__inner { max-width: 1480px; margin: 0 auto; padding: 120px clamp(20px, 7vw, 120px) 100px clamp(20px, 9vw, 150px); display: flex; flex-direction: column; justify-content: flex-start; gap: 22px; min-height: 100vh; }
.slide__inner > :first-child { margin-top: auto; }
.slide__inner > :last-child { margin-bottom: auto; }

/* stage mode */
html.deck-on, html.deck-on body { height: 100%; overflow: hidden; }
html.deck-on .deck { position: fixed; inset: 0; overflow: hidden; }
html.deck-on .deck-track { position: absolute; inset: 0; }
html.deck-on .slide { position: absolute; inset: 0; display: none; will-change: transform, opacity; }
html.deck-on .slide.is-active, html.deck-on .slide.is-leaving, html.deck-on .slide.is-peek, html.deck-on .slide.is-peek2 { display: block; }
html.deck-on .slide { touch-action: pan-y; }
.cs-item--big { grid-column: 1 / -1; }
.cs-item--big .case-card { min-height: 360px; }
html.deck-on .slide__inner { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.deck-on .slide__inner > * { flex-shrink: 0; }
html.deck-on .case-foot { display: none; }
html:not(.deck-on) .deck-corner { position: relative; }
html:not(.deck-on) .deck-nav { display: none; }
.case-foot { position: relative; z-index: 2; text-align: center; font-size: 13px; color: var(--cs-ink-3); padding: 30px 16px 50px; }

.deck-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; align-items: center; gap: 22px; pointer-events: none; }
.deck-nav > * { pointer-events: auto; }
.deck-nav > button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--cs-line); background: var(--cs-glass-2); color: #fff; font-size: 18px; cursor: pointer; backdrop-filter: blur(10px);
  transition: background .25s, border-color .25s, transform .25s, opacity .25s; }
.deck-nav > button:hover { background: var(--cs-accent-2); border-color: var(--cs-accent-2); transform: scale(1.06); }
.deck-nav > button:disabled { opacity: .25; pointer-events: none; }
.deck-rail { display: flex; align-items: center; gap: 2px; }
.deck-rail button { position: relative; display: grid; place-items: center; background: none; border: 0; padding: 10px 6px; cursor: pointer; }
.deck-rail button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: all .35s var(--cs-ease); }
.deck-rail button span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%, 4px); font-size: 12px; white-space: nowrap; color: #fff; background: #141416; border: 1px solid var(--cs-line);
  padding: 5px 10px; border-radius: 6px; opacity: 0; transition: all .25s; pointer-events: none; }
.deck-rail button:hover span, .deck-rail button:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.deck-rail button.is-active::before { background: var(--cs-accent); width: 24px; border-radius: 6px; }
.deck-rail button:hover::before { background: #fff; }

/* stage mode: the deck is a card, controls sit below it */
html.deck-on:not(.deck-cards) .deck-track { position: absolute; inset: 16px 0 84px; margin: 0 auto; width: min(1480px, calc(100% - 2 * clamp(12px, 2.5vw, 40px)));
  border: 1px solid var(--cs-line); border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, rgba(44, 44, 52, .92), rgba(30, 30, 34, .94));
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(12px); }
html.deck-on:not(.deck-cards) .slide { top: 56px; }
html.deck-on:not(.deck-cards) .slide__inner { max-width: none; padding: 6px clamp(24px, 3.5vw, 56px) 22px; gap: 14px; }
html.deck-on:not(.deck-cards) h2 { font-size: clamp(1.6rem, 2.7vw, 2.5rem); }
html.deck-on:not(.deck-cards) h1 { font-size: clamp(1.9rem, 3.6vw, 3.4rem); }
.deck-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: linear-gradient(transparent, rgba(30, 30, 34, .96) 80%); display: grid; align-items: end; justify-items: center; padding-bottom: 12px; color: var(--cs-ink-3); font-size: 12px; }
.deck-fade::after { content: "Scroll for more ↓"; }
.deck-fade.has-more { opacity: 1; }
html:not(.deck-on) .deck-fade { display: none; }

.kicker { font-size: 15px; color: var(--cs-ink-2); letter-spacing: .02em; }
.case-page h1 { font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.06; max-width: 22ch; }
.case-page h2 { font-size: clamp(1.7rem, 3.2vw, 3rem); line-height: 1.1; max-width: 24ch; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; color: var(--cs-ink-2); max-width: 62ch; }
.slide p { line-height: 1.65; font-size: clamp(15px, 1.15vw, 17px); max-width: 64ch; }
.note { color: var(--cs-ink-3); font-size: 14px !important; border-left: 2px solid var(--cs-accent-2); padding-left: 16px; max-width: 80ch !important; }
.cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: start; }
.cols > div { display: grid; gap: 18px; align-content: start; }

/* cover */
.cover__status { display: flex; }
.hero-metrics { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 960px; border-top: 1px solid var(--cs-line); }
.hero-metrics li { display: grid; gap: 10px; align-content: start; padding: 22px 24px 0 0; }
.hero-metrics li + li { padding-left: 24px; border-left: 1px solid var(--cs-line); }
.hero-metrics .num { font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1; color: #fff; font-weight: 300; letter-spacing: -.03em; }
.hero-metrics .lbl, .scope__grid .lbl { font-size: 14px; line-height: 1.4; color: var(--cs-ink-2); }
.hero-metrics .evb { justify-self: start; }
.facts { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 6px 0 0; }
.facts dt { font: 500 11px/1 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--cs-ink-3); margin-bottom: 6px; }
.facts dd { margin: 0; color: #fff; font-size: 15px; }
.cover__hint { color: var(--cs-ink-3); font-size: 13px !important; margin-top: 8px; }
.key { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--cs-line); border-radius: 6px; margin-right: 6px; animation: cs-nudge 1.8s var(--cs-ease) infinite; }
@keyframes cs-nudge { 50% { transform: translateX(5px); } }

/* scope */
.scope { border: 1px solid var(--cs-line); background: var(--cs-glass); border-radius: 12px; padding: 26px; display: grid; gap: 20px; }
.scope__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: #fff; font-size: 15px; }
.scope__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.scope__grid li { display: grid; gap: 6px; }
.scope__grid .num { font-size: clamp(1.8rem, 3vw, 2.9rem); color: #fff; font-weight: 300; line-height: 1; letter-spacing: -.02em; }

/* phases */
.phases { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; counter-reset: ph; position: relative; }
.phases li { position: relative; border: 1px solid var(--cs-line); border-radius: 12px; padding: 22px; background: var(--cs-glass); display: grid; gap: 10px; align-content: start; outline: 0;
  transition: transform .5s var(--cs-ease), border-color .3s, background .3s, opacity .3s; }
.phases:hover li:not(:hover), .phases:focus-within li:not(:focus) { opacity: .45; }
.phases li:hover, .phases li:focus { transform: translateY(-6px); border-color: var(--cs-accent); background: var(--cs-glass-2); }
.phase__no { font-size: 13px; color: var(--cs-accent); font-weight: 600; letter-spacing: .08em; }
.phases h3 { font-size: 1.2rem; line-height: 1.25; }
.phase__dur { font-size: 13px; color: var(--cs-ink-3); }
.phases li p { font-size: 14px; color: var(--cs-ink-2); line-height: 1.55; }
.phases li::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--cs-accent-2), var(--cs-accent)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--cs-ease); }
.phases li:hover::after, .phases li:focus::after { transform: scaleX(1); }
@media (max-width: 991px) { .phases { grid-template-columns: 1fr; } }

/* architecture */
.arch__head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.tabs { display: inline-flex; border: 1px solid var(--cs-line); border-radius: 99px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; color: var(--cs-ink-2); font: 400 13px/1 Inter, sans-serif; padding: 9px 14px; border-radius: 99px; cursor: pointer; transition: all .25s; }
.tabs button[aria-selected="true"] { background: #fff; color: #232323; }
.diagram-wrap { display: grid; gap: 12px; }
.diagram-wrap[hidden] { display: none; }
.slide--arch .slide__inner { padding-top: 92px; padding-bottom: 70px; gap: 14px; }
.slide--arch h2 { font-size: clamp(1.5rem, 2.5vw, 2.4rem); }
.diagram { position: relative; height: clamp(260px, 40vh, 480px); border: 1px solid var(--cs-line); border-radius: 12px; overflow: hidden; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 20% 0%, rgba(41, 70, 243, .13), transparent 55%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, .03) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 255, 255, .03) 31px 32px); }
.diagram:active { cursor: grabbing; }
.diagram svg { width: 100%; height: 100%; display: block; max-width: none !important; }
.diagram__loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cs-ink-3); font-size: 14px; }
.diagram__tools { position: absolute; right: 12px; top: 12px; display: grid; gap: 6px; z-index: 3; }
.diagram__tools button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--cs-line); background: rgba(35, 35, 35, .85); color: #fff; font-size: 16px; cursor: pointer; }
.diagram__tools button:hover { background: var(--cs-accent-2); }
.diagram__note { display: grid; gap: 4px; padding: 14px 18px; border: 1px solid var(--cs-line); border-left: 3px solid var(--cs-accent); border-radius: 8px; background: var(--cs-glass); min-height: 74px; font-size: 14px; color: var(--cs-ink-2); line-height: 1.5; }
.diagram__note b { color: #fff; font-weight: 500; }
.diagram__cap { font-size: 12.5px !important; color: var(--cs-ink-3); }
/* mermaid skin */
.diagram .node rect, .diagram .node polygon, .diagram .node path, .diagram .node circle { transition: opacity .3s, filter .3s, stroke-width .3s; }
.diagram .node, .diagram .edgePath, .diagram .edgeLabel, .diagram .flowchart-link { transition: opacity .3s; }
.diagram .node { cursor: pointer; }
.diagram foreignObject { overflow: visible; }
.diagram .nodeLabel, .diagram .edgeLabel p { margin: 0; line-height: 1.35; text-align: center; }
.diagram .node:hover rect, .diagram .node:hover polygon { filter: brightness(1.25); }
.diagram .is-dim { opacity: .16; }
.diagram .node.is-sel rect, .diagram .node.is-sel polygon, .diagram .node.is-sel path { stroke: #fff !important; stroke-width: 2.5px !important; }
.diagram .flowchart-link.is-hot { stroke: var(--cs-accent) !important; stroke-width: 2.6px !important; stroke-dasharray: 6 5; animation: cs-flow 1s linear infinite; }
@keyframes cs-flow { to { stroke-dashoffset: -22; } }
.diagram .edgeLabel, .diagram .edgeLabel p, .diagram .edgeLabel span { background-color: #2a2a2a !important; color: #ddd !important; }

@keyframes cs-fade { from { opacity: 0; } }
.diagram--in g.node { animation: cs-fade .6s backwards; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.diagram--in path.flowchart-link, .diagram--in .edgeLabel { animation: cs-fade .8s .6s backwards; }
@media (prefers-reduced-motion: reduce) { .diagram--in g.node, .diagram--in path.flowchart-link, .diagram--in .edgeLabel { animation: none; } }

/* stack */
.techgrid { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.techgrid li { display: grid; gap: 12px; justify-items: start; padding: 18px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-glass); cursor: default; outline: 0;
  transition: transform .45s var(--cs-ease), border-color .3s, background .3s; }
.techgrid li:hover, .techgrid li:focus, .techgrid li.is-on { transform: translateY(-5px); border-color: var(--cs-accent); background: var(--cs-glass-2); }
.techgrid .logo { width: 38px; height: 38px; }
.tname { color: #fff; font-size: 14px; line-height: 1.3; }
.twhy { display: none; }
.techhint { min-height: 56px; border-left: 2px solid var(--cs-accent-2); padding-left: 16px; color: var(--cs-ink-2); }
.techhint__txt { display: block; }
.decisions { border: 1px solid var(--cs-line); border-radius: 10px; background: var(--cs-glass); }
.decisions summary { cursor: pointer; padding: 14px 18px; color: #fff; font-size: 14px; list-style: none; }
.decisions summary::after { content: "+"; float: right; color: var(--cs-accent); }
.decisions[open] summary::after { content: "−"; }
.decisions table, .restable { width: 100%; border-collapse: collapse; font-size: 14px; }
.decisions th, .decisions td, .restable th, .restable td { text-align: left; padding: 11px 18px; border-top: 1px solid var(--cs-line); vertical-align: top; line-height: 1.5; }
.decisions th, .restable th { font: 500 11px/1 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--cs-ink-3); }
.decisions td:first-child, .restable td:first-child { color: #fff; }

/* highlight flow */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; counter-reset: fl; }
.flow li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 18px; padding: 0 0 26px; position: relative; counter-increment: fl; }
.flow li::before { content: counter(fl); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cs-accent); color: #fff; background: var(--cs-bg); z-index: 1; font-size: 15px; }
.flow li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 1px; background: linear-gradient(var(--cs-accent), rgba(111, 134, 255, .1)); }
.flow__k { color: #fff; font-size: 1.15rem; align-self: end; }
.flow__v { color: var(--cs-ink-2); font-size: 14.5px; line-height: 1.5; }

/* charts */
.charts { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.charts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.charts--1 { grid-template-columns: minmax(0, 760px); }
.chart { margin: 0; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-glass); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chart figcaption { display: flex; justify-content: space-between; align-items: start; gap: 10px; flex-wrap: wrap; }
.chart__title { color: #fff; font-size: 15px; line-height: 1.35; max-width: 26ch; }
.chart__body { position: relative; height: 220px; }
.chart--states .chart__body, .chart--list .chart__body, .chart--grid .chart__body { height: auto; }
.chart__note { font-size: 12.5px !important; line-height: 1.5 !important; color: var(--cs-ink-3); }
.chart__body table.heat { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.heat th { font-weight: 400; font-size: 11.5px; color: var(--cs-ink-3); text-align: left; padding: 4px; }
.heat td { text-align: center; padding: 12px 4px; border-radius: 8px; color: #fff; background: rgba(111, 134, 255, calc(var(--a, .1))); font-variant-numeric: tabular-nums; }
.heat td.hl { outline: 2px solid #fff; }
.states { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: st; }
.states li { counter-increment: st; padding: 12px 8px; border: 1px solid var(--cs-line); border-radius: 8px; font-size: 12px; word-break: normal; overflow-wrap: normal; min-width: 0; color: #fff; display: grid; gap: 6px; background: rgba(111, 134, 255, .08); }
.states li::before { content: counter(st, decimal-leading-zero); font-size: 11px; color: var(--cs-accent); }
.states li.bad { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .5); }
.states li.bad::before { content: "!"; color: var(--cs-bad); }
.bandlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bandlist li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 8px; border-left: 3px solid; background: var(--cs-glass); font-size: 13px; }
.bandlist b { color: #fff; font-weight: 500; }
.bandlist li.ok { border-color: var(--cs-ok); } .bandlist li.warn { border-color: var(--cs-warn); } .bandlist li.bad { border-color: var(--cs-bad); }
.bandlist span { color: var(--cs-ink-2); }
@media (max-width: 1199px) { .charts, .charts--2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .charts, .charts--2 { grid-template-columns: 1fr; } }

/* results */
.restable { border: 1px solid var(--cs-line); border-radius: 10px; overflow: hidden; background: var(--cs-glass); }
.restable td:last-child { white-space: nowrap; }
.caveat { margin-top: 14px; font-size: 13.5px !important; color: var(--cs-ink-3); border-left: 2px solid var(--cs-violet); padding-left: 14px; }
.outitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.outitems li { display: grid; gap: 2px; border-top: 1px solid var(--cs-line); padding-top: 12px; }
.outitems b { color: #fff; font-weight: 400; font-size: 1.05rem; }
.outitems span { font-size: 14px; color: var(--cs-ink-2); }

/* principles + legend */
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.principles li { padding: 16px 18px 16px 52px; border: 1px solid var(--cs-line); border-radius: 10px; color: #fff; position: relative; background: var(--cs-glass); transition: transform .4s var(--cs-ease), border-color .3s; }
.principles li::before { content: "✦"; position: absolute; left: 20px; color: var(--cs-accent); }
.principles li:hover { transform: translateX(8px); border-color: var(--cs-accent); }
.legend { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--cs-line); }
.legend__t { font-size: 12px; color: var(--cs-ink-3); margin-right: 8px; }

/* invite */
.invite__h { font-size: clamp(2.2rem, 5.4vw, 5rem) !important; line-height: 1.02 !important; max-width: 18ch !important; background: linear-gradient(100deg, #fff 30%, var(--cs-accent)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.invite__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 6px; }
.invite__mail { color: var(--cs-ink-2); border-bottom: 1px solid var(--cs-line); text-decoration: none; font-size: 15px; padding-bottom: 2px; }
.invite__mail:hover { color: #fff; border-color: #fff; }
.nextcase { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 22px; align-items: center; margin-top: 26px; padding: 20px 24px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-glass); text-decoration: none; max-width: 760px; transition: border-color .3s, transform .4s var(--cs-ease), background .3s; }
.nextcase:hover { border-color: var(--cs-accent); background: var(--cs-glass-2); transform: translateY(-3px); }
.nextcase__k { font: 500 11px/1 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--cs-ink-3); }
.nextcase__t { color: #fff; font-size: 1.05rem; line-height: 1.35; }
.nextcase__a { font-size: 22px; color: var(--cs-accent); transition: transform .3s; }
.nextcase:hover .nextcase__a { transform: translateX(6px); }

/* ---------- flashcards (mobile / tablet) ---------- */
html.deck-cards .deck-rail button span { display: none; }
html.deck-cards .deck-rail button { padding: 10px 3px; }
html.deck-cards .deck-fade { display: none; }
html.deck-cards .deck-corner { height: 56px; padding: 0 18px; }
html.deck-cards .deck-back { font-size: 12px; padding: 7px 11px; }
html.deck-cards .deck-brand img { height: 22px; }
html.deck-cards .deck-corner__r { gap: 12px; }
html.deck-cards .deck-nav { bottom: 14px; gap: 8px; }
html.deck-cards .deck-nav > button { width: 42px; height: 42px; }
html.deck-cards .slide { inset: 60px 12px 70px; border: 1px solid var(--cs-line); border-radius: 22px; overflow: hidden; touch-action: pan-y; transform-origin: 50% 100%;
  background: linear-gradient(160deg, #2c2c32, #222226); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
html.deck-cards .slide.is-peek .slide__inner, html.deck-cards .slide.is-peek2 .slide__inner { opacity: 0; }
html.deck-cards .slide__inner { padding: 28px 22px 34px; justify-content: flex-start; gap: 16px; }
html.deck-cards .cols, html.deck-cards .scope__grid { grid-template-columns: 1fr; }
html.deck-cards .scope__grid { grid-template-columns: 1fr 1fr; }
html.deck-cards .hero-metrics { grid-template-columns: 1fr; border: 0; gap: 0; }
html.deck-cards .hero-metrics li, html.deck-cards .hero-metrics li + li { padding: 14px 0; border: 0; border-top: 1px solid var(--cs-line); grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; }
html.deck-cards .hero-metrics .num { font-size: 2rem; grid-row: span 2; min-width: 96px; }
html.deck-cards .hero-metrics .evb { grid-column: 2; }
html.deck-cards .case-page h1, html.deck-cards h1 { font-size: 1.75rem; }
html.deck-cards h2 { font-size: 1.55rem; }
html.deck-cards .charts, html.deck-cards .charts--2, html.deck-cards .charts--1 { grid-template-columns: 1fr; }
html.deck-cards .diagram { height: 46vh; }
html.deck-cards .techgrid { grid-template-columns: repeat(2, 1fr); }
html.deck-cards .states { grid-template-columns: repeat(2, 1fr); }
html.deck-cards .restable td:last-child { white-space: normal; }
html.deck-cards .nextcase { grid-template-columns: 1fr auto; }
html.deck-cards .nextcase__k { grid-column: 1 / -1; }

@media (prefers-reduced-motion: reduce) {
  .status--in-delivery::before, .key, .diagram .flowchart-link.is-hot { animation: none; }
  .deck-bg i { display: none; }
}

/* ---- compact stage: use the card, avoid scrolling ---- */
html.deck-on:not(.deck-cards) h1 { max-width: 30ch; }
html.deck-on:not(.deck-cards) h2 { max-width: 44ch; }
html.deck-on:not(.deck-cards) .slide p { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; }
html.deck-on:not(.deck-cards) .lede { font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; }
html.deck-on:not(.deck-cards) .chart { padding: 16px; gap: 10px; }
html.deck-on:not(.deck-cards) .chart__body { height: clamp(140px, 21vh, 230px); }
html.deck-on:not(.deck-cards) .chart--states .chart__body, html.deck-on:not(.deck-cards) .chart--list .chart__body, html.deck-on:not(.deck-cards) .chart--grid .chart__body { height: auto; }
html.deck-on:not(.deck-cards) .hero-metrics li { padding-top: 16px; }
html.deck-on:not(.deck-cards) .hero-metrics .num { font-size: clamp(2rem, 3.4vw, 3.4rem); }
html.deck-on:not(.deck-cards) .scope { padding: 20px; gap: 16px; }
html.deck-on:not(.deck-cards) .scope__grid { gap: 18px 20px; }
html.deck-on:not(.deck-cards) .phases li { padding: 16px; gap: 8px; }
html.deck-on:not(.deck-cards) .techgrid li { padding: 14px; gap: 10px; }
html.deck-on:not(.deck-cards) .principles li { padding: 12px 16px 12px 46px; }
html.deck-on:not(.deck-cards) .flow li { padding-bottom: 18px; }
html.deck-on:not(.deck-cards) .cols { gap: clamp(24px, 4vw, 64px); }
html.deck-on:not(.deck-cards) .cols > div { gap: 14px; }
html.deck-on:not(.deck-cards) .restable th, html.deck-on:not(.deck-cards) .restable td { padding: 9px 14px; }
html.deck-on:not(.deck-cards) .slide--arch .slide__inner { padding-top: 6px; padding-bottom: 18px; gap: 10px; }
html.deck-on:not(.deck-cards) .diagram { height: clamp(200px, 33vh, 520px); }
html.deck-on:not(.deck-cards) .diagram__cap { font-size: 12px !important; line-height: 1.4 !important; }
html.deck-on:not(.deck-cards) .diagram__note { min-height: 0; padding: 10px 16px; }
html.deck-on:not(.deck-cards) .invite__h { font-size: clamp(2rem, 4.4vw, 4.2rem) !important; }

/* top-aligned content: no wasted space above the kicker (cover and invite stay centred) */
html.deck-on:not(.deck-cards) .slide .slide__inner > :first-child { margin-top: 0; }
html.deck-on:not(.deck-cards) .slide .slide__inner > :last-child { margin-bottom: 0; }
html.deck-on:not(.deck-cards) .slide .slide__inner { padding-top: 0; }
html.deck-on:not(.deck-cards) .slide { top: 48px; }
.deck-corner { height: 48px; }

html.deck-on:not(.deck-cards) .slide__inner { padding-top: 0; }
html.deck-on:not(.deck-cards) .slide--cover .slide__inner { padding-top: 12px; gap: 16px; }

/* the site theme pads every <section>; slides manage their own spacing */
.case-page section.slide { padding: 0 !important; }
html.deck-on:not(.deck-cards) .slide__inner, html.deck-on:not(.deck-cards) .slide--cover .slide__inner { padding-top: 18px; }
html.deck-on:not(.deck-cards) .slide__inner, html.deck-on:not(.deck-cards) .slide--cover .slide__inner { padding-top: 40px; }
html.deck-on:not(.deck-cards) .slide .slide__inner { padding-top: 40px; }

/* ---- architecture slide: text on the left, tall diagram on the right (desktop) ---- */
.diagram__hint { font-size: 12px !important; color: var(--cs-ink-3); }
html.deck-cards .diagram__hint { display: none; }
html.deck-on:not(.deck-cards) .slide--arch .slide__inner { display: grid; grid-template-columns: minmax(300px, .72fr) 1.6fr; grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(24px, 3vw, 48px); row-gap: 14px; align-content: stretch; padding-bottom: 24px; }
html.deck-on:not(.deck-cards) .slide--arch .arch__head { grid-column: 1; grid-row: 1; display: grid; gap: 14px; align-content: start; align-items: start; }
html.deck-on:not(.deck-cards) .slide--arch .arch__head h2 { max-width: 14ch; }
html.deck-on:not(.deck-cards) .slide--arch .tabs { display: grid; border-radius: 14px; width: 100%; }
html.deck-on:not(.deck-cards) .slide--arch .tabs button { text-align: left; border-radius: 10px; padding: 10px 14px; }
html.deck-on:not(.deck-cards) .slide--arch .diagram-wrap { display: contents; }
html.deck-on:not(.deck-cards) .slide--arch .diagram-wrap[hidden] { display: none !important; }
html.deck-on:not(.deck-cards) .slide--arch .diagram { grid-column: 2; grid-row: 1 / -1; height: 100%; min-height: 0; }
html.deck-on:not(.deck-cards) .slide--arch .diagram__note { grid-column: 1; grid-row: 2; min-height: 96px; font-size: 14.5px; padding: 14px 18px; }
html.deck-on:not(.deck-cards) .slide--arch .diagram__cap { grid-column: 1; grid-row: 3; font-size: 13px !important; line-height: 1.5 !important; }
html.deck-on:not(.deck-cards) .slide--arch .diagram__hint { grid-column: 1; grid-row: 4; }

/* listing: filters behind a toggle */
.cs-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cs-toggle { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #fff; border: 1px solid var(--cs-line); border-radius: 99px; padding: 11px 20px; font: 400 15px/1 Inter, sans-serif; cursor: pointer; transition: background .25s, border-color .25s; }
.cs-toggle:hover, .cs-toggle[aria-expanded="true"] { border-color: rgba(255, 255, 255, .5); background: var(--cs-glass-2); }
.cs-toggle b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--cs-accent-2); font: 600 12px/1 Inter, sans-serif; }
.cs-toggle i { font-size: 17px; }
.cs-panel { overflow: hidden; margin-top: 18px; padding: 22px 24px; border: 1px solid var(--cs-line); border-radius: 12px; background: var(--cs-glass); }
.cs-panel[hidden] { display: none; }

/* ---- cards: art, tooltips, lighter content ---- */
.case-card__glyph { opacity: .95; width: 46%; max-width: 330px; right: 14px; top: 10px; }
.case-card--feature .case-card__glyph { width: 44%; max-width: 420px; }
.case-card__glyph svg { width: 100%; height: auto; display: block; overflow: visible; }
.case-card__glyph .art text { font-family: Inter, sans-serif; }
.case-card:not(.case-card--list) .case-card__title { max-width: 52%; }
.case-card--feature .case-card__title { max-width: 46%; }
.case-card__logos { gap: 12px; }
.case-card__logos .logo { width: 28px; height: 28px; }
.tip { position: relative; display: inline-flex; outline: 0; }
.tip::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 10px); white-space: nowrap; z-index: 5; font: 500 12px/1 Inter, sans-serif; color: #fff; background: #121214;
  border: 1px solid var(--cs-line); padding: 7px 10px; border-radius: 6px; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .2s, transform .2s; }
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: none; }
.tip:hover .logo:not(.logo--color):not(.logo--ph) { background: var(--brand, #fff); }
.tip:hover .logo { transform: translateY(-2px); }
.logo { transition: background .3s, transform .25s; }
@media (max-width: 767px) { .case-card__glyph { opacity: .5; width: 54%; } .case-card:not(.case-card--list) .case-card__title, .case-card--feature .case-card__title { max-width: 100%; } }
.case-card__glyph { width: 40%; top: 8px; }
.case-card--feature .case-card__glyph { width: 34%; max-width: 360px; top: 14px; }
.case-card__metric .evb { position: relative; z-index: 1; }

/* homepage: two cards side by side */
.cs-home { grid-template-columns: 1fr 1fr; }
.cs-home .case-card { min-height: 300px; }
@media (max-width: 991px) { .cs-home { grid-template-columns: 1fr; } }