/* ============================================================================
   Japan Bike Market — sections.css
   ============================================================================ */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:3.2rem; flex-wrap:wrap; }
.sec-head__l{ max-width:60ch; }

/* Listings + filter layout */
.market{ display:grid; grid-template-columns:260px 1fr; gap:2rem; align-items:start; }
.filter-panel{ position:sticky; top:96px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm); }
.filter-panel h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:1.2rem 0 .7rem; }
.filter-panel h4:first-child{ margin-top:0; }
.chipset{ display:flex; flex-wrap:wrap; gap:.5rem; }
.fchip{ font-size:.84rem; padding:.4rem .8rem; border-radius:100px; border:1px solid var(--line-2); transition:.25s; }
.fchip.is-active,.fchip:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }
.filter-range{ display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.86rem; }
.filter-range input{ width:100%; }
.listings{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.listings--2{ grid-template-columns:repeat(2,1fr); }
.market-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; gap:1rem; flex-wrap:wrap; }
.market-toolbar .count{ color:var(--muted); }
.market-toolbar .count b{ color:var(--orange); }

/* Category tiles */
.cats{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.catc{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; display:flex; align-items:flex-end; box-shadow:var(--shadow-sm); }
.catc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.catc:hover img{ transform:scale(1.08); }
.catc::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(20,20,15,.55)); }
.catc__b{ position:relative; z-index:2; padding:1rem; color:#fff; }
.catc__jp{ font-weight:800; }
.catc__n{ font-family:var(--font-sans); font-size:.78rem; color:rgba(255,255,255,.8); }

/* Steps (how it works) */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step; }
.stepc{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.6rem 1.6rem; box-shadow:var(--shadow-sm); }
.stepc__n{ width:44px; height:44px; border-radius:12px; background:var(--grad-orange); color:#fff; display:grid; place-items:center; font-family:var(--font-sans); font-weight:800; font-size:1.2rem; margin-bottom:1rem; box-shadow:var(--shadow-orange); }
.stepc h4{ font-size:1.2rem; margin-bottom:.4rem; }
.stepc p{ color:var(--muted); font-size:.92rem; }
.stepc::after{ content:"→"; position:absolute; right:-1rem; top:50%; color:var(--line-2); font-size:1.4rem; }
.stepc:last-child::after{ display:none; }

/* Services / trust cards */
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.trustc{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.8rem; transition:transform .4s var(--ease), box-shadow .4s; }
.trustc:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.trustc__ic{ width:52px; height:52px; border-radius:14px; background:var(--grad-warm); display:grid; place-items:center; margin-bottom:1.1rem; color:var(--orange-deep); }
.trustc__ic svg{ width:24px; height:24px; stroke:var(--orange-deep); fill:none; stroke-width:1.8; }
.trustc h3{ font-size:1.2rem; margin-bottom:.5rem; }
.trustc p{ color:var(--muted); font-size:.92rem; }

/* Stats band */
.stats{ background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:clamp(2rem,5vw,3.4rem); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.stat{ text-align:center; }
.stat__n{ font-family:var(--font-sans); font-weight:800; font-size:clamp(2.2rem,5vw,3.4rem); color:var(--orange-2); }
.stat__l{ color:rgba(255,255,255,.7); margin-top:.3rem; }

/* Split feature */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.split__media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:5/4; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__list{ margin-top:1.4rem; display:grid; gap:.9rem; }
.split__list li{ display:flex; gap:.8rem; align-items:flex-start; }
.split__list .ck{ width:24px; height:24px; border-radius:8px; background:var(--grad-warm); color:var(--orange-deep); display:grid; place-items:center; font-weight:800; flex:none; }

/* Testimonials */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.review{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-sm); }
.review__stars{ color:var(--amber); letter-spacing:.1em; margin-bottom:.8rem; }
.review__q{ margin-bottom:1.2rem; }
.review__who{ display:flex; align-items:center; gap:.7rem; }
.review__av{ width:42px; height:42px; border-radius:50%; background:var(--grad-orange); }
.review__n{ font-weight:700; } .review__r{ color:var(--muted); font-size:.82rem; }

/* FAQ */
.faq{ max-width:860px; margin-inline:auto; }
.faq__item{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.8rem; box-shadow:var(--shadow-sm); overflow:hidden; }
.faq__q{ width:100%; display:flex; justify-content:space-between; gap:1rem; padding:1.3rem 1.4rem; text-align:left; font-weight:700; }
.faq__q .ico{ color:var(--orange); transition:transform .4s; flex:none; }
.faq__item.is-open .ico{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq__a p{ padding:0 1.4rem 1.3rem; color:var(--muted); }

/* Banner */
.banner{ background:var(--grad-warm); padding:clamp(2.4rem,6vw,4rem) 0; border-bottom:1px solid var(--line); }
.crumb{ font-family:var(--font-sans); font-size:.82rem; color:var(--muted); display:flex; gap:.5rem; margin-bottom:1rem; }
.crumb a:hover{ color:var(--orange); }
.banner h1{ font-size:clamp(2rem,5.5vw,3.8rem); }
.banner h1 .or{ color:var(--orange); }
.banner p{ color:var(--ink-2); max-width:58ch; margin-top:1rem; }

/* Timeline */
.timeline{ position:relative; margin-top:1rem; }
.timeline::before{ content:""; position:absolute; left:7px; top:0; bottom:0; width:2px; background:var(--line-2); }
.tl-item{ position:relative; padding:0 0 2rem 2.2rem; }
.tl-item::before{ content:""; position:absolute; left:0; top:.4rem; width:16px; height:16px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px #ffe3cc; }
.tl-year{ font-family:var(--font-sans); font-weight:800; color:var(--orange); }
.tl-item h4{ font-size:1.15rem; margin:.2rem 0 .3rem; }
.tl-item p{ color:var(--muted); }

/* Service rows */
.srv{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.srvrow{ display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem; align-items:center; padding:1.6rem 1.8rem; border-bottom:1px solid var(--line); transition:background .3s; }
.srvrow:last-child{ border-bottom:0; }
.srvrow:hover{ background:var(--paper); }
.srvrow__n{ font-family:var(--font-sans); font-weight:800; color:var(--orange); font-size:1.2rem; }
.srvrow__t{ font-size:1.2rem; font-weight:700; }
.srvrow__d{ color:var(--muted); font-size:.9rem; }
.srvrow__a{ color:var(--orange); transition:transform .3s; } .srvrow:hover .srvrow__a{ transform:translateX(6px); }

/* News */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin:1.8rem 0; }
.filter{ font-size:.86rem; padding:.5rem 1.1rem; border-radius:100px; border:1px solid var(--line-2); transition:.3s; }
.filter.is-active,.filter:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }
.feature{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:46vh; display:flex; align-items:flex-end; box-shadow:var(--shadow); }
.feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 48%, rgba(20,20,15,.58)); }
.feature__b{ position:relative; z-index:2; padding:clamp(1.4rem,4vw,2.6rem); color:#fff; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.4rem; align-items:start; }
.info-cards{ display:grid; gap:1rem; }
.info-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.6rem; box-shadow:var(--shadow-sm); }
.info-card h4{ color:var(--orange); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem; }
.map{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.map iframe{ width:100%; height:240px; border:0; }
