/* Original Speedster artwork, given space instead of cropped into the cards. */
.speedster-brand-cover,
.speedster-product-cover {
  display: grid;
  place-items: center;
  background: #f3f1ed;
  padding: 8%;
}
.speedster-product-cover { background: #ffb700; padding: 11%; }
.cms-case-section[data-section-key="speedster-brand-hero"] {
  background-color: #fff1c7;
  background-image:
    radial-gradient(ellipse at 74% 23%, #fffdf5 0%, transparent 59%),
    radial-gradient(ellipse at 16% 79%, #ffcf53 0%, transparent 66%),
    linear-gradient(145deg, #ffe8a6, #fff6df 52%, #ffdd80);
}
.speedster-brand-cover { background: #e7e3da; }
.speedster-brand-cover::before {
  /* A soft contact shadow under the feet, not around the image's square bounds. */
  content: "";
  position: absolute;
  left: 48%;
  top: 82.5%;
  width: 39%;
  height: 5.5%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side, rgb(28 25 23 / 20%) 0%, rgb(28 25 23 / 9%) 45%, rgb(28 25 23 / 3%) 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.project-hover-plane .speedster-brand-cover .image-project-b,
.project-hover-plane .speedster-product-cover .image-project-b {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
}
.project-hover-plane .speedster-brand-cover .image-project-b {
  width: 92%;
  transform: translate(10%, -4%);
  z-index: 1;
}
.project-hover-plane .speedster-product-cover .image-project-b {
  border-radius: 8px;
  box-shadow: var(--preview-screen-shadow);
}
.cms-case-section[data-section-key="speedster-brand-hero"] {
  max-width: 1080px;
  padding: clamp(24px, 5vw, 64px);
  border-radius: 16px;
}
.cms-case-section[data-section-key="speedster-brand-hero"] img {
  width: min(100%, 560px);
  margin: auto;
  /* Optical centering: the pointing arm extends beyond the body's center. */
  transform: translateX(12%);
}
.cms-gallery-section[data-section-key="speedster-logo-evolution"] .cms-image-zoom,
.cms-gallery-section[data-section-key="speedster-mascot-poses"] .cms-image-zoom,
.cms-gallery-section[data-section-key="speedster-mascot-exploration"] .cms-image-zoom {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 12%;
  border-radius: 12px;
  background: #f3f1ed;
}
.cms-gallery-section[data-section-key="speedster-logo-evolution"] .cms-image-zoom img {
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
}
.cms-gallery-section[data-section-key="speedster-logo-evolution"] .cms-image-zoom {
  background: #fff;
  box-shadow: none;
}
.cms-gallery-section[data-section-key="speedster-mascot-poses"] .cms-image-zoom { padding: 6%; }
/* Keep comparison labels subordinate to the case section heading. */
.cms-gallery-section[data-section-key="speedster-web-evolution"] .cms-gallery-title {
  margin-bottom: 12px;
}
.cms-gallery-section[data-section-key="speedster-web-evolution"] .cms-gallery-title > h3 {
  color: var(--paragraphs);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--type-body-leading);
  letter-spacing: normal;
  text-transform: none;
}
.cms-gallery-section[data-section-key="speedster-mobile-booking"],
.cms-gallery-section[data-section-key="speedster-mobile-tracking"] { max-width: 1080px; }
/* Native aspect ratios give the component sheets a shared height in one row. */
.cms-gallery-section[data-section-key="speedster-system-components"] {
  max-width: 1440px;
}
.cms-gallery-section[data-section-key="speedster-system-components"] > .cms-gallery {
  grid-template-columns: minmax(0, .646789fr) minmax(0, 1.327239fr);
  align-items: start;
  gap: 32px;
}
.cms-gallery-section[data-section-key="speedster-system-components"] figure {
  width: 100%;
  min-width: 0;
  margin-inline: 0;
}
@media (max-width: 991px) {
  .cms-gallery-section[data-section-key="speedster-system-components"] {
    max-width: 720px;
  }
  .cms-gallery-section[data-section-key="speedster-system-components"] > .cms-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .cms-gallery-section[data-section-key="speedster-system-components"] figure:first-child {
    max-width: 480px;
  }
}
.cms-gallery-section[data-section-key^="speedster-mobile-"] .cms-gallery {
  gap: clamp(24px, 5vw, 72px);
}
.cms-gallery-section[data-section-key^="speedster-mobile-"] figure {
  width: 100%;
  max-width: 290px;
  margin-inline: 0;
}
.cms-gallery-section[data-section-key="speedster-product-hero"] {
  max-width: 1200px;
  padding: 0;
  background: transparent;
}
/* Native aspect ratios give the two screens a shared height without cropping. */
.cms-gallery-section[data-section-key="speedster-product-hero"] .cms-gallery {
  grid-template-columns: minmax(0, 2.89fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 3vw, 48px);
}
.cms-gallery-section[data-section-key="speedster-product-hero"] .cms-gallery-media {
  border-radius: 8px;
  box-shadow: var(--case-screen-shadow);
}
.cms-gallery-section[data-section-key="speedster-product-hero"] figure:last-child .cms-gallery-media {
  width: 100%;
  border-radius: 9% / 4%;
}
/* Two ad formats share one compact row at their native proportions. */
.cms-gallery-section[data-section-key="speedster-social-ad"] {
  max-width: 1080px;
}
.cms-gallery-section[data-section-key="speedster-social-ad"] > .cms-gallery {
  grid-template-columns: minmax(0, 1.910448fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 32px);
}
.cms-gallery-section[data-section-key="speedster-social-ad"] figure {
  min-width: 0;
}
.cms-gallery-section[data-section-key="speedster-social-ad"] figcaption {
  font-size: var(--type-detail);
  font-weight: 400;
  text-align: left;
  line-height: var(--type-detail-leading);
  letter-spacing: normal;
  text-transform: none;
}
@media (max-width: 600px) {
  .cms-gallery-section[data-section-key="speedster-social-ad"] > .cms-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .cms-gallery-section[data-section-key="speedster-social-ad"] figure:last-child {
    width: 72%;
    max-width: 360px;
    margin-inline: 0;
  }
  .cms-gallery-section[data-section-key="speedster-social-ad"] figcaption { text-align: left; }
}
.cms-colour-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 32px);
}
.cms-colour-family { min-width: 0; }
.cms-colour-family h3 {
  font-size: var(--type-body);
  margin: 0 0 16px;
  font-weight: 400;
  line-height: var(--type-body-leading);
  letter-spacing: normal;
  text-transform: none;
}
.cms-colour-family ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(128 128 128 / 16%);
}
.cms-colour-family li {
  display: flex;
  align-items: center;
  min-height: clamp(40px, 5vw, 60px);
  padding: 10px clamp(8px, 2vw, 24px);
  margin: 0;
  font-size: var(--type-body);
  line-height: var(--type-body-leading);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.cms-brand-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.cms-brand-colour { min-width: 0; }
.cms-case-section[data-section-key="speedster-brand-board"] + .cms-brand-palette {
  margin-top: calc(32px - clamp(56px, 7vw, 112px));
}
.cms-case-section[data-section-key="speedster-facebook-context"] { max-width: 580px; }
.cms-brand-colour-name {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cms-brand-colour-swatch {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid rgb(128 128 128 / 20%);
  border-radius: 50%;
}
.cms-brand-colour-name h3 {
  color: var(--heading);
  font-size: var(--type-body);
  font-weight: 400;
  margin: 0;
  line-height: var(--type-body-leading);
  letter-spacing: normal;
  text-transform: none;
}
.cms-brand-colour-codes {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 8px 12px;
  margin: 24px 0 0;
  font-size: var(--type-body);
  font-variant-numeric: tabular-nums;
  line-height: var(--type-body-leading);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.cms-brand-colour-codes dt {
  color: var(--paragraphs);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--type-body-leading);
  letter-spacing: normal;
  text-transform: none;
}
.cms-brand-colour-codes dd { color: var(--heading); margin: 0; }
.cms-brand-palette-note {
  color: var(--paragraphs);
  font-size: var(--type-detail);
  line-height: var(--type-detail-leading);
  margin: 28px 0 0;
  max-width: 680px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
@media (max-width: 767px) {
  .cms-brand-palette-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .cms-gallery-section[data-section-key^="speedster-mobile-"] .cms-gallery,
  .cms-gallery-section[data-section-key="speedster-product-hero"] .cms-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .cms-gallery-section[data-section-key="speedster-product-hero"] figure.cms-phone-screen {
    order: -1;
    width: min(100%, 290px);
    margin-inline: 0;
  }
}