/* Enterprise UX Co-op case-study hub
   Reuses the shared works layout (works.css), the cloud-effect project
   cards from main.css, and the responsive .grid.two-columns from grid.css.
   This file only adds the page-specific placeholders, captions, the hidden
   showcase container, and the additional-experience chips. */

/* MAJOR WORK AREAS -------------------------------------------------------- */

/* Tighten the intro-to-cards gap. The shared .selected-work-one adds a
   10em bottom margin (meant to separate long-form case-study blocks); on
   this hub the hero sits directly above the card grid, so a smaller,
   consistent gap reads better. Uses the global --space-lg subsection token. */
.enterprise-hero {
  margin-bottom: var(--space-lg);
}

.enterprise-section {
  position: relative;
}

.enterprise-cards {
  align-items: start;
  padding-bottom: var(--space-md);
}

/* The showcase is hidden by default, so the additional-experience block
   follows the cards directly. Keep its top margin in line with the rest
   of the page using the global --section-gap token instead of the large
   default case-study spacing. */
/* .additional-experience {
  margin-top: var(--section-gap);
} */

/* The shared .content-container is a side-by-side flex row; on this section
   we want the chips to stack directly under the project copy instead. */
.additional-experience .content-container {
  flex-direction: column;
  gap: 0;
}

.enterprise-work-item {
  display: flex;
  flex-direction: column;
}

/* Placeholder visual area for each card. Reuses the square .image-wrapper
   ratio but renders a generalized gradient + icon instead of a real
   internal screenshot (confidential work). */
