@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap");

/* SPECTRA case repair 2026-08-29: current proof, source imagery and product-brand coherence. */
.flagship-case--spectra {
  --brand-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --brand-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --spectra-ink: #050b0e;
  --spectra-panel: #0c1a20;
  --spectra-panel-2: #10242a;
  --spectra-mint: #7df8d6;
  --spectra-amber: #ffbe5c;
  --spectra-text: #eff9f6;
  --spectra-muted: #9fb6b2;
  --case-reading-accent: #7df8d6;
  --case-reading-line: rgba(125, 248, 214, .28);
  --case-reading-surface: rgba(5, 11, 14, .98);
  --case-reading-card: rgba(239, 249, 246, .045);
  --case-reading-ink: #eff9f6;
  --case-reading-muted: #9fb6b2;
}

/* Shared portfolio hero signature, expressed in SPECTRA mint and evidence amber. */
body.case-page.flagship-case--spectra .case-hero-image::before,
body.case-page.flagship-case--spectra .case-hero-content::after {
  background:
    linear-gradient(135deg, transparent calc(50% - 2px), rgba(125,248,214,.98) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) top right / 38px 38px no-repeat,
    linear-gradient(135deg, transparent calc(50% - 2px), rgba(255,190,92,.96) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) bottom left / 38px 38px no-repeat,
    linear-gradient(90deg, rgba(125,248,214,.96), rgba(125,248,214,.14)) top right / 110px 3px no-repeat,
    linear-gradient(180deg, rgba(125,248,214,.96), rgba(125,248,214,.14)) top right / 3px 110px no-repeat,
    linear-gradient(270deg, rgba(255,190,92,.96), rgba(255,190,92,.12)) bottom left / 110px 3px no-repeat,
    linear-gradient(0deg, rgba(255,190,92,.96), rgba(255,190,92,.12)) bottom left / 3px 110px no-repeat !important;
  border: 0 !important;
  content: "" !important;
  height: auto !important;
  inset: 0 !important;
  opacity: 1 !important;
  pointer-events: none;
  position: absolute;
  width: auto !important;
  z-index: 4;
}

body.case-page.flagship-case--spectra .case-hero-image::before {
  background:
    linear-gradient(135deg, transparent calc(50% - 2px), rgba(125,248,214,.98) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) top right / 38px 38px no-repeat,
    linear-gradient(135deg, transparent calc(50% - 2px), rgba(255,190,92,.96) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) bottom left / 38px 38px no-repeat,
    linear-gradient(90deg, rgba(125,248,214,.96), rgba(125,248,214,.14)) top right / 110px 3px no-repeat,
    linear-gradient(180deg, rgba(125,248,214,.96), rgba(125,248,214,.14)) top right / 3px 110px no-repeat,
    linear-gradient(270deg, rgba(255,190,92,.96), rgba(255,190,92,.12)) bottom left / 110px 3px no-repeat,
    linear-gradient(0deg, rgba(255,190,92,.96), rgba(255,190,92,.12)) bottom left / 3px 110px no-repeat,
    linear-gradient(90deg, rgba(5,11,14,.04), transparent 42%),
    linear-gradient(0deg, rgba(5,11,14,.22), transparent 48%) !important;
}

body.case-page.flagship-case--spectra .case-hero-image::after {
  content: none !important;
}

body.case-page.flagship-case--spectra .case-hero-content::before {
  background: linear-gradient(180deg, #7df8d6, #7df8d6 58%, #ffbe5c) !important;
  box-shadow: 0 0 24px rgba(125, 248, 214, .18);
  content: "" !important;
  height: auto !important;
  inset: 24px auto 24px 0 !important;
  opacity: 1 !important;
  position: absolute;
  width: 3px !important;
}

body.flagship-case--spectra .case-hero-content h1,
body.flagship-case--spectra .flagship-section h2,
body.flagship-case--spectra .flagship-section h3 {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif !important;
}

.flagship-case--spectra .flagship-strip {
  counter-reset: spectra-strip;
}

.flagship-case--spectra .flagship-strip article {
  counter-increment: spectra-strip;
}

.flagship-case--spectra .flagship-strip article::before {
  content: "01";
}

.flagship-case--spectra .flagship-strip article:nth-child(2)::before {
  content: "02";
}

.flagship-case--spectra .flagship-strip article:nth-child(3)::before {
  content: "03";
}

.flagship-case--spectra .flagship-strip article:nth-child(4)::before {
  content: "04";
}

.flagship-case--spectra .spectra-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.06);
}

.flagship-case--spectra .spectra-target--person {
  left: 46.1%;
  top: 40.2%;
  width: 6.3%;
  height: 26.2%;
}

