/* ==========================================================================
   Jetour — Offers (single-offers.php + template-parts/offers/*), view key "offer".
   Also loaded site-wide while the promo popup is enabled (inc/integrations.php),
   because the popup, the mini pill and the inquiry modal render in the footer.

   Ported from Jetour Core modules/offers/assets/css/jetour-offers.css. The
   Elementor "override guard" and the appended "unified rhythm" block are folded
   into plain rules with their final (winning) values: the theme's <main> is
   already full width, so the 100vw full-bleed hack and every !important are gone.
   Classes stay `jto-` (the JS relies on them); the --jto-* variables are aliases
   of the base.css tokens. Fonts come from fonts.css (no Google Fonts).
   Breakpoints: mobile ≤767 · tablet ≤1024, plus the approved carousel/specs/popup
   steps (1100 / 900 / 680 / 640 / 560).
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * Tokens + scoped resets (every offers root carries .jto)
 * ------------------------------------------------------------------ */
.jto {
	--jto-teal: var(--jt-teal);
	--jto-ink: var(--jt-text);
	--jto-ink-soft: var(--jt-soft);
	--jto-line: var(--jt-line-2);
	--jto-dark: var(--jt-dark-video);     /* offers "dark-2": video fallback + dark bands */
	--jto-ease: var(--jt-ease-std);
	--jto-ease-pop: var(--jt-ease-pop);
	--jto-headline-font: var(--jt-font-display);
	--jto-gutter: clamp(20px, 5vw, 64px);

	font-family: var(--jt-font-sans);
	color: var(--jto-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* :where() keeps these resets at (0,1,0) so every single-class rule below wins by source order */
.jto :where(img) { display: block; max-width: 100%; }
.jto :where(a) { text-decoration: none; color: inherit; }
.jto :where(h1, h2, h3, h4, p, ul) { margin: 0; }
.jto :where(ul) { padding: 0; list-style: none; }

/* body scroll-lock while a popup / the inquiry modal is open */
body.jto-lock { overflow: hidden; }

/* ---- shared button ---- */
.jto-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 46px; padding: 0 26px; border-radius: 0;
	font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
	cursor: pointer; white-space: nowrap; text-decoration: none;
	background: var(--jto-teal); color: #fff; border: 1px solid var(--jto-teal);
	-webkit-appearance: none; appearance: none; box-shadow: none;
	transition: background-color .35s ease, color .35s ease, border-color .3s ease;
}
.jto-btn:hover, .jto-btn:focus-visible { background: var(--jt-ink); color: #fff; border-color: var(--jt-ink); }
.jto-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.jto-btn-ghost:hover, .jto-btn-ghost:focus-visible { background: #fff; color: var(--jt-ink); border-color: #fff; }

.jto-eyebrow { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--jto-teal); margin: 0 0 16px; }
.jto-h1, .jto-h2, .jto-popup-title, .jto-inquiry-title, .jto-car-title, .jto-price-now {
	font-family: var(--jto-headline-font);
}
.jto-h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 900; line-height: 1.08; color: inherit; }
.jto-h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.15; margin: 0 0 20px; color: var(--jto-ink); }
.jto-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* one content rail: heading blocks + hero text share it */
.jto-wrap, .jto-hero-inner {
	max-width: 1280px; width: 100%;
	margin-left: auto; margin-right: auto;
	padding-left: var(--jto-gutter); padding-right: var(--jto-gutter);
}
.jto-section-lead { max-width: 820px; margin: 0 0 32px; font-size: 18px; line-height: 1.75; color: var(--jto-ink-soft); }

/* ------------------------------------------------------------------ *
 * Hero (full-bleed video/photo, left-aligned copy)
 * ------------------------------------------------------------------ */
