/* ============================================================================
   JDM Bike Garage — sections.css
   ============================================================================ */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; }
.sec-head__t{ font-family:var(--font-jp); font-weight:900; font-size:clamp(1.9rem,5vw,3.4rem); line-height:1; }
.sec-head__t .mono{ display:block; font-size:.34em; color:var(--neon); letter-spacing:.2em; margin-bottom:.4rem; text-transform:uppercase; }

/* Marquee */
.strip{ border-block:1px solid var(--line); overflow:hidden; white-space:nowrap; padding:.9rem 0; background:var(--black-2); }
.strip__t{ display:inline-flex; gap:2.4rem; animation:slide 22s linear infinite; font-family:var(--font-mono); color:var(--smoke); }
.strip__t b{ color:var(--neon); }

/* Builds grid */
.builds{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }

/* Stats HUD */
.stats{ background:var(--black-2); border-block:1px solid var(--line); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:2.6rem 1.4rem; border-left:1px solid var(--line); position:relative; }
.stat:first-child{ border-left:0; }
.stat__k{ font-family:var(--font-mono); font-size:.66rem; color:var(--smoke); letter-spacing:.1em; }
.stat__n{ font-family:var(--font-tech); font-weight:700; font-size:clamp(2.4rem,6vw,4rem); line-height:1; margin-top:.4rem; }
.stat__n .u{ color:var(--neon); font-size:.42em; }

/* Process (tuning flow) */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.flowc{ border:1px solid var(--line); background:var(--gray); padding:1.6rem; }
.flowc__n{ font-family:var(--font-mono); color:var(--neon); font-size:.8rem; }
.flowc h4{ font-family:var(--font-tech); font-weight:700; font-size:1.2rem; margin:.6rem 0 .4rem; text-transform:uppercase; }
.flowc p{ color:var(--muted); font-size:.88rem; }

/* Split feature */
.split{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.split__media{ position:relative; overflow:hidden; min-height:56vh; }
.split__media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.1); }
.split__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,0,51,.22), transparent 55%); }
.split__body{ padding:clamp(1.8rem,4vw,3.6rem); background:var(--gray); display:flex; flex-direction:column; justify-content:center; }
.split__body h2{ font-family:var(--font-jp); font-weight:900; font-size:clamp(1.7rem,4vw,2.8rem); margin:1rem 0; }
.split__specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1.4rem; width:100%; max-width:100%; }
.split__specs div{ border:1px solid var(--line); padding:.75rem .85rem; display:flex; justify-content:space-between; gap:.6rem; font-family:var(--font-mono); font-size:.78rem; min-width:0; }
.split__specs span:first-child{ color:var(--smoke); flex:none; }
.split__specs span:last-child{ color:var(--neon); text-align:right; white-space:nowrap; }

/* Testimonials */
.quotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.qcard{ border:1px solid var(--line); background:var(--gray); padding:2rem; }
.qcard__q{ font-size:1.05rem; margin-bottom:1.2rem; }
.qcard__who{ display:flex; align-items:center; gap:.8rem; font-family:var(--font-mono); }
.qcard__n{ color:var(--white); } .qcard__r{ color:var(--neon); font-size:.8rem; }

/* FAQ */
.faq{ width:100%; max-width:none; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; display:flex; justify-content:space-between; gap:1rem; padding:1.4rem 0; text-align:left; font-weight:700; font-size:clamp(.95rem,1.6vw,1.08rem); font-family:var(--font-jp); letter-spacing:.02em; }
.faq__q .n{ font-family:var(--font-mono); color:var(--neon); margin-right:1rem; }
.faq__q .ico{ color:var(--neon); font-family:var(--font-mono); transition:transform .4s; }
.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-bottom:1.4rem; color:var(--muted); }

