/* Sections: the Camaro hero, the ticker, car cards, one car, the application, the loan
   calculator, Capital One, booking, and the smaller pages. */

/* Home hero: Jhon drives the Camaro in, then the lines appear one by one (Giovany liked this
   on the current site). Light ground and a checkered floor, in BCG's colors. */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #ececee 62%, #d9dadc 100%); min-height: 600px; }
.hero .floor { position: absolute; left: -20%; right: -20%; bottom: -10px; height: 46%; transform: perspective(600px) rotateX(58deg); transform-origin: bottom;
  background: repeating-conic-gradient(var(--black) 0 25%, var(--white) 0 50%) 0 0 / 120px 120px; opacity: .9; -webkit-mask: linear-gradient(0deg, #000 30%, transparent); mask: linear-gradient(0deg, #000 30%, transparent); }
.hero .wrap { position: relative; isolation: auto; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; min-height: 600px; gap: 20px; }
.hero .driver { position: relative; z-index: 2; align-self: end; margin-bottom: 8%; animation: drive 1.6s cubic-bezier(.16,.84,.3,1) both; }
.hero .driver img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 20px rgba(0,0,0,.28)); } /* the photo is a transparent cut-out */
.hero .text { position: relative; z-index: 3; text-align: right; padding: 40px 0; }
.hero .l1 { font: 300 clamp(24px, 2.6vw, 40px)/1.1 var(--body); margin: 0; }
.hero .l2 { font-size: clamp(38px, 4.6vw, 74px); margin: 10px 0 0; }
.hero .l2 span { color: var(--red); }
.hero .l3 { font: 400 clamp(18px, 1.6vw, 24px)/1.3 var(--body); margin: 16px 0 26px; }
.hero .row { justify-content: flex-end; }
.hero .reveal { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hero .reveal:nth-child(1) { animation-delay: 1.1s; } .hero .reveal:nth-child(2) { animation-delay: 1.45s; }
.hero .reveal:nth-child(3) { animation-delay: 1.8s; } .hero .reveal:nth-child(4) { animation-delay: 2.1s; }
@keyframes drive { from { transform: translateX(-110%); } 70% { transform: translateX(3%); } to { transform: translateX(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero .driver, .hero .reveal { animation: none; } }
.row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Red ticker under the hero */
.ticker { background: var(--red); color: var(--white); overflow: hidden; white-space: nowrap; border-block: 3px solid var(--black); }
.ticker .track { display: inline-flex; gap: 46px; padding: 14px 0; animation: slide 38s linear infinite; font: 400 20px var(--display); text-transform: uppercase; }
.ticker .track span { display: inline-flex; align-items: center; gap: 46px; } .ticker .track span::after { content: ""; width: 10px; height: 10px; background: var(--white); transform: rotate(45deg); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker .track { animation: none; } }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: -1px; }
.tiles a { background: var(--white); border-radius: 6px; padding: 22px; text-decoration: none; display: grid; gap: 4px; box-shadow: var(--shadow); border-top: 4px solid var(--black); transition: transform .2s; }
.tiles a:hover { transform: translateY(-3px); }
.tiles a.c1 { border-top-color: var(--red); }
.tiles b { font: 400 22px/1 var(--display); text-transform: uppercase; } .tiles span { color: var(--grey); font-size: 15px; }

/* Car cards on white */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.chips button, .chips select, .chips input { font: 600 15px var(--body); background: var(--white); color: var(--ink); border: 1px solid var(--line); padding: 10px 14px; border-radius: 4px; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.chips input { cursor: text; min-width: 240px; flex: 1; max-width: 360px; }
.count { color: var(--grey); margin: 0 0 14px; font-weight: 600; }
.cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.car { background: var(--white); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr; transition: transform .2s, box-shadow .2s; }
.car:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(0,0,0,.55); }
.car .ph { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--line); }
.car .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.1,1); }
.car:hover .ph img { transform: scale(1.05); }
.save { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.save[aria-pressed="true"] { color: var(--red); } .save[aria-pressed="true"] .icon { fill: var(--red); }
.car .body { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.car h3 { font: 700 18px/1.25 var(--body); margin: 0; } .car h3 a { text-decoration: none; } .car h3 small { display: block; font-weight: 500; font-size: 14px; color: var(--grey); }
.price { font: 800 26px/1 var(--body); color: var(--red); } .price small { display: block; font: 500 12px var(--body); color: var(--grey); margin-top: 4px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--grey); }
.carfax { display: inline-flex; align-items: center; gap: 6px; font: 800 13px var(--body); color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; padding: 5px 9px; text-decoration: none; justify-self: start; }
.carfax:hover { background: var(--ink); color: var(--white); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.acts .btn { padding: 11px 8px; font-size: 13.5px; }
.note { font-size: 13px; color: var(--grey); margin-top: 20px; }

/* One car */
.carpage { display: grid; grid-template-columns: 1.45fr 1fr; gap: 32px; align-items: start; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 6px; }
.panel { background: var(--white); border-radius: 6px; box-shadow: var(--shadow); padding: 24px; display: grid; gap: 14px; }
.panel h1 { font: 800 clamp(24px, 2.4vw, 34px)/1.15 var(--body); margin: 0; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 15px; border-top: 1px solid var(--line); padding-top: 14px; }
.specs dt { color: var(--grey); } .specs dd { margin: 0; font-weight: 600; }
.stack { display: grid; gap: 8px; }
.fine { font-size: 13px; color: var(--grey); }

/* Capital One: straight to the action */
.qualify-card { background: var(--red); color: var(--white); border-radius: 8px; padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; box-shadow: var(--shadow); }
.qualify-card h2 { font-size: clamp(28px, 3.2vw, 46px); }
.qualify-card p { margin: 10px 0 0; font-size: 17px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.35); counter-increment: s; }
.steps li::before { content: counter(s); font: 400 28px/1 var(--display); }
.steps strong { display: block; } .steps span { opacity: .92; font-size: 15px; }
.steps.dark li { border-color: var(--line); } .steps.dark li::before { color: var(--red); }

/* Forms: application, contact, brokers */
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
form.card, .card { background: var(--white); border-radius: 6px; box-shadow: var(--shadow); padding: clamp(20px, 3vw, 32px); }
form.card { display: grid; gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
form.card label { display: grid; gap: 5px; font: 600 14px var(--body); }
form.card input, form.card select, form.card textarea { font: 400 16px var(--body); background: var(--white); color: var(--ink); border: 1px solid #c9cbd0; padding: 12px; border-radius: 4px; width: 100%; }
form.card input:focus, form.card select:focus, form.card textarea:focus { outline: 2px solid var(--red); border-color: transparent; }
form.card .check { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-weight: 400; font-size: 14px; color: var(--grey); }
form.card .check input { width: auto; }
.creditapp { padding: 0; overflow: hidden; } .creditapp .placeholder { margin: 24px; } .creditapp iframe { width: 100%; height: 1150px; border: 0; display: block; }
.apply { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; } fieldset[hidden] { display: none; }
legend { font: 400 22px var(--display); text-transform: uppercase; margin-bottom: 6px; }
.lock { display: flex; gap: 10px; align-items: flex-start; background: var(--paper); border-radius: 4px; padding: 12px; font-size: 14px; color: var(--grey); }

/* Loan calculator */
.calc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
.field { display: grid; gap: 8px; } .field b { font: 700 15px var(--body); display: flex; justify-content: space-between; }
.field output { color: var(--red); font-weight: 800; }
input[type="range"] { accent-color: var(--red); width: 100%; }
.terms { display: flex; gap: 6px; flex-wrap: wrap; } .terms button { flex: 1; font: 700 15px var(--body); padding: 10px; border: 1px solid #c9cbd0; background: var(--white); border-radius: 4px; cursor: pointer; }
.terms button[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.result { background: var(--black); color: var(--white); border-radius: 6px; padding: 28px; display: grid; gap: 12px; position: sticky; top: 80px; }
.result .big { font: 400 clamp(46px, 5vw, 72px)/1 var(--display); } .result .big small { font: 500 18px var(--body); color: #c9cacc; }
.result dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: 15px; } .result dt { color: #c9cacc; } .result dd { margin: 0; font-weight: 700; }
.result .fine { color: #a9abaf; }

/* Booking, reviews, media, FAQ */
#book { scroll-margin-top: 70px; } /* clear the pinned menu after "Test drive" jumps here */
.calendar { background: var(--white); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; min-height: 640px; }
.calendar iframe { width: 100%; min-height: 640px; border: 0; display: block; }
.socials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.socials a { background: var(--white); border-radius: 6px; box-shadow: var(--shadow); padding: 20px; text-decoration: none; display: grid; gap: 4px; border-top: 4px solid var(--red); }
.socials b { font: 400 24px var(--display); text-transform: uppercase; } .socials span { color: var(--grey); font-size: 15px; }
.yt { max-width: 900px; margin: 0 auto; aspect-ratio: 16/9; background: var(--black); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); } .yt iframe { width: 100%; height: 100%; border: 0; display: block; }
.feeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 36px; align-items: start; }
.feeds h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 12px; } .feed { min-height: 200px; } .feed blockquote { margin: 0 !important; }
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.video { aspect-ratio: 16/9; background: var(--white); border: 2px dashed #c9cbd0; border-radius: 6px; display: grid; place-items: center; color: var(--grey); text-align: center; padding: 16px; }
.faq details { background: var(--white); border-radius: 6px; padding: 18px 20px; margin-bottom: 10px; box-shadow: var(--shadow); }
.faq summary { font: 700 18px/1.35 var(--body); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; color: var(--red); font-size: 26px; line-height: 1; } .faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--grey); max-width: 72ch; margin: 10px 0 0; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 0; font-size: 16px; } .facts dt { color: var(--grey); } .facts dd { margin: 0; font-weight: 600; }
.mosaic { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 10px; }
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: 6px; background: var(--line); }
.mosaic figure:first-child { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .mosaic figure:hover img { transform: scale(1.04); }
.mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 14px 10px; font: 600 14px var(--body); color: var(--white); background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); }

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 0; } .hero .driver { margin-bottom: 2%; } .hero .text { text-align: left; padding: 30px 0 0; order: -1; } .hero .row { justify-content: flex-start; } .hero .floor { height: 30%; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .carpage, .split, .calc, .qualify-card { grid-template-columns: 1fr; } .result { position: static; }
  .grid2 { grid-template-columns: 1fr; }
  .socials, .videos { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 180px); } .mosaic figure:first-child { grid-column: span 2; grid-row: auto; }
}

