/* ══════════════════════════════════════════════════════════════════════
   CASE STUDY TEMPLATE - shared styles
   One stylesheet for all six /solutions/*.html pages. Token system (colour
   roles, shadow language, shape scale, motion policy) copied verbatim from
   index.html / about.html so a case-study page never reads as a different
   site. Page-specific rules (gallery, workflow map, stats receipt) are new
   and confined to the bottom half of this file.
   ══════════════════════════════════════════════════════════════════════ */

/* Nav height token, mirrored from index.html so all three surfaces land a
   fragment target in exactly the same place. See index.html for the why. */
:root { --nav-h: 65px; }
@media (min-width: 1024px) { :root { --nav-h: 71px; } }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .font-heading { font-family: 'Manrope', sans-serif; }

.u-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.u-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.h-section { letter-spacing: -.028em; line-height: 1.08; }
.prose-body { line-height: 1.75; max-width: 64ch; }

.grad-text { background: linear-gradient(96deg, #0EA968, #2F6FED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .grad-text { background: linear-gradient(96deg, #16C784, #3A7BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Wordmark shine, copied verbatim from index.html so the nav does not
   change character between pages. The background-position motion exception
   is documented there. Reverted 2026-08-12 along with index.html and
   about.html - see index.html for why.

   Loop snap fixed 2026-08-15, again in step with the other two copies: one
   cycle now travels exactly one background tile (81.25% -> -81.25% at size
   260%) instead of 1.6 tiles, with the duration compensating so the
   on-screen sweep speed is unchanged. Derivation and measurements are in
   index.html. Keep all three copies in sync. */
.wordmark {
  background: linear-gradient(100deg, #082126 12%, #0EA968 34%, #2F6FED 48%, #082126 70%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wordmark-shine 4.4s linear infinite;
}
.dark .wordmark { background-image: linear-gradient(100deg, #F2FAF6 12%, #16C784 34%, #3A7BFF 48%, #F2FAF6 70%); }
@keyframes wordmark-shine { from { background-position: 81.25% 0; } to { background-position: -81.25% 0; } }
@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; background-position: 40% 0; }
}

/* .dot-grid moved to ambient-field.css on 2026-08-08, where it gained the
   mask that stops it cutting a rectangle into the field underneath. That
   file is linked ahead of this one on all six pages. Redeclaring it here
   would win on cascade order and silently drop the mask. */

.sh-card { box-shadow: 0 1px 2px rgba(8,33,38,.04), 0 12px 28px -14px rgba(8,33,38,.16); }
.sh-cta  { box-shadow: 0 1px 2px rgba(8,33,38,.12), 0 12px 26px -10px rgba(8,33,38,.38); }
.dark .sh-card { box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 12px 28px -14px rgba(0,0,0,.55); }
.dark .sh-cta  { box-shadow: 0 1px 2px rgba(0,0,0,.40), 0 12px 26px -10px rgba(22,199,132,.32); }

.lift { transition: transform .26s cubic-bezier(.16,1,.3,1), border-color .26s cubic-bezier(.16,1,.3,1), box-shadow .26s cubic-bezier(.16,1,.3,1); }
.lift:hover { transform: translateY(-4px); }
.press { transition: transform .18s cubic-bezier(.16,1,.3,1); }
.press:hover  { transform: translateY(-1px); }
.press:active { transform: translateY(0) scale(.98); }
.arrow-slide svg { transition: transform .22s cubic-bezier(.16,1,.3,1); }
.arrow-slide:hover svg { transform: translateX(-3px); }

:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid #0EA968; outline-offset: 3px; border-radius: 4px; }
.dark :where(a, button, summary, [tabindex]):focus-visible { outline-color: #16C784; }

.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .52s cubic-bezier(.16,1,.3,1), transform .52s cubic-bezier(.16,1,.3,1); }
.js .rv.in { opacity: 1; transform: none; }

/* ── Stat receipt (mirrors index.html's .sol-receipt, light-theme values) ── */
.cs-receipt {
  border-top: 1px dashed rgba(8,33,38,.16); border-bottom: 1px dashed rgba(8,33,38,.16);
  padding: 16px 0; display: flex; flex-direction: column; gap: 10px;
}
.dark .cs-receipt { border-color: rgba(242,250,246,.16); }
.cs-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cs-stat .lb { font-size: 13px; color: #5E7A70; }
.dark .cs-stat .lb { color: #7B948A; }
.cs-stat .vl { font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.cs-stat .vl b { color: #0EA968; font-weight: 600; }
.dark .cs-stat .vl b { color: #16C784; }
.cs-est { font-size: 10px; color: #5E7A70; vertical-align: super; margin-left: 3px; }
.dark .cs-est { color: #7B948A; }

.cs-pill { display: inline-flex; font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: 999px; background: rgba(8,33,38,.05); color: #5E7A70; }
.dark .cs-pill { background: rgba(242,250,246,.07); color: #7B948A; }

/* ── Gallery: before/after or plain shots, 2-up on desktop ── */
.cs-gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cs-plate { border-radius: 14px; overflow: hidden; border: 1px solid rgba(8,33,38,.09); background: #F2FAF6; }
.dark .cs-plate { border-color: rgba(242,250,246,.10); background: #08152B; }
.cs-plate img { width: 100%; height: 260px; object-fit: cover; display: block; }
.cs-plate-tag {
  position: relative; margin: -40px 12px 0; z-index: 1;
  display: inline-flex; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: rgba(6,15,31,.82); color: #F2FAF6; backdrop-filter: blur(4px);
}
.cs-plate-cap { padding: 12px 16px 16px; font-size: 13px; line-height: 1.55; color: #5E7A70; }
.dark .cs-plate-cap { color: #7B948A; }

/* ══════════════════════════════════════════════════════════════════════
   CASE STUDY COMPONENTS - added 2026-08-08

   Four reusable blocks replacing the old single-column page, modelled on
   the structure nogalsolutions.tech ships on its own case-study page (the
   strongest artifact in the inspiration set, and close to what
   solutions-content.md's "Standard B" already described):

     .cs-pipe    mini pipeline card, sits beside the hero headline
     .cs-tabs    two views of the same build, each driving a carousel
     .cs-stack   per-tool role grid, replacing the flat chip list
     .cs-note    reflection callout

   All four are data-driven off SOLUTION_PAGES in case-study.js. Every one
   renders only where the data for it exists, so a case study that has not
   been written up yet degrades to the shorter page rather than showing an
   empty component.

   Colours are brand.md's emerald and blue. Nogal's crimson is his.
   ══════════════════════════════════════════════════════════════════════ */

/* ── One column, every section ───────────────────────────────────────
   The first cut of this layout mixed max-w-8xl and max-w-3xl section by
   section, which put the left edge of "What changed" 180px inside the
   left edge of the heading above it and made the page read as ragged
   while scrolling. One measure for everything instead. ── */
.cs-col { width: 100%; max-width: 1152px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 1024px) { .cs-col { padding-inline: 40px; } }

/* ── Hero pipeline card ──────────────────────────────────────────────
   A numbered vertical list of the 3-6 stages THIS build actually runs,
   connected by a line. It replaces the generic four-step rail that used
   to sit further down the page and read identically on all six case
   studies. ── */
.cs-pipe {
  border-radius: 16px; padding: 22px 22px 8px;
  border: 1px solid rgba(8,33,38,.09);
  background: linear-gradient(160deg, rgba(14,169,104,.05), rgba(47,111,237,.035));
  backdrop-filter: blur(3px);
}
.dark .cs-pipe {
  border-color: rgba(242,250,246,.10);
  background: linear-gradient(160deg, rgba(22,199,132,.07), rgba(58,123,255,.05));
}
.cs-pipe ol { list-style: none; margin: 14px 0 0; padding: 0; }
.cs-pipe li { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
/* The connector. Drawn on the item rather than behind the list, so the
   last step simply does not have one and no length has to be guessed. */
.cs-pipe li:not(:last-child)::before {
  content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg, rgba(14,169,104,.45), rgba(14,169,104,.10));
}
.dark .cs-pipe li:not(:last-child)::before {
  background: linear-gradient(180deg, rgba(22,199,132,.5), rgba(22,199,132,.12));
}
.cs-pipe-n {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 999px; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  border: 1px solid rgba(14,169,104,.42); color: #0EA968;
  background: #F2FAF6; position: relative; z-index: 1;
}
.dark .cs-pipe-n { border-color: rgba(22,199,132,.45); color: #16C784; background: #08152B; }
.cs-pipe b { display: block; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14.5px; }
.cs-pipe span { display: block; font-size: 13px; line-height: 1.55; color: #5E7A70; margin-top: 3px; }
.dark .cs-pipe span { color: #7B948A; }

/* ── Hero stat row ── */
.cs-figs { display: flex; flex-wrap: wrap; gap: 32px 44px; }
.cs-fig b {
  display: block; font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: 30px; letter-spacing: -.02em; line-height: 1;
}
.cs-fig span { display: block; font-size: 12.5px; line-height: 1.45; color: #5E7A70; margin-top: 7px; max-width: 15ch; }
.dark .cs-fig span { color: #7B948A; }

/* ── Two views of the same build ─────────────────────────────────────
   One carousel component, two data sets, switched by a tab pair. This is
   the block doing most of the work on the page: it covers the process
   flow, the operational detail and the gallery at once, as something a
   visitor operates rather than a wall of text. Built to be reused more
   than once per page, one instance per pipeline phase. ── */
.cs-switch {
  display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px;
  border: 1px solid rgba(8,33,38,.10); background: rgba(8,33,38,.03);
}
.dark .cs-switch { border-color: rgba(242,250,246,.10); background: rgba(242,250,246,.04); }
.cs-switch button {
  border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 600;
  color: #5E7A70; white-space: nowrap;
  transition: color .22s ease, background-color .22s ease;
}
.dark .cs-switch button { color: #7B948A; }
.cs-switch button:hover { color: #082126; }
.dark .cs-switch button:hover { color: #F2FAF6; }
.cs-switch button[aria-selected="true"] {
  background: #082126; color: #F2FAF6;
  box-shadow: 0 1px 2px rgba(8,33,38,.12), 0 8px 18px -8px rgba(8,33,38,.34);
}
.dark .cs-switch button[aria-selected="true"] {
  background: #F2FAF6; color: #060F1F;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 18px -8px rgba(22,199,132,.3);
}

/* Capped rather than filling the column. A 16:9 frame at the full 1152px
   is 648px tall, which dwarfs the caption under it and leaves a drawn
   step plate looking like a mostly-empty poster. */
.cs-car { margin-top: 22px; max-width: 880px; }
.cs-car-view {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(8,33,38,.09); background: #F2FAF6; aspect-ratio: 16 / 9;
}
.dark .cs-car-view { border-color: rgba(242,250,246,.10); background: #08152B; }
.cs-car-view img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ken Burns. A very slow pan and zoom inside the frame, so a static
   workflow screenshot reads as alive without becoming a gimmick. Taken
   from hannasophiafebrer.netlify.app's laptop-mockup treatment. Only
   transform animates, and it stops entirely under reduced motion. */
@keyframes cs-pan {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.13) translate3d(-1.6%, -1.4%, 0); }
}
.cs-car-view img.pan { animation: cs-pan 26s ease-in-out infinite alternate; will-change: transform; }

/* Where a real screenshot does not exist yet, the slide draws the whole
   sequence as a rail with the current step lit, rather than a grey
   placeholder box or a single number floating in an empty frame. Two
   reasons: it is honestly a diagram and looks like one, and it turns the
   dead space in a 16:9 frame into the thing the visitor came for, which
   is the shape of the flow. Stepping through the carousel then reads as
   walking the rail. */
.cs-plateflow {
  position: absolute; inset: 0; display: grid; align-content: center; gap: 0;
  padding: clamp(28px, 6%, 54px) clamp(30px, 6%, 62px);
  background:
    radial-gradient(ellipse 70% 60% at 30% 15%, rgba(14,169,104,.10), transparent 62%),
    radial-gradient(ellipse 60% 60% at 80% 85%, rgba(47,111,237,.09), transparent 64%);
}
.dark .cs-plateflow {
  background:
    radial-gradient(ellipse 70% 60% at 30% 15%, rgba(22,199,132,.13), transparent 62%),
    radial-gradient(ellipse 60% 60% at 80% 85%, rgba(58,123,255,.11), transparent 64%);
}
.cs-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-rail li {
  position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 17px 0;
  opacity: .38; transition: opacity .32s ease;
}
.cs-rail li[data-on] { opacity: 1; }
.cs-rail li:not(:last-child)::before {
  content: ''; position: absolute; left: 18px; top: 46px; bottom: -8px; width: 1px;
  background: rgba(8,33,38,.16);
}
.dark .cs-rail li:not(:last-child)::before { background: rgba(242,250,246,.16); }
.cs-rail-n {
  flex: 0 0 auto; width: 37px; height: 37px; border-radius: 999px; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 13.5px;
  border: 1px solid rgba(8,33,38,.18); color: #5E7A70; background: rgba(242,250,246,.55);
  position: relative; z-index: 1;
  transition: border-color .32s ease, color .32s ease, box-shadow .32s ease;
}
.dark .cs-rail-n { border-color: rgba(242,250,246,.18); color: #7B948A; background: rgba(8,21,43,.6); }
.cs-rail li[data-on] .cs-rail-n {
  border-color: rgba(14,169,104,.6); color: #0EA968;
  box-shadow: 0 0 0 4px rgba(14,169,104,.10), 0 6px 18px -8px rgba(14,169,104,.5);
}
.dark .cs-rail li[data-on] .cs-rail-n {
  border-color: rgba(22,199,132,.62); color: #16C784;
  box-shadow: 0 0 0 4px rgba(22,199,132,.12), 0 6px 18px -8px rgba(22,199,132,.55);
}
.cs-rail b { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(15.5px, 1.3vw, 19.5px); line-height: 1.32; padding-top: 8px; display: block; max-width: 32ch; }

.cs-car-cap { margin-top: 18px; min-height: 68px; }
.cs-car-cap b { display: block; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15.5px; }
.cs-car-cap p { font-size: 14px; line-height: 1.6; color: #5E7A70; margin-top: 5px; max-width: 62ch; }
.dark .cs-car-cap p { color: #7B948A; }

.cs-car-nav { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.cs-car-btn {
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid rgba(8,33,38,.13); color: #5E7A70;
  transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .2s ease, color .2s ease;
}
.dark .cs-car-btn { border-color: rgba(242,250,246,.14); color: #7B948A; }
.cs-car-btn:hover:not(:disabled) { border-color: #0EA968; color: #0EA968; transform: translateY(-1px); }
.dark .cs-car-btn:hover:not(:disabled) { border-color: #16C784; color: #16C784; }
.cs-car-btn:disabled { opacity: .32; }
.cs-car-dots { display: flex; gap: 7px; flex: 1 1 auto; }
.cs-car-dot {
  width: 7px; height: 7px; border-radius: 999px; background: rgba(8,33,38,.18);
  transition: background-color .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.dark .cs-car-dot { background: rgba(242,250,246,.20); }
.cs-car-dot[aria-current="true"] { background: #0EA968; transform: scale(1.5); }
.dark .cs-car-dot[aria-current="true"] { background: #16C784; }
.cs-car-count { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #5E7A70; font-variant-numeric: tabular-nums; }
.dark .cs-car-count { color: #7B948A; }

/* ── Scoped tech stack ───────────────────────────────────────────────
   A role-by-role account of the architecture, not a logo wall: what each
   tool does in THIS build. The most operations-first artifact on the
   page, which matters because that is positioning.md's Golden Rule. ── */
.cs-stack { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cs-stack-card {
  border-radius: 14px; padding: 18px 18px 20px;
  border: 1px solid rgba(8,33,38,.09); background: rgba(242,250,246,.5);
  transition: transform .26s cubic-bezier(.16,1,.3,1), border-color .26s ease;
}
.dark .cs-stack-card { border-color: rgba(242,250,246,.10); background: rgba(8,21,43,.45); }
.cs-stack-card:hover { transform: translateY(-3px); border-color: rgba(14,169,104,.3); }
.dark .cs-stack-card:hover { border-color: rgba(22,199,132,.32); }
.cs-stack-role {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: #0EA968;
}
.dark .cs-stack-role { color: #16C784; }
.cs-stack-card.bl .cs-stack-role { color: #2F6FED; }
.dark .cs-stack-card.bl .cs-stack-role { color: #3A7BFF; }
.cs-stack-card b { display: block; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16px; margin-top: 9px; }
.cs-stack-card p { font-size: 13px; line-height: 1.6; color: #5E7A70; margin-top: 6px; }
.dark .cs-stack-card p { color: #7B948A; }

/* ── Reflection callout ──────────────────────────────────────────────
   First-person, explains a real tradeoff, and closes on one highlighted
   line. Optional per case study. ── */
.cs-note {
  border-radius: 16px; padding: 26px 26px 8px;
  border: 1px solid rgba(8,33,38,.09); background: rgba(8,33,38,.022);
}
.dark .cs-note { border-color: rgba(242,250,246,.10); background: rgba(242,250,246,.03); }
.cs-note h3 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 17px; }
.cs-note p { font-size: 14.5px; line-height: 1.7; color: #5E7A70; margin-top: 12px; max-width: 70ch; }
.dark .cs-note p { color: #7B948A; }
/* Selector has to be `.cs-note p.cs-note-pull`, not `.cs-note-pull`: this is
   a <p> inside .cs-note, which already sets a 70ch measure for body copy,
   and (0,1,1) beats (0,1,0). A full-bleed band that stops two-thirds of the
   way across reads as a rendering bug. */
.cs-note p.cs-note-pull {
  max-width: none;
  margin: 20px -26px 0; padding: 18px 26px;
  border-top: 1px solid rgba(8,33,38,.08);
  background: linear-gradient(100deg, rgba(14,169,104,.07), rgba(47,111,237,.045));
  font-size: 14.5px; line-height: 1.65;
  border-radius: 0 0 15px 15px;
}
.dark .cs-note-pull {
  border-top-color: rgba(242,250,246,.09);
  background: linear-gradient(100deg, rgba(22,199,132,.10), rgba(58,123,255,.07));
}
.cs-note-pull b { font-weight: 700; }

/* ── Closing CTA band ── */
.cs-cta {
  position: relative; overflow: hidden; border-radius: 20px; padding: 40px 34px;
  border: 1px solid rgba(8,33,38,.09);
  background: linear-gradient(140deg, rgba(14,169,104,.10), rgba(47,111,237,.07) 62%, rgba(14,169,104,.05));
}
.dark .cs-cta {
  border-color: rgba(242,250,246,.10);
  background: linear-gradient(140deg, rgba(22,199,132,.14), rgba(58,123,255,.10) 62%, rgba(22,199,132,.06));
}

/* ── Buttons ─────────────────────────────────────────────────────────
   Double-layer glow on hover instead of a flat lift, matching the pass
   applied across index.html. Soft and brand-tinted, never a neon ring. ── */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 999px; font-weight: 600; font-size: 15px; padding: 0 26px; height: 48px;
  white-space: nowrap;
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .26s ease,
              border-color .22s ease, background-color .22s ease;
}
.cs-btn-primary { background: #082126; color: #F2FAF6; box-shadow: 0 1px 2px rgba(8,33,38,.12), 0 12px 26px -10px rgba(8,33,38,.38); }
.dark .cs-btn-primary { background: #F2FAF6; color: #060F1F; }
.cs-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(8,33,38,.14), 0 0 0 1px rgba(14,169,104,.18),
              0 14px 30px -12px rgba(14,169,104,.55), 0 24px 60px -22px rgba(47,111,237,.4);
}
.dark .cs-btn-primary:hover {
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(22,199,132,.24),
              0 14px 30px -12px rgba(22,199,132,.6), 0 24px 60px -22px rgba(58,123,255,.45);
}
.cs-btn-ghost { border: 1px solid rgba(8,33,38,.15); }
.dark .cs-btn-ghost { border-color: rgba(242,250,246,.2); }
.cs-btn-ghost:hover {
  transform: translateY(-2px); border-color: #0EA968; color: #0EA968;
  box-shadow: 0 10px 26px -14px rgba(14,169,104,.5);
}
.dark .cs-btn-ghost:hover { border-color: #16C784; color: #16C784; }
.cs-btn:active { transform: translateY(0) scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .cs-car-view img.pan { animation: none; transform: scale(1.04); }
  .cs-btn:hover, .cs-stack-card:hover, .cs-car-btn:hover:not(:disabled) { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   OPERATIONAL ASSESSMENT  (website-design.md Part 10, block 4)
   Added 2026-08-11. A reading column, nothing more. It is deliberately the
   plainest block on the page: everything either side of it is a component,
   and the argument needs one place where it is just prose.
   ══════════════════════════════════════════════════════════════════════ */
.cs-assess { display: flex; flex-direction: column; gap: 18px; max-width: 68ch; }
.cs-assess p { font-size: 16px; color: #5E7A70; }
.dark .cs-assess p { color: #7B948A; }

/* ══════════════════════════════════════════════════════════════════════
   RELATED SOLUTIONS  (website-design.md Part 10, block 10)
   Added 2026-08-11.

   Everything from .sol-card down is a VERBATIM PORT of the Solutions card
   in index.html (search that file for ".sol-card {"). Same class names,
   same values, on purpose: a visitor who arrived here from the homepage
   rail meets the same object again. The carousel-only rules - .sol-slide,
   the track, the [data-active] emphasis and the Ken Burns pan - are NOT
   ported, because there is no track here.

   IF YOU CHANGE THE CARD IN index.html, CHANGE IT HERE TOO. Two copies is
   the cost of the six case-study pages not loading the homepage's whole
   stylesheet; the same arrangement already applies to .wordmark at the top
   of this file.
   ══════════════════════════════════════════════════════════════════════ */
.cs-related { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .cs-related { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cs-related { grid-template-columns: repeat(3, 1fr); } }
/* Third card only exists to fill a 3-up row. At 2-up it would sit alone on
   a second row, which reads as an orphan rather than as a third option. */
@media (min-width: 768px) and (max-width: 1023px) { .cs-related > :nth-child(3) { display: none; } }

.sol-card {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  padding: 14px 14px 20px; border-radius: 18px; cursor: pointer;
  background: #F2FAF6; border: 1px solid rgba(8,33,38,.09);
  box-shadow: 0 1px 2px rgba(8,33,38,.04), 0 12px 28px -14px rgba(8,33,38,.16);
  transition: border-color .24s ease, transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s ease;
}
.dark .sol-card { background: #08152B; border-color: rgba(242,250,246,.09); box-shadow: none; }
.sol-card:hover, .sol-card:focus-visible {
  border-color: rgba(14,169,104,.35); transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(14,169,104,.40), 0 10px 24px -18px rgba(47,111,237,.24);
}
.dark .sol-card:hover, .dark .sol-card:focus-visible {
  border-color: rgba(22,199,132,.35);
  box-shadow: 0 22px 44px -26px rgba(22,199,132,.45), 0 10px 24px -18px rgba(58,123,255,.28);
}
.sol-card:active { transform: translateY(-1px) scale(.995); }

.sol-shot {
  position: relative;
  aspect-ratio: 16 / 9; border-radius: 14px;
  background: rgba(8,33,38,.045);
  border: 1px solid rgba(8,33,38,.07);
}
.sol-screen {
  position: absolute; inset: 6px; isolation: isolate; overflow: hidden;
  border-radius: 8px;
  background: rgba(8,33,38,.06);
  box-shadow: inset 0 0 0 1px rgba(8,33,38,.18), 0 1px 3px rgba(8,33,38,.22);
}
.dark .sol-shot { background: #060F1F; border-color: rgba(242,250,246,.07); border-radius: 12px; }
.dark .sol-screen { inset: 0; border-radius: 11px; background: #060F1F; box-shadow: none; }
.sol-screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top left;
  transform: scale(1.5); transform-origin: 12% 16%;
  transition: transform .42s cubic-bezier(.16,1,.3,1);
}
.sol-card:hover .sol-screen img { transform: scale(1.58); }
.sol-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,15,31,.34), rgba(6,15,31,.02) 34%, transparent);
  transition: opacity .3s ease; opacity: 1;
}
.dark .sol-screen::after { background: linear-gradient(to top, rgba(6,15,31,.72), rgba(6,15,31,.04) 34%, transparent); }
.sol-tint {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(135deg, #9BE7C6, #A8C4FF);
  opacity: .09; transition: opacity .3s ease;
}
.dark .sol-tint { opacity: .14; }
.sol-card:hover .sol-screen::after { opacity: .62; }
.sol-card:hover .sol-tint { opacity: .07; }
.sol-pending {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(8,33,38,.38);
}
.dark .sol-pending { color: rgba(242,250,246,.30); }

.sol-copy { padding: 18px 8px 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.sol-tag { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .10em; text-transform: uppercase; }
.sol-tag.em { color: #0EA968; }
.sol-tag.bl { color: #2F6FED; }
.dark .sol-tag.em { color: #16C784; }
.dark .sol-tag.bl { color: #3A7BFF; }
.sol-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.28; letter-spacing: -.015em; margin: 9px 0 8px; display: block; }
.sol-problem {
  font-size: 13.5px; color: rgba(8,33,38,.62); line-height: 1.55; margin: 0 0 16px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: calc(2 * 1.55em);
}
.dark .sol-problem { color: rgba(242,250,246,.55); }
.sol-receipt {
  border-top: 1px dashed rgba(8,33,38,.18); border-bottom: 1px dashed rgba(8,33,38,.18);
  padding: 13px 0; margin-bottom: 16px; display: flex; flex-direction: column; gap: 9px;
}
.dark .sol-receipt { border-top-color: rgba(242,250,246,.16); border-bottom-color: rgba(242,250,246,.16); }
.sol-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sol-stat .lb { font-size: 11.5px; color: rgba(8,33,38,.52); }
.sol-stat .vl { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(8,33,38,.58); white-space: nowrap; }
.sol-stat .vl b { color: #0EA968; font-weight: 600; font-size: 14.5px; }
.dark .sol-stat .lb { color: rgba(242,250,246,.45); }
.dark .sol-stat .vl { color: rgba(242,250,246,.5); }
.dark .sol-stat .vl b { color: #16C784; }
.sol-est { font-size: 9.5px; color: rgba(8,33,38,.40); vertical-align: super; margin-left: 3px; }
.dark .sol-est { color: rgba(242,250,246,.32); }
.sol-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sol-pill { font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: rgba(8,33,38,.06); color: rgba(8,33,38,.60); }
.dark .sol-pill { background: rgba(242,250,246,.07); color: rgba(242,250,246,.55); }
.sol-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0EA968; }
.dark .sol-cta { color: #16C784; }
.sol-cta svg { width: 14px; height: 14px; transition: transform .22s cubic-bezier(.16,1,.3,1); }
.sol-card:hover .sol-cta svg, .sol-card:focus-visible .sol-cta svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .sol-card:hover { transform: none; }
  .sol-card:hover .sol-screen img { transform: scale(1.5); }
  .sol-card:hover .sol-cta svg { transform: none; }
}