/* Banner */
.banner{ position:relative; padding:calc(72px + 4rem) 0 3.4rem; border-bottom:1px solid var(--line); overflow:hidden; }
.banner__bg{ position:absolute; inset:0; background:radial-gradient(60% 90% at 80% 0%, rgba(255,0,51,.16), transparent 55%); }
.banner__in{ position:relative; z-index:2; }
.crumb{ font-family:var(--font-mono); font-size:.72rem; color:var(--smoke); display:flex; gap:.6rem; margin-bottom:1rem; }
.crumb a:hover{ color:var(--neon); }
.banner h1{ font-family:var(--font-jp); font-weight:900; font-size:clamp(2.2rem,6vw,4.4rem); line-height:1; }
.banner h1 .mono{ display:block; font-size:.3em; color:var(--neon); letter-spacing:.14em; margin-bottom:.6rem; }
.banner p{ color:var(--muted); max-width:56ch; margin-top:1rem; }

/* Crew */
.crew{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.crewc{ border:1px solid var(--line); background:var(--gray); }
.crewc__img{ aspect-ratio:1/1; overflow:hidden; }
.crewc__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15); transition:filter .5s, transform .8s var(--ease); }
.crewc:hover .crewc__img img{ filter:none; transform:scale(1.05); }
.crewc__b{ padding:1.1rem; }
.crewc__n{ font-family:var(--font-tech); font-weight:700; font-size:1.1rem; text-transform:uppercase; }
.crewc__r{ font-family:var(--font-mono); color:var(--neon); font-size:.76rem; }

/* Timeline */
.tl{ border-top:1px solid var(--line); }
.tlrow{ display:grid; grid-template-columns:auto 1fr; gap:2rem; padding:1.6rem 0; border-bottom:1px solid var(--line); }
.tlrow__y{ font-family:var(--font-mono); color:var(--neon); font-size:1.1rem; }
.tlrow h4{ font-family:var(--font-tech); font-weight:700; font-size:1.2rem; text-transform:uppercase; margin-bottom:.3rem; }
.tlrow p{ color:var(--muted); }

/* Service rows */
.srv{ border-top:1px solid var(--line); }
.srvrow{ display:grid; grid-template-columns:auto auto 1fr auto; gap:1.4rem; align-items:center; padding:1.6rem 0; border-bottom:1px solid var(--line); transition:background .4s, padding-inline .4s; }
.srvrow:hover{ background:linear-gradient(90deg, rgba(255,0,51,.08), transparent); padding-inline:1rem; }
.srvrow__n{ font-family:var(--font-mono); color:var(--smoke); }
.srvrow__code{ font-family:var(--font-mono); font-size:.72rem; color:var(--neon); border:1px solid var(--line-2); padding:.3rem .6rem; }
.srvrow__t{ font-family:var(--font-jp); font-weight:900; font-size:1.3rem; }
.srvrow__d{ color:var(--muted); font-size:.88rem; }
.srvrow__a{ color:var(--neon); transition:transform .4s; } .srvrow:hover .srvrow__a{ transform:translateX(8px); }

/* Log/news */
.logs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin:1.8rem 0; }
.filter{ font-family:var(--font-mono); font-size:.78rem; padding:.5rem 1rem; border:1px solid var(--line); transition:.3s; }
.filter.is-active,.filter:hover{ background:var(--neon); border-color:var(--neon); color:#0a0a0a; }
.feature{ position:relative; overflow:hidden; min-height:50vh; display:flex; align-items:flex-end; border:1px solid var(--line); }
.feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.68) contrast(1.05); }
.feature__b{ position:relative; z-index:2; padding:clamp(1.5rem,4vw,3rem); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--line); }
.contact-grid > *{ padding:clamp(1.6rem,4vw,3rem); }
.contact-grid > *:first-child{ border-right:1px solid var(--line); }
.info dt{ font-family:var(--font-mono); font-size:.72rem; color:var(--neon); margin-top:1.4rem; letter-spacing:.1em; }
.info dd{ margin-top:.3rem; }
.map{ border:1px solid var(--line); margin-top:1.6rem; }
.map iframe{ width:100%; height:260px; border:0; filter:grayscale(1) invert(.92) contrast(.9) hue-rotate(320deg); }