/* Diagnostic and workshop films: one editorial chapter, using the existing media. */
.diagnostic-films-aurora.premium-rebuild {
  --chapter-ink: #071215;
  --chapter-panel: #0b1c20;
  --chapter-line: rgba(137, 207, 211, .21);
  --chapter-cyan: #54d2dc;
  position: relative !important;
  isolation: isolate;
  overflow: clip !important;
  color: #edf5f4 !important;
  background:
    radial-gradient(ellipse 36% 33% at 89% 42%, rgba(37, 126, 129, .21), transparent 76%),
    radial-gradient(ellipse 42% 35% at 8% 80%, rgba(20, 91, 102, .19), transparent 78%),
    linear-gradient(135deg, #071113 0%, #0a181b 51%, #071012 100%) !important;
}
.diagnostic-films-aurora.premium-rebuild::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 42% auto 0 -8%;
  width: min(58vw, 900px);
  background: url("assets/diagnostic-porsche-engine-optimized.webp") center / contain no-repeat;
  opacity: .045;
  filter: grayscale(1) contrast(1.3);
  transform: rotate(-8deg);
  pointer-events: none;
}
.diagnostic-films-aurora.premium-rebuild::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 97%, rgba(162, 224, 225, .025) 97% 97.08%, transparent 97.08%);
  background-size: 52px 100%;
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 86%, transparent);
  pointer-events: none;
}

.premium-rebuild > .diagnostic-story.section {
  display: grid !important;
  grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr) !important;
  align-items: stretch !important;
  gap: clamp(20px, 2.7vw, 42px) !important;
  width: min(calc(100% - clamp(36px, 7vw, 128px)), 1580px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(52px, 5.5vw, 88px) 0 clamp(26px, 3vw, 46px) !important;
  background: transparent !important;
  overflow: visible !important;
}
.premium-rebuild .diagnostic-story-copy {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(27px, 3.2vw, 54px) !important;
  border: 1px solid var(--chapter-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(146deg, rgba(18, 48, 52, .78), rgba(6, 20, 23, .88) 75%) !important;
  box-shadow: inset 0 1px rgba(234, 255, 255, .075), 0 25px 60px rgba(0, 0, 0, .19) !important;
}
.premium-rebuild .diagnostic-story-copy::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 16px;
  width: 11px;
  height: 11px;
  border-top: 1px solid var(--chapter-cyan);
  border-right: 1px solid var(--chapter-cyan);
  opacity: .62;
}
.premium-rebuild .diagnostic-story-copy .eyebrow {
  margin: 0 !important;
  color: #79dce0 !important;
  font: 650 clamp(9px, .72vw, 11px)/1.4 var(--mono, monospace) !important;
  letter-spacing: .17em !important;
}
.premium-rebuild .diagnostic-story-copy h2 {
  max-width: 100%;
  margin: clamp(19px, 2vw, 30px) 0 0 !important;
  font: 780 clamp(42px, 3.5vw, 64px)/1.03 var(--display, var(--body, sans-serif)) !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}