.jto-hero {
	position: relative; overflow: hidden;
	display: flex; align-items: flex-start;
	min-height: min(760px, 88vh);
	color: #fff;
	/* the photo stays as the fallback under the video if the iframe never loads */
	background: var(--jto-hero, none) center / cover no-repeat, var(--jto-dark);
}
/* the single template pulls the hero under the fixed (transparent-on-scroll) header */
.jt-offer .jto-hero { margin-top: calc(-1 * var(--jt-header-h)); }
.jto-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.jto-hero .jto-hero-nameplate { display: none; }   /* desktop: the copy carries the lockup */
/* gradient over the video so the headline + CTA stay readable */
.jto-hero-overlay {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 12, 15, .62), rgba(10, 12, 15, .38) 45%, rgba(10, 12, 15, .78));
}
.jto-hero-inner { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 88px; }
.jto-hero .jto-eyebrow { margin: 0 0 14px; }
.jto-hero .jto-h1 { margin: 0; color: #fff; }
.jto-hero .jto-tagline { margin: 18px 0 0; font-size: 19px; font-weight: 600; line-height: 1.55; color: #fff; }
/* announcement notice (not a button): translucent pill + glowing teal dot */
.jto-hero .jto-badge {
	display: inline-flex; align-items: center; gap: 11px;
	margin: 24px 0 0; padding: 11px 20px 11px 17px;
	font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff;
	background: rgba(57, 174, 177, .14);
	border: 1px solid rgba(57, 174, 177, .55);
	border-radius: var(--jt-radius-md);
}
.jto-hero .jto-badge::before {
	content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
	background: var(--jto-teal); box-shadow: 0 0 0 4px rgba(57, 174, 177, .22);
}
.jto-hero .jto-lead { margin: 0; }
.jto-hero .jto-actions { margin: 32px 0 0; gap: 16px; }

/* price line */
.jto-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 28px 0 0; }
.jto-price-now { font-size: clamp(30px, 4vw, 42px); font-weight: 900; line-height: 1; color: #fff; }
.jto-price-old { font-size: clamp(17px, 2vw, 22px); color: rgba(255, 255, 255, .6); text-decoration: line-through; }
.jto-price-note { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .82); }

/* ------------------------------------------------------------------ *
 * Background video (YouTube iframe that "covers" its box; container-query
 * units so the same rules fit any host size). Markup from Jetour Core.
 * ------------------------------------------------------------------ */
.jto-bg-video { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; container-type: size; will-change: transform; }
/* oversized for parallax room (a translate of up to ~14% never reveals an edge) */
.jto-bg-video[data-jto-parallax] { top: -15%; bottom: auto; height: 130%; }
/* the YouTube API sets inline width/height on the iframe — the cover rules must win */
.jto-bg-video iframe {
	position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
	border: 0 !important; pointer-events: none !important; box-shadow: none !important;
	max-width: none !important; max-height: none !important;
	/* box taller than 16:9 → match the height, oversize the width */
	height: 100cqh !important;
	width: calc(100cqh * 16 / 9) !important;
}
@container (aspect-ratio > 16/9) {
	.jto-bg-video iframe { width: 100cqw !important; height: calc(100cqw * 9 / 16) !important; }
}
@supports not (container-type: size) {
	.jto-bg-video iframe { width: max(100vw, 177.78vh) !important; height: max(100vh, 56.25vw) !important; }
}
.jto-bg-video-mount { position: absolute; inset: 0; }
/* cover hides all player chrome until the clip is actually playing */
.jto-bg-video-cover {
	position: absolute; inset: 0; z-index: 1;
	background: var(--jto-hero, none) center / cover no-repeat, var(--jto-dark);
	transition: opacity .9s ease;
}
.jto-bg-video.is-playing .jto-bg-video-cover { opacity: 0; }

/* ------------------------------------------------------------------ *
 * Sections
 * ------------------------------------------------------------------ */
.jto-section { background: #fff; padding: 96px 0; }
.jto-section .jto-h2 { margin: 0 0 20px; }
.jto-section-dark { background: var(--jto-dark); color: #fff; }
.jto-section-dark .jto-h2 { color: #fff; }

/* ------------------------------------------------------------------ *
 * Feature carousel — full-bleed centre mode: the active slide is centred,
 * the neighbours peek on both sides. The track gets symmetric padding
 * = (track width − slide width) / 2, so scroll-snap-align:center and the
 * JS scrollTo(slideOffset(i)) land each slide dead centre.
 * ------------------------------------------------------------------ */
.jto-carousel-section { overflow: hidden; }
.jto-carousel { --jto-slide-w: min(58vw, 1080px); position: relative; width: 100%; margin: 0; padding: 0; }
.jto-car-track {
	display: flex; gap: 24px;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-ms-overflow-style: none; scrollbar-width: none;
	padding: 6px calc((100% - var(--jto-slide-w)) / 2) 8px;
}
.jto-car-track::-webkit-scrollbar { display: none; }
.jto-car-slide {
	position: relative; flex: 0 0 auto;
	width: var(--jto-slide-w); aspect-ratio: 16 / 10;
	scroll-snap-align: center;
	border-radius: 14px; overflow: hidden; background: var(--jto-dark);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
}
@supports not (aspect-ratio: 1) { .jto-car-slide { height: 440px; } }
.jto-car-media {
	position: absolute; inset: 0;
	width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: center;
	transform: scale(1.001);
	transition: transform .7s var(--jto-ease-pop);
}
.jto-car-slide:hover .jto-car-media { transform: scale(1.05); }
.jto-car-slide::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(8, 10, 13, 0) 24%, rgba(8, 10, 13, .85) 100%);
}
.jto-car-cap { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 2; color: #fff; }
.jto-car-title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 900; line-height: 1.15; margin: 0; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.jto-car-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* arrows pinned near the viewport edges, floating over the peeking slides */
/* Position only — the circle, blur and thin chevron come from .jt-arrow (components.css).
   The translate keeps it centred, so its hover scale is re-declared with the translate intact. */
.jto-car-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; }
.jto-car-arrow:hover, .jto-car-arrow:focus-visible { transform: translateY(-50%) scale(1.06); }
.jto-car-prev { left: clamp(12px, 2.6vw, 46px); }
.jto-car-next { right: clamp(12px, 2.6vw, 46px); }

/* dots */
.jto-car-dots { display: flex; justify-content: center; gap: 9px; margin: 30px auto 0; padding: 0; }
.jto-car-dot {
	width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	background: #D2D6DA; -webkit-appearance: none; appearance: none;
	transition: background-color .25s ease, width .25s ease;
}
.jto-car-dot.is-active { width: 26px; border-radius: 6px; background: var(--jto-teal); }
.jto-car-dot:focus-visible, .jto-car-track:focus-visible { box-shadow: var(--jt-focus-ring); }

/* ------------------------------------------------------------------ *
 * Photo band (parallax layer oversized so the shift never shows an edge)
 * ------------------------------------------------------------------ */
.jto-band { position: relative; overflow: hidden; min-height: clamp(320px, 52vh, 560px); background: var(--jto-dark); }
.jto-band-bg, .jto-cta-bg { position: absolute; left: 0; right: 0; top: -15%; height: 130%; z-index: 0; overflow: hidden; will-change: transform; }
.jto-band-img, .jto-cta-img, .jto-popup-img, .jto-mini-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: center;
}

/* ------------------------------------------------------------------ *
 * Specs (dark)
 * ------------------------------------------------------------------ */
.jto-specs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 26px; }
.jto-spec { display: flex; flex-direction: column; border-left: 2px solid var(--jto-teal); padding: 2px 0 4px 20px; }
.jto-spec-value { font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; line-height: 1.22; color: #fff; }
.jto-spec-label { margin-top: 12px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.jto-note { margin: 36px 0 0; max-width: 680px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.jto-section-dark .jto-actions { margin: 28px 0 0; }

/* ------------------------------------------------------------------ *
 * Closing CTA — tall, centred, image-backed "Beyond the Horizon" band
 * ------------------------------------------------------------------ */
.jto-cta { position: relative; overflow: hidden; padding: 140px 0; background: var(--jto-dark); text-align: center; color: #fff; }
.jto-cta-overlay {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(8, 10, 13, .74), rgba(8, 10, 13, .56) 48%, rgba(8, 10, 13, .84));
}
.jto-cta-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.jto-cta .jto-h2 { color: #fff; margin: 0 0 18px; }
/* white nameplate lockup as the focal point (pre-trimmed PNG → width drives the size) */
.jto-cta .jto-h2.jto-cta-title { line-height: 0; margin: 0 0 28px; }
.jto-cta .jto-h2.jto-cta-title--text { line-height: 1.15; }
.jto-cta-nameplate { display: block; width: clamp(260px, 36vw, 460px); height: auto; max-width: 100%; margin-left: auto; margin-right: auto; }
.jto-cta-sub { margin: 0 0 32px; font-size: 17px; color: rgba(255, 255, 255, .86); }
.jto-cta .jto-btn { margin: 0; }

/* ------------------------------------------------------------------ *
 * Promo popup (site-wide, once per session)
 * ------------------------------------------------------------------ */
.jto-popup {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.jto-popup[hidden] { display: none; }
.jto-popup-backdrop {
	position: absolute; inset: 0; background: rgba(8, 10, 13, .62);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	opacity: 0; transition: opacity .35s ease;
}
.jto-popup.jto-open .jto-popup-backdrop { opacity: 1; }
.jto-popup-card {
	position: relative; z-index: 1; width: min(1120px, 92vw); max-height: 92vh; background: #fff; overflow: auto; border-radius: 0;
	display: grid; grid-template-columns: 1fr 1fr;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
	opacity: 0; transform: translateY(16px) scale(.98);
	transition: transform .4s var(--jto-ease), opacity .35s ease;
}
.jto-popup.jto-open .jto-popup-card { opacity: 1; transform: none; }
.jto-popup-media { position: relative; overflow: hidden; min-height: 520px; background: var(--jto-dark); }
.jto-popup-body { padding: 52px 52px 54px; align-self: center; }
.jto-popup-title { font-size: 40px; font-weight: 900; line-height: 1.1; margin: 0 0 12px; color: var(--jto-ink); }
.jto-popup-line { margin: 0; color: var(--jto-ink-soft); font-size: 18px; line-height: 1.65; }
.jto-popup .jto-actions { margin-top: 30px; flex-direction: column; align-items: stretch; gap: 12px; }
.jto-popup .jto-btn { width: 100%; height: 54px; font-size: 16px; }
/* the ghost button sits on white inside the popup */
.jto-popup .jto-btn-ghost { color: var(--jt-ink); border-color: var(--jt-line); }
.jto-popup .jto-btn-ghost:hover, .jto-popup .jto-btn-ghost:focus-visible { background: var(--jt-ink); color: #fff; border-color: var(--jt-ink); }

.jto-popup-x {
	position: absolute; top: 14px; right: 14px; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; padding: 0; margin: 0; border: 0; cursor: pointer; border-radius: 50%;
	background: rgba(255, 255, 255, .9); color: var(--jt-ink); font-size: 24px; line-height: 1; box-shadow: none;
	-webkit-appearance: none; appearance: none;
	transition: background-color .25s ease;
}
.jto-popup-x:hover { background: #fff; }

/* ------------------------------------------------------------------ *
 * Mini — minimised offer pill (bottom-left, persists across pages)
 * ------------------------------------------------------------------ */
.jto-mini {
	position: fixed; left: 20px; bottom: 20px; z-index: 99998;
	display: flex; align-items: center; gap: 14px;
	width: auto; max-width: min(360px, calc(100vw - 40px)); padding: 12px 14px;
	border-radius: 16px; color: #fff;
	background: linear-gradient(135deg, rgba(16, 19, 24, .72), rgba(16, 19, 24, .55));
	-webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
	transform: translateY(160%); opacity: 0;
	transition: transform .55s var(--jto-ease), opacity .4s ease;
}
.jto-mini.jto-mini-open { transform: none; opacity: 1; }
.jto-mini[hidden] { display: none; }
.jto-mini-link { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; min-width: 0; box-shadow: none; }
/* base.css `a:hover` (0,1,1) would repaint the title teal on the dark glass pill */
.jto-mini-link:hover, .jto-mini-link:focus-visible { color: #fff; }
.jto-mini-thumb { position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 12px; overflow: hidden; background: var(--jto-dark); }
.jto-mini-text { display: flex; flex-direction: column; min-width: 0; }
.jto-mini-title { font-size: 15px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jto-mini-sub { margin-top: 4px; font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .78); }
.jto-mini-x {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; padding: 0; margin: -4px -2px auto 0; cursor: pointer;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff;
	font-size: 18px; line-height: 1; box-shadow: none; -webkit-appearance: none; appearance: none;
	transition: background-color .25s ease;
}
.jto-mini-x:hover { background: rgba(255, 255, 255, .32); }

/* ------------------------------------------------------------------ *
 * Inquiry modal (pre-order form)
 * ------------------------------------------------------------------ */
.jto-inquiry {
	position: fixed; inset: 0; z-index: 110000;
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.jto-inquiry[hidden] { display: none; }
.jto-inquiry .jto-popup-backdrop {
	position: absolute; inset: 0; background: rgba(8, 10, 13, .72);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	opacity: 0; transition: opacity .35s ease;
}
.jto-inquiry.jto-open .jto-popup-backdrop { opacity: 1; }
.jto-inquiry-card {
	position: relative; z-index: 1;
	width: min(540px, 100%); max-height: 92vh; overflow: auto;
	background: #fff;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	opacity: 0; transform: translateY(16px) scale(.98);
	transition: transform .4s var(--jto-ease), opacity .35s ease;
}
.jto-inquiry.jto-open .jto-inquiry-card { opacity: 1; transform: none; }
.jto-inquiry-body { padding: 42px 40px 36px; }
.jto-inq-eyebrow { margin: 0 0 10px; }
.jto-inq-eyebrow:empty { display: none; }
.jto-inquiry-title { font-size: 30px; font-weight: 900; margin: 0 0 34px; color: var(--jto-ink); line-height: 1.15; }

/* offer mid-card */
.jto-inq-mid {
	display: flex; align-items: center; gap: 14px;
	padding: 14px; margin: 0 0 26px;
	border: 1px solid var(--jto-line); border-radius: 10px;
	background: var(--jt-bg-faint);
}
.jto-inq-thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px; background: var(--jto-dark) center / cover no-repeat; }
.jto-inq-mid-text { display: flex; flex-direction: column; min-width: 0; }
.jto-inq-offer-title { font-size: 16px; font-weight: 700; color: var(--jto-ink); line-height: 1.2; }
.jto-inq-offer-sub { margin-top: 4px; font-size: 13px; color: var(--jto-ink-soft); line-height: 1.4; }
.jto-inq-offer-sub:empty { display: none; }

/* form fields — boxed inputs (offers-only style), placeholders carry the labels */
.jto-inq-form { display: flex; flex-direction: column; gap: 12px; }
.jto-field { display: flex; flex-direction: column; }
.jto-field input {
	width: 100%; height: 52px; padding: 0 16px;
	background: #fff; color: var(--jto-ink);
	border: 1px solid #DCDFE3; border-radius: 10px;
	font-family: inherit; font-size: 15px; line-height: 1.2;
	-webkit-appearance: none; appearance: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.jto-field input::placeholder { color: #9aa1a8; opacity: 1; }
.jto-field input:focus { outline: none; border-color: var(--jto-teal); box-shadow: var(--jt-ring-teal); }
.jto-field-err input { border-color: var(--jt-error); box-shadow: 0 0 0 3px rgba(224, 69, 59, .14); }

/* honeypot */
.jto-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* submit + messages */
.jto-inq-submit { margin-top: 8px; height: 50px; font-size: 15px; }
.jto-inq-submit[disabled] { opacity: .65; cursor: wait; }
.jto-inq-msg { margin: 6px 0 0; min-height: 18px; font-size: 13.5px; }
.jto-inq-msg.jto-msg-ok { color: var(--jt-success); }
.jto-inq-msg.jto-msg-err { color: var(--jt-error); }
.jto-inq-fine { margin: 6px 0 0; color: #9a9a9a; font-size: 11.5px; line-height: 1.45; }

/* success state */
.jto-inq-success { text-align: center; padding: 14px 4px 4px; }
.jto-inq-success[hidden] { display: none; }
.jto-inq-check {
	display: flex; align-items: center; justify-content: center;
	width: 68px; height: 68px; margin: 0 auto 18px;
	border-radius: 50%; background: rgba(57, 174, 177, .14); color: var(--jto-teal);
	font-size: 34px; font-weight: 700;
}
.jto-inq-success h4 { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--jto-ink); }
.jto-inq-success p { color: var(--jto-ink-soft); font-size: 15px; line-height: 1.55; margin: 0 0 22px; }

/* ---- phone field: the site-wide country selector, sized for this card ---- */
.jto-inquiry .jt-input-wrap--tel {
	display: flex;
	align-items: stretch;
	gap: 10px;
	width: 100%;
}
.jto-inquiry .jt-input-wrap--tel input[type="tel"] { flex: 1 1 auto; min-width: 0; height: 52px; }
.jto-inquiry .jt-cc__btn {
	height: 52px;
	padding: 0 14px;
	border: 1px solid #E5E7EA;
	border-radius: 8px;
	background: #F4F6F7;
	color: var(--jto-ink);
	font-weight: 600;
}
.jto-inquiry .jt-cc__menu { width: 264px; max-height: 260px; }
/* The modal is a stacking context of its own; keep the list above the fields under it. */
.jto-inquiry .jt-cc { z-index: 3; }
.jto-inquiry .jt-cc.is-open { z-index: 12; }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 1100px) {
	.jto-specs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
	.jto-section { padding: 80px 0; }
	.jto-cta { padding: 108px 0; }             /* the CTA stays taller than the sections */
	.jto-hero-inner { padding-top: 104px; padding-bottom: 80px; }
	.jto-carousel { --jto-slide-w: 68vw; }
}
@media (max-width: 900px) {
	.jto-band { min-height: 300px; }
}
@media (max-width: 767px) {
	.jto-section { padding: 64px 0; }
	.jto-cta { padding: 84px 0; }
	.jto-section .jto-h2 { margin: 0 0 16px; }
	.jto-section-lead { margin: 0 0 24px; }
	.jto-note { margin: 28px 0 0; }

	/* hero media split: a video band on top (light overlay + centred nameplate),
	   then a solid dark block with the copy */
	.jto-hero { display: flex; flex-direction: column; min-height: auto; background: var(--jto-dark); }
	.jto-hero-media { position: relative; inset: auto; width: 100%; height: clamp(290px, 46vh, 440px); flex: 0 0 auto; }
	/* lighter overlay so the video is clearly visible behind the nameplate */
	.jto-hero-overlay { background: linear-gradient(180deg, rgba(10, 12, 15, .30), rgba(10, 12, 15, .18) 45%, rgba(10, 12, 15, .55)); }
	.jto-hero .jto-hero-nameplate {
		display: block; position: absolute; z-index: 3;
		left: 50%; top: 50%; transform: translate(-50%, -50%);
		width: min(66vw, 300px); height: auto; max-width: 82%;
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5));
	}
	.jto-hero-inner { background: var(--jto-dark); padding-top: 34px; padding-bottom: 56px; }
	.jto-hero .jto-eyebrow { display: none; }  /* the nameplate already shows the lockup */
	.jto-hero .jto-tagline { margin: 14px 0 0; font-size: 16px; }
	.jto-hero .jto-badge { margin: 20px 0 0; font-size: 12.5px; padding: 7px 12px 7px 11px; gap: 8px; }
	.jto-hero .jto-badge::before { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(57, 174, 177, .22); }
	.jto-hero .jto-price { margin: 24px 0 0; }
	.jto-hero .jto-actions { margin: 26px 0 0; }

	.jto-cta .jto-h2.jto-cta-title { margin: 0 0 22px; }
	.jto-cta-nameplate { width: clamp(220px, 64vw, 320px); }
}
@media (max-width: 680px) {
	.jto-carousel { --jto-slide-w: 82vw; }      /* small peek on phones */
	.jto-car-track { gap: 14px; }
	.jto-car-slide { aspect-ratio: 4 / 3; }
	@supports not (aspect-ratio: 1) { .jto-car-slide { height: 300px; } }
	.jto-car-arrow { display: none; }            /* swipe + dots on phones */
	.jto-car-cap { left: 18px; right: 18px; bottom: 16px; }
}
@media (max-width: 640px) {
	.jto-specs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.jto-popup-card { grid-template-columns: 1fr; }
	.jto-popup-media { min-height: 240px; }
	.jto-popup-body { padding: 36px 24px 32px; }
	.jto-popup-title { font-size: 30px; }
	.jto-inquiry-card { width: 100%; }
	.jto-inquiry-body { padding: 36px 22px 28px; }
}

/* ------------------------------------------------------------------ *
 * Reduced motion: no parallax headroom, no zoom/slide transitions
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.jto *, .jto *::before, .jto *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.jto-car-track { scroll-behavior: auto !important; }
	.jto-bg-video[data-jto-parallax], .jto-band-bg, .jto-cta-bg { top: 0; height: 100%; }
	.jto-car-slide:hover .jto-car-media { transform: none; }
}