/* JapanWheels — Home page (home.css)
   Palette: navy #0b1d2d · emerald #1f9d5c · warm white #f8faf9
   Signature: quick-search bar that lifts out of the hero's bottom edge */

.jw-hero-v2, .jw-section, .jw-stats-strip, .jw-cta-band { font-family: inherit; }

:root{
	--jwh-navy:#0b1d2d; --jwh-navy-2:#12283c; --jwh-navy-3:#1b3d55;
	--jwh-green:#1f9d5c; --jwh-green-dk:#157a46; --jwh-green-lt:#e8f5ee;
	--jwh-mint:#4ade80;
	--jwh-ink:#10202f; --jwh-muted:#5b6b78; --jwh-line:#e3e8ec;
	--jwh-bg:#f8faf9; --jwh-white:#fff;
	--jwh-r:12px; --jwh-r-lg:18px;
	--jwh-sh:0 4px 20px rgba(11,29,45,.08);
	--jwh-sh-lg:0 18px 50px rgba(11,29,45,.16);
	--jwh-max:1200px;
}

/* ═══ Shared section furniture ═══════════════════════════ */
.jw-section{ max-width:var(--jwh-max); margin:0 auto; padding:72px 20px; }
.jw-section-head{
	display:flex; justify-content:space-between; align-items:flex-end;
	gap:24px; flex-wrap:wrap; margin-bottom:36px;
}
.jw-section-head--center{ justify-content:center; text-align:center; }
.jw-section-title{
	font-size:clamp(1.6rem,3.2vw,2.15rem); font-weight:800; letter-spacing:-.02em;
	color:var(--jwh-navy); margin:0 0 6px; line-height:1.15;
}
.jw-section-sub{ color:var(--jwh-muted); margin:0; font-size:1rem; }
.jw-section-link{
	color:var(--jwh-green); font-weight:700; font-size:.92rem;
	text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:5px;
}
.jw-section-link:hover{ color:var(--jwh-green-dk); gap:9px; transition:gap .18s; }
.jw-empty-note{ color:var(--jwh-muted); text-align:center; padding:40px 0; }