.card-placeholder {
  display: block;
  border-radius: inherit;
  background: linear-gradient(135deg, #dbe7f7 0%, #b9cdec 100%);
}

.placeholder-analytics {
  background: linear-gradient(135deg, #dcecf1 0%, #aecfe4 100%);
  background-image: url("../img/enterprise/ag-solutions-card.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.placeholder-audit {
  background: linear-gradient(135deg, #dcecf1 0%, #aecfe4 100%);
  background-image: url("../img/enterprise/it-audit-card.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.placeholder-ai {
  background: linear-gradient(135deg, #dcecf1 0%, #aecfe4 100%);
  background-image: url("../img/enterprise/ai-assistant-card.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.placeholder-motion {
  background: linear-gradient(135deg, #dcecf1 0%, #aecfe4 100%);
  background-image: url("../img/enterprise/spatial-computing-card.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* A real image already communicates this card, so hide the generic icon. */
.placeholder-motion .card-icon {
  display: none;
}

.card-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 4rem;
  color: #4d6b93;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}

/* On hover the cloud circles rise and the title fades in (inherited from
   .image-title in main.css); fade the icon so the title reads cleanly. */
.cloud-effect ul li:hover .card-icon,
.cloud-effect ul li a:focus-within .card-icon {
  opacity: 0;
}

.card-overlay-title {
  padding: 0 1rem;
  font-size: 1.25rem;
}

/* Always-visible caption below the card. */
.enterprise-card-caption {
  padding: 1rem 0.25rem 0;
}

.enterprise-card-caption .card-title {
  margin-bottom: 0.35rem;
  font-size: 1.25rem;
  color: #1a1a1a;
}

.enterprise-card-caption .card-category {
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: #4d6b93;
}

.enterprise-card-caption .card-desc {
  max-width: 52ch;
  font-size: 1rem;
  color: #333;
}

/* HIDDEN SHOWCASE / DETAIL SECTION --------------------------------------- */

/* Hidden by default via the [hidden] attribute in markup. Future JS should
   remove the attribute (or toggle .is-open) to reveal the selected project. */
.project-showcase-section[hidden] {
  display: none;
}

.project-showcase-section {
  background-color: #fafcff;
  padding: var(--space-lg) 0;
}

.project-showcase-section.is-additional-mode {
  padding: 0;
}

.project-showcase-section.is-additional-mode .showcase-body {
  display: none;
}

.showcase-project-title {
  font-size: 2rem;
  color: #1a1a1a;
}

.showcase-project-category {
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: #4d6b93;
}

.showcase-project-overview,
.showcase-project-media,
.showcase-project-process {
  margin-bottom: var(--space-lg);
}

.showcase-project-overview {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.showcase-overview-copy {
  flex: 1 1 36rem;
}

.showcase-overview-copy p {
  max-width: 60ch;
}

.showcase-overview-actions {
  display: flex;
  align-self: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}

/* Reveal animation the first time the showcase opens (subtle fade + rise). */
.project-showcase-section.is-revealing {
  animation: showcaseReveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes showcaseReveal {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sticky mini project switcher. Sits just below the fixed site header
   (offset supplied by JS via --header-h) and stays in view while the user
   scrolls through long project content. */
.showcase-tabs-wrap {
  position: sticky;
  top: calc(var(--header-h, 4.5rem) + 0.5rem);
  z-index: 20;
  width: fit-content;
  max-width: calc(100% - 1rem);
  margin: 0 0 var(--space-md);
  margin-left: max(3rem, calc((100% - 75rem) / 2 + 3rem));
  background-color: #fafcff;
  border: 1px solid #dee0e2;
  border-radius: 0.75rem;
  padding: 0.5rem;
}

.showcase-tabs-wrap .home-container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.showcase-tab {
  appearance: none;
  border: none;
  background-color: transparent;
  color: #1a1a1a;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 1rem 2rem;
  border-radius: 0.7rem;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  width: fit-content;
  text-decoration: none;
  transition: color 0.3s ease;
}

.showcase-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 0.15rem dotted rgba(26, 26, 26, 0.45);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.showcase-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 0.15rem solid #1a1a1a;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.showcase-tab:hover,
.showcase-tab:focus {
  color: #1a1a1a;
  background-color: transparent;
}

.showcase-tab:hover::after,
.showcase-tab:focus::after {
  opacity: 0;
}

.showcase-tab:hover::before,
.showcase-tab:focus::before {
  opacity: 1;
}

.showcase-tab:focus-visible {
  outline: none;
}

.showcase-tab[aria-selected="true"],
.showcase-tab[aria-selected="true"]:hover,
.showcase-tab[aria-selected="true"]:focus,
.showcase-tab[aria-selected="true"]:focus-visible {
  background-color: #1a1a1a;
  color: #fafcff;
}

.showcase-tab[aria-selected="true"]::after,
.showcase-tab[aria-selected="true"]::before {
  opacity: 0;
}

.showcase-tab[aria-selected="true"]:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* Keep keyboard focus visible while retaining the button-secondary look. */
.showcase-tab:not([aria-selected="true"]):focus-visible::before {
  opacity: 1;
}

/* Neutralize the old tab-specific transitions to avoid conflicting animation stacks. */
.showcase-tab {
  transition:
    color 0.3s ease,
    background-color 0.25s ease;
}

.showcase-tab:hover {
  background-color: transparent;
}

.showcase-tab[aria-selected="true"] {
  background-color: #1a1a1a;
  color: #fafcff;
}

/* Content crossfade when switching projects. */
.showcase-body {
  position: relative;
  z-index: 0;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.showcase-body.is-fading {
  opacity: 0;
  transform: translateY(0.5rem);
}

/* Active-card indicator, synced with the selected tab. */
.enterprise-work-item.is-active .cloud-effect ul li {
  outline: 2px solid #4d6b93;
  outline-offset: 3px;
}

/* Generalized, confidentiality-safe media placeholder. */
.showcase-media-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  text-align: center;
  min-height: 16rem;
  padding: 2rem;
  border: 1px solid #dfe4ea;
  border-radius: 1rem;
  background-color: #f7faff;
  /* color: #4d6b93; */
}

.showcase-media-frame--image {
  display: block;
  padding: 1rem;
}

.showcase-media-frame--image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.showcase-media-frame .material-symbols-rounded {
  font-size: 3rem;
}

.showcase-media-frame p {
  max-width: 40ch;
  margin: 0;
  font-size: 0.9rem;
}

/* Grid of labeled placeholder frames (e.g., device research, storyboards).
   Sanitized mockups can drop straight into these frames later. */
.showcase-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.showcase-media-grid .showcase-media-frame {
  margin: 0;
}

.showcase-media-label {
  font-weight: 700;
  font-size: 1rem;
  /* color: #33517a; */
}

/* Process / research details. */
.showcase-project-process h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #1a1a1a;
}

.showcase-project-process h3:not(:first-child) {
  margin-top: 1.75rem;
}

.showcase-project-process p {
  max-width: 60ch;
  /* margin: 1rem 0 1rem; */
}

.showcase-project-process ul {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.analytics-review-list,
.analytics-key-findings-list,
.audit-bullet-list,
.experience-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.showcase-project-process li,
.analytics-review-list li,
.analytics-key-findings-list li,
.audit-bullet-list li,
.experience-chips li {
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.showcase-project-process li {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  padding: 0.38rem 0.72rem;
  /* border: 1px solid #1a1a1a;
  border-radius: 0.5rem; */
  /* background-color: #f7faff; */
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: camel-case;
  color: #1a1a1a;
}

.showcase-project-process li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  margin-right: 0.44rem;
  border-radius: 999px;
  background-color: #1a1a1a;
  flex: 0 0 auto;
}

/* Key Design Question ----------------------------------------------------- */

/* An editorial pull-quote for the "How might we..." design question. Uses a
   distinct serif (Playfair Display) framed by oversized decorative quotation
   marks so the question reads as a highlighted, quoted statement. */
.design-question {
  position: relative;
  margin: 1.25rem 0 1.75rem;
  padding: 2.75rem 2.5rem 2.5rem;
  border: 1px solid #dfe4ea;
  border-radius: 1rem;
  background-color: #f7faff;
  overflow: hidden;
}

.design-question-label {
  margin: 0 0 0.75rem;
  font-family: var(--font-heading, "Lato", sans-serif);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4d6b93;
}

.design-question-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 40ch;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.35;
  color: #1a1a1a;
}

/* Oversized opening quote mark that frames the question from the top-left. */
.design-question::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  left: 0.75rem;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 8rem;
  line-height: 1;
  color: rgba(77, 107, 147, 0.16);
  pointer-events: none;
}

/* Closing quote mark anchoring the bottom-right of the frame. */
.design-question::after {
  content: "\201D";
  position: absolute;
  right: 0.75rem;
  bottom: -2.75rem;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 8rem;
  line-height: 1;
  color: rgba(77, 107, 147, 0.16);
  pointer-events: none;
}

/* Enterprise Analytics: design iterations + persona/journey evidence. */
.analytics-iterations,
.analytics-research {
  margin-top: 0.25rem;
}

.analytics-iteration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(14rem, 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}

.analytics-iteration-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  min-height: 17.5rem;
  padding: 1rem;
  border: 1px solid #dfe4ea;
  border-radius: 0.9rem;
  background-color: #f7faff;
}

.analytics-iteration-card.is-selected {
  border-style: solid;
  border-width: 1px;
  border-color: #4d6b93;
  box-shadow: inset 0 0 0 1px rgba(77, 107, 147, 0.22);
  background-color: #eef4fc;
}

.analytics-selected-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fafcff;
  background-color: #1a1a1a;
}

.analytics-iteration-title {
  margin: 0;
  min-height: 2.6em;
  line-height: 1.3;
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a1a;
}

.analytics-iteration-desc {
  margin: 0;
  margin-bottom: 0.2rem;
  font-size: 0.9rem;
  /* color: #2f2f2f; */
}

.analytics-iteration-card.is-selected .analytics-iteration-title {
  padding-right: 5.8rem;
}

.analytics-link-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c4d5ec;
  border-radius: 999px;
  background-color: #eef4fc;
  color: #33517a;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.analytics-link-btn:hover,
.analytics-link-btn:focus-visible {
  border-color: #4d6b93;
  background-color: #e5eef9;
  color: #264768;
}

.analytics-link-btn:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.analytics-selected-direction-note {
  margin: 0.25rem 0 0;
}

.analytics-subheading {
  margin: 1rem 0 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  font-size: 1rem;
  color: #1a1a1a;
}

.analytics-review-list,
.analytics-key-findings-list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}

/* .analytics-review-list li,
.analytics-key-findings-list li {
  display: list-item;
  list-style-type: disc;
  list-style-position: outside;
  width: auto;
  margin: 0 1.5rem 0.5rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 500;
  color: #1f1f1f;
} */

.analytics-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  margin: 1rem 0 1rem;
  padding: 0.2rem;
  border: 1px solid #d6deea;
  border-radius: 999px;
  background-color: #f4f7fc;
  max-width: 100%;
}

.analytics-tab {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #33517a;
  font-family: "Lato", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.42rem 0.82rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.analytics-tab:hover {
  border-color: #b8c8dd;
  background-color: #edf3fb;
}

.analytics-tab[aria-selected="true"],
.analytics-tab.is-active {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #fafcff;
}

.analytics-tab:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.analytics-research-panel {
  border: 1px solid #dee0e2;
  border-radius: 1rem;
  background-color: #ffffff;
  padding: 1rem;
  transition: opacity 0.2s ease;
}

.analytics-research-panel.is-fading {
  opacity: 0.2;
}

.analytics-research-visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.analytics-research-figure {
  position: relative;
  margin: 0;
  border: 1px solid #dfe4ea;
  border-radius: 0.8rem;
  background-color: #f7faff;
  overflow: hidden;
}

.analytics-research-figure img {
  width: 100%;
  min-height: 19rem;
  max-height: 36rem;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.analytics-figure-chip {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fafcff;
  background-color: #1a1a1a;
}

.analytics-research-insight {
  margin: 0.9rem 0 0.7rem;
}

.analytics-key-findings {
  margin-top: 1rem;
  border-top: 1px solid #dee0e2;
  padding-top: 1rem;
}

.analytics-key-findings h4 {
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  font-size: 1rem;
  color: #1a1a1a;
}

.analytics-key-findings p {
  margin: 0 0 0.75rem;
}

/* Internal Audit: detailed case-study layout blocks. */
.audit-goals-grid,
.audit-role-grid,
.audit-draft-grid,
.audit-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: 0.75rem;
}

.audit-info-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid #dfe4ea;
  border-radius: 0.9rem;
  background-color: #f7faff;
  padding: 1rem;
}

.audit-info-card h4 {
  margin: 0 0 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  font-size: 1rem;
  color: #1a1a1a;
}

.audit-info-card p {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
}

.audit-role-insight {
  margin: 0.9rem 0 0;
}

.audit-bullet-list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.audit-bullet-list li {
  display: list-item;
  list-style-type: disc;
  list-style-position: outside;
  width: auto;
  margin: 0 1.5rem 0.5rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: #1f1f1f;
}

.audit-draft-link {
  margin-top: 0.35rem;
}

.audit-subheading {
  margin: 1rem 0 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  font-size: 1rem;
  color: #1a1a1a;
}

.audit-screenshot-grid .showcase-media-frame {
  min-height: 11rem;
}

.audit-design-viewer {
  border: 1px solid #dee0e2;
  border-radius: 1rem;
  background-color: #ffffff;
  overflow: hidden;
  margin-top: 0.85rem;
}

.audit-design-stage {
  position: relative;
}

.audit-design-figure {
  margin: 0;
  border-bottom: 1px solid #dee0e2;
  border-radius: 1rem 1rem 0 0;
  background-color: #f6f8fc;
  min-height: 36rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.audit-design-image {
  width: 100%;
  min-height: 36rem;
  max-height: 76vh;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.audit-design-image.is-fading {
  opacity: 0.2;
}

.audit-design-empty {
  max-width: 46ch;
  margin: 0;
  padding: 0 var(--space-md);
  text-align: center;
  color: #33517a;
  font-size: 0.95rem;
  line-height: 1.5;
}

.storyboard-nav-btn[data-audit-design-prev] {
  left: 0.75rem;
}

.storyboard-nav-btn[data-audit-design-next] {
  right: 0.75rem;
}

.audit-design-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.1rem 1.35rem 0;
}

.audit-design-counter {
  margin: 0;
  color: #33517a;
  font-weight: 700;
  font-size: 0.85rem;
}

.audit-design-title {
  margin: 0.55rem 0 0;
  padding: 0 1.35rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  font-size: 1rem;
  color: #1a1a1a;
}

.audit-design-description {
  margin: 0.35rem 0 0;
  padding: 0 1.35rem;
  max-width: 72ch;
  font-size: 0.95rem;
  color: #1a1a1a;
}

.audit-design-dots {
  margin-top: 0.85rem;
  padding: 0 1.35rem;
}

.audit-design-viewer .audit-draft-link {
  margin: 0.95rem 1.35rem 1.35rem;
}

/* AI Assistant: exploration grids, motion states, and icon artifact block. */
.ai-exploration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: 0.75rem;
}

.ai-exploration-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #dfe4ea;
  border-radius: 0.9rem;
  background-color: #f7faff;
  padding: 1rem;
}

.ai-exploration-card h4 {
  margin: 0 0 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  font-size: 1rem;
  color: #1a1a1a;
}

.ai-exploration-card p {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
}

.ai-exploration-card .analytics-link-btn {
  margin-top: 0.85rem;
}

.ai-motion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: 0.75rem;
}

.ai-motion-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #dfe4ea;
  border-radius: 0.9rem;
  background-color: #f7faff;
  padding: 1rem;
}

.ai-motion-media {
  margin: 0;
  border: 1px solid #dee0e2;
  border-radius: 0.8rem;
  background-color: #ffffff;
  min-height: 12.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ai-motion-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 12.5rem;
  object-fit: contain;
  object-position: center;
}

.ai-motion-card h4 {
  margin: 0.75rem 0 0.35rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  font-size: 1rem;
  color: #1a1a1a;
}

.ai-motion-card p {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
}

.ai-motion-note {
  margin: 0.85rem 0 0;
}

.ai-icon-figure {
  margin: 0.8rem 0 0;
  border: 1px solid #dfe4ea;
  border-radius: 0.9rem;
  background-color: #f7faff;
  padding: 1rem;
}

.ai-icon-figure img {
  display: block;
  width: 100%;
  min-height: 14rem;
  max-height: 40rem;
  border: 1px solid #dee0e2;
  border-radius: 0.8rem;
  background-color: #ffffff;
  object-fit: contain;
  object-position: center;
}

.ai-icon-empty {
  margin: 0;
  border: 1px solid #dee0e2;
  border-radius: 0.8rem;
  background-color: #ffffff;
  padding: 1rem;
}

.ai-icon-empty h4 {
  margin: 0 0 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  font-size: 1rem;
  color: #1a1a1a;
}

.ai-icon-empty p {
  margin: 0;
  max-width: none;
}

.ai-icon-handoff-note {
  margin: 0.8rem 0 0;
}

/* Storyboarding carousel for Spatial Computing. */
.storyboard-carousel {
  margin-top: 0.25rem;
}

.storyboard-tabs,
.storyboard-workflow-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin: 1rem 0 1.25rem;
  padding: 0.2rem;
  max-width: 100%;
  border: 1px solid #d6deea;
  border-radius: 999px;
  /* background-color: #f4f7fc; */
}

.storyboard-tab,
.storyboard-workflow-tab {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  color: #33517a;
  font-family: "Lato", sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.storyboard-tab:hover,
.storyboard-workflow-tab:hover {
  border-color: #b8c8dd;
  background-color: #edf3fb;
  color: #264768;
}

.storyboard-tab.active,
.storyboard-tab.is-active,
.storyboard-tab[aria-selected="true"],
.storyboard-workflow-tab.active,
.storyboard-workflow-tab.is-active,
.storyboard-workflow-tab[aria-selected="true"] {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #fafcff;
}

.storyboard-tab:focus-visible,
.storyboard-workflow-tab:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.storyboard-tab[aria-selected="true"]:hover,
.storyboard-workflow-tab[aria-selected="true"]:hover {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #fafcff;
}

.storyboard-viewer {
  border: 1px solid #dee0e2;
  border-radius: 1rem;
  background-color: #ffffff;
  overflow: hidden;
  padding: 0;
}

.storyboard-stage {
  position: relative;
}

.storyboard-figure {
  margin: 0;
  border-bottom: 1px solid #dee0e2;
  border-radius: 1rem 1rem 0 0;
  background-color: #f6f8fc;
  min-height: 36rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.storyboard-image {
  width: 100%;
  min-height: 36rem;
  max-height: 76vh;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.storyboard-image.is-fading {
  opacity: 0.2;
}

.storyboard-nav-btn {
  appearance: none;
  border: 1px solid rgba(26, 26, 26, 0.2);
  background-color: rgba(250, 252, 255, 0.88);
  color: #33517a;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-shadow: 0 0.25rem 0.85rem rgba(0, 0, 0, 0.15);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.storyboard-nav-btn[data-storyboard-prev] {
  left: 0.75rem;
}

.storyboard-nav-btn[data-storyboard-next] {
  right: 0.75rem;
}

.storyboard-nav-btn:hover,
.storyboard-nav-btn:focus-visible {
  border-color: rgba(77, 107, 147, 0.55);
  background-color: rgba(250, 252, 255, 0.98);
}

.storyboard-nav-btn:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.storyboard-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.storyboard-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1.35rem 1.35rem 0;
}

.storyboard-counter {
  margin: 0;
  color: #33517a;
  font-weight: 700;
  font-size: 0.85rem;
}

.storyboard-view-larger {
  color: #33517a;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.storyboard-caption {
  margin: 0.5rem 0 0;
  padding: 0 1.35rem;
  max-width: 68ch;
  font-size: 0.95rem;
  color: #1a1a1a;
}

.storyboard-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0 1.35rem 1.35rem;
}

.storyboard-dot {
  appearance: none;
  border: 1px solid #c4d5ec;
  background-color: #eef4fc;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.storyboard-dot:hover,
.storyboard-dot:focus-visible {
  border-color: #4d6b93;
}

.storyboard-dot.is-active,
.storyboard-dot[aria-current="true"] {
  background-color: #33517a;
  border-color: #33517a;
  transform: scale(1.06);
}

.storyboard-dot:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* ADDITIONAL EXPERIENCE --------------------------------------------------- */

.experience-chips {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.experience-chips li {
  padding: 0.4rem 0.85rem;
  border: 1px solid #c4d5ec;
  border-radius: 999px;
  background-color: #eef4fc;
  color: #33517a;
}

@media only screen and (max-width: 37.5rem) {
  .showcase-project-overview {
    align-items: flex-start;
  }

  .showcase-overview-copy {
    flex-basis: 100%;
  }

  .showcase-overview-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .showcase-tabs-wrap {
    margin-left: 1rem;
  }

  .analytics-research-visuals {
    grid-template-columns: 1fr;
  }

  .analytics-research-panel {
    padding: 0.85rem;
  }

  .audit-goals-grid,
  .audit-role-grid,
  .audit-draft-grid,
  .audit-screenshot-grid,
  .ai-exploration-grid,
  .ai-motion-grid {
    grid-template-columns: 1fr;
  }

  .analytics-research-figure img {
    min-height: 14rem;
  }

  .storyboard-nav-btn {
    width: 2.35rem;
    height: 2.35rem;
  }

  .storyboard-nav-btn[data-storyboard-prev] {
    left: 0.5rem;
  }

  .storyboard-nav-btn[data-storyboard-next] {
    right: 0.5rem;
  }

  .storyboard-nav-btn[data-audit-design-prev] {
    left: 0.5rem;
  }

  .storyboard-nav-btn[data-audit-design-next] {
    right: 0.5rem;
  }

  .storyboard-figure {
    min-height: 18.5rem;
  }

  .storyboard-image {
    min-height: 18.5rem;
  }

  .audit-design-figure {
    min-height: 18.5rem;
  }

  .audit-design-image {
    min-height: 18.5rem;
  }

  .ai-motion-media {
    min-height: 10.5rem;
  }

  .ai-motion-media img {
    min-height: 10.5rem;
  }

  .ai-icon-figure img {
    min-height: 10.5rem;
  }

  .audit-design-meta,
  .audit-design-title,
  .audit-design-description,
  .audit-design-dots {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .audit-design-meta {
    padding-top: 1rem;
  }

  .audit-design-viewer .audit-draft-link {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }

  .storyboard-meta,
  .storyboard-caption,
  .storyboard-dots {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .storyboard-meta {
    padding-top: 1rem;
  }

  .storyboard-dots {
    padding-bottom: 1rem;
  }

  .storyboard-meta {
    flex-wrap: wrap;
  }

  .card-icon {
    font-size: 3rem;
  }

  .enterprise-card-caption .card-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 72rem) {
  .analytics-iteration-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    overflow-x: auto;
    padding-bottom: 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-link-btn,
  .analytics-tab,
  .analytics-research-panel,
  .storyboard-image,
  .audit-design-image,
  .storyboard-dot,
  .storyboard-nav-btn,
  .storyboard-workflow-tab {
    transition: none;
  }
}