/* Screen 2: live copy and cards over the reconstructed approved scene. */
.fuel-quality {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 32px 2% 26px;
  min-height: clamp(700px, 51.8vw, 900px);
  background: #fff;
}
.fuel-visual { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fuel-visual img { width: 100%; height: 100%; object-fit: cover; object-position: right center; filter: saturate(.35); }
.fuel-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 48%), transparent 68%), linear-gradient(0deg, white, transparent 20%);
}
.fuel-quality .eyebrow { margin-bottom: 28px; color: #929797; font-size: 11px; letter-spacing: 3px; font-weight: 400; }
.fuel-quality .eyebrow::before { width: 52px; flex: 0 0 52px; }
.fuel-quality h2 {
  max-width: 57%;
  margin-bottom: 20px;
  font-size: clamp(44px, 4.65vw, 88px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2.5px;
  text-transform: uppercase;
}
.fuel-quality h2 span { display: block; }
@media (min-width: 1001px) { .fuel-quality h2 span { white-space: nowrap; } }
.fuel-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: 70%; margin-bottom: 28px; }
.fuel-card { position: relative; isolation: isolate; overflow: hidden; padding: 22px; border: 1px solid #d8dddf; border-radius: 14px; background: white; }
.fuel-card-illustration { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: right center; mask-image: linear-gradient(90deg, transparent 64%, black 93%); }
.fuel-card-heading { display: flex; align-items: flex-start; gap: 18px; min-height: 118px; max-width: 75%; }
.fuel-card-heading > div { flex: 1; min-width: 0; }
.fuel-card-icon { width: 56px; height: 64px; flex: 0 0 56px; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fuel-card h3 { position: relative; margin: 0 0 8px; font-size: clamp(24px, 2.15vw, 36px); line-height: 1.1; letter-spacing: -1px; text-transform: uppercase; }
.fuel-card-heading p { position: relative; margin: 0; color: var(--ink); font-size: clamp(14px, 1.02vw, 18px); line-height: 1.35; }
.fuel-quality .fuel-results-link { display: inline-block; min-height: 44px; padding: 10px 0; color: var(--ink); font-size: 16px; line-height: 1.4; border-radius: 4px; }
.fuel-quality .fuel-results-link:hover { color: var(--green); }
.fuel-quality .fuel-results-link:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

@media (max-width: 1350px) {
  .fuel-quality { min-height: 0; }
  .fuel-cards { width: 73%; gap: 16px; }
  .fuel-card { padding: 18px; }
  .fuel-card-heading { gap: 12px; min-height: 114px; }
  .fuel-card-icon { width: 45px; flex-basis: 45px; height: 54px; }
  .fuel-card h3 { font-size: 2.1vw; }
}
@media (max-width: 1000px) {
  .fuel-quality { padding: 28px 5% 30px; }
  .fuel-quality h2 { max-width: 100%; }
  .fuel-quality h2 { font-size: clamp(36px, 7.1vw, 70px); }
  .fuel-visual { position: relative; inset: auto; z-index: 0; width: 100%; height: 350px; margin: 0 0 20px; overflow: hidden; }
  .fuel-visual img { position: absolute; width: 180%; max-width: none; left: -80%; height: 100%; object-fit: cover; }
  .fuel-visual::after { background: linear-gradient(0deg, white, transparent 15%, transparent 85%, white); }
  .fuel-cards { width: 100%; }
  .fuel-card-heading { min-height: 112px; }
  .fuel-card h3 { font-size: clamp(24px, 3.2vw, 32px); }
  .fuel-card-heading p { font-size: 15px; }
}
@media (max-width: 760px) {
  .fuel-quality { padding: 22px 5% 20px; }
  .fuel-quality .eyebrow { font-size: 9px; letter-spacing: 1.8px; gap: 12px; margin-bottom: 14px; }
  .fuel-quality .eyebrow::before { width: 30px; flex-basis: 30px; }
  .fuel-quality h2 { font-size: clamp(25px, 6.4vw, 48px); letter-spacing: -1px; line-height: 1.06; margin-bottom: 16px; }
  .fuel-visual { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; margin: 0; }
  .fuel-visual::after { background: linear-gradient(90deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 82%)); }
  .fuel-cards { grid-template-columns: 1fr; gap: 12px; margin-bottom: 8px; }
  .fuel-card { padding: 14px; }
  .fuel-card-heading { gap: 12px; min-height: 0; max-width: none; }
  .fuel-card-icon { width: 36px; flex-basis: 36px; height: 44px; }
  .fuel-card h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.5px; margin-bottom: 6px; }
  .fuel-card-heading p { font-size: 16px; line-height: 1.4; }
  .fuel-card-illustration { display: none; }
}