/* KSSK homepage component layer.

   Written against tokens only. Values that look odd are authored: 13px step
   card radius, 176px cutout box, 104px band padding, 68px capsule offset.

   Loaded after kssk.css. Kept as a second file so the shared chrome and the
   page-specific bands stay separable as more screens land. */

/* Bands. Full-bleed colour alternating with the 1200px content column. */

.kssk-band {
  padding: var(--space-104) var(--page-gutter);
  box-sizing: border-box;
}

.kssk-band__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.kssk-band--white { background: var(--surface-page); }
.kssk-band--cream { background: var(--surface-cream); }
.kssk-band--orange { background: var(--kssk-orange); }

/* The system's only texture: a faint grid over navy. No noise anywhere else. */
.kssk-band--navy {
  background-color: var(--kssk-navy);
  background-image: var(--kssk-grid-texture, none);
  background-size: cover;
  background-position: center;
  color: var(--text-inverse);
}

/* The brand pattern, used sparingly: this band and nothing else on the page. */
.kssk-band--pattern {
  background-color: var(--kssk-orange);
  background-image: var(--kssk-pattern, none);
  background-size: 720px;
  background-repeat: repeat;
  color: var(--text-inverse);
}

/* Clears the booking panel that overlaps up out of the hero. */
.kssk-band--under-panel { padding-top: 140px; }

.kssk-band__heading { margin-bottom: var(--space-56); }

.kssk-band__action {
  display: flex;
  justify-content: center;
  margin-top: var(--space-56);
}

/* SectionHeading */

.kssk-section-heading { display: flex; flex-direction: column; gap: var(--space-16); }
.kssk-section-heading--center { align-items: center; text-align: center; }
.kssk-section-heading--left { align-items: flex-start; text-align: left; }

.kssk-section-heading__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-body);
}

.kssk-section-heading--light .kssk-section-heading__title { color: var(--text-inverse); }

.kssk-section-heading__title--display { font-size: var(--text-9xl); line-height: var(--leading-69); }
.kssk-section-heading__title--heading { font-size: var(--text-7xl); line-height: var(--leading-48); }
.kssk-section-heading__title--sub { font-size: var(--text-4xl); line-height: var(--leading-37); }

.kssk-section-heading__subcopy {
  margin: 0;
  max-width: 560px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-secondary);
}

.kssk-section-heading--light .kssk-section-heading__subcopy { color: rgb(255 255 255 / 0.85); }

/* Chip */

.kssk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  white-space: nowrap;
}

.kssk-chip--grey { background: var(--surface-subtle); color: var(--text-secondary); }
.kssk-chip--cream { background: var(--surface-cream); color: var(--text-primary); }
.kssk-chip--plain { background: transparent; color: var(--text-secondary); }

/* CarCard. The one card in the system with a shadow, and the one with a 10px
   radius. Do not extend either to another surface. */

.kssk-car-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-24);
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-out);
}

.kssk-car-card:hover { transform: var(--hover-lift); }

.kssk-car-card__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-30);
  color: var(--neutral-900);
}

.kssk-car-card__figure {
  height: 176px;
  margin: var(--space-12) 0 var(--space-16);
  display: grid;
  place-items: center;
}

/* Cutouts sit directly on the card surface: no plate, no pedestal, no frame. */
.kssk-car-card__cutout {
  max-width: 100%;
  max-height: 176px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.kssk-car-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--space-8);
  box-sizing: border-box;
  text-align: center;
  background: var(--surface-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-18);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Grows, so every card's price and buttons share one baseline. */
.kssk-car-card__chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-8);
}

.kssk-car-card__action {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-24);
  padding-top: var(--space-16);
  border-top: var(--divider);
}

.kssk-car-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
}

.kssk-car-card__amount {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-33);
  color: var(--neutral-700);
}

.kssk-car-card__unit {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.kssk-car-card__note {
  width: 100%;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-note);
  line-height: var(--leading-18);
  color: var(--text-muted);
}

.kssk-car-card__buttons { display: flex; gap: var(--space-8); }
.kssk-car-card__compare { flex: 0 0 auto; min-width: 108px; padding: var(--space-8) 14px; }

/* The car card's Book Now is the one 5px radius in the system. */
.kssk-car-card__book { flex: 1; min-width: 0; border-radius: var(--radius-5); }

/* Trust band */

.kssk-trust { display: flex; flex-direction: column; gap: var(--space-72); max-width: 560px; }
.kssk-trust__lede { display: flex; flex-direction: column; gap: var(--space-21); }

.kssk-trust__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-9xl);
  line-height: var(--leading-69);
  color: var(--text-inverse);
}

.kssk-trust__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: rgb(255 255 255 / 0.9);
}

.kssk-trust__stats { display: flex; flex-wrap: wrap; gap: var(--space-74); }
.kssk-trust__cta { align-self: flex-start; }

.kssk-trust__figure { display: grid; place-items: center; min-height: 320px; }
.kssk-trust__image { width: 100%; height: auto; border-radius: var(--radius-sm); }

/* StatCounter */

.kssk-stat { display: flex; flex-direction: column; gap: var(--space-8); }

.kssk-stat__label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
}

.kssk-stat__value {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-5xl);
  line-height: var(--leading-48);
}