.flagship-case--spectra .spectra-target--vehicle {
  left: 62.7%;
  top: 43.2%;
  width: 35.6%;
  height: 31%;
}

.flagship-case--spectra .live-lab-launchpad {
  border-color: rgba(125, 248, 214, .42);
  background: var(--spectra-panel);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(125, 248, 214, .08);
}

.flagship-case--spectra .live-lab-launchpad__intro {
  background:
    radial-gradient(circle at 12% 8%, rgba(125, 248, 214, .16), transparent 38%),
    linear-gradient(145deg, var(--spectra-panel-2), var(--spectra-panel));
}

.flagship-case--spectra .live-lab-launchpad__intro h2,
.flagship-case--spectra .live-lab-signals strong {
  color: var(--spectra-text);
  letter-spacing: -.045em;
}

.flagship-case--spectra .live-lab-signals article {
  background: linear-gradient(180deg, rgba(16, 36, 42, .98), rgba(5, 11, 14, .98));
  border-color: rgba(125, 248, 214, .16);
}

.flagship-case--spectra .live-lab-signals article:nth-child(2) {
  background: linear-gradient(180deg, rgba(20, 48, 51, .98), rgba(8, 19, 24, .98));
}

.flagship-case--spectra .spectra-specialist-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(125, 248, 214, .18);
  background: rgba(125, 248, 214, .18);
}

.flagship-case--spectra .spectra-specialist-gallery figure {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: var(--spectra-ink);
}

.flagship-case--spectra .spectra-specialist-gallery img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  filter: saturate(.78) contrast(1.08);
  transition: transform .45s ease, filter .45s ease;
}

.flagship-case--spectra .spectra-proof-score {
  position: sticky;
  top: 6.5rem;
  align-self: start;
}

.flagship-case--spectra .spectra-specialist-gallery figure:hover img {
  transform: scale(1.025);
  filter: saturate(1) contrast(1.06);
}

.flagship-case--spectra .spectra-specialist-gallery figcaption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: .35rem;
  padding: 2.5rem 1rem .9rem;
  background: linear-gradient(transparent, rgba(5, 11, 14, .96));
}

.flagship-case--spectra .spectra-specialist-gallery figcaption span,
.flagship-case--spectra .spectra-technology-contract article > span {
  color: var(--spectra-mint);
  font: 800 .62rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.flagship-case--spectra .spectra-specialist-gallery figcaption strong {
  color: var(--spectra-text);
  font-size: .9rem;
}

.flagship-case--spectra .spectra-technology-contract {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(125, 248, 214, .18);
  background: rgba(125, 248, 214, .18);
}

.flagship-case--spectra .spectra-technology-contract article {
  position: relative;
  min-height: 330px;
  padding: 2rem;
  background:
    linear-gradient(180deg, rgba(125, 248, 214, .04), transparent 44%),
    var(--spectra-panel);
}

.flagship-case--spectra .spectra-technology-contract article::after {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 1.4rem;
  height: 2px;
  background: linear-gradient(90deg, var(--spectra-mint), transparent);
}

.flagship-case--spectra .spectra-technology-contract article.is-next > span,
.flagship-case--spectra .spectra-technology-contract article.is-next small {
  color: var(--spectra-amber);
}

.flagship-case--spectra .spectra-technology-contract article.is-next::after {
  background: linear-gradient(90deg, var(--spectra-amber), transparent);
}

.flagship-case--spectra .spectra-technology-contract small {
  display: block;
  margin: 3rem 0 1rem;
  color: var(--spectra-muted);
  font: 700 .68rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.flagship-case--spectra .spectra-technology-contract h3 {
  max-width: 15ch;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
}

.flagship-case--spectra .spectra-technology-contract p {
  color: var(--spectra-muted);
}

@media (max-width: 980px) {
  .flagship-case--spectra .spectra-proof-score {
    position: static;
  }

  .flagship-case--spectra .spectra-technology-contract {
    grid-template-columns: 1fr;
  }

  .flagship-case--spectra .spectra-technology-contract article {
    min-height: 260px;
  }
}

@media (max-width: 680px) {
  .flagship-case--spectra .spectra-target span {
    display: none;
  }

  .flagship-case--spectra .spectra-frame-data {
    gap: .5rem;
  }

  .flagship-case--spectra .spectra-specialist-gallery {
    grid-template-columns: 1fr;
  }

  .flagship-case--spectra .spectra-technology-contract article {
    min-height: 0;
    padding: 1.4rem 1.25rem 3.4rem;
  }

  .flagship-case--spectra .spectra-technology-contract small {
    margin-top: 2rem;
  }

  .flagship-case--spectra .spectra-technology-contract article::after {
    left: 1.25rem;
    right: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flagship-case--spectra .spectra-specialist-gallery img {
    transition: none;
  }
}