/* Multitude Labs: AI-native and distinct from Film (client brief §6).
   Same tokens and components as the rest of the site; Labs adds ruled rows, the brand's mark pattern,
   precise figures, and Signal blue as a small accent on its icons. */

.silver { background: var(--silver); color: var(--on-paper); }

/* Labs lockup: the Multitude wordmark with "LABS" set small underneath, right-aligned (client's Labs logo).
   On the dark header the descriptor uses a light tint of Signal blue: Signal itself is only 2.6:1 on Ink. */
.brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; line-height: 1; }
.brand-sub {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; line-height: 1;
  color: #7fa6ff; /* 6.4:1 on Ink */
  margin-right: 1px;
}
.menu-head .brand-sub { font-size: 0.6875rem; }
@media (max-width: 767px) {
  .brand-lockup { gap: 3px; }
  .brand-sub { font-size: 0.6875rem; }
}

/* SAMPLE content marker: visible on purpose so placeholders can't ship as real claims */
.sample-tag {
  display: inline-block; margin-left: 10px; padding: 2px 6px; vertical-align: middle;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-paper-2); border: 1px solid var(--on-paper-line);
}
.sample-tag--ink, .ink .sample-tag { color: var(--on-ink-2); border-color: var(--on-ink-line); }

/* Labs photography is graded to the Film hero's ink-blue. Where an image has .hover-color (case studies,
   product cards), the original photo sits on top and fades in on hover, as on the Film service tiles. */
.hover-color {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 500ms ease, transform 900ms var(--ease-out);
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 12px; }
.hero-actions .btn { margin-top: 0; }
.hero .text-arrow { color: var(--on-ink); }

/* ---------- Capabilities: the list drives one large frame ----------
   Desktop: the four capabilities on the left; the frame on the right shows the photo of the active one and
   stays in view while the list scrolls past. Each new photo wipes up from the bottom edge, like the letterbox.
   Below 1024px the frame goes and each row carries its own photo. */
