/* ==========================================================================
   Voiceitt AI annotation tool (Gringotts) case study
   ========================================================================== */
.ann { color: var(--c-navy); }
.ann p { margin: 0 0 1.6em; }
.ann h2 { font-size: 22px; }
.ann h3 { font-size: 18px; }
.ann img { max-width: 100%; height: auto; }
.ann a img { display: block; }

.ann-label { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--c-text); }
.ann-text--tight { margin-bottom: -24px; }

/* Boxed inner wrapper (1140px / 80% / 90%) */
.ann-wrap { width: 100%; max-width: var(--container); margin-inline: auto; }

/* Full-width sections */
.ann-sec { padding: 48px 0; background: var(--c-white); }
.ann-sec--gray { background: var(--c-gray-100); }

/* ---------- Hero ---------- */
.ann-hero { margin-top: 80px; padding: 48px 0; }
.ann-hero__inner { display: flex; flex-direction: column; gap: 40px; }
.ann-hero__top { display: flex; align-items: flex-start; gap: 24px; padding: 10px; margin-bottom: -24px; }
.ann-hero__title { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.ann-hero__title h1 { font-size: 24px; }
.ann-hero__subtitle { color: var(--c-text); }
.ann-meta { flex: 0 0 32%; display: flex; justify-content: flex-end; align-items: flex-start; gap: 40px; padding: 10px; }
.ann-meta__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; }
.ann-meta__logo { display: block; width: 145px; max-width: 100%; }
.ann-meta__logo img { width: 100%; }
.ann-hero__banner { display: block; width: 100%; }

.ann-summary { display: flex; align-items: center; gap: 24px; padding: 10px; }
.ann-summary__card {
  flex: 1 1 0; min-width: 0; min-height: 162px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 24px; border-radius: 8px; background: var(--c-gray-100);
}

/* ---------- Text + image split ---------- */
.ann-split { display: flex; gap: 24px; }
.ann-split > * { flex: 1 1 0; min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: center; }
.ann-split__text { align-items: flex-start; gap: 16px; }
.ann-split__media { align-items: center; }
.ann-split__media a { display: block; width: 100%; }
.ann-split__media img { width: 100%; }
.ann-list { margin: 0 0 1.5em 3em; padding: 0; }

/* ---------- Stacked sections ---------- */
.ann-stack { display: flex; flex-direction: column; gap: 24px; }
.ann-stack--center { align-items: center; }
.ann-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; text-align: center; }
.ann-stack--center .ann-intro { padding: 20px; width: 100%; }
.ann-intro p { margin-bottom: 1px; }

/* Process cards */
.ann-cards { display: flex; justify-content: center; align-items: flex-start; gap: 48px; padding: 10px; width: 100%; }
.ann-card {
  width: 41%; min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px;
  padding: 24px; border-radius: 8px; background: var(--c-gray-100); text-align: center;
}
.ann-card__icon { width: 72px; height: 73px; margin-bottom: 4px; }
.ann-card__body { width: 100%; display: flex; flex-direction: column; gap: 24px; padding: 10px; }
.ann-card__body h3 { font-family: var(--f-body); font-size: 14px; font-weight: 700; line-height: 1.2; margin: 0; }
.ann-card__body p { margin-bottom: 0; }

/* Sketch gallery */
.ann-gallery { display: flex; flex-wrap: wrap; padding: 10px; }
.ann-gallery figure { margin: 0; width: 25%; padding: 10px; text-align: center; line-height: 0; }
.ann-gallery a { display: inline-block; }
.ann-gallery img { border-radius: 4px; margin: 0 auto; }

/* Two images side by side */
.ann-pair { display: flex; align-items: flex-start; gap: 48px; padding: 10px; }
.ann-pair img { flex: 1 1 0; min-width: 0; width: 100%; }

/* Solution screens */
.ann-solution { display: flex; flex-direction: column; gap: 64px; }
.ann-solution > h2 { text-align: center; }
.ann-solution__item { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 10px; margin: 16px 0; }
.ann-solution > h2 + .ann-solution__item { margin-top: 0; }
.ann-solution__item img { width: 100%; }

/* Results */
.ann-results__head { padding: 10px; }
.ann-stats { display: flex; justify-content: center; align-items: flex-start; gap: 48px; padding: 10px; }
.ann-stat {
  width: 30%; display: flex; flex-direction: column; gap: 8px; padding: 34px;
  border: 1px solid var(--c-gray-200); border-radius: 8px; background: var(--c-white);
}
.ann .ann-stat__value { font-family: var(--f-head); font-size: 40px; font-weight: 600; line-height: 1.2; margin: 0 0 -3px; }
.ann .ann-stat__label { margin: 0; }

/* More projects */
.ann-more { display: flex; flex-direction: column; gap: 32px; }
.ann-more__grid { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ann-project {
  flex: 1 0 40%; min-height: 400px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 20px; border: 1px solid var(--c-accent); border-radius: 8px;
  background-position: center; background-size: cover; color: var(--c-navy);
  transition: all .3s ease-in-out;
}
.ann-project:hover, .ann-project:focus-visible { transform: scale(1.03); color: var(--c-navy); }
.ann-project__info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 10px; }
.ann-project__info img { width: auto; height: 21px; }
.ann-project__title { display: block; font-family: var(--f-head); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--c-navy); margin-bottom: 20px; }
.ann-project__lock { flex: 0 0 auto; width: 48px; height: 49px; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .ann-wrap { max-width: 80%; }
  .ann-project { padding: 16px; }
  /* Keep the three result cards on one line at tablet widths ("~2 hours" wrapped in the original). */
  .ann-stats { gap: 24px; }
  .ann .ann-stat__value { font-size: 32px; }
}
@media (max-width: 767px) {
  .ann .ann-stat__value { font-size: 40px; }
  .ann-stats { gap: 48px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .ann-wrap { max-width: 90%; }
  .ann-hero__top { flex-direction: column; align-items: stretch; }
  .ann-meta { flex-direction: column; gap: 40px; flex-basis: auto; }
  .ann-meta__col { width: 100%; }
  .ann-summary { flex-direction: column; padding: 10px; }
  .ann-summary__card { width: 90%; flex: none; }
  .ann-split { flex-direction: column; }
  .ann-split > * { flex: none; }
  .ann-cards { flex-direction: column; align-items: stretch; }
  .ann-card { width: 100%; }
  .ann-pair { flex-direction: column; }
  .ann-pair img { flex: none; }
  .ann-stats { flex-direction: column; align-items: stretch; }
  .ann-stat { width: 100%; }
  .ann-more__grid { flex-direction: column; align-items: stretch; }
  .ann-project { flex: none; }
  .ann-project:hover, .ann-project:focus-visible { transform: none; }
}
@media (min-width: 480px) and (max-width: 767px) { .ann-gallery figure { width: 50%; } }
@media (max-width: 479px) { .ann-gallery figure { width: 100%; } }