/* Buttons */
.jw-cta{
	display:inline-flex; align-items:center; justify-content:center; gap:.45em;
	padding:14px 30px; border-radius:9px; font-weight:700; font-size:.95rem;
	text-decoration:none; border:2px solid transparent; cursor:pointer;
	transition:transform .12s, background .16s, border-color .16s, box-shadow .16s;
}
.jw-cta:hover{ transform:translateY(-2px); }
.jw-cta-primary{ background:var(--jwh-green); color:#fff!important; border-color:var(--jwh-green); box-shadow:0 6px 18px rgba(31,157,92,.32); }
.jw-cta-primary:hover{ background:var(--jwh-green-dk); border-color:var(--jwh-green-dk); }
.jw-cta-ghost{ background:rgba(255,255,255,.08); color:#fff!important; border-color:rgba(255,255,255,.4); backdrop-filter:blur(6px); }
.jw-cta-ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.jw-cta-outline-light{ background:transparent; color:#fff!important; border-color:rgba(255,255,255,.45); }
.jw-cta-outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* ═══ HERO ═══════════════════════════════════════════════ */
.jw-hero-v2{
	position:relative; isolation:isolate; overflow:hidden;
	background:linear-gradient(125deg,#061320 0%,var(--jwh-navy) 42%,#14364d 78%,#14513a 100%);
	background-size:cover; background-position:center;
	padding:0 20px 104px;
}
/* Photo backdrop, when a Page Banner image is set */
.jw-hero-v2.has-bg::before{
	content:""; position:absolute; inset:0; z-index:-1;
	background:linear-gradient(100deg,rgba(6,19,32,.96) 0%,rgba(11,29,45,.82) 48%,rgba(11,29,45,.55) 100%);
}
/* Two soft light sources — stops the flat navy reading as dead space */
.jw-hero-v2::after{
	content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
	background:
		radial-gradient(ellipse 52% 62% at 82% 22%, rgba(31,157,92,.30), transparent 64%),
		radial-gradient(ellipse 40% 50% at 8% 84%, rgba(74,222,128,.14), transparent 68%);
}
/* Fine diagonal texture, masked so it fades out toward the bottom */
.jw-hero-v2 .jw-hero-v2-inner::before{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 22px);
	-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 82%);
	mask-image:linear-gradient(180deg,#000 0%,transparent 82%);
}

.jw-hero-v2-inner{
	position:relative; max-width:var(--jwh-max); margin:0 auto; padding:92px 0 44px;
}
.jw-hero-v2-copy{ position:relative; z-index:1; max-width:660px; }

/* Live-inventory proof badge */
.jw-hero-eyebrow{
	display:inline-flex; align-items:center; gap:9px;
	background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
	backdrop-filter:blur(6px);
	color:#d8f5e4; font-size:.79rem; font-weight:600; letter-spacing:.02em;
	padding:7px 15px 7px 12px; border-radius:999px; margin-bottom:22px;
}
.jw-hero-dot{
	width:8px; height:8px; border-radius:50%; background:var(--jwh-mint);
	box-shadow:0 0 0 0 rgba(74,222,128,.65); animation:jwPulse 2.4s ease-out infinite;
}
@keyframes jwPulse{
	0%{ box-shadow:0 0 0 0 rgba(74,222,128,.6); }
	70%{ box-shadow:0 0 0 9px rgba(74,222,128,0); }
	100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

.jw-hero-v2-title{
	font-size:clamp(2.3rem,6vw,4.05rem); font-weight:900; line-height:1.02;
	letter-spacing:-.035em; color:#fff; margin:0 0 20px;
	text-wrap:balance;
}
.jw-hero-v2-title .jw-accent{
	display:block; position:relative; width:fit-content;
	background:linear-gradient(96deg,#4ade80 0%,#22d3a5 55%,#5eead4 100%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Underline swash beneath the accent line */
.jw-hero-v2-title .jw-accent::after{
	content:""; position:absolute; left:0; right:6%; bottom:-6px; height:3px; border-radius:3px;
	background:linear-gradient(90deg,rgba(74,222,128,.9),rgba(74,222,128,0));
}

.jw-hero-v2-sub{
	font-size:clamp(1rem,1.55vw,1.18rem); line-height:1.65;
	color:rgba(255,255,255,.82); margin:0 0 34px; max-width:540px; text-wrap:pretty;
}

/* Trust markers — glass chips */
.jw-hero-trust{
	list-style:none; margin:0 0 36px; padding:0;
	display:flex; flex-wrap:wrap; gap:10px;
}
.jw-hero-trust li{
	display:flex; align-items:center; gap:10px;
	background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
	border-radius:12px; padding:9px 15px 9px 11px;
	backdrop-filter:blur(8px);
	transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.jw-hero-trust li:hover{
	background:rgba(255,255,255,.11); border-color:rgba(74,222,128,.4); transform:translateY(-2px);
}
.jw-hero-trust-icon{
	display:grid; place-items:center; width:34px; height:34px; flex-shrink:0;
	border-radius:9px; color:#4ade80;
	background:linear-gradient(140deg,rgba(74,222,128,.22),rgba(74,222,128,.06));
	border:1px solid rgba(74,222,128,.22);
}
.jw-hero-trust-text{ display:flex; flex-direction:column; line-height:1.22; }
.jw-hero-trust-text strong{ color:#fff; font-size:.87rem; font-weight:700; }
.jw-hero-trust-text small{ color:rgba(255,255,255,.58); font-size:.75rem; }

.jw-hero-v2-ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.jw-hero-v2-ctas .jw-cta-primary{
	box-shadow:0 12px 34px rgba(31,157,92,.42);
	background:linear-gradient(135deg,#22a865 0%,#1a8d52 100%);
	border-color:transparent;
}
.jw-hero-v2-ctas .jw-cta-primary:hover{
	box-shadow:0 16px 42px rgba(31,157,92,.55);
	background:linear-gradient(135deg,#25b46d 0%,#1a8d52 100%);
}

@media (max-width:640px){
	.jw-hero-v2{ padding-bottom:78px; }
	.jw-hero-v2-inner{ padding:58px 0 30px; }
	.jw-hero-trust li{ flex:1 1 100%; }
	.jw-hero-v2-ctas .jw-cta{ flex:1 1 100%; }
}

/* ═══ SIGNATURE: quick-search bar ════════════════════════ */
.jw-quick-search{
	position:relative; z-index:3;
	max-width:var(--jwh-max); margin:0 auto -60px;
	background:var(--jwh-white); border-radius:var(--jwh-r-lg);
	box-shadow:var(--jwh-sh-lg);
	padding:18px; display:grid; gap:12px;
	grid-template-columns:repeat(4,1fr) auto; align-items:end;
}
.jw-qs-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.jw-qs-field label{
	font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
	color:var(--jwh-muted);
}
.jw-qs-field select{
	appearance:none; -webkit-appearance:none;
	width:100%; min-height:46px; padding:10px 34px 10px 13px;
	border:1px solid var(--jwh-line); border-radius:9px;
	background:var(--jwh-white) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b78' stroke-width='2.5' stroke-linecap='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") no-repeat right 11px center/15px;
	font-size:.93rem; color:var(--jwh-ink); font-family:inherit; cursor:pointer;
}
.jw-qs-field select:focus{ outline:2px solid var(--jwh-green); outline-offset:1px; border-color:transparent; }
.jw-qs-submit{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	min-height:46px; padding:12px 28px; border:0; border-radius:9px;
	background:var(--jwh-green); color:#fff; font-weight:700; font-size:.93rem;
	cursor:pointer; font-family:inherit; white-space:nowrap;
	box-shadow:0 4px 14px rgba(31,157,92,.3); transition:background .16s, transform .12s;
}
.jw-qs-submit:hover{ background:var(--jwh-green-dk); transform:translateY(-1px); }

/* ═══ STATS STRIP ════════════════════════════════════════ */
.jw-stats-strip{
	max-width:var(--jwh-max); margin:0 auto; padding:104px 20px 0;
	display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;
}
.jw-stat{ padding:20px 10px; border-right:1px solid var(--jwh-line); }
.jw-stat:last-child{ border-right:0; }
.jw-stat-num{
	display:block; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:900;
	color:var(--jwh-navy); letter-spacing:-.02em; line-height:1;
}
.jw-stat-lbl{ display:block; margin-top:7px; font-size:.83rem; color:var(--jwh-muted); }

/* ═══ FEATURED CARDS ═════════════════════════════════════ */
.jw-fcard-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.jw-fcard{
	background:var(--jwh-white); border:1px solid var(--jwh-line);
	border-radius:var(--jwh-r); overflow:hidden; box-shadow:var(--jwh-sh);
	display:flex; flex-direction:column;
	transition:transform .2s, box-shadow .2s;
}
.jw-fcard:hover{ transform:translateY(-5px); box-shadow:var(--jwh-sh-lg); }
.jw-fcard-media{
	position:relative; display:block; aspect-ratio:4/3;
	background:var(--jwh-bg); overflow:hidden;
}
.jw-fcard-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.jw-fcard:hover .jw-fcard-media img{ transform:scale(1.05); }
.jw-fcard-noimg{ display:grid; place-items:center; height:100%; color:var(--jwh-muted); font-size:.85rem; }
.jw-fcard-badges{ position:absolute; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:5px; z-index:2; }
.jw-fbadge{
	padding:4px 9px; border-radius:5px; font-size:.68rem; font-weight:800;
	text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--jwh-green);
}
.jw-fbadge--new{ background:#0284c7; }
.jw-fbadge--low-mileage{ background:#7c3aed; }
.jw-fbadge--auction-sheet{ background:#ea580c; }
.jw-fbadge--featured{ background:#d97706; }

.jw-fcard-body{ padding:16px 17px 18px; display:flex; flex-direction:column; gap:11px; flex:1; }
.jw-fcard-body h3{ margin:0; font-size:1rem; line-height:1.3; font-weight:700; }
.jw-fcard-body h3 a{ color:var(--jwh-navy); text-decoration:none; }
.jw-fcard-body h3 a:hover{ color:var(--jwh-green); }
.jw-fcard-specs{
	list-style:none; margin:0; padding:0;
	display:flex; flex-wrap:wrap; gap:5px 13px;
	font-size:.79rem; color:var(--jwh-muted);
}
.jw-fcard-specs li{ display:inline-flex; align-items:center; gap:5px; }
.jw-fcard-specs svg{ width:13px; height:13px; opacity:.65; flex-shrink:0; }
.jw-fcard-foot{
	margin-top:auto; padding-top:11px; border-top:1px solid var(--jwh-line);
	display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.jw-fcard-price{ font-size:1.12rem; font-weight:900; color:var(--jwh-navy); letter-spacing:-.01em; }
.jw-fcard-price.jw-poa{ font-size:.9rem; color:var(--jwh-muted); font-weight:700; }
.jw-fcard-btn{
	padding:8px 15px; border-radius:7px; border:1.5px solid var(--jwh-line);
	color:var(--jwh-navy); font-size:.8rem; font-weight:700; text-decoration:none;
	white-space:nowrap; transition:border-color .16s, background .16s, color .16s;
}
.jw-fcard-btn:hover{ border-color:var(--jwh-green); background:var(--jwh-green); color:#fff; }

/* ═══ BROWSE BY BODY TYPE ════════════════════════════════ */
.jw-browse-types{ background:var(--jwh-bg); max-width:none; }
.jw-browse-types > *{ max-width:var(--jwh-max); margin-left:auto; margin-right:auto; }
.jw-type-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.jw-type-tile{
	display:flex; flex-direction:column; align-items:center; gap:10px;
	padding:24px 14px; background:var(--jwh-white);
	border:1px solid var(--jwh-line); border-radius:var(--jwh-r);
	text-decoration:none; transition:transform .16s, border-color .16s, box-shadow .16s;
}
.jw-type-tile:hover{ transform:translateY(-3px); border-color:var(--jwh-green); box-shadow:var(--jwh-sh); }
.jw-type-icon{
	display:grid; place-items:center; width:46px; height:46px; border-radius:11px;
	background:var(--jwh-green-lt); color:var(--jwh-green-dk);
}
.jw-type-icon svg{ width:22px; height:22px; }
.jw-type-name{ font-size:.88rem; font-weight:700; color:var(--jwh-navy); text-align:center; }

/* ═══ JOURNEY ════════════════════════════════════════════ */
.jw-journey-track{
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
	counter-reset:jwstep; position:relative;
}
/* connector line behind the steps */
.jw-journey-track::before{
	content:""; position:absolute; top:26px; left:11%; right:11%; height:2px;
	background:repeating-linear-gradient(90deg,var(--jwh-line) 0 7px,transparent 7px 14px);
	z-index:0;
}
.jw-journey-step{ position:relative; z-index:1; text-align:center; padding:0 6px; }
.jw-journey-num{
	display:inline-grid; place-items:center; width:54px; height:54px; margin:0 auto 14px;
	border-radius:50%; background:var(--jwh-navy); color:#4ade80;
	font-weight:900; font-size:1rem; letter-spacing:-.02em;
	border:4px solid var(--jwh-white); box-shadow:0 0 0 1px var(--jwh-line);
}
.jw-journey-icon{ display:block; margin:0 auto 10px; color:var(--jwh-green); }
.jw-journey-icon svg{ width:22px; height:22px; }
.jw-journey-step h3{ margin:0 0 7px; font-size:1.02rem; font-weight:700; color:var(--jwh-navy); }
.jw-journey-step p{ margin:0; font-size:.87rem; line-height:1.6; color:var(--jwh-muted); }
.jw-journey-more{ text-align:center; margin:38px 0 0; }
.jw-journey-more a{ color:var(--jwh-green); font-weight:700; text-decoration:none; font-size:.93rem; }
.jw-journey-more a:hover{ text-decoration:underline; }

/* ═══ BENEFITS ═══════════════════════════════════════════ */
.jw-benefits-v2{ background:var(--jwh-bg); max-width:none; }
.jw-benefits-v2 > *{ max-width:var(--jwh-max); margin-left:auto; margin-right:auto; }
.jw-benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.jw-benefit-card{
	background:var(--jwh-white); border:1px solid var(--jwh-line);
	border-radius:var(--jwh-r); padding:26px 22px;
	transition:transform .18s, box-shadow .18s;
}
.jw-benefit-card:hover{ transform:translateY(-4px); box-shadow:var(--jwh-sh); }
.jw-benefit-icon{
	display:grid; place-items:center; width:46px; height:46px; margin-bottom:15px;
	border-radius:11px; background:var(--jwh-green-lt); color:var(--jwh-green-dk);
}
.jw-benefit-card h3{ margin:0 0 8px; font-size:1rem; font-weight:700; color:var(--jwh-navy); line-height:1.3; }
.jw-benefit-card p{ margin:0; font-size:.87rem; line-height:1.65; color:var(--jwh-muted); }

/* ═══ IMPORT GUIDE CHIPS ═════════════════════════════════ */
.jw-guide-chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.jw-guide-chip{
	display:flex; align-items:center; gap:14px; padding:16px 18px;
	background:var(--jwh-white); border:1px solid var(--jwh-line);
	border-radius:var(--jwh-r); text-decoration:none;
	transition:transform .16s, border-color .16s, box-shadow .16s;
}
.jw-guide-chip:hover{ transform:translateX(4px); border-color:var(--jwh-green); box-shadow:var(--jwh-sh); }
.jw-guide-chip-flag{ font-size:1.9rem; line-height:1; flex-shrink:0; }
.jw-guide-chip-text{ display:flex; flex-direction:column; min-width:0; }
.jw-guide-chip-text strong{ color:var(--jwh-navy); font-size:.94rem; font-weight:700; }
.jw-guide-chip-text small{ color:var(--jwh-green-dk); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

/* ═══ CTA BAND ═══════════════════════════════════════════ */
.jw-cta-band{
	background:linear-gradient(115deg,var(--jwh-navy) 0%,var(--jwh-navy-2) 100%);
	position:relative; overflow:hidden; margin-top:24px;
}
.jw-cta-band::after{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(ellipse 50% 80% at 88% 50%, rgba(31,157,92,.24), transparent 68%);
}
.jw-cta-band-inner{
	position:relative; z-index:1;
	max-width:var(--jwh-max); margin:0 auto; padding:56px 20px;
	display:flex; align-items:center; justify-content:space-between;
	gap:32px; flex-wrap:wrap;
}
.jw-cta-band-copy{ flex:1 1 380px; }
.jw-cta-band-copy h2{
	margin:0 0 8px; color:#fff; font-size:clamp(1.4rem,2.8vw,1.85rem);
	font-weight:800; letter-spacing:-.02em;
}
.jw-cta-band-copy p{ margin:0; color:rgba(255,255,255,.72); font-size:.96rem; line-height:1.6; max-width:520px; }
.jw-cta-band-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ═══ RESPONSIVE ═════════════════════════════════════════ */
@media (max-width:1024px){
	.jw-fcard-grid,
	.jw-benefit-grid,
	.jw-type-grid{ grid-template-columns:repeat(2,1fr); }
	.jw-journey-track{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
	.jw-journey-track::before{ display:none; }
	.jw-guide-chips{ grid-template-columns:repeat(2,1fr); }
	.jw-quick-search{ grid-template-columns:repeat(2,1fr); }
	.jw-qs-submit{ grid-column:1/-1; }
	.jw-stats-strip{ grid-template-columns:repeat(2,1fr); }
	.jw-stat:nth-child(2){ border-right:0; }
}
@media (max-width:640px){
	.jw-section{ padding:52px 16px; }
	.jw-hero-v2{ padding-bottom:76px; }
	.jw-hero-v2-inner{ padding:56px 0 32px; }
	.jw-hero-trust{ gap:12px 20px; }
	.jw-hero-trust li{ flex:1 1 44%; }
	.jw-hero-v2-ctas .jw-cta{ flex:1 1 100%; }
	.jw-quick-search{ grid-template-columns:1fr; margin-bottom:-48px; padding:16px; }
	.jw-stats-strip{ padding-top:80px; gap:8px; }
	.jw-stat{ border-right:0; padding:14px 6px; }
	.jw-fcard-grid,
	.jw-benefit-grid,
	.jw-type-grid,
	.jw-guide-chips{ grid-template-columns:1fr; }
	.jw-journey-track{ grid-template-columns:1fr; gap:28px; }
	.jw-section-head{ flex-direction:column; align-items:flex-start; }
	.jw-cta-band-actions .jw-cta{ flex:1 1 100%; }
}

/* Motion preference */
@media (prefers-reduced-motion:reduce){
	.jw-cta,.jw-fcard,.jw-type-tile,.jw-benefit-card,.jw-guide-chip,
	.jw-fcard-media img,.jw-qs-submit,.jw-section-link{ transition:none!important; }
	.jw-cta:hover,.jw-fcard:hover,.jw-type-tile:hover,
	.jw-benefit-card:hover,.jw-guide-chip:hover{ transform:none!important; }
}

/* Keyboard focus visibility */
.jw-cta:focus-visible,.jw-qs-submit:focus-visible,.jw-fcard-btn:focus-visible,
.jw-type-tile:focus-visible,.jw-guide-chip:focus-visible,.jw-section-link:focus-visible{
	outline:3px solid var(--jwh-green); outline-offset:3px;
}