/* Quantum Elite responsive hardening layer - 2026-06-10 */
:root {
  --qet-fluid-gutter: clamp(14px, 4vw, 32px);
  --qet-tight-gutter: clamp(10px, 3vw, 18px);
  --qet-card-pad: clamp(18px, 4vw, 34px);
  --qet-card-radius: clamp(18px, 4vw, 30px);
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body * {
  min-width: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

iframe,
embed,
object {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

textarea {
  resize: vertical;
}

table {
  max-width: 100%;
}

pre,
code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

p,
li,
td,
th,
.copy,
.lead,
.muted,
.fleet-copy,
.section-copy,
.driver-auth-card p,
.driver-review-panel p {
  overflow-wrap: anywhere;
}

.container,
.wrap {
  width: min(var(--container, 1240px), calc(100% - (var(--qet-fluid-gutter) * 2))) !important;
  max-width: 100%;
}

.section,
.page,
.panel,
.card,
.fleet-card,
.service-card,
.control,
.copy,
.visual,
.save,
.history,
.trip,
.login-card,
.booking-account-card,
.luxury-motion-stage,
.vehicle-stage,
.embedded-route-panel {
  max-width: 100%;
}

h1,
h2,
h3,
.headline,
.title,
.section-title,
.hero h1,
.hero-copy h1,
.driver-auth-copy h1,
.driver-review-panel h1 {
  text-wrap: balance;
}

.hero h1,
.hero-copy h1 {
  font-size: clamp(2.45rem, 10vw, 5.9rem) !important;
  line-height: 0.96;
}

.title,
.copy h1,
.panel h1,
.driver-auth-copy h1,
.driver-review-panel h1 {
  font-size: clamp(2.15rem, 9vw, 5.4rem);
}

.lead,
.hero p,
.hero-copy p,
.copy p,
.muted {
  max-width: min(72ch, 100%);
}

.btn,
button,
.primary,
.secondary,
.mini-link,
.brand-chip,
.nav-account-link,
.nav-reserve-link,
.nav-signup-link {
  white-space: normal;
  text-align: center;
}

.topbar {
  max-width: 100vw;
}

.nav {
  width: 100%;
  gap: clamp(10px, 2vw, 22px);
}

.brand,
.brand-text,
.brand-text strong,
.brand-text span,
.nav-links,
.nav-cta {
  min-width: 0;
}

.brand-text strong,
.brand-text span {
  overflow-wrap: anywhere;
}

.nav-links {
  flex-wrap: wrap;
  row-gap: 10px;
}

.mobile-panel {
  max-width: calc(100vw - (var(--qet-fluid-gutter) * 2));
  overflow: hidden;
}

.hero,
.hero-image-wrap,
.hero-image-full {
  max-width: 100%;
}

.hero-image-wrap {
  border-radius: clamp(18px, 5vw, 34px);
}

.hero-image-full {
  min-height: clamp(260px, 50vw, 640px) !important;
  object-fit: cover;
  object-position: center;
}

.hero-content-below {
  padding-block: clamp(24px, 6vw, 62px);
}

.hero-actions,
.hero-stats,
.actions,
.pickup-map-meta,
.booking-account-actions,
.nav-cta,
.driver-auth-actions,
.job-row-actions,
.trip .mini {
  max-width: 100%;
}

.hero-stats,
.terminal,
.stats,
.fleet-grid,
.service-grid,
.vvip-service-grid,
.service-orbit,
.form-grid,
.grid-2,
.requirements-grid,
.analytics-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.booking-form,
.booking-form *,
.pickup-banner,
.pickup-map-shell,
.pickup-map,
.leaflet-container,
.route-map-frame,
.driver-route-map,
.embedded-route-panel,
.driver-map-fallback {
  max-width: 100%;
}

.pickup-map,
.route-map-frame,
.driver-route-map,
.embedded-route-panel {
  min-height: clamp(260px, 48vw, 420px);
}

.route,
.line,
.hud,
.visual,
.panel,
.embedded-route-panel,
.vehicle-stage,
.luxury-motion-stage,
.driver-map-fallback {
  overflow: hidden;
}

.runner,
.dot,
.motion-suv,
.visual img,
.vehicle-stage img {
  max-width: 100%;
}

.fleet-image img,
.visual img,
.hero-image-full,
.logo {
  height: auto;
}

.visual {
  min-height: clamp(285px, 50vw, 540px) !important;
  padding: clamp(14px, 3vw, 26px);
}

.visual img {
  max-height: min(500px, 62vw);
  object-fit: contain;
}

.panel,
.copy,
.control,
.save,
.history,
.login-left,
.login-right,
.driver-auth-card,
.driver-review-panel,
.booking-account-card {
  padding: var(--qet-card-pad);
  border-radius: var(--qet-card-radius);
}

.intro {
  min-height: clamp(420px, 72vh, 680px) !important;
}

.vehicle-stage {
  height: clamp(150px, 38vw, 210px) !important;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  min-width: min(760px, 100%);
}

.content {
  width: 100%;
}

.filters,
.invite-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
}

.invite-form button,
.filters .btn,
.filters button {
  min-width: 0 !important;
}

.chart-row {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto !important;
}

.job-row-actions,
.driver-auth-actions {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
}

.driver-auth-card,
.job-card,
.god-job-card,
.god-driver-card,
.requirement-card,
.invite-code-callout,
.trip,
.metric,
.stat {
  overflow: hidden;
}

.brand-mark,
.mark,
.brand-icon,
.brand span.brand-icon {
  overflow: hidden;
  padding: 0 !important;
}

.brand-mark,
.mark {
  width: 52px !important;
  height: 52px !important;
}

.brand-icon,
.brand span.brand-icon {
  width: 42px !important;
  height: 42px !important;
}

.brand-logo-img,
.brand-mark .brand-logo-img,
.mark .brand-logo-img,
.brand-icon .brand-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.orb {
  width: min(42vmax, 52vw) !important;
  height: min(42vmax, 52vw) !important;
  right: 0 !important;
  bottom: 0 !important;
}

.scan {
  inset: 0 !important;
  animation: none !important;
  transform: none !important;
  opacity: 0.45;
}

.grecaptcha-badge {
  right: 8px !important;
  left: auto !important;
  max-width: min(256px, calc(100vw - 16px)) !important;
  transform-origin: right bottom !important;
}

.account-lab .wrap,
.design-lab .wrap,
.route-lab .wrap {
  width: min(1240px, calc(100% - (var(--qet-fluid-gutter) * 2))) !important;
}

.grid,
.auth-grid,
.lab-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

@media (max-width: 1180px) {
  .app {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sidebar {
    position: static !important;
    height: auto !important;
    max-height: none !important;
  }

  .stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .login-card,
  .shell,
  .hero,
  .hero .container,
  .booking-wrap,
  .content,
  .stage,
  .lower,
  .driver-auth-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .intro {
    min-height: auto !important;
    border-radius: var(--qet-card-radius) !important;
  }

  .form,
  .login-left,
  .login-right {
    border-radius: var(--qet-card-radius) !important;
  }

  .service-nav,
  .top,
  .job-row-top {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 820px) {
  :root {
    --qet-fluid-gutter: clamp(12px, 4vw, 22px);
  }

  .topbar .container,
  .topbar.is-scrolled .nav,
  .nav {
    width: min(100% - 1rem, var(--container, 1240px)) !important;
  }

  .nav {
    min-height: 76px !important;
    padding-block: 10px;
  }

  .brand-mark,
  .mark {
    flex: 0 0 auto;
    width: clamp(44px, 11vw, 52px) !important;
    height: clamp(44px, 11vw, 52px) !important;
  }

  .brand-text span {
    display: none;
  }

  .mobile-panel {
    right: var(--qet-tight-gutter);
    left: var(--qet-tight-gutter);
    width: auto;
  }

  .hero-content-below,
  .booking-page-shell,
  .page {
    padding-top: clamp(16px, 5vw, 32px);
  }

  .fleet-grid,
  .service-orbit,
  .terminal,
  .form-grid,
  .stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .panel,
  .visual,
  .copy,
  .control,
  .save,
  .history {
    min-height: auto !important;
  }

  .route,
  .hud {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .runner {
    animation: none !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 640px) {
  .container,
  .wrap {
    width: min(100% - 22px, var(--container, 1240px)) !important;
  }

  .hero-actions,
  .actions,
  .booking-account-actions,
  .driver-auth-actions,
  .job-row-actions,
  .pickup-banner-actions,
  .tabs {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hero-actions .btn,
  .actions .btn,
  .booking-account-actions .btn,
  .driver-auth-actions .btn,
  .job-row-actions .btn,
  .pickup-banner-actions .btn,
  .tabs a,
  button[type="submit"] {
    width: 100%;
  }

  .pickup-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto !important;
  }

  .route,
  .hud {
    position: relative;
    inset: auto;
    margin-top: 16px;
  }

  .visual img {
    max-height: min(340px, 68vw);
  }

  .chart-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .chart-label {
    grid-column: 1 / -1;
  }

  .grecaptcha-badge {
    transform: scale(0.78) !important;
  }
}

@media (max-width: 460px) {
  :root {
    --qet-card-pad: 18px;
    --qet-card-radius: 20px;
  }

  .container,
  .wrap {
    width: min(100% - 18px, var(--container, 1240px)) !important;
  }

  .hero h1,
  .hero-copy h1,
  .title,
  .copy h1,
  .panel h1 {
    font-size: clamp(2rem, 13vw, 3.35rem) !important;
    line-height: 1;
  }

  .hero-image-full {
    min-height: clamp(220px, 62vw, 300px) !important;
  }

  .fleet-top,
  .top,
  .service-nav,
  .job-row-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
  }

  .table-wrap tr,
  .trip,
  .job-row,
  .god-driver-card,
  .invite-code-callout {
    border-radius: 16px;
  }

  .table-wrap td {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .table-wrap td::before {
    margin-bottom: 4px;
  }
}