/* ==========================================================================
   Single service — single-service.php ("Service detail (Express)")
   Figma: Desktop 519:29317 · Tablet 519:46881 · Mobile 519:47200
   ========================================================================== */

.service-about, .service-cases, .service-fleet, .service-steps, .service-incl { padding-block: 96px; }

/* ---------- Section heads ---------- */
.service-head { margin-bottom: 48px; }
.service-head .section-head__main { gap: 16px; }
.service-about .eyebrow, .service-head .eyebrow, .service-incl .eyebrow {
	gap: 10px; font-size: 12px; line-height: 18px; letter-spacing: 1.5px; color: var(--c-navy);
}
.service-steps .eyebrow { color: var(--c-on-dark); }
.service-head__title { max-width: 720px; line-height: 51.84px; }
.service-head .section-head__aside { width: 451px; }
.service-head__lead { font-family: var(--ff-text); font-weight: 400; font-size: 16px; line-height: 24px; color: #65777e; }
.service-steps .service-head__lead { color: #ccdbe0; }
.service-steps .h2 { color: #fff; }

.svc-check {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 20px; height: 20px; border-radius: 100px; background: #fff5e9; color: var(--c-orange);
}
.svc-check .tk-icon { width: 10px; height: 10px; }

/* ---------- Hero chips: icons from the shared chip set ---------- */
.page-hero--service .page-hero__title { max-width: 620px; }

/* ---------- How it works + key facts ---------- */
.service-about__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 80px; }
.service-about__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 0 1 600px; min-width: 0; }
.service-about__title { line-height: 51.84px; }
.service-about__text { font-family: var(--ff-text); font-weight: 400; font-size: 17px; line-height: 27px; color: #65777e; }
.service-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; flex: 0 1 600px; min-width: 0; }
.service-fact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: 8px; background: var(--c-bg-soft); }
.service-fact__icon {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 8px; background: var(--c-blue); color: #fff;
}
.service-fact__icon .tk-icon, .service-fact__icon img { width: 20px; height: 20px; }
.service-fact__value { font-weight: 300; font-size: 34px; line-height: 1.27; color: var(--c-blue); }
.service-fact__label { max-width: 230px; font-family: var(--ff-text); font-weight: 400; font-size: 14px; line-height: 20px; color: #65777e; }

/* ---------- Use cases ---------- */
.service-cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.service-case { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px; border-radius: 8px; background: #fff; }
.service-case__icon {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 8px; background: var(--c-orange); color: #fff;
}
.service-case__icon .tk-icon, .service-case__icon img { width: 24px; height: 24px; }
.service-case__title { font-weight: 400; font-size: 22px; line-height: 28px; color: var(--c-blue); }
.service-case__text { max-width: 340px; font-family: var(--ff-text); font-weight: 400; font-size: 15px; line-height: 23px; color: #65777e; }

/* ---------- Vehicles ---------- */
.service-fleet__aside { gap: 14px; }
.service-fleet__link { font-size: 14px; }
.service-fleet__link .tk-icon { width: 16px; height: 16px; }
.service-fleet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vehicle-card {
	display: flex; flex-direction: column; gap: 16px; padding: 32px;
	border: 1px solid #dee8ec; border-radius: 8px; background: #fff;
	transition: box-shadow .35s var(--ease-out), border-color .3s;
}
.vehicle-card:hover { box-shadow: 0 18px 40px -26px rgba(19, 15, 115, .3); }
.vehicle-card.is-featured { border-color: var(--c-orange); border-radius: 12px; }
.vehicle-card__head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #dee8ec; }
.vehicle-card__icon {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 48px; height: 48px; border-radius: 8px; background: var(--c-bg-soft); color: var(--c-blue);
}
.vehicle-card.is-featured .vehicle-card__icon { background: #fff7ec; color: var(--c-orange); }
.vehicle-card__icon .tk-icon, .vehicle-card__icon img { width: 26px; height: 26px; }
.vehicle-card__name { font-weight: 400; font-size: 24px; line-height: 30px; color: var(--c-blue); }
.vehicle-card__note { margin-top: 2px; font-family: var(--ff-text); font-weight: 400; font-size: 13px; line-height: 15px; color: #65777e; }
.vehicle-card__specs { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.vehicle-card__specs div { display: flex; justify-content: space-between; gap: 12px; font-family: var(--ff-text); font-weight: 400; font-size: 14px; line-height: 17px; }
.vehicle-card__specs dt { color: #65777e; }
.vehicle-card__specs dd { margin: 0; color: var(--c-blue); text-align: right; }
.vehicle-card__price { display: flex; flex-direction: column; font-weight: 300; font-size: 40px; line-height: 51px; color: var(--c-blue); }
.vehicle-card__price span { font-family: var(--ff-text); font-weight: 400; font-size: 13px; line-height: 15px; color: #65777e; }
.vehicle-card__btn { min-height: 52px; margin-top: auto; padding: 16px 32px; }

/* ---------- Process ---------- */
.service-steps__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: none; }
.service-steps__list::before {
	content: ""; position: absolute; left: 0; right: 0; top: 44px;
	border-top: 1px dashed rgba(255, 255, 255, .15);
}
.service-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 24px; }
.service-step__num {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 2px; background: #fff; color: var(--c-blue);
	font-weight: 500; font-size: 14px; line-height: 20px;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .05));
}
.service-step.is-first .service-step__num { background: var(--c-orange); color: #fff; }
.service-step__title { font-weight: 400; font-size: 22px; line-height: 28px; color: #fff; }
.service-step__text { max-width: 280px; font-family: var(--ff-text); font-weight: 400; font-size: 15px; line-height: 23px; color: #ccdbe0; }

/* ---------- Included + FAQ ---------- */
.service-incl__inner { display: flex; align-items: flex-start; gap: 64px; }
.service-incl__col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 0 0 520px; min-width: 0; }
.service-incl--no-faq .service-incl__col { flex-basis: auto; }
.service-incl__title { font-size: 40px; line-height: 43.2px; }
.service-incl__list { display: flex; flex-direction: column; gap: 24px; }
.service-incl__list li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--ff-text); font-weight: 400; font-size: 16px; line-height: 22px; color: var(--c-blue); }
.service-incl__list .svc-check { margin-top: 1px; }

.service-faq { flex: 1 1 auto; min-width: 0; }
.service-faq__item { border-bottom: 1px solid #dee8ec; }
.service-faq__q { margin: 0; font: inherit; }
.service-faq__trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	width: 100%; padding: 22px 0; text-align: left;
	font-weight: 400; font-size: 19px; line-height: 24px; color: var(--c-blue);
	transition: color .2s, padding .35s var(--ease-out);
}
.service-faq__trigger:hover { color: var(--c-orange); }
.service-faq__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff5e9; color: var(--c-orange); transition: background-color .3s var(--ease-out), color .3s; }
.service-faq__icon::before, .service-faq__icon::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.2px; margin: -.6px 0 0 -5.5px;
	background: currentColor; transition: transform .35s var(--ease-out);
}
.service-faq__icon::after { transform: rotate(90deg); }
.service-faq__item.is-open .service-faq__icon { background: var(--c-blue); color: #fff; }
.service-faq__item.is-open .service-faq__icon::after { transform: rotate(0deg); }
.service-faq__panel { overflow: hidden; transition: height .35s var(--ease-out); }
.js .service-faq__item:not(.is-open) > .service-faq__panel { height: 0; }
.service-faq__item.is-open .service-faq__trigger { padding-bottom: 12px; }
.service-faq__a { padding-bottom: 22px; }
.service-faq__a, .service-faq__a p { font-family: var(--ff-text); font-weight: 400; font-size: 15px; line-height: 23px; color: #65777e; }
.service-faq__a p + p { margin-top: 8px; }
.service-faq__a a { color: var(--c-orange); text-decoration: underline; }
.service-faq__card { display: none; }

/* ---------- CTA (shared band on a soft section) ---------- */
.service-cta { padding-block: 80px 96px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
	.service-about, .service-cases, .service-fleet, .service-steps, .service-incl { padding-block: 72px; }
	.service-head { gap: 28px; margin-bottom: 36px; }
	.service-head .section-head__aside { width: 100%; max-width: none; }
	.service-head__title, .service-about__title { font-size: 38px; line-height: 41px; letter-spacing: -1px; }
	.service-about__inner { flex-direction: column; gap: 40px; }
	.service-about__copy, .service-facts { flex-basis: auto; width: 100%; }
	.service-cases__grid { gap: 16px; }
	.service-case { padding: 24px 20px; }
	.service-fleet__grid { grid-template-columns: minmax(0, 1fr); }
	.service-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
	.service-steps__list::before { display: none; }
	.service-incl__inner { flex-direction: column; gap: 48px; }
	.service-incl__col { flex-basis: auto; width: 100%; }
	.service-faq { width: 100%; }
	.service-cta { padding-block: 64px 72px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.service-about, .service-cases, .service-fleet, .service-steps, .service-incl { padding-block: 48px 56px; }
	.service-head { gap: 20px; margin-bottom: 28px; }
	.service-head__title, .service-about__title { font-size: 30px; line-height: 32px; letter-spacing: -.8px; }
	.service-about__copy { gap: 20px; }
	.service-about__text { font-size: 16px; line-height: 25px; }
	.service-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.service-fact__value { font-size: 30px; }
	.service-cases__grid { grid-template-columns: minmax(0, 1fr); }
	.service-case { padding: 28px 24px; }
	.vehicle-card { padding: 24px 20px; }
	.service-steps__list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.service-incl__title { font-size: 30px; line-height: 32px; }
	.service-incl__list { gap: 18px; }
	.service-faq__trigger { padding: 18px 0; font-size: 17px; line-height: 22px; }
	.service-faq__card { display: flex; min-height: 0; margin-top: 32px; }
	.service-cta { padding-block: 48px 56px; }
}