.kssk-stat--light .kssk-stat__label { color: var(--text-inverse); opacity: 0.9; }
.kssk-stat--light .kssk-stat__value { color: var(--text-inverse); }
.kssk-stat--dark .kssk-stat__label { color: var(--text-primary); opacity: 0.7; }
.kssk-stat--dark .kssk-stat__value { color: var(--text-primary); }

/* Video band */

.kssk-video {
  position: relative;
  min-height: 640px;
  display: grid;
  place-items: center;
  padding: var(--space-104) var(--page-gutter);
  box-sizing: border-box;
  background-color: var(--kssk-navy);
  background-image: var(--kssk-grid-texture, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.kssk-video__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
  max-width: 560px;
}

/* A solid orange disc with a triangle knocked into it, drawn in CSS rather
   than as a bitmap so it stays crisp. */
.kssk-video__play {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  background: var(--kssk-orange);
}

.kssk-video__play::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 26px solid var(--neutral-0);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}

.kssk-video__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-8xl);
  line-height: var(--leading-54);
  color: var(--text-inverse);
}

.kssk-video__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: rgb(255 255 255 / 0.85);
}

/* StepCard */

.kssk-grid--steps { grid-auto-rows: 1fr; }

.kssk-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 50px;
  box-sizing: border-box;
}

.kssk-step-card__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1;
  padding: var(--space-32);
  min-height: 301px;
  box-sizing: border-box;
  background: var(--surface-page);
  border-radius: var(--radius-13);
}

.kssk-step-card__glyph { height: 54px; }

.kssk-step-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-33);
  color: var(--kssk-navy);
}

.kssk-step-card__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-23);
  color: var(--kssk-navy);
}

/* The numbered disc half-overlaps the box's bottom edge. It is what makes the
   row read as a sequence rather than three interchangeable feature cards. */
.kssk-step-card__number {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: var(--kssk-orange);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-7xl);
  color: var(--text-on-brand);
}

/* TestimonialCard. Square corners: the only zero-radius surfaces in the
   system, alongside article cards. */

.kssk-grid--reviews { --kssk-grid-cols: 6; }
.kssk-testimonial--wide { grid-column: span 3; }
.kssk-testimonial--narrow { grid-column: span 2; }

.kssk-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin: 0;
  padding: var(--space-24);
  box-sizing: border-box;
  border-radius: var(--radius-none);
}

.kssk-testimonial--cream { background: var(--surface-cream); color: var(--kssk-navy); }
.kssk-testimonial--orange { background: var(--kssk-orange); color: var(--text-on-brand); }

.kssk-testimonial--cream .kssk-testimonial__mark { color: var(--kssk-orange); }
.kssk-testimonial--orange .kssk-testimonial__mark { color: var(--text-on-brand); }

.kssk-testimonial__quote {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: inherit;
}

.kssk-testimonial__stars { display: flex; gap: 2px; }

.kssk-testimonial__caption { display: flex; flex-direction: column; gap: 2px; }

.kssk-testimonial__name {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: inherit;
}

.kssk-testimonial__role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-18);
}

.kssk-testimonial--cream .kssk-testimonial__role { color: var(--text-secondary); }
.kssk-testimonial--orange .kssk-testimonial__role { color: rgb(255 255 255 / 0.8); }

/* AlertBanner */

.kssk-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.kssk-alert__icon { margin-top: 4px; }

/* A verdict line above the detail, used by the rejection notice. Bold carries
   the weight here rather than a larger size: the banner is one voice, not two. */
.kssk-alert__body { display: flex; flex-direction: column; gap: 4px; }

.kssk-alert__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
}

.kssk-alert__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
}

.kssk-alert--neutral { background: var(--surface-subtle); color: var(--text-body); }
.kssk-alert--success { background: var(--status-success-surface); color: var(--text-body); }
.kssk-alert--danger { background: var(--status-danger-surface); color: var(--text-body); }

/* On the orange band a tinted white keeps the notice legible without a scrim. */
.kssk-alert--onbrand { background: rgb(255 255 255 / 0.14); color: var(--text-inverse); max-width: 340px; }

/* Contact band */

.kssk-contact__lede { display: flex; flex-direction: column; gap: var(--space-16); }

.kssk-contact__body {
  margin: 0;
  max-width: 340px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: rgb(255 255 255 / 0.9);
}

.kssk-contact__notice { margin-bottom: var(--space-16); }

.kssk-fields__wide { grid-column: span 2; }

.kssk-field--textarea .kssk-field__control--textarea { height: auto; padding: var(--space-12) var(--space-16); }

.kssk-field__input--textarea { resize: vertical; min-height: 96px; font-family: var(--font-body); }

/* Off-screen but still focusable and still submitted, which is the point. */
.kssk-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1023px) {
  .kssk-band--under-panel { padding-top: 120px; }
  .kssk-trust__stats { gap: var(--space-40); }

  /* Six tracks cannot hold a 3-span and a 2-span sensibly at two columns, so
     every review card takes one column and the asymmetry stands down. */
  .kssk-grid--reviews { --kssk-grid-cols: 2; }
  .kssk-testimonial--wide,
  .kssk-testimonial--narrow { grid-column: auto; }
}

@media (max-width: 767px) {
  .kssk-video { min-height: 0; }
  .kssk-fields__wide { grid-column: auto; }
}