/* jlauto, page-specific blocks (owner: PAGES). Loaded after main.css, same
 * @layer components, so it only adds blocks and never restyles the core.
 * rem everywhere, grid children min-width:0, mobile first, breakpoints
 * 480 / 768 / 992 to match main.css. */

@layer components {

  /* ---- shared bits ---- */
  .section--dark .breadcrumbs,
  .contact-hero .breadcrumbs { color: var(--jl-color-on-dark-soft); }
  .services-hero .breadcrumbs,
  .service-hero .breadcrumbs,
  .pricing-hero .breadcrumbs,
  .booking-hero .breadcrumbs,
  .contact-hero .breadcrumbs { justify-content: center; margin-bottom: var(--jl-space-6); }
  .rental-hero .breadcrumbs,
  .about-hero .breadcrumbs,
  .page-hero .breadcrumbs { margin-bottom: var(--jl-space-6); }
  mark.u-todo { background: #fff3e4; color: #d5691b; padding: 0 0.25em; font-weight: var(--jl-fw-bold); }
  .section--dark mark.u-todo, .card--dark mark.u-todo, .service-card mark.u-todo { background: #ff9e2c; color: #000; }

  .form__legend { margin-top: var(--jl-space-4); color: var(--jl-color-text); }
  .form__legend .req, .form-field__label .req { color: var(--jl-color-accent); }
  .form__note { margin-top: var(--jl-space-4); color: var(--jl-color-text); text-wrap: pretty; }
  .form__note a { color: var(--jl-color-accent); text-decoration: underline; text-underline-offset: 0.15em; }
  .form__note a:hover { color: var(--jl-color-accent-hover); }

  .services-grid__list,
  .rental-cars__grid,
  .about-values__grid,
  .about-gallery__grid,
  .booking-steps__list,
  .promise__grid,
  .services-other__grid,
  .rental-terms__grid,
  .rental-enquiry__grid,
  .rental-bridge__row,
  .service-body__grid,
  .faq__grid,
  .contact-info__grid,
  .booking__grid,
  .about-story__row { display: grid; }
  .services-grid__list > *, .rental-cars__grid > *, .about-values__grid > *, .about-gallery__grid > *,
  .booking-steps__list > *, .promise__grid > *, .services-other__grid > *, .rental-terms__grid > *,
  .rental-enquiry__grid > *, .rental-bridge__row > *, .service-body__grid > *, .faq__grid > *,
  .contact-info__grid > *, .booking__grid > *, .about-story__row > * { min-width: 0; }

  /* ================= services hub (/autohuolto) ================= */
  .services-hero,
  .services-grid { --_overlap: clamp(5rem, 3rem + 10vw, 12.5rem); }
  .services-hero { padding-bottom: calc(var(--jl-section-pad-tight) + var(--_overlap)); overflow: clip; }
  .services-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
  .services-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #000000b3, #000000e6 70%, var(--jl-color-n800)); }
  .services-hero__head { max-width: 58rem; margin-bottom: var(--jl-space-8); }
  .services-hero__lead { color: var(--jl-color-on-dark-soft); }
  .services-hero__sub { max-width: 40rem; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: var(--jl-space-3); padding-top: var(--jl-space-8); border-top: 1px solid var(--jl-color-border-dark); }
  .services-hero__sub .eyebrow { margin-bottom: 0; }
  .services-hero__subheading { color: var(--jl-color-n100); }
  .services-hero__subtext { color: var(--jl-color-on-dark-soft); }
  .services-grid { z-index: 2; margin-top: calc(-1 * var(--_overlap)); padding-top: 0; }
  .services-grid__list { gap: var(--jl-gap); grid-template-columns: 1fr; }
  @media (min-width: 768px) { .services-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 992px) { .services-grid__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .service-card--compact { min-height: clamp(20rem, 15rem + 14vw, 27rem); }
  .service-card--compact .service-card__title { font-size: var(--jl-fs-h3); }
  .service-card--compact .service-card__text { font-size: var(--jl-fs-sm); }
  .service-card__more .icon { width: 1.25em; height: 1.25em; }

  /* other work: chips of long-tail services */
  .services-other__grid { gap: var(--jl-gap-lg); align-items: start; }
  @media (min-width: 992px) { .services-other__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
  .services-other__head { margin-bottom: 0; }
  .services-other__head .actions { margin-top: var(--jl-space-5); }
  .services-other__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jl-space-3); }
  @media (min-width: 560px) { .services-other__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .services-other__item { display: flex; align-items: flex-start; gap: var(--jl-space-3); padding: var(--jl-space-4) var(--jl-space-5); background: var(--jl-color-surface); border: 1px solid var(--jl-color-border); color: var(--jl-color-heading); font-weight: var(--jl-fw-medium); line-height: 1.4; text-wrap: pretty; }
  .services-other__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--jl-color-accent); }

  /* price promise (hub + hinnasto) */
  .promise__grid { gap: var(--jl-gap-lg); align-items: start; }
  @media (min-width: 992px) { .promise__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
  .promise__head { margin-bottom: 0; }
  .promise__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--jl-space-5); }
  .promise__text { color: var(--jl-color-text); text-wrap: pretty; }
  .promise__list { gap: var(--jl-space-4); }
  .promise__list .checkline__text { color: var(--jl-color-text); }
  .promise__list .checkline__text strong { color: var(--jl-color-heading); }

  /* rental bridge (hub: split with image; rental page: text + icon trio) */
  .rental-bridge__placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 16rem; background: var(--jl-color-n700); color: var(--jl-color-accent-on-dark); }
  .rental-bridge__placeholder .rental-bridge__icon { width: 6rem; height: 6rem; }
  .rental-bridge__content { margin-bottom: 0; }
  .rental-bridge__row { gap: var(--jl-gap-lg); align-items: center; }
  @media (min-width: 992px) { .rental-bridge__row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
  .rental-bridge__aside { display: flex; justify-content: center; align-items: center; gap: var(--jl-space-5); color: var(--jl-color-n100); }
  .rental-bridge__aside .rental-bridge__icon { width: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); height: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
  .rental-bridge__aside .rental-bridge__icon--arrow { width: 2.5rem; height: 2.5rem; color: var(--jl-color-accent-on-dark); }

  /* ================= service page (/autohuolto/x) ================= */
  .service-hero { display: flex; align-items: center; min-height: clamp(30rem, 22rem + 22vw, 46rem); text-align: center; overflow: clip; }
  .service-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
  .service-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#00000099, #00000099), linear-gradient(to top, var(--jl-color-n800) 0%, #0000 45%); }
  .service-hero__bg--plain { background: var(--jl-color-n800); }
  .service-hero__bg--plain::after { display: none; }
  .service-hero__content { max-width: 58rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--jl-space-5); }
  .service-hero__number { color: var(--jl-color-accent-on-dark); line-height: 1; margin-bottom: calc(-1 * var(--jl-space-2)); }
  .service-hero__heading { max-width: 20ch; }
  .service-hero__lead { color: var(--jl-color-on-dark-soft); max-width: 46rem; text-wrap: pretty; }
  .service-hero__checks { text-align: left; margin-top: var(--jl-space-2); }
  .service-hero__checks .checkline__text { color: var(--jl-color-n100); }
  .service-hero__actions { margin-top: var(--jl-space-2); }
  /* the template's bottom-left white wedge (same geometry as main.css .hero__wedge) */
  .service-hero { padding-bottom: calc(var(--jl-section-pad) + var(--jl-wedge-h)); }
  .service-hero__wedge { position: absolute; left: 0; bottom: 0; z-index: 1; width: min(39vw, 34.875rem); height: var(--jl-wedge-h); background: var(--jl-color-surface); clip-path: polygon(0 0, 100% 0, calc(100% - 1.125rem) 100%, 0 100%); }
  @media (max-width: 767px) { .service-hero__wedge { width: 50vw; } }

  .service-body__grid { gap: var(--jl-gap-lg); align-items: start; }
  @media (min-width: 992px) {
    .service-body__grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: clamp(3rem, 2rem + 4vw, 6rem); }
    .service-aside__sticky { position: sticky; top: calc(var(--jl-nav-h) + 1.5rem); }
  }
  @media (max-width: 991px) { .service-aside { order: -1; } }
  .service-content { display: flex; flex-direction: column; gap: var(--jl-block-gap); max-width: 50rem; }
  .service-content__section { display: flex; flex-direction: column; gap: var(--jl-space-4); }
  .service-content__heading { text-wrap: balance; }
  .service-content__text { color: var(--jl-color-text); text-wrap: pretty; }
  .service-aside__sticky { display: flex; flex-direction: column; gap: var(--jl-space-5); }
  .price-from { display: flex; flex-direction: column; gap: var(--jl-space-3); border-top: 4px solid var(--jl-color-accent); }
  .price-from__label { color: var(--jl-color-accent); }
  .price-from__value { font-size: var(--jl-fs-h2); font-weight: var(--jl-fw-black); text-transform: uppercase; line-height: 1.1; color: var(--jl-color-heading); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .price-from__value--todo { font-size: var(--jl-fs-body); font-weight: var(--jl-fw-bold); text-transform: none; line-height: 1.4; }
  .price-from__note { color: var(--jl-color-text); text-wrap: pretty; }
  .price-from__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--jl-space-3); margin-top: var(--jl-space-2); }
  .price-from__actions .button { width: 100%; }
  .service-included__heading { margin-bottom: var(--jl-space-4); }
  .service-included__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jl-space-2); }
  .service-included__item { display: flex; align-items: flex-start; gap: 0.625rem; font-size: var(--jl-fs-sm); line-height: 1.5; color: var(--jl-color-heading); font-weight: var(--jl-fw-medium); text-wrap: pretty; }
  .service-included__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.2em; color: var(--jl-color-accent); }
  .service-aside__contact { color: var(--jl-color-text); }
  .service-aside__phone { font-weight: var(--jl-fw-bold); color: var(--jl-color-heading); }
  .service-aside__phone a { color: var(--jl-color-accent); text-decoration: none; }
  .service-aside__phone a:hover { text-decoration: underline; }

  /* ================= FAQ (every page) ================= */
  .faq__grid { gap: var(--jl-gap-lg); align-items: start; }
  @media (min-width: 992px) { .faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
  .faq__head { margin-bottom: 0; }
  .faq__q { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; text-transform: none; }
  .faq__head-btn { width: 100%; }
  .faq__a p { text-wrap: pretty; }

  /* ================= rental (/autovuokraus) ================= */
  .rental-hero__lead, .about-hero__lead { color: var(--jl-color-on-dark-soft); text-wrap: pretty; }
  .rental-hero__placeholder, .about-hero__placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: var(--jl-color-n700); color: var(--jl-color-accent-on-dark); }
  .rental-hero__icon, .about-hero__icon { width: 6rem; height: 6rem; }
  .rental-hero .split__media, .about-hero .split__media { aspect-ratio: 5 / 4; }
  .rental-cars__grid { gap: var(--jl-gap); grid-template-columns: 1fr; }
  @media (min-width: 640px) { .rental-cars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 992px) { .rental-cars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .car-card { display: flex; flex-direction: column; transition: transform var(--jl-dur) var(--jl-ease), box-shadow var(--jl-dur) var(--jl-ease); }
  .car-card:hover { transform: translateY(-0.25rem); box-shadow: var(--jl-shadow-3); }
  .car-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--jl-color-n200); }
  .car-card__image { width: 100%; height: 100%; object-fit: cover; }
  .car-card__placeholder { display: grid; place-items: center; height: 100%; color: var(--jl-color-n500); }
  .car-card__placeholder-icon { width: 4rem; height: 4rem; }
  .car-card__badge { position: absolute; top: var(--jl-space-4); left: var(--jl-space-4); }
  .car-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--jl-space-3); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
  .car-card__heading { text-wrap: balance; }
  .car-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; }
  .car-card__price-value { font-size: var(--jl-fs-h2); font-weight: var(--jl-fw-black); line-height: 1; color: var(--jl-color-accent); font-variant-numeric: tabular-nums; }
  .car-card__price-unit { font-size: var(--jl-fs-xs); font-weight: var(--jl-fw-bold); text-transform: uppercase; letter-spacing: var(--jl-tracking-label); color: var(--jl-color-text); }
  .car-card__price--todo .car-card__price-value { font-size: var(--jl-fs-body); font-weight: var(--jl-fw-bold); color: var(--jl-color-heading); line-height: 1.4; }
  .car-card__specs { list-style: none; margin: 0; padding: var(--jl-space-3) 0 0; border-top: 1px solid var(--jl-color-border); display: grid; gap: var(--jl-space-2); font-size: var(--jl-fs-sm); color: var(--jl-color-heading); }
  .car-card__spec { display: flex; align-items: center; gap: 0.625rem; }
  .car-card__spec-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--jl-color-accent); }
  .car-card__actions { margin-top: auto; padding-top: var(--jl-space-3); }
  .rental-cars__note { margin-top: var(--jl-space-6); color: var(--jl-color-text); text-wrap: pretty; }

  .rental-terms__grid { gap: var(--jl-gap-lg); align-items: start; }
  @media (min-width: 992px) { .rental-terms__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
  .rental-terms__head { margin-bottom: 0; }
  .rental-terms__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--jl-space-3); }
  .rental-terms__item { display: flex; align-items: flex-start; gap: var(--jl-space-4); padding: var(--jl-space-4) var(--jl-space-5); background: var(--jl-color-surface); border: 1px solid var(--jl-color-border); }
  .rental-terms__num { flex: none; font-size: var(--jl-fs-h3); font-weight: var(--jl-fw-black); line-height: 1.2; color: var(--jl-color-accent); font-variant-numeric: tabular-nums; }
  .rental-terms__text { color: var(--jl-color-text); text-wrap: pretty; }
  .rental-terms__title { color: var(--jl-color-heading); }

  .rental-enquiry__grid { gap: var(--jl-gap-lg); align-items: start; }
  @media (min-width: 992px) { .rental-enquiry__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
  .rental-enquiry__head { margin-bottom: 0; }
  .rental-enquiry__contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--jl-space-3); margin-top: var(--jl-space-6); padding-top: var(--jl-space-5); border-top: 1px solid var(--jl-color-border); }
  .rental-enquiry__link { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--jl-color-heading); font-weight: var(--jl-fw-bold); text-decoration: none; }
  a.rental-enquiry__link:hover { color: var(--jl-color-accent); }
  .rental-enquiry__icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--jl-color-accent); }
  .rental-form, .contact-form, .booking-form { padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
  .contact-form__head, .booking-form__head { display: flex; flex-direction: column; gap: var(--jl-space-3); margin-bottom: var(--jl-space-6); }
  .contact-form__text, .booking-form__text { color: var(--jl-color-text); text-wrap: pretty; }

  /* ================= pricing (/hinnasto) + booking (/varaa-aika): the first block overlaps the dark hero ================= */
  .pricing-hero, .pricing-groups, .booking-hero, .booking { --_overlap: clamp(4rem, 2rem + 8vw, 9rem); }
  .pricing-hero, .booking-hero { padding-bottom: calc(var(--jl-section-pad-tight) + var(--_overlap)); overflow: clip; }
  .pricing-hero__head, .booking-hero__head { margin-bottom: 0; }
  .pricing-groups, .booking { z-index: 2; margin-top: calc(-1 * var(--_overlap)); padding-top: 0; }
  .price-group { background: var(--jl-color-surface); border: 1px solid var(--jl-color-border); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
  .price-group__heading { margin-bottom: var(--jl-space-5); padding-bottom: var(--jl-space-3); border-bottom: 3px solid var(--jl-color-heading); }
  .price-table__scroll { border: 0; }
  .pricing-hero__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--jl-space-2); margin-top: var(--jl-space-5); }
  .pricing-hero__chip { text-decoration: none; font-size: var(--jl-fs-xs); padding: 0.625rem 0.875rem; transition: background var(--jl-dur), color var(--jl-dur); }
  .pricing-hero__chip:hover, .pricing-hero__chip:focus-visible { background: var(--jl-color-accent); color: var(--jl-color-n100); }
  .pricing-groups > .wrap { display: flex; flex-direction: column; gap: var(--jl-block-gap); }
  .price-group { scroll-margin-top: calc(var(--jl-nav-h) + 1rem); }
  .price-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border: 1px solid var(--jl-color-border); background: var(--jl-color-surface); }
  .price-table__scroll:focus-visible { outline: 2px solid var(--jl-color-accent); outline-offset: 2px; }
  .price-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--jl-fs-body); line-height: 1.45; }
  .price-table__th { text-align: left; font-size: var(--jl-fs-xs); font-weight: var(--jl-fw-bold); letter-spacing: var(--jl-tracking-label); text-transform: uppercase; color: var(--jl-color-text); padding: 0.875rem 1.25rem; background: var(--jl-color-surface-alt); border-bottom: 1px solid var(--jl-color-border); }
  .price-table__th--price { text-align: right; white-space: nowrap; }
  .price-table__row + .price-table__row > * { border-top: 1px solid var(--jl-color-border); }
  .price-table__service { text-align: left; font-weight: var(--jl-fw-bold); color: var(--jl-color-heading); padding: 1rem 1.25rem; text-wrap: pretty; vertical-align: top; }
  .price-table__price { text-align: right; white-space: nowrap; font-weight: var(--jl-fw-black); color: var(--jl-color-accent); padding: 1rem 1.25rem; font-variant-numeric: tabular-nums; vertical-align: top; }
  .price-table__price--todo { white-space: normal; min-width: 12rem; font-weight: var(--jl-fw-medium); color: var(--jl-color-heading); }
  .price-table__note { color: var(--jl-color-text); font-size: var(--jl-fs-sm); padding: 1rem 1.25rem; min-width: 12rem; vertical-align: top; text-wrap: pretty; }
  .price-table__ask { font-weight: var(--jl-fw-bold); text-transform: uppercase; font-size: var(--jl-fs-xs); letter-spacing: var(--jl-tracking-label); color: var(--jl-color-text); }
  .price-group__note, .pricing-groups__note { margin-top: var(--jl-space-3); color: var(--jl-color-text); text-wrap: pretty; }
  @media (max-width: 767px) {
    .price-table { min-width: 30rem; font-size: var(--jl-fs-sm); }
    .price-table__service, .price-table__price, .price-table__note, .price-table__th { padding-inline: 0.875rem; }
  }

  /* ================= about (/meista) ================= */
  .about-stats .stats { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .about-story > .wrap { display: flex; flex-direction: column; gap: var(--jl-block-gap); }
  .about-story__split .split__media { aspect-ratio: 4 / 3; }
  .about-story__content, .about-story__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--jl-space-4); }
  .about-story__text { color: var(--jl-color-text); text-wrap: pretty; }
  .about-story__row { gap: var(--jl-gap); align-items: start; }
  @media (min-width: 992px) { .about-story__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
  .about-values__grid { gap: var(--jl-gap-lg) var(--jl-gap); grid-template-columns: 1fr; }
  @media (min-width: 600px) { .about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 992px) { .about-values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .about-values__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--jl-space-3); }
  .about-values__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 1px solid var(--jl-color-border-dark); color: var(--jl-color-n100); }
  .about-values__icon .icon { width: 2rem; height: 2rem; }
  .about-values__heading { color: var(--jl-color-n100); text-wrap: balance; }
  .about-values__text { color: var(--jl-color-on-dark-soft); max-width: 20rem; text-wrap: pretty; }
  .about-gallery__grid { gap: var(--jl-gap); grid-template-columns: 1fr; }
  @media (min-width: 768px) { .about-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 992px) {
    .about-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(14rem, auto); }
    .about-gallery__item--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  }
  .about-gallery__item { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--jl-color-n200); }
  .about-gallery__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--jl-ease); }
  .about-gallery__item:hover .about-gallery__image { transform: scale3d(1.03, 1.03, 1); }

  /* ================= contact (/yhteystiedot) ================= */
  /* the dark band always covers the head and the top of the form card, whatever
   * the head's height: it ends --_overlap above the section's bottom edge */
  .contact-hero { --_overlap: clamp(9rem, 4rem + 20vw, 22rem); padding-top: var(--jl-section-pad-tight); padding-bottom: 0; color: var(--jl-color-n100); }
  .contact-hero__band { inset: 0 0 var(--_overlap) 0; background: var(--jl-color-n800); }
  .contact-hero .eyebrow { color: var(--jl-color-accent-on-dark); }
  .contact-hero .heading-1 { color: var(--jl-color-n100); }
  .contact-hero .section-head__text { color: var(--jl-color-on-dark-soft); }
  .contact-hero__head { max-width: 54rem; margin-bottom: var(--jl-space-8); }
  .contact-hero .breadcrumbs__current { color: var(--jl-color-n100); }
  .contact-form { max-width: 58rem; margin-inline: auto; color: var(--jl-color-text); box-shadow: var(--jl-shadow-3); }
  .contact-form__heading { color: var(--jl-color-heading); }
  .contact-info__grid { gap: var(--jl-gap); align-items: stretch; }
  @media (min-width: 992px) { .contact-info__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
  .contact-card { display: flex; flex-direction: column; gap: var(--jl-space-5); }
  .contact-card__heading { text-wrap: balance; }
  .contact-card__nap { font-style: normal; display: flex; flex-direction: column; gap: var(--jl-space-3); }
  .contact-card__row { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--jl-color-text); line-height: 1.5; }
  .contact-card__icon { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 0.15em; color: var(--jl-color-accent); }
  .contact-card__name { color: var(--jl-color-heading); }
  .contact-card__link { color: var(--jl-color-heading); font-weight: var(--jl-fw-bold); text-decoration: none; overflow-wrap: anywhere; }
  .contact-card__link:hover { color: var(--jl-color-accent); }
  .contact-card__subheading { margin-top: var(--jl-space-2); }
  .contact-card__hours, .booking-hours__list { margin: 0; display: grid; gap: 0.5rem; max-width: 22rem; }
  .contact-card__hours-row, .booking-hours__row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--jl-color-border); }
  .contact-card__hours dt, .booking-hours__list dt { font-weight: var(--jl-fw-bold); color: var(--jl-color-heading); }
  .contact-card__hours dd, .booking-hours__list dd { margin: 0; color: var(--jl-color-text); font-variant-numeric: tabular-nums; }
  .contact-card__note { color: var(--jl-color-text); text-wrap: pretty; }
  .contact-card__legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: auto; color: var(--jl-color-text); }
  .contact-map { position: relative; min-height: 22rem; background: var(--jl-color-n200); overflow: hidden; border: 1px solid var(--jl-color-border); }
  @media (min-width: 992px) { .contact-map { min-height: 100%; } }
  .contact-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter var(--jl-dur-slow); }
  .contact-map:hover .contact-map__frame { filter: none; }
  .contact-map__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--jl-space-3); padding: var(--jl-space-6); text-align: center; text-decoration: none; color: var(--jl-color-heading); }
  .contact-map__placeholder:hover .contact-map__label { color: var(--jl-color-accent); }
  .contact-map__consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--jl-space-3); padding: var(--jl-space-6); text-align: center; color: var(--jl-color-heading); background: var(--jl-color-surface-alt) repeating-linear-gradient(45deg, #0000 0 1.75rem, #00000006 1.75rem 3.5rem); }
  .contact-map__note { color: var(--jl-color-text); max-width: 24rem; text-wrap: pretty; }
  .contact-map__actions { margin-top: var(--jl-space-2); }
  .contact-map__icon { width: 3rem; height: 3rem; color: var(--jl-color-accent); }
  .contact-map__address { color: var(--jl-color-text); }

  /* ================= booking (/varaa-aika) ================= */
  .booking__grid { gap: var(--jl-gap); align-items: start; }
  @media (min-width: 992px) {
    .booking__grid { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); }
    .booking-aside { position: sticky; top: calc(var(--jl-nav-h) + 1.5rem); }
  }
  .booking-aside { display: flex; flex-direction: column; gap: var(--jl-gap); }
  .booking-promise { display: flex; flex-direction: column; align-items: flex-start; gap: var(--jl-space-4); }
  .booking-promise__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--jl-color-accent); color: var(--jl-color-n100); }
  .booking-promise__icon .icon { width: 1.75rem; height: 1.75rem; }
  .booking-promise__heading { color: var(--jl-color-n100); text-wrap: balance; }
  .booking-promise__text { color: var(--jl-color-on-dark-soft); text-wrap: pretty; }
  .booking-promise__phone { display: inline-flex; align-items: center; gap: 0.625rem; font-size: var(--jl-fs-h3); font-weight: var(--jl-fw-black); color: var(--jl-color-n100); text-decoration: none; }
  .booking-promise__phone:hover { color: var(--jl-color-accent-on-dark); }
  .booking-promise__phone-icon { width: 1.5rem; height: 1.5rem; color: var(--jl-color-accent-on-dark); }
  .booking-hours { display: flex; flex-direction: column; gap: var(--jl-space-4); }
  .booking-hours__address { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--jl-color-text); }
  .booking-hours__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15em; color: var(--jl-color-accent); }
  .booking-steps__list { list-style: none; margin: 0; padding: 0; gap: var(--jl-gap); grid-template-columns: 1fr; }
  @media (min-width: 768px) { .booking-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .booking-steps__item { display: flex; flex-direction: column; gap: var(--jl-space-3); padding: var(--jl-space-6); background: var(--jl-color-surface); border: 1px solid var(--jl-color-border); }
  .booking-steps__num { color: var(--jl-color-accent); line-height: 1; }
  .booking-steps__heading { text-wrap: balance; }
  .booking-steps__text { color: var(--jl-color-text); text-wrap: pretty; }

  /* ================= prose page (/tietosuoja) ================= */
  .page-hero__head { margin-bottom: 0; max-width: 58rem; }
  .page-hero__updated { color: var(--jl-color-on-dark-soft); margin-top: var(--jl-space-2); }
  .prose-controller { display: grid; gap: var(--jl-space-3); margin: 0 0 var(--jl-space-8); padding: var(--jl-space-5) var(--jl-space-6); background: var(--jl-color-surface-alt); border: 1px solid var(--jl-color-border); border-left: 4px solid var(--jl-color-accent); }
  .prose-controller__row { display: grid; grid-template-columns: 1fr; gap: 0.125rem 1.5rem; }
  @media (min-width: 480px) { .prose-controller__row { grid-template-columns: 9rem minmax(0, 1fr); } }
  .prose-controller dt { font-size: var(--jl-fs-xs); font-weight: var(--jl-fw-bold); letter-spacing: var(--jl-tracking-label); text-transform: uppercase; color: var(--jl-color-heading); padding-top: 0.2em; }
  .prose-controller dd { margin: 0; color: var(--jl-color-text); overflow-wrap: anywhere; }
  .prose-controller a { color: var(--jl-color-accent); text-decoration: none; }
  .prose-controller a:hover { text-decoration: underline; }
  .prose { color: var(--jl-color-text); font-size: var(--jl-fs-body); line-height: var(--jl-lh-body); text-wrap: pretty; }
  .prose > * + * { margin-top: var(--jl-space-4); }
  .prose h2, .prose h3, .prose h4 { color: var(--jl-color-heading); font-weight: var(--jl-fw-black); text-transform: uppercase; line-height: var(--jl-lh-heading); text-wrap: balance; }
  .prose h2 { font-size: var(--jl-fs-h3); margin-top: var(--jl-space-8); }
  .prose h3 { font-size: var(--jl-fs-h4); margin-top: var(--jl-space-6); }
  .prose h4 { font-size: var(--jl-fs-body); margin-top: var(--jl-space-5); }
  .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--jl-space-3); }
  .prose > :first-child { margin-top: 0; }
  .prose ul, .prose ol { padding-left: 1.25rem; }
  .prose ul { list-style: disc; }
  .prose ol { list-style: decimal; }
  .prose li + li { margin-top: 0.5rem; }
  .prose li::marker { color: var(--jl-color-accent); font-weight: var(--jl-fw-bold); }
  .prose a { color: var(--jl-color-accent); text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }
  .prose a:hover { color: var(--jl-color-accent-hover); }
  .prose strong { color: var(--jl-color-heading); }
  .prose blockquote { padding-left: var(--jl-space-5); border-left: 3px solid var(--jl-color-accent); color: var(--jl-color-heading); }
  .prose hr { border: 0; border-top: 1px solid var(--jl-color-border); margin-block: var(--jl-space-8); }
  .prose table { width: 100%; border-collapse: collapse; font-size: var(--jl-fs-sm); }
  .prose th, .prose td { text-align: left; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--jl-color-border); vertical-align: top; }
  .prose th { color: var(--jl-color-heading); font-weight: var(--jl-fw-bold); }
  .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--jl-color-surface-alt); padding: 0.1em 0.35em; }
  .prose img { max-width: 100%; height: auto; }
}

@layer utilities {
  @media print {
    .service-aside__sticky, .booking-aside { position: static; }
    .car-card, .price-table__scroll { break-inside: avoid; }
  }
}