.capabilities .h1 { margin-bottom: clamp(28px, 4vw, 56px); }
.cap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.cap-list { margin: 0; padding: 0; }
.cap {
  position: relative;
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 36px; align-items: start; gap: 14px 16px;
  padding-block: clamp(28px, 3.4vw, 52px);
}
.cap::before {
  /* the row rule; main.js draws it in from the left */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--on-paper-line); transform: scaleX(var(--rule, 1)); transform-origin: left;
}
.cap:last-child { border-bottom: 1px solid var(--on-paper-line); }
.cap-num {
  padding-top: 0.75em; font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em;
  color: var(--on-paper-2); transition: color 400ms ease;
}
.cap-title {
  font-size: clamp(1.625rem, 0.95rem + 2vw, 2.75rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em;
  transition: color 400ms ease;
}
.cap-icon {
  width: 36px; height: 36px; margin-top: 4px; fill: none; stroke: var(--ink); stroke-width: 1.6;
  stroke-linecap: butt; stroke-linejoin: miter; transition: stroke 400ms ease;
}
.cap-desc { grid-column: 2 / -1; font-size: var(--fs-lead); line-height: 1.5; color: var(--on-paper-2); max-width: 38ch; }
.cap-media { display: none; }

.cap-viewer {
  position: sticky; top: calc(var(--header-h) + clamp(24px, 4vh, 48px));
  aspect-ratio: 1; max-height: calc(100svh - var(--header-h) - 96px);
  overflow: hidden; isolation: isolate; background: var(--ink);
}
.cap-shot { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.cap-shot:first-child, .cap-shot.is-prev { clip-path: inset(0); z-index: 1; }
.cap-shot.is-active { clip-path: inset(0); z-index: 2; transition: clip-path 1000ms var(--ease-in-out); }
.cap-shot picture, .cap-shot img { width: 100%; height: 100%; }
.cap-shot img { object-fit: cover; transition: transform 1600ms var(--ease-out); }
.cap-grid.is-live .cap-shot img { transform: scale(1.1); }
.cap-grid.is-live .cap-shot.is-active img { transform: none; }
.cap-viewer::after {
  content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(5, 39, 48, 0.7), rgba(5, 39, 48, 0));
}
.cap-viewer-count {
  position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(14px, 1.8vw, 24px); z-index: 4;
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; color: var(--paper);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  /* the active row: its rule thickens, its number and icon take the Labs blue; the others step back */
  .cap::after {
    content: ""; position: absolute; left: 0; right: 0; top: -0.5px; height: 2px; background: var(--ink);
    transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--ease-out);
  }
  .cap-grid.is-live .cap.is-active::after { transform: scaleX(1); }
  .cap-grid.is-live .cap:not(.is-active) .cap-title { color: rgba(5, 39, 48, 0.55); } /* 3.6:1, large text */
  .cap-grid.is-live .cap.is-active .cap-num { color: var(--signal); }
  .cap-grid.is-live .cap.is-active .cap-icon { stroke: var(--signal); }
}
@media (max-width: 1023px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-viewer { display: none; }
  .cap-media {
    display: block; position: relative; overflow: hidden; grid-column: 2 / -1;
    aspect-ratio: 16 / 9; margin-top: 6px; background: var(--ink);
  }
  .cap-media picture, .cap-media img { width: 100%; height: 100%; }
  .cap-media img { object-fit: cover; }
}
@media (max-width: 767px) {
  .cap { grid-template-columns: 2.25rem minmax(0, 1fr) 28px; gap: 12px; }
  .cap-icon { width: 28px; height: 28px; margin-top: 2px; }
  .cap-num { padding-top: 0.6em; }
  .cap-desc { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-shot, .cap-shot.is-active, .cap-shot img, .cap::after { transition: none; }
}

/* ---------- Products: NUR and Vero, each with its own page ---------- */
.products .h1 { margin-bottom: clamp(28px, 4vw, 56px); }
.product-list { display: grid; gap: clamp(16px, 2vw, 28px); }
.product-card {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch;
  border: 1px solid var(--on-ink-line); background: var(--ink-raised);
  transition: border-color 300ms ease;
}
.product-card--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.product-card--flip .product-visual { order: 2; }
.product-visual {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; background: var(--ink);
  /* fill the column and the row: with the ratio alone a tall text column made the picture wider than its column */
  width: 100%; align-self: stretch;
}
.product-visual picture, .product-visual img { width: 100%; height: 100%; }
.product-visual img { object-fit: cover; transform: scale(1.06); transition: transform 1200ms var(--ease-out); }
.product-visual .hover-color { transition: opacity 700ms ease, transform 1200ms var(--ease-out); }
.product-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(5, 39, 48, 0.35), rgba(5, 39, 48, 0) 50%);
}
.product-scan {
  /* a slow scan line across the product still: Labs' working, AI-native signature */
  position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(205, 225, 235, 0), rgba(205, 225, 235, 0.1) 85%, rgba(235, 242, 245, 0.38) 100%);
  transform: translateY(-100%); animation: product-scan 6s linear infinite;
}
@keyframes product-scan { to { transform: translateY(340%); } }
.preview-badge {
  position: absolute; left: clamp(14px, 2vw, 24px); top: clamp(14px, 2vw, 24px); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); background: rgba(5, 39, 48, 0.72); border: 1px solid rgba(245, 243, 240, 0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.preview-badge .icon { width: 16px; height: 16px; }
.product-info {
  display: grid; align-content: space-between; gap: 28px;
  padding: clamp(24px, 3.5vw, 56px);
}
.product-name { font-size: clamp(3.25rem, 2rem + 5vw, 6.5rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; }
.product-line { max-width: 30ch; color: var(--on-ink-2); font-size: var(--fs-lead); line-height: 1.5; }
.product-cta {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; justify-self: start;
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--on-ink-line); transition: border-color 300ms ease;
}
.product-cta .icon { width: 20px; height: 20px; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover { border-color: rgba(245, 243, 240, 0.4); }
  .product-card:hover .product-visual img { transform: scale(1); }
  /* the original photo comes partly through: natural colour, still carrying the blue grade */
  .product-card:hover .hover-color { opacity: 0.6; }
  .product-card:hover .product-cta { border-color: var(--paper); }
  .product-card:hover .product-cta .icon { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .product-scan { animation: none; display: none; } }
@media (max-width: 767px) {
  .product-card, .product-card--flip { grid-template-columns: 1fr; }
  .product-card--flip .product-visual { order: 0; }
  .product-info { gap: 18px; }
}

/* ---------- Case studies ---------- */
.cases .h1 { margin-bottom: clamp(28px, 4vw, 56px); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 3vw, 48px) clamp(16px, 1.8vw, 28px); }
.case { display: grid; align-content: start; gap: 12px; }
.case-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); margin-bottom: 4px; }
.case-media picture, .case-media img { width: 100%; height: 100%; }
.case-media img { object-fit: cover; transition: transform 700ms var(--ease-out); }
.case-meta {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-paper-2);
}
.case-meta .sample-tag { margin-left: 8px; }
.case-title { font-size: 1.25rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.case-desc { color: var(--on-paper-2); }
@media (hover: hover) and (pointer: fine) {
  .case:hover .case-media img { transform: scale(1.035); }
  .case:hover .hover-color { opacity: 1; }
}
@media (max-width: 1023px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .case-grid { grid-template-columns: 1fr; } }

/* ---------- Impact and results ---------- */
.impact { isolation: isolate; overflow: clip; }
.impact-media { position: absolute; inset: -8% 0; z-index: -1; }
.impact-media picture, .impact-media img { width: 100%; height: 100%; }
.impact-media img { object-fit: cover; opacity: 0.55; }
.impact-media::after {
  /* the figures stay the subject: Ink in from the top and bottom edges, the still only shows through the middle */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(5, 39, 48, 0.72) 30%, rgba(5, 39, 48, 0.72) 70%, var(--ink) 100%);
}
.impact-head {
  display: flex; align-items: end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.impact-head .h1 { margin: 0; }
.impact-head .sample-tag { margin-left: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px clamp(16px, 2vw, 32px); margin: 0; }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding-top: 20px; border-top: 1px solid var(--on-ink-line); }
.stat-value {
  margin: 0; font-size: clamp(3rem, 1.8rem + 4.5vw, 5.75rem); font-weight: 500; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.stat-label { font-size: var(--fs-small); color: var(--on-ink-2); max-width: 22ch; }
@media (max-width: 899px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Testimonials: image slider ----------
   Native horizontal scroll-snap (swipe on phones, arrows on desktop); main.js marks the active slide. */
.slider-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: clamp(16px, 3vw, 48px);
  margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.slide { scroll-snap-align: start; }
/* A small square image beside the quote: the words lead, the picture supports */
.quote-slide {
  margin: 0; display: grid; grid-template-columns: clamp(140px, 15vw, 210px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start; max-width: 1040px;
}
.quote-media { aspect-ratio: 1; overflow: hidden; background: var(--ink); }
.quote-media picture, .quote-media img { width: 100%; height: 100%; }
.quote-media img { object-fit: cover; transition: transform 1400ms var(--ease-out); }
.quote-body { display: grid; gap: 28px; align-content: center; }
.quote-body blockquote { margin: 0; }
.quote-body blockquote p {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em;
  text-wrap: pretty;
}
.quote-body blockquote p::before { content: "\201C"; }
.quote-body blockquote p::after { content: "\201D"; }
.quote-body figcaption { display: grid; gap: 2px; padding-top: 20px; border-top: 1px solid var(--on-paper-line); }
.quote-name { font-weight: 500; }
.quote-role { font-size: var(--fs-small); color: var(--on-paper-2); }

/* The slide animation: as a slide becomes active its image settles and the quote slides in */
@media (prefers-reduced-motion: no-preference) {
  .js .slide .quote-media img { transform: scale(1.12); }
  .js .slide.is-active .quote-media img { transform: scale(1); }
  .js .slide .quote-body > * { opacity: 0; transform: translateX(40px); transition: opacity 600ms ease, transform 900ms var(--ease-out); }
  .js .slide.is-active .quote-body > * { opacity: 1; transform: none; }
  .js .slide.is-active .quote-body > :nth-child(2) { transition-delay: 120ms; }
}

.slider-nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: clamp(20px, 3vw, 36px); }
.slider-count { margin-right: auto; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--on-paper-2); font-variant-numeric: tabular-nums; }
.slider-nav .icon-btn[disabled] { opacity: 0.35; cursor: default; }
.icon-flip { transform: scaleX(-1); }
@media (max-width: 767px) {
  .quote-slide { grid-template-columns: 1fr; gap: 20px; }
  .quote-media { width: 96px; }
}