.premium-rebuild .diagnostic-story-copy h2 em,
.premium-rebuild .films-heading h2 em { color: var(--chapter-cyan) !important; font-style: normal !important; }
.premium-rebuild .diagnostic-story-copy > p:not(.eyebrow) {
  max-width: 52ch !important;
  margin: clamp(18px, 2vw, 28px) 0 0 !important;
  color: #c2d0d0 !important;
  font-size: clamp(13px, .91vw, 15px) !important;
  line-height: 1.67 !important;
}
.premium-rebuild .diagnostic-story-copy .button.outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 26px !important;
  min-height: 52px !important;
  margin: clamp(23px, 2.5vw, 37px) 0 0 !important;
  padding: 0 23px !important;
  border: 1px solid #61d5dc !important;
  border-radius: 9px !important;
  background: #4bd0d9 !important;
  color: #09262b !important;
  box-shadow: 0 5px 27px rgba(23, 164, 173, .12) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: -.01em !important;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.premium-rebuild .diagnostic-story-copy .button.outline:hover {
  background: #7ce3e8 !important;
  transform: translateY(-2px);
  box-shadow: 0 9px 28px rgba(35, 177, 184, .2) !important;
}
.premium-rebuild .diagnostic-story-copy .button.outline span { font-size: 20px; font-weight: 400; }
.premium-rebuild .diagnostic-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: clamp(23px, 2.8vw, 43px);
  padding-top: 17px;
  border-top: 1px solid rgba(153, 207, 209, .18);
}
.premium-rebuild .diagnostic-benefits > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #d9e6e5;
  font-size: clamp(10px, .72vw, 12px);
  line-height: 1.3;
}
.premium-rebuild .diagnostic-benefits svg {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 4px;
  border: 1px solid rgba(85, 209, 220, .36);
  border-radius: 7px;
  color: #74d8df;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.premium-rebuild .diagnostic-story-note { display: none !important; }

.premium-rebuild .diagnostic-mosaic {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  justify-self: stretch !important;
}
.premium-rebuild .diagnostic-feature-carousel {
  position: relative;
  width: 100% !important;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--chapter-line);
  border-radius: 16px;
  background: #061114;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .23);
}
.premium-rebuild .diagnostic-feature-stage {
  width: 100% !important;
  height: calc(100% - 45px) !important;
  min-height: 390px;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #061114 !important;
}
.premium-rebuild .diagnostic-feature-stage img {
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.premium-rebuild .diagnostic-feature-caption {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 45px;
  margin: 0 !important;
  padding: 0 20px !important;
  border-top: 1px solid rgba(151, 203, 207, .2);
  background: #08191d;
  color: #d9e6e5 !important;
  font: 650 10px/1.3 var(--mono, monospace) !important;
  letter-spacing: .12em !important;
}
.premium-rebuild .diagnostic-feature-caption span:last-child { color: #72d8df; }
.premium-rebuild .diagnostic-feature-controls {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 13px;
  right: 13px;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.premium-rebuild .diagnostic-feature-controls button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(142, 233, 237, .65);
  border-radius: 50%;
  background: rgba(4, 23, 27, .74);
  color: #f1ffff;
  backdrop-filter: blur(8px);
  font: 300 29px/1 var(--body, sans-serif);
  cursor: pointer;
  pointer-events: auto;
  transition: background .2s ease, border-color .2s ease;
}
.premium-rebuild .diagnostic-feature-controls button:hover,
.premium-rebuild .diagnostic-feature-controls button:focus-visible { background: #17636d; border-color: #a7eff0; }

.premium-rebuild > .diagnostic-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(calc(100% - clamp(36px, 7vw, 128px)), 1580px);
  margin: 0 auto;
  padding: 0 0 clamp(26px, 3vw, 44px);
  border-bottom: 1px solid rgba(141, 207, 209, .17);
}
.premium-rebuild > .diagnostic-proof > span {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 12px;
  min-width: 0;
  padding: 7px clamp(12px, 2vw, 30px);
  border-right: 1px solid rgba(141, 207, 209, .16);
}
.premium-rebuild > .diagnostic-proof > span:first-child { padding-left: 0; }
.premium-rebuild > .diagnostic-proof > span:last-child { border-right: 0; }
.premium-rebuild > .diagnostic-proof b {
  grid-row: span 2;
  color: #60d6df;
  font: 700 11px/1.4 var(--mono, monospace);
}
.premium-rebuild > .diagnostic-proof strong { color: #e7f2f1; font-size: 13px; font-weight: 700; line-height: 1.2; }
.premium-rebuild > .diagnostic-proof small { color: #93aaad; font-size: 11px; line-height: 1.4; }

.premium-rebuild > .films-section.section {
  display: grid !important;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
  align-items: start !important;
  gap: 0 clamp(34px, 5vw, 80px) !important;
  width: min(calc(100% - clamp(36px, 7vw, 128px)), 1580px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(36px, 5vw, 74px) 0 clamp(45px, 5vw, 78px) !important;
  background: transparent !important;
  overflow: visible !important;
}
.premium-rebuild .films-section > .section-label {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 clamp(27px, 3vw, 45px) !important;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(141, 207, 209, .14);
  color: #9bb8ba !important;
  font-size: 9px !important;
  letter-spacing: .14em !important;
}
.premium-rebuild .films-heading {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  text-align: left !important;
}
.premium-rebuild .films-kicker {
  color: #69d8df;
  font: 650 10px/1.3 var(--mono, monospace);
  letter-spacing: .16em;
}
.premium-rebuild .films-heading h2 {
  margin: 22px 0 0 !important;
  font: 780 clamp(44px, 3.9vw, 68px)/1.04 var(--display, var(--body, sans-serif)) !important;
  letter-spacing: -.055em !important;
}
.premium-rebuild .films-heading > p {
  max-width: 37ch !important;
  margin: 21px 0 0 !important;
  color: #bfcece !important;
  font-size: clamp(13px, .9vw, 15px) !important;
  line-height: 1.7 !important;
}
.premium-rebuild .films-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 29px;
  padding: 0 17px;
  border: 1px solid rgba(83, 214, 223, .7);
  border-radius: 9px;
  background: rgba(9, 51, 58, .26);
  color: #bcf5f6;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.premium-rebuild .films-more:hover { background: rgba(24, 97, 105, .4); border-color: #9ce9ea; }
.premium-rebuild .films-more span:first-child { font-size: 10px; }
.premium-rebuild .films-more span:last-child { margin-left: 9px; font-size: 16px; }
.premium-rebuild .films-grid {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  min-width: 0;
  margin: 0 !important;
}
.premium-rebuild .films-grid .film-card {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #071316 !important;
  outline: 1px solid rgba(133, 210, 213, .27);
  box-shadow: 0 22px 45px rgba(0, 0, 0, .18) !important;
}
.premium-rebuild .films-grid .film-card > video {
  opacity: 1 !important;
}
.premium-rebuild .films-grid .film-caption {
  padding: 12px 14px 15px !important;
  border-top: 1px solid rgba(121, 202, 207, .19) !important;
  background: linear-gradient(150deg, #0a1e22, #081619) !important;
}
.premium-rebuild .films-grid .film-caption strong { color: #f3f7f6 !important; }
.premium-rebuild .film-control {
  position: absolute;
  z-index: 8;
  top: 13px;
  right: 13px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(125, 223, 228, .73);
  border-radius: 50%;
  background: rgba(3, 22, 27, .77);
  color: #adf1f3;
  backdrop-filter: blur(8px);
  font-size: 15px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.premium-rebuild .film-control:hover,
.premium-rebuild .film-control:focus-visible { background: #176670; transform: scale(1.06); }
.premium-rebuild .films-social {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: none !important;
  margin: clamp(28px, 3vw, 46px) 0 0 !important;
  padding-top: 20px !important;
  border-color: rgba(146, 211, 212, .18) !important;
  color: #dce9e8 !important;
}

@media (max-width: 900px) {
  .premium-rebuild > .diagnostic-story.section,
  .premium-rebuild > .films-section.section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: min(calc(100% - 36px), 660px) !important;
  }
  .premium-rebuild > .diagnostic-story.section { padding: 33px 0 25px !important; }
  .premium-rebuild .diagnostic-story-copy { padding: clamp(24px, 6vw, 40px) !important; }
  .premium-rebuild .diagnostic-story-copy h2 { max-width: 100%; font-size: clamp(38px, 7vw, 54px) !important; }
  .premium-rebuild .diagnostic-story-copy > p:not(.eyebrow) { font-size: 14px !important; }
  .premium-rebuild .diagnostic-feature-stage { height: auto !important; min-height: 0; aspect-ratio: 1.13 !important; }
  .premium-rebuild > .diagnostic-proof { width: min(calc(100% - 36px), 660px); grid-template-columns: repeat(2, minmax(0,1fr)); }
  .premium-rebuild > .diagnostic-proof > span { padding: 12px 8px; }
  .premium-rebuild > .diagnostic-proof > span:nth-child(odd) { padding-left: 0; }
  .premium-rebuild > .diagnostic-proof > span:nth-child(2) { border-right: 0; }
  .premium-rebuild > .films-section.section { padding: 40px 0 55px !important; }
  .premium-rebuild .films-section > .section-label { margin-bottom: 5px !important; }
  .premium-rebuild .films-heading { grid-column: 1; grid-row: auto; }
  .premium-rebuild .films-heading h2 { font-size: clamp(40px, 7vw, 60px) !important; }
  .premium-rebuild .films-grid { grid-column: 1; grid-row: auto; justify-self: center; width: 100% !important; margin: 10px 0 0 !important; }
  .premium-rebuild .films-social { grid-column: 1; margin-top: 13px !important; }
}
@media (max-width: 520px) {
  .premium-rebuild > .diagnostic-story.section,
  .premium-rebuild > .films-section.section { width: calc(100% - 30px) !important; }
  .premium-rebuild .diagnostic-story-copy {
    align-items: center !important;
    padding: 23px 7px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
  }
  .premium-rebuild .diagnostic-story-copy::after { display: none !important; }
  .premium-rebuild .diagnostic-story-copy .eyebrow { font-size: 9px !important; line-height: 1.55 !important; text-align: center !important; }
  .premium-rebuild .diagnostic-story-copy h2 {
    max-width: 330px !important;
    margin: 20px auto 0 !important;
    font-size: clamp(37px, 10.2vw, 43px) !important;
    line-height: 1.01 !important;
    text-align: center !important;
  }
  .premium-rebuild .diagnostic-story-copy > p:not(.eyebrow) {
    max-width: 34ch !important;
    margin-inline: auto !important;
    font-size: 14px !important;
    line-height: 1.68 !important;
    text-align: center !important;
  }
  .premium-rebuild .diagnostic-story-copy .button.outline { width: min(100%, 330px); min-height: 52px !important; margin: 24px auto 0 !important; padding-inline: 20px !important; font-size: 12px !important; }
  .premium-rebuild .diagnostic-benefits {
    grid-template-columns: 1fr;
    gap: 0;
    width: min(100%, 330px);
    margin: 27px auto 0;
    padding-top: 4px;
  }
  .premium-rebuild .diagnostic-benefits > span {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    justify-items: start;
    gap: 12px;
    min-height: 56px;
    border-bottom: 1px solid rgba(153, 207, 209, .13);
    font-size: 12px;
    text-align: left;
  }
  .premium-rebuild .diagnostic-benefits > span:last-child { border-bottom: 0; }
  .premium-rebuild .diagnostic-benefits svg { flex-basis: 34px; width: 34px; height: 34px; padding: 7px; border-radius: 50%; }
  .premium-rebuild .diagnostic-feature-carousel { border-radius: 10px; }
  .premium-rebuild .diagnostic-feature-stage { aspect-ratio: 1.08 !important; }
  .premium-rebuild .diagnostic-feature-controls button { width: 35px; height: 35px; font-size: 25px; }
  .premium-rebuild .diagnostic-feature-caption { min-height: 38px; padding-inline: 11px !important; font-size: 8px !important; }
  .premium-rebuild > .diagnostic-proof { width: calc(100% - 30px); padding-bottom: 22px; }
  .premium-rebuild > .diagnostic-proof > span { grid-template-columns: 20px 1fr; gap: 2px 6px; }
  .premium-rebuild > .diagnostic-proof b { font-size: 9px; }
  .premium-rebuild > .diagnostic-proof strong { font-size: 10px; }
  .premium-rebuild > .diagnostic-proof small { font-size: 8px; }
  .premium-rebuild .films-section > .section-label { font-size: 7px !important; }
  .premium-rebuild .films-heading { align-items: center !important; text-align: center !important; }
  .premium-rebuild .films-kicker { width: 100%; font-size: 8px; text-align: center; }
  .premium-rebuild .films-heading h2 { margin: 15px auto 0 !important; font-size: clamp(38px, 10vw, 46px) !important; text-align: center !important; }
  .premium-rebuild .films-heading > p { margin: 19px auto 0 !important; font-size: 13px !important; line-height: 1.65 !important; text-align: center !important; }
  .premium-rebuild .films-more { margin: 25px auto 0; }
  .premium-rebuild .films-grid { gap: 9px !important; }
  .premium-rebuild .films-grid .film-card { border-radius: 8px !important; }
  .premium-rebuild .films-grid .film-caption { padding: 8px 7px 10px !important; }
  .premium-rebuild .films-grid .film-caption strong { white-space: normal !important; font-size: clamp(12px, 3.7vw, 16px) !important; }
  .premium-rebuild .films-grid .film-caption a { font-size: 9px !important; }
  .premium-rebuild .film-control { top: 8px; right: 8px; width: 32px; height: 32px; font-size: 12px; }
  .premium-rebuild .films-social { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .premium-rebuild *, .premium-rebuild *::before, .premium-rebuild *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