/* Resources: free guides, no forms. Readable measure, sources at the end, share buttons. */
.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.guide-card { background: var(--white); border-radius: 6px; box-shadow: var(--shadow); padding: 22px; text-decoration: none; display: grid; gap: 8px; border-top: 4px solid var(--red); transition: transform .2s; }
.guide-card:hover { transform: translateY(-3px); }
.guide-card b { font: 800 20px/1.25 var(--body); } .guide-card span { color: var(--grey); } .guide-card i { font-style: normal; font: 700 14px var(--body); color: var(--red); }
.article { background: var(--white); border-radius: 6px; box-shadow: var(--shadow); padding: clamp(22px, 4vw, 48px); max-width: 820px; }
.article .lede { font-size: 19px; color: var(--grey); margin: 0 0 8px; }
.article h2 { font: 800 clamp(21px, 2vw, 26px)/1.25 var(--body); margin: 34px 0 10px; }
.article p, .article li { font-size: 17px; line-height: 1.7; max-width: 68ch; }
.article ul { padding-left: 20px; }
.article table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 16px; } .article td, .article th { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; }
.sources { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--grey); } .sources a { word-break: break-word; }
.share { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.article-wrap { display: grid; grid-template-columns: minmax(0, 820px) 1fr; gap: 28px; align-items: start; }
.article-wrap aside { position: sticky; top: 80px; display: grid; gap: 12px; }
.recall-out { margin-top: 16px; display: grid; gap: 10px; }
.recall-out .item { border: 1px solid var(--line); border-radius: 4px; padding: 14px; } .recall-out .item b { display: block; }
@media (max-width: 960px) { .article-wrap { grid-template-columns: 1fr; } .article-wrap aside { position: static; } }