/* Consolidated main.css - generated from figma-styles.css + styles.css
    NOTE: This is a direct concatenation for pruning; duplicates may remain but
    the file now contains all current rules required by the site. Maintain
    this file going forward. */

/* --- Begin: figma-styles.css content --- */
.site-footer .social-icons a.facebook .image-wrapper{filter:none !important}
.site-footer .social-icons a.facebook .image-wrapper img{filter:none !important}
/* LinkedIn override: disable wrapper inversion so SVG white square + black glyph render correctly */
.site-footer .social-icons a.linkedin .image-wrapper{filter:none !important}
.site-footer .social-icons a.linkedin .image-wrapper img{filter:none !important}
/* Figma style-guide derived styles (moved to project root)
    Includes translated classes from style-guide/css-styles.txt
*/

:root{
   --sg-white:#FFFFFF;
   --sg-black:#101010;
   --sg-muted:#505050;
   --sg-muted-2:#949494;
   --sg-bg-1:#F8F8F8;
   --sg-bg-2:#F0F0F0;
   --sg-card-radius:6px;
   --max-width:1100px;
   --site-gutter:12px;
   --brand-blue:#0066FF;
   --brand-gold:#c9b37a;
   --font-ui: "proxima-nova", Inter, Roboto, -apple-system, system-ui, 'Segoe UI', Arial, sans-serif;
   --font-sans: Inter, Roboto, -apple-system, system-ui, 'Segoe UI', Arial, sans-serif;
   --font-serif: 'DM Serif Display', Georgia, serif;
   --font-condensed: "proxima-nova-condensed", Oswald, Inter, sans-serif;

   /* precise typographic tuning */
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;

   --h1-size: 64px;
   --h2-size: 28px;
   --h3-size: 20px;
   --sg-muted:#3f3f3f;
   --body-size: 15px;

   --h1-letter: -0.02em;
   --h2-letter: -0.01em;
   --lead-letter: 0em;
   --body-letter: 0.01em;
   /* card title divider controls */
   --card-title-divider-width: 56px;
   --card-title-divider-height: 3px;
   --card-title-divider-color: rgba(255,255,255,0.95);
   --card-title-divider-gap: 10px;
   /* overlay height to keep title baselines aligned */
   --card-overlay-height: 140px;
      /* Fluid type scale tokens */
      --fs-hero: clamp(40px, 6.2vw, 64px);
      --fs-h2: clamp(24px, 3.4vw, 42px);
      --fs-h3: clamp(20px, 2.2vw, 28px);
      --fs-lead: clamp(16px, 1.6vw, 18px);
      --fs-body: 15px;
      --measure: 64ch;
      --section-vertical: 56px;
}
/* Final targeted overrides to ensure mobile hero caption panel wins over earlier rules */
@media (max-width:900px) {
   .sell-hero-banner .hero-caption.bottom-left,
   .sell-hero-banner .hero-caption {
      left: 50% !important;
      top: 50% !important;
      bottom: auto !important;
      transform: translate(-50%,-50%) !important;
      /* narrower, constrained width on mobile so panel isn't too wide */
      width: min(86%, 680px) !important;
      max-width: 86% !important;
      padding: 14px 20px !important;
      background: rgba(0,0,0,0.42) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
      backdrop-filter: blur(6px) saturate(120%) !important;
      -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
      border-radius: 10px !important;
      z-index: 9999 !important;
      text-align: center !important;
      display: block !important;
   }
}


/* Global container to standardize max-width and horizontal gutters */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--site-gutter)}

/* Enable smooth scrolling for in-page anchor navigation */
html { scroll-behavior: smooth; }

/* Font mapping: use Inter/Roboto as fallbacks for Proxima Nova
   Body: Inter (regular), Headings: Inter (various weights);
   Hero titles: DM Serif Display (regular) */
body{font-family:var(--font-sans);font-weight:400;color:var(--sg-black);font-size:var(--fs-body);line-height:1.55;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Headings hierarchy mapped to live site weights */
h1{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-hero);margin:0;letter-spacing:var(--h1-letter);line-height:1.03}
h2{font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:var(--fs-h2);margin:0;letter-spacing:var(--h2-letter);line-height:1.08}
h3{font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:var(--fs-h3);margin:0;line-height:1.12}
h1{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-hero);margin:0;letter-spacing:var(--h1-letter);line-height:1.03}
h2{font-family:var(--font-condensed);font-weight:var(--fw-semibold);font-size:var(--fs-h2);margin:0;letter-spacing:-0.01em;line-height:1.08}
h3{font-family:var(--font-condensed);font-weight:var(--fw-medium);font-size:var(--fs-h3);margin:0;letter-spacing:-0.01em;line-height:1.12}

/* Measure constraint for improved readable line-length */
.how-inner, .faq-inner { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.curated-text { max-width: var(--measure); }
.why-item p { max-width: var(--measure); margin: 0; }

/* Slight heading tone adjustments */
.muted { color: var(--sg-muted); }
h4{font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:var(--lead-size);margin:0}
p,button,input,select{font-family:var(--font-sans);font-weight:400}

/* Hero title uses serif display font with lighter weight per style guide */
.hero-caption h1{font-family:var(--font-serif);font-weight:400}

/* ensure Proxima-referencing components get the fallback */
.tertiary-btn,.filter-btn,.view-label{font-family:var(--font-ui);font-weight:400}

/* Restored final mobile override: center caption and match desktop panel */
@media (max-width:900px){
   .sell-hero-banner .hero-caption.bottom-left,
   .sell-hero-banner .hero-caption{
      left:50% !important;
      top:50% !important;
      bottom:auto !important;
      transform:translate(-50%,-50%) !important;
      width: auto !important;
      max-width:70% !important;
      padding:14px 20px !important;
      background: rgba(0,0,0,0.42) !important;
      box-shadow: 0 8px 30px rgba(0,0,0,0.35) !important;
      backdrop-filter: blur(6px) saturate(120%) !important;
      -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
      border-radius:10px !important;
      z-index:99999 !important;
      text-align:center !important;
      display:block !important;
   }
}

/* Hero tweaks to match figma export */
.hero-inner{border-radius:0; position:relative}
.hero-inner::before{
   content: "";
   position:absolute;left:0;right:0;bottom:0;height:160px;
   background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
   pointer-events:none;
   .why-item{background:transparent;padding:14px;border-radius:8px;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,opacity .28s ease;opacity:0;transform:translateY(10px)}
   .why-item.in-view{opacity:1;transform:none}
}
.hero-caption{position:absolute;left:calc((100% - var(--max-width))/2 + var(--site-gutter));bottom:34px;color:var(--sg-white);z-index:3}
   .why-sbx h3{font-size:28px;font-weight:700;margin-bottom:12px;line-height:1.12;text-align:center}
   .why-sbx .muted{font-size:16px;color:var(--sg-muted);max-width:64ch;margin:0 auto 18px;text-align:center}
.hero-year{font-family:Inter, sans-serif;font-weight:700;font-size:18px;opacity:0.9;margin-bottom:6px}
.hero-caption h1{font-size:64px;margin:0;letter-spacing:1px;margin-bottom:6px}
.hero-caption p{margin:0 0 12px 0;color:rgba(255,255,255,0.9)}
.hero-caption .btn-outline{background:var(--sg-white);color:var(--sg-black);border:0;padding:10px 14px;border-radius:4px}

/* Active nav link */
.nav-links a.active{color:var(--brand-gold);font-weight:700}

/* About page specific typographic tuning to match live site */
.page-intro .container{max-width:980px;margin:0 auto;padding:0 18px}
.page-intro .container{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center}
.page-intro .intro-left{}
.page-intro .intro-right{}
.page-intro .intro-left{grid-column:1/-1;text-align:center}
.page-intro .intro-body{grid-column:1/-1;margin-top:18px}
.page-intro h1{font-family:var(--font-sans);font-weight:400;font-size:clamp(28px,3.2vw,44px);line-height:1.08;margin:0 0 10px;text-transform:none;letter-spacing:0;color:var(--sg-black)}
.page-intro h1::after{content:"";display:block;width:48px;height:3px;background:var(--brand-gold);margin-top:12px;border-radius:2px;margin-left:auto;margin-right:auto}
.page-intro .intro-left,
.page-intro .intro-body { text-align: center; }
.page-intro .intro-body p { margin-left: 0; margin-right: 0; }

/* Ensure intro paragraphs span the container and are centered */
.page-intro p,
.page-intro .muted {
   font-size: 18px;
   line-height: 1.6;
   color: var(--sg-muted);
   max-width: none;
   width: 100%;
   text-align: center;
   margin: 0 0 18px;
}

/* Ensure single-column pages (Contact/About) center their intro content */
.page-intro .container h1,
.page-intro .container .muted,
.page-intro .container p {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

/* Contact page tweaks: more space below header, tighter gap between
    title and intro text (scoped to contact page only) */
.contact-page .page-intro{padding-top:56px;padding-bottom:20px}
.contact-page .page-intro .intro-left h1{margin-bottom:6px}
.contact-page .page-intro .intro-body{margin-top:8px}

/* About page: same tightened spacing as Contact page; slightly tighter for gutters */
.about-page .page-intro{padding-top:36px;padding-bottom:14px}
.about-page .page-intro .intro-left h1{margin-bottom:6px}
.about-page .page-intro .intro-body{margin-top:8px}
/* Narrow the empty right column on About to reduce side whitespace */
.about-page .page-intro .container{grid-template-columns:1fr 260px;gap:24px}

/* Add clear spacing between the intro band and the following content (forms/cards) */
.page-intro + .content {
   padding-top: 40px;
}

/* Small extra breathing room for card wrappers immediately after intro */
.page-intro + .content .sell-card,
.page-intro + .content .sell-card--full {
   margin-top: 8px;
}

/* Close misplaced media block */
@media (max-width:900px){
   .page-intro .container{grid-template-columns:1fr;gap:18px}
   /* removed grid-column:1 at this breakpoint to preserve original flow on mobile */
}

/* Tighter mobile spacing for the Curated section to avoid large empty "swamp" */
@media (max-width:640px){
   .curated-section{padding:18px 0}
   .curated-grid{padding:0 12px;gap:16px}
   .curated-text h3{font-size:20px}
   .curated-text .muted{font-size:15px}
   .curated-image img{height:160px;border-radius:8px}
   /* Mobile: place the curated image above the text for better vertical flow */
   .curated-grid{display:flex;flex-direction:column-reverse;gap:12px}
   .curated-image{order:1}
   .curated-text{order:2}
}
/* Responsive nav and mobile menu */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px}
.nav .logo img{height:34px}
.nav .main-links{display:block}

/* Sell form radio/fieldset fixes: ensure radios display inline and are touch-friendly on mobile */
.sell-form-form fieldset{display:flex;flex-direction:row;gap:12px;align-items:center;border:0;padding:0;margin:0}
.sell-form-form fieldset label{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--sg-black)}
.sell-form-form input[type="radio"]{width:20px;height:20px;margin:0;padding:0;accent-color:var(--brand-gold)}

@media (max-width:480px){
   .sell-form-form fieldset{justify-content:center;gap:18px}
   .sell-form-form fieldset label{font-size:18px}
}
.nav-toggle{display:none;background:none;border:0;font-size:24px;line-height:1;padding:6px 8px;cursor:pointer;color:var(--sg-muted-2);position:relative;z-index:60}
.nav-toggle i{font-size:22px;display:inline-block;line-height:1;color:var(--sg-muted-2)}
.nav-toggle .fa-solid{font-size:22px}

@media (max-width:900px){
   .nav .main-links{display:none;position:absolute;left:0;right:0;top:64px;background:var(--sg-white);padding:12px 18px;border-bottom:1px solid rgba(0,0,0,0.06);z-index:30}
   .nav .main-links.show{display:block}
   .nav-links{display:flex;flex-direction:column;gap:8px;padding:0;margin:0}
   .nav-links li{list-style:none}
   .nav-toggle{display:inline-block}
}

/* Mobile-first breakpoint tokens (align with Bootstrap) */
/* sm >=576px, md >=768px, lg >=992px, xl >=1200px, xxl >=1400px */
@media (max-width:575px){
   :root{--fs-h2:clamp(20px,4.2vw,28px)}
}
@media (min-width:576px) and (max-width:767px){
   :root{--fs-h2:clamp(22px,3.4vw,30px)}
}
@media (min-width:768px) and (max-width:991px){
   :root{--fs-h2:clamp(24px,3.0vw,34px)}
}
   .page-intro h1{font-size:clamp(22px,6vw,32px)}


/* Make About intro and the following lead section share the same gray background (bleed) */
.page-intro, .page-intro + .alex-lead-section {
   background: #f3f3f3;
   padding: 36px 0;
}

/* Card image overlay and caption look */
.card-media{position:relative;overflow:hidden;border-radius:8px;background-size:cover;background-position:center center;background-repeat:no-repeat;aspect-ratio:4/3;min-height:320px}
.card{display:flex;flex-direction:column;height:100%;min-height:350px}
.card:focus{outline:3px solid rgba(0,102,255,0.12);outline-offset:4px}
.card-media::after{
   content:"";position:absolute;left:0;right:0;bottom:0;height:60%;
   /* stronger overlay for consistent contrast across images */
   background:linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.85) 100%);
   pointer-events:none;z-index:1;
}
.card-overlay{position:absolute;left:20px;right:20px;bottom:20px;color:var(--sg-white);z-index:2;padding:10px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.card-overlay .overlay-meta{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.card-overlay .year{font-weight:700;font-size:15px;color:rgba(255,255,255,0.98)}
.card-overlay .make{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.92)}
.card-title{font-size:22px;margin:0 0 8px;color:var(--sg-white);font-weight:var(--fw-bold);text-shadow:0 2px 6px rgba(0,0,0,0.45);text-transform:uppercase;position:relative}
.card-title::after{content:"";display:block;width:var(--card-title-divider-width);height:var(--card-title-divider-height);background:var(--card-title-divider-color);margin-top:var(--card-title-divider-gap);border-radius:2px}
.card-subtitle{font-size:12px;letter-spacing:0.6px;color:rgba(255,255,255,0.9);text-transform:uppercase;margin-bottom:8px}
.card-desc{margin:0;color:rgba(255,255,255,0.95);font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis}
.card-overlay .overlay-meta .year, .card-overlay .overlay-meta .make{text-shadow:0 1px 3px rgba(0,0,0,0.45)}

/* Sold row under the card (separated by a thin divider) */
.sold-row{border-top:1px solid rgba(0,0,0,0.06);display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff;min-height:36px}
.old .sold-row{display:none}
.sold-row .price{font-weight:700;color:var(--sg-black);font-size:15px;font-family:var(--font-sans);letter-spacing:0;-webkit-font-smoothing:antialiased}
.sold-row .country{color:var(--sg-muted-2);font-size:13px;display:flex;align-items:center;gap:8px}
.sold-row .flag{width:18px;height:auto;margin-left:6px}

/* Hide legacy fav element if present */
.card .fav{display:none}

/* Card grid sizing — increase card size to match live results */
.card-grid{box-sizing:border-box;display:flex;justify-content:center;align-items:flex-start;padding:36px 0;background:transparent;width:100vw}
.card-panel{background:#ffffff;padding:20px 24px;border-radius:10px;box-shadow:none;box-sizing:border-box;margin:0 auto;flex:0 0 auto}
.card-wrapper{display:flex;gap:28px;justify-content:center;align-items:flex-start}
.card-grid-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
.card-col{display:flex;flex-direction:column;gap:28px;width:360px}
.card{display:flex;flex-direction:column;height:100%;min-height:350px;background:#ffffff;border-radius:8px;overflow:hidden}
.card-media{position:relative;overflow:hidden;border-top-left-radius:8px;border-top-right-radius:8px;background-size:cover;background-position:center center;background-repeat:no-repeat;aspect-ratio:4/3;min-height:320px}
.card-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

@media (max-width:1200px){
   .card-wrapper{gap:20px}
   .card-grid-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
   .card-col{width:48%}
}
@media (max-width:900px){

/* Mobile: stack the alex image above the quote and render the quote in a white card
    to match the provided mobile screenshot (image on top, quote in card below). */
@media (max-width:700px){
   .alex-section .alex-grid{grid-template-columns:1fr !important;gap:18px !important}
   .alex-section .alex-image{position:relative}
   .alex-section .alex-image img{display:block;width:100%;height:auto;border-radius:8px}
   .alex-section .alex-text{margin:0}
   .alex-section .alex-text blockquote{
      background: #fff;
      padding:18px 16px;
      border-radius:8px;
      border-left:4px solid #d6d6d6;
      box-shadow:0 10px 24px rgba(4,14,27,0.06);
      margin:0 6px;
   }
   .alex-section .alex-text blockquote p{font-size:16px;line-height:1.45;color:var(--sg-muted);font-family:'DM Serif Display', serif;margin:0 0 12px}
   .alex-section .alex-text blockquote footer{font-size:14px;margin-top:8px;color:var(--sg-black)}
}
   .card-wrapper{flex-direction:column;align-items:center}
   .card-grid-inner{grid-template-columns:1fr}
   .card-col{width:100%}
}
@media (max-width:700px){
   .card-grid-inner{grid-template-columns:1fr;gap:18px}
   .card-grid{padding:24px 0}
   .card-title{font-size:18px}
   .card-desc{font-size:13px}
   :root{--card-title-divider-width:40px}
   :root{--card-overlay-height:120px}
}

/* Sold heading inside the card-grid should span full grid width and align with other sections */
.card-panel .sold-heading{width:100%;text-align:center;margin-top:28px;margin-bottom:32px;padding:0 12px}
.card-panel .sold-heading h2{margin:0;font-size:28px;color:var(--sg-black);font-weight:700}

/* -----------------------------
    Why SBX section improvements
    - Constrain measure, strengthen heading, improve rhythm
    - 3-column grid with responsive 2/1 breakpoints
    - Hover/focus affordance, reduced-motion safe
    ----------------------------- */
.why-sbx{padding:28px 0}
.why-sbx .how-inner{max-width:var(--max-width);margin:0 auto;padding:0 12px}
.why-sbx h3{font-size:28px;font-weight:700;margin-bottom:12px;line-height:1.12}
.why-sbx .muted{font-size:16px;color:var(--sg-muted);max-width:64ch;margin-bottom:18px}
.why-sbx .how-inner > p { text-align: center; margin-top: 22px; }
.btn-outline-gold{display:inline-block;margin:0 auto}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:20px;align-items:start}
.why-item{background:transparent;padding:14px;border-radius:8px;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease}
.why-item h4{margin:0 0 10px;font-size:18px;color:var(--sg-black)}
.why-item p{font-size:15px;line-height:1.6;color:var(--sg-muted);max-width:40ch}

/* subtle hover/focus lift to indicate separable units; safe-fallback for reduced-motion */
.why-item:focus-within, .why-item:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(4,14,27,0.06)}
@media (prefers-reduced-motion: reduce){
   .why-item{transition:none}
   .why-item:focus-within, .why-item:hover{transform:none;box-shadow:none}
}

/* Responsive: 2 columns then single column */
@media (max-width:1100px){
   .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
   .why-grid{grid-template-columns:1fr;gap:18px}
   .why-sbx{padding:32px 0}
   .why-item{padding:12px}
   .why-item p{max-width:none}
}
.card-body{padding:14px 12px 20px 12px;background:transparent}
.card-meta{position:relative;color:var(--sg-muted);font-size:13px}
.card-meta .year{font-weight:700;color:var(--sg-white);position:absolute;left:12px;bottom:90px}

/* Favorite badge (top-right) */
.fav{top:12px;right:12px;padding:6px 10px;border-radius:20px;background:rgba(0,0,0,0.6);color:var(--sg-white);font-size:13px}

/* Reserve ribbon */
.reserve{position:absolute;left:12px;top:12px;background:var(--sg-white);color:var(--sg-black);padding:6px 10px;border-radius:2px;font-weight:700;font-size:12px;box-shadow:0 4px 10px rgba(0,0,0,0.08)}

/* dotted separator under hero in figma */
.hero-separator{max-width:var(--max-width);margin:8px auto 18px;border-bottom:2px dotted rgba(255,255,255,0.12)}

/* subtle card footer spacing and typographic tweaks */
.card-footer .price{font-size:15px}
.card-footer .time{font-size:13px;color:var(--sg-muted-2)}

/* topbar removed — contact banner deleted from HTML */

/* promo removed */

/* Nav uses a 3-column grid so the logo can sit centered */
.nav{max-width:var(--max-width);margin:0 auto;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.logo{display:flex;flex-direction:column;align-items:center;gap:6px}
.logo img{height:48px;display:block}
.main-links{width:100%;border-top:1px solid rgba(0,0,0,0.05);padding-top:14px}
.nav-links{list-style:none;display:flex;gap:40px;margin:0;padding:0;color:var(--sg-muted-2);font-family:Inter;justify-content:center}
.nav-links a{color:var(--sg-muted-2);text-decoration:none;padding:8px 10px;display:inline-block}
/* Header link hover: gold rectangular background with white text (no padding change to avoid layout shift) */
.nav-links a:hover{background:var(--brand-gold);color:#fff;border-radius:4px}
.nav-links a{transition:background .12s ease,color .12s ease}

/* Alternating section backgrounds for clear demarcation
   Targets only top-level sections inside <main> so inner subsections keep their own styles */
main > section{background:transparent}
main > section:nth-of-type(odd){background:#ffffff}
main > section:nth-of-type(even){background:#f7f7f7}

/* Optional small visual smoothing */
main > section{transition:background-color .2s ease}

/* Responsive */
@media (max-width:1000px){
   .hero-caption h1{font-size:48px}
}
@media (max-width:640px){
   .hero-caption{left:18px;bottom:18px}
   .hero-caption h1{font-size:28px}
}

/* -----------------------------
    Translated style-guide classes
    (converted from style-guide/css-styles.txt)
    ----------------------------- */

/* Generic rectangles used in style guide */
.sg-rect{background:var(--sg-white);border-radius:4px}
.sg-rect.dark{background:var(--sg-black);color:var(--sg-white)}

/* Tertiary button (converted) */
   .tertiary-btn{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:12px 16px;gap:10px;border-radius:4px;background:var(--sg-bg-2);font-family:var(--font-ui);font-size:16px;color:var(--sg-muted)}
.tertiary-btn.ghost{background:var(--sg-white);border:1px solid var(--sg-muted-2)}

/* Gold-outline CTA used on About page */
.btn-outline-gold{display:inline-block;padding:12px 28px;border-radius:8px;border:2px solid var(--brand-gold);color:var(--brand-gold);background:var(--sg-white);font-weight:600;text-decoration:none}
.btn-outline-gold:hover{background:var(--brand-gold);color:var(--sg-white);text-decoration:none}

/* Filter button */
   .filter-btn{display:inline-flex;align-items:center;padding:12px 14px;border-radius:4px;background:#fff;border:1px solid var(--sg-muted-2);font-family:var(--font-ui);font-size:16px;color:var(--sg-black)}

/* Gallery / list view toggles */
.view-toggle{display:inline-flex;gap:8px;align-items:center}
.view-toggle .dot{width:7px;height:7px;border:1px solid var(--sg-black);border-radius:1px}
.view-toggle .dot.inactive{border-color:var(--sg-bg-2)}

/* Large images / list view labels */
   .view-label{font-family:var(--font-ui);font-size:16px;line-height:24px;color:var(--sg-muted)}
.view-label.strong{font-weight:600;color:var(--sg-black)}

/* Checkbox grid (Frame 10 conversion) */
.sg-checkbox{display:inline-grid;grid-template-columns:repeat(2,8px);gap:6px}
.sg-checkbox .box{width:7px;height:7px;border:1px solid var(--sg-black);background:transparent}
.sg-checkbox .box.filled{background:var(--sg-muted)}

/* List view / card sizing approximations */
.sg-card{width:329px;height:168px;border-radius:4px;background:var(--sg-white);box-shadow:none}

/* Additional utility classes */
.sg-bg-muted{background:var(--sg-bg-1)}
.sg-border-1{border:1px solid var(--sg-muted-2)}

/* reduce visual weight to match screenshot spacing */
.footer-top .footer-col{padding-top:18px}

/* Adjust footer-top grid for our simplified columns */
.footer-top{grid-template-columns:repeat(3,1fr);gap:36px;padding-top:28px}
.footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,0.92);margin-bottom:18px}
.newsletter-col .subscribe{max-width:360px}

@media (max-width:900px){
   .footer-banner-inner{flex-direction:column;align-items:flex-start;gap:8px}
   .footer-top{grid-template-columns:1fr}
   .footer-bottom-inner{flex-direction:column;gap:12px}
}

@media (max-width:900px){
   .footer-top{grid-template-columns:repeat(2,1fr)}
   .newsletter-col{grid-column:1/-1}
}
@media (max-width:520px){
   .footer-top{grid-template-columns:1fr}
   .footer-bottom-inner{flex-direction:column;gap:12px}
}

/* Sell page styles (inserted from sell-your-vehicle) */
.sell-page{background:#fff;padding:12px 12px}
.sell-page .container{max-width:var(--max-width);margin:0 auto}
.sell-hero{display:block;padding:40px var(--site-gutter);background:transparent}
.sell-hero .hero-content{display:none}
.sell-card{background:var(--sg-white);padding:26px;border-radius:10px;box-shadow:0 20px 40px rgba(16,16,16,0.08);border:1px solid rgba(16,16,16,0.04);position:static;width:100%;max-width:900px;margin:0 auto}
.sell-card--full{max-width:900px}
.sell-card h3{margin:0 0 6px;font-size:18px}
.sell-card h3{margin:0 0 6px;font-size:18px}
.sell-card h3{ text-align:center; font-weight:800; font-size:20px; margin-bottom:12px }
.sell-card .muted{margin-bottom:12px}
.sell-card .muted{color:var(--sg-muted-2);margin-bottom:12px;text-align:center}
.sell-form-form .row{display:flex;gap:12px;margin-bottom:12px}
.sell-form-form input,.sell-form-form select{flex:1;padding:12px;border:1px solid #e9e9e9;border-radius:6px}
/* Add extra top padding so the form has breathing room from the heading/logo */
.sell-form-form{padding-top:18px}
.price-field{display:flex;gap:8px}
.price-field select{width:72px}
.btn-gold{background:var(--brand-gold);color:#111;border:none;padding:12px;border-radius:6px;font-weight:700;display:block;width:100%;margin-top:8px}
.btn-gold{transition:transform .12s ease, filter .12s ease, color .12s ease}
.btn-gold:hover{color:#fff;filter:brightness(0.95);transform:translateY(-1px)}
.small-note{font-size:12px;color:var(--sg-muted-2);margin-top:10px}

/* How it works */
.how-it-works{padding:48px 0}
.how-inner{max-width:var(--max-width);margin:0 auto;padding:0 12px}
.how-steps{width:100%}
.how-steps h3{margin:0 0 10px;font-size:var(--h2-size);font-weight:var(--fw-bold);letter-spacing:var(--h2-letter)}
.how-steps .muted{color:var(--sg-muted-2);margin-bottom:20px;font-size:var(--lead-size)}
.steps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px}
.work-step{position:relative;padding:22px 20px;border-radius:10px;background:transparent;overflow:visible}
/* replaced numeric overlay with svg graphic positioned to the right */
.work-step .step-graphic{position:absolute;right:-8px;top:-12px;width:180px;height:auto;opacity:0.06;pointer-events:none}
.work-step .step-meta{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.step-icon{width:34px;height:34px;flex:0 0 34px}
.step-title{font-size:18px;margin:0;font-weight:var(--fw-semibold);letter-spacing:var(--h2-letter);color:var(--sg-black)}
.step-desc{margin:0;color:var(--sg-muted);font-size:var(--body-size);line-height:1.6}

/* Font Awesome numbered step icons for How-It-Works */
.how-steps-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.how-steps-list .step-row{display:flex;gap:18px;align-items:center}

/* Contact form should match sell form styles */
.contact-form .row{display:flex;gap:12px;margin-bottom:12px}
.contact-form input,.contact-form select,.contact-form textarea{flex:1;padding:12px;border:1px solid #e9e9e9;border-radius:6px}
.contact-form textarea{min-height:140px}
@media (max-width:900px){
   .contact-form .row{flex-direction:column}
}
.how-steps-list .step-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;height:44px}
.how-steps-list .step-icon i{font-size:20px;color:var(--sg-muted-2)}
.how-steps-list .step-content{flex:1}
.how-steps-list .step-content h4{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--sg-black)}

@media (max-width:900px){
   .how-steps-list .step-row{gap:12px}
   .how-steps-list .step-icon{flex:0 0 36px;height:36px}
   .how-steps-list .step-icon i{font-size:18px}
}

@media (max-width:1000px){
   .how-steps h3{font-size:42px}
}
@media (max-width:800px){
   .steps-grid{grid-template-columns:1fr;gap:22px}
   .work-step .step-graphic{width:120px;right:-6px;top:-8px}
}

/* Why grid */
.why-sbx{padding:48px 0}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:12px}
.why-item h4{margin:0 0 8px}

/* Curated two-column section (image + text) */
.curated-section{padding:48px 0;background:transparent}
.curated-grid{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:0 12px}
.curated-image img{width:100%;height:420px;object-fit:cover;display:block;border-radius:8px}
.curated-text h3{font-size:28px;margin:0 0 10px;font-weight:700}
.curated-text .muted{color:var(--sg-muted);margin-bottom:12px}
.curated-text ul{margin:12px 0 0 0;color:var(--sg-muted);line-height:1.6;padding-left:1.25rem;list-style-position:outside}
.curated-text li{margin-bottom:8px;padding-left:0}

@media (max-width:900px){
   .curated-grid{grid-template-columns:1fr;gap:18px}
   .curated-image img{height:260px}
}

/* Alex feature section */
.alex-section{padding:var(--section-vertical) 0;background:transparent}
.alex-grid{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:0 var(--site-gutter)}
.alex-section .alex-image{height:100%;display:flex;align-items:center;justify-content:center}
/* Scoped homepage image sizing moved to `.hp-alex-lead-section` rules to avoid
   colliding with the About page `.alex-lead-section` rules. */

/* Ensure homepage alex feature uses a larger image column so founder image displays at full size */
.alex-section .alex-grid{grid-template-columns:440px 1fr;gap:36px;align-items:center}
.alex-section .alex-text{display:flex;align-items:center}
.alex-text{display:block}
.alex-text blockquote{margin:0;padding:18px 22px;border-left:4px solid #d6d6d6;background:transparent;font-style:italic;color:var(--sg-muted);} 
.alex-text blockquote p{font-family:'DM Serif Display', serif;font-size:22px;line-height:1.45;margin:0 0 12px}
.alex-text blockquote footer{font-weight:700;color:var(--sg-black);margin-top:6px}
.alex-text blockquote cite{display:block;font-style:normal;font-weight:400;color:var(--sg-muted)}

/* Alex lead quote section (reuses alex-grid styles but scoped) */
.alex-lead-section{padding:48px 0;background:transparent}
.alex-lead-section .alex-grid{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:440px 1fr;gap:36px;align-items:center;padding:0 var(--site-gutter);min-height:420px}
/* About page: image occupies half the lead column; keep this scoped to .alex-lead-section only */
.alex-lead-section .alex-image{display:flex;align-items:center;justify-content:center;height:100%}
/* Base (mobile / default): let the image size naturally; desktop overrides apply the
   aspect-ratio container and percentage sizing. This avoids percent-height resolving
   against an undefined parent height on small viewports. */
.alex-lead-section .alex-image img{width:100%;height:auto;max-height:none;object-fit:cover;object-position:center center;display:block;border-radius:8px}
.alex-lead-section .alex-text{display:flex;align-items:center;height:100%}

/* Homepage: first Alex lead — use hp- prefix to avoid cross-page coupling */
.hp-alex-lead-section{padding:var(--section-vertical) 0;background:transparent}
.hp-alex-lead-section .hp-alex-grid{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:440px 1fr;gap:36px;align-items:center;padding:0 var(--site-gutter);min-height:480px;height:480px}
.hp-alex-lead-section .hp-alex-image{display:flex;align-items:center;height:100%}
.hp-alex-lead-section .hp-alex-image img{height:80%;width:auto;max-width:100%;object-fit:cover;object-position:center center;display:block;border-radius:8px}
.hp-alex-lead-section .hp-alex-text{display:flex;align-items:center;padding-left:28px}
.hp-alex-lead-section .hp-alex-text blockquote{margin:0;padding:24px 26px;border-left:4px solid #d6d6d6;background:transparent;font-style:italic;color:var(--sg-muted);} 
.hp-alex-lead-section .hp-alex-text blockquote p{font-family:'DM Serif Display', serif;font-size:22px;line-height:1.5;margin:0 0 12px}
.hp-alex-lead-section .hp-alex-text blockquote footer{font-weight:700;color:var(--sg-black);margin-top:8px}
.hp-alex-lead-section .hp-alex-text blockquote cite{display:block;font-style:normal;font-weight:400;color:var(--sg-muted)}
.alex-lead-section .alex-text blockquote{margin:0;padding:24px 26px;border-left:4px solid #d6d6d6;background:transparent;font-style:italic;color:var(--sg-muted);} 
.alex-lead-section .alex-text blockquote p{font-family:'DM Serif Display', serif;font-size:22px;line-height:1.5;margin:0 0 12px}
.alex-lead-section .alex-text blockquote footer{font-weight:700;color:var(--sg-black);margin-top:8px}

@media (max-width: 700px){
   .alex-lead-section{padding:calc(var(--section-vertical) * 0.7) 0}
   .alex-lead-section .alex-grid{grid-template-columns:1fr;gap:20px;align-items:stretch}
   .alex-lead-section .alex-image img{height:auto;object-position:center center}
   .alex-lead-section .alex-text blockquote{padding:18px}
}

/* Homepage hp-alex: mobile stacking and image reset */
@media (max-width:700px){
   .hp-alex-lead-section{padding:28px 0}
   .hp-alex-lead-section .hp-alex-grid{grid-template-columns:1fr;gap:18px;align-items:stretch;padding:0 var(--site-gutter)}
   .hp-alex-lead-section .hp-alex-grid{height:auto}
   .hp-alex-lead-section .hp-alex-image{min-height:auto;display:block;width:100%}
   .hp-alex-lead-section .hp-alex-image img{width:100%;height:auto;max-height:none;object-fit:cover;display:block;margin:0 auto;border-radius:8px}
   .hp-alex-lead-section .hp-alex-text{display:block;align-items:flex-start;padding:0}
   .hp-alex-lead-section .hp-alex-text blockquote{padding:18px;background:#fff;border-radius:8px;margin:0 6px}
}

@media (max-width:900px){
   .hp-alex-lead-section .hp-alex-image img{height:auto}
}

/* Additional mobile fixes: prevent overflow and improve readability */
@media (max-width:480px){
   .alex-lead-section{padding:22px 10px}
   .alex-lead-section .alex-grid{gap:14px;padding-left:6px;padding-right:6px}
   .alex-lead-section .alex-image img{max-width:100%;height:auto;display:block;border-radius:8px}
   .alex-lead-section .alex-text blockquote{padding:12px 10px;border-left-width:3px}
   .alex-lead-section .alex-text blockquote p{font-size:16px;line-height:1.45}
   .alex-lead-section .alex-text blockquote footer{font-size:14px}
}

/* Ensure full-bleed banners don't cause horizontal scroll on very small screens */
.sell-hero-banner, .hero-slider, .hero-slider .slides, .hero-slider .slide img{max-width:100%;overflow:hidden}

/* prevent body horizontal overflow from any transformed full-width elements */
html, body{overflow-x:hidden}

@media (min-width: 701px) and (max-width: 1100px){
   .alex-lead-section .alex-grid{grid-template-columns:440px 1fr}
   .alex-lead-section .alex-image img{object-position:center center}
}

/* About page: ensure image fills its column and quote centers vertically
    (apply centering only on narrower screens; keep desktop columns stretched so
    images fill their column height) */
@media (max-width:1100px){
   .alex-lead-section .alex-grid{align-items:center}
}
/* scoped for desktop: move these overrides into a small-screen media query so desktop keeps cover crop */
@media (max-width:1100px){
   .alex-lead-section .alex-image{min-height:0;display:flex;align-items:center}
   .alex-lead-section .alex-image img{width:100%;height:auto;object-fit:contain;object-position:center center;display:block;border-radius:8px}
   .alex-lead-section .alex-text{display:flex;align-items:center}

   @media (max-width:700px){
      .alex-lead-section .alex-image{min-height:auto}
      .alex-lead-section .alex-image img{height:auto}
      .alex-lead-section .alex-text{align-items:flex-start}
   }
}

/* Desktop-specific: enforce image as 50% of the left column and vertically center quote */
@media (min-width:1101px){
   /* Modern semantic fix: use an aspect-ratio container so children can use percentage heights.
       Reduce left column width and lower image visual height to balance composition. Use
       `object-fit:contain` to reduce aggressive cropping and add breathing room for the text. */
   .alex-lead-section .alex-grid{align-items:stretch}
   .alex-lead-section .alex-image{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
   /* Slightly lower visual height so the image doesn't dominate (45% of container) */
   .alex-lead-section .alex-image img{height:45%;width:auto;max-width:100%;object-fit:contain;object-position:center center;border-radius:8px}
   .alex-lead-section .alex-text{display:flex;align-items:center;height:100%;padding-left:28px}
   .alex-lead-section .alex-text blockquote{margin:0}
   /* Homepage alex section: mirror About page fixes so second feature doesn't bleed */
   .alex-section .alex-image{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
   /* Constrain the homepage image so it cannot overflow the grid or bleed into the quote */
   .alex-section .alex-image{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;max-height:480px;overflow:hidden}
   .alex-section .alex-image img{height:100%;width:auto;max-width:100%;object-fit:cover;object-position:center center;border-radius:8px;display:block}
   .alex-section .alex-text{display:flex;align-items:center;height:100%;padding-left:28px}
}

/* Note: keep About page styling scoped to `.alex-lead-section` rules above.
    Removed temporary debug outlines and the `!important` enforcement so the
    cascade is easier to reason about. If necessary, re-add scoped debug
    helpers under a `.debug` class during development only. */
@media (max-width:900px){
   .alex-grid{grid-template-columns:1fr;gap:18px}
   .alex-image img{height:260px}
   .alex-text blockquote p{font-size:18px}
}

.faq-cta{padding:36px 0 18px;text-align:center;background:linear-gradient(180deg,#fafafa,#fff)}
.faq-cta .btn-outline{border:1px solid #e6e6e6;padding:10px 14px;border-radius:6px;text-decoration:none;color:var(--sg-black)}

/* Collapsible FAQ preview styling */
.faq-inner{max-width:var(--max-width);margin:0 auto;padding:0 12px}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:900px;margin:12px auto}
.faq-list details{background:#fff;border-radius:8px;padding:12px 16px;border:1px solid rgba(0,0,0,0.04);box-shadow:0 6px 18px rgba(16,16,16,0.04)}
.faq-list summary{list-style:none;cursor:pointer;font-weight:700;font-size:16px;padding:6px 0}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list details[open]{box-shadow:0 10px 30px rgba(16,16,16,0.06)}
.faq-list details p{margin:8px 0 0;color:var(--sg-muted);font-size:15px;line-height:1.5}

@media (max-width:700px){
   .faq-list{gap:10px;padding:0 6px}
   .faq-list summary{font-size:15px}
}

/* Sell page hero banner (full-bleed) */
.sell-hero-banner{
   background-size:cover;
   /* bias background strongly toward the lower portion so villa/sky is cropped */
   background-position:center 92%;
   /* cap the hero so very tall viewports don't expose excess sky
      - keeps hero visually consistent whether devtools is docked or not */
   height: clamp(520px, 70vh, 760px);
   display:block;
   margin:0 0;
   width:100vw;
   max-width:100%;
   margin-left:50%;
   transform:translateX(-50%);
   overflow:hidden;
   position:relative;
}
/* Default: keep aspect ratio, cover, and shift focus down (show lower image area) */
.sell-hero-banner .sell-hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 92%;display:block}
.sell-hero-banner:after{content:'';display:block;height:0;clear:both}

/* Gradient overlay for hero to improve text legibility */
.sell-hero-banner{position:relative}
.sell-hero-banner::before{
   content: "";
   position: absolute;
   inset: 0;
   z-index: 2;
   pointer-events: none;
   /* smoother, darker overlay to improve contrast for caption while preserving image detail */
   background: linear-gradient(180deg,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.18) 22%,
      rgba(0,0,0,0.10) 44%,
      rgba(0,0,0,0.42) 72%,
      rgba(0,0,0,0.78) 100%);
}
/* solid semi-opaque overlay to ensure consistent dimming across all browsers
   sits beneath the gradient so gradient highlights still apply */
.sell-hero-banner::after{
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background: rgba(0,0,0,0.42); /* adjust opacity for desired darkness */
}
.sell-hero-banner picture, .sell-hero-banner img{position:relative;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 92%}

/* Responsive tuning: nudge the focal point per breakpoint so all four cars remain visible */
@media (min-width:1200px) {
   .sell-hero-banner picture, .sell-hero-banner img, .sell-hero-banner .sell-hero-img {
      object-position: 50% 96%; /* desktop: strong bottom bias to crop villa */
   }
}
@media (min-width:700px) and (max-width:1199px) {
   .sell-hero-banner picture, .sell-hero-banner img, .sell-hero-banner .sell-hero-img {
      object-position: 50% 90%; /* tablet: increased bottom bias */
   }
}
@media (max-width:699px) {
   .sell-hero-banner { height: 60vh; } /* shorter hero on small screens keeps cars visible */
   .sell-hero-banner picture, .sell-hero-banner img, .sell-hero-banner .sell-hero-img {
      object-position: 50% 80%; /* mobile: moderate bottom bias to preserve cars */
   }
}

/* Mobile: make hero caption match desktop panel, reduce width, and center vertically */
@media (max-width:699px) {
   .sell-hero-banner .hero-caption,
   .sell-hero-banner .hero-caption.bottom-left {
      left:50% !important;
      top:50% !important;
      bottom:auto !important;
      transform:translate(-50%,-50%) !important;
      max-width:78% !important;
      width:auto !important;
      padding:12px 16px !important;
      background: rgba(0,0,0,0.42) !important; /* override earlier transparent !important */
      box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
      backdrop-filter: blur(6px) saturate(120%) !important;
      -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
      border-radius:10px !important;
      z-index:999 !important;
      text-align:center !important;
   }
}

/* Helper class for captioning text over the hero (kept ready, optional in markup) */
.sell-hero-banner .hero-caption{
   position:absolute;
   left:50%;
   bottom:6vh; /* bottom-center placement */
   top:auto;
   transform:translateX(-50%);
   color:var(--sg-white);
   z-index:4;
   max-width:70%;
   text-align:center;
   padding: 12px 18px;
   /* semi-opaque panel behind the text for readability (non-destructive) */
   background: rgba(0,0,0,0.42);
   box-shadow: 0 8px 30px rgba(0,0,0,0.35);
   backdrop-filter: blur(6px) saturate(120%);
   -webkit-backdrop-filter: blur(6px) saturate(120%);
   border-radius: 8px;
}
.sell-hero-banner .hero-caption h1{margin:0;font-family:var(--font-sans);font-weight:var(--fw-bold);text-shadow:0 8px 24px rgba(0,0,0,0.6)}

/* Top-center caption variant used for page hero guide */
.sell-hero-banner .hero-caption.top-center{
   left:50%;
   transform:translateX(-50%);
   top:6vh;
   bottom:auto;
   text-align:center;
   max-width:70%;
   z-index:3;
   padding: 12px 20px;
   border-radius:8px;
   background: rgba(0,0,0,0.36);
   box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.sell-hero-banner .hero-caption.top-center h1{
   font-family: var(--font-sans);
   font-weight: 600;
   font-size: clamp(28px, 4.8vw, 48px);
   line-height: 1.02;
   margin: 0 0 8px 0;
   letter-spacing: -0.02em;
   color: #fff;
   text-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.sell-hero-banner .hero-caption.top-center p{
   font-size: clamp(14px, 1.6vw, 18px);
   color: rgba(255,255,255,0.94);
   margin:0;
   letter-spacing: 0.01em;
}
.sell-hero-banner .hero-caption.top-center .muted{opacity:0.95}
.sell-hero-banner .hero-caption.top-center .btn-outline{margin-top:12px}

/* Bottom-left caption variant (original position) */
.sell-hero-banner .hero-caption.bottom-left{
   /* bottom-left class now used as bottom-center placement to keep markup unchanged */
   position:absolute;
   left:50%;
   bottom:6vh;
   top:auto;
   transform:translateX(-50%);
   right:auto;
   max-width:70%;
   z-index:3;
   padding:12px 20px;
   border-radius:8px;
   background: rgba(0,0,0,0.38);
   box-shadow: 0 8px 24px rgba(0,0,0,0.3);
   text-align:center;
}
.sell-hero-banner .hero-caption.bottom-left h1{
   font-family: var(--font-sans);
   font-weight:600;
   font-size: clamp(24px, 3.8vw, 44px);
   line-height:1.02;
   margin:0 0 8px 0;
   letter-spacing:-0.02em;
   color:#fff;
   text-shadow: 0 6px 14px rgba(0,0,0,0.32);
}
.sell-hero-banner .hero-caption.bottom-left p{
   font-size: clamp(13px,1.4vw,16px);
   color: rgba(255,255,255,0.94);
   margin:0;
}

/* Make the hero subheading more prominent */
.sell-hero-banner .hero-caption .muted{
   font-weight:700;
   color: rgba(255,255,255,0.96);
}

/* Add extra bottom spacing so next section breathes */
.sell-hero-banner{margin-bottom:6px}

/* Sell CTA tweaks: smaller header and logo under it */
.sell-cta .container h1{
   font-size: clamp(20px, 2.8vw, 28px);
   font-weight: 600;
   margin: 0 0 10px 0;
   letter-spacing: -0.01em;
}
.sell-cta .sell-cta-logo{margin-bottom:12px}
.sell-cta .sell-cta-logo img{height:42px;width:auto;display:block}

@media (min-width: 992px) {
   .sell-cta .sell-cta-logo img {
      max-width: 300px;
      width: 60%;
      height: auto;
      display: inline-block;
   }
}

/* allow subtitle to be centered when requested */
.sell-hero-banner .hero-caption.bottom-left p.centered{ text-align:center }

.sell-hero-banner .sell-hero-img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
   .sell-hero-banner{height:auto}
   .sell-hero-banner .sell-hero-img{height:auto}
}
@media (max-width:480px){
   .sell-hero-banner{height:auto}
   .sell-hero-banner .sell-hero-img{height:auto}
}

/* Form tabs (vehicle / contact) */
.sell-card .tabs{display:flex;gap:8px;margin-bottom:12px}
.sell-card .tab{flex:1;padding:8px 10px;border-radius:6px;text-align:center;font-weight:600;background:transparent;border:1px solid rgba(0,0,0,0.04)}
.sell-card .tab.active{background:#fff;border-bottom:3px solid var(--brand-blue)}

/* Inputs subtle success state (example) */
.sell-form-form input:focus{outline:none;box-shadow:0 0 0 3px rgba(0,150,0,0.06);border-color:#cfe9d6}

@media (max-width:1100px){
   .sell-hero{grid-template-columns:1fr 380px;background-position:center center}
   .steps-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
   .sell-hero{grid-template-columns:1fr;background-position:center center;padding:28px}
   .sell-card{margin-top:18px}
   .why-grid{grid-template-columns:1fr}
   .steps-grid{grid-template-columns:1fr}
}

/* Small-screen form/layout tweaks */
@media (max-width:900px){
   .sell-form-form .row{flex-direction:column}
   .sell-form-form input, .sell-form-form select, .sell-form-form textarea{width:100%}
   .sell-card{padding:18px}
   .sell-card h3{font-size:18px}
}

@media (max-width:480px){
   .sell-card{padding:14px;border-radius:8px}
   .sell-form-form input, .sell-form-form select, .sell-form-form textarea{padding:10px}
   .btn-gold{padding:10px;font-size:15px}
}

/* Final centering override: ensure hero caption is centered in the hero viewport on small screens */
@media (max-width:900px){
   /* Center non-bottom-left captions */
   .sell-hero-banner .hero-caption:not(.bottom-left){
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      bottom: auto !important;
      transform: translate(-50%, -50%) !important;
      margin: 0 !important;
      /* centering only — do not change width or padding here */
      text-align: center !important;
      z-index: 9999 !important;
      display: block !important;
   }

   /* Mobile bottom-left placement: align to left gutter and sit above bottom */
   .sell-hero-banner .hero-caption.bottom-left{
         position: absolute !important;
         left: 20px !important;
         right: auto !important;
         bottom: 10vh !important;
         top: auto !important;
         transform: none !important;
         margin: 0 !important;
         text-align: left !important;
         z-index: 9999 !important;
         display: block !important;
   }
}

/* Mobile: prevent caption subheading from wrapping so it stays tidy; allow h1 to wrap */
@media (max-width:900px){
   .sell-hero-banner .hero-caption .muted {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
   }
}

/* Mobile: ensure the caption subheading is normal weight (not bold) */
@media (max-width:900px){
   .sell-hero-banner .hero-caption .muted{
      font-weight:400 !important;
      color: rgba(255,255,255,0.94) !important;
   }
}

/* Hero caption repositioning for small screens */
@media (max-width:900px){
   .hero-caption{
     left:50%;
     right:auto;
     transform:translateX(-50%);
     top:6vh;
     bottom:auto;
     max-width:70%;
       width: min(92%, 720px);
       box-sizing: border-box;
       z-index: 60;
     text-align:center;
     padding:0 12px;
   }
   /* Removed conflicting bottom-left centering here so mobile placement
      is controlled by the dedicated mobile block earlier in the file. */
   .hero-caption h1{font-size:clamp(22px,6vw,36px)}
   .hero-caption p{font-size:14px}
}

/* Hero slider styles */
.hero-slider{position:relative;max-height:620px;overflow:hidden;border-radius:0}
.hero-slider .slides{position:relative;height:520px}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:block}
.hero-slider .slide img{width:100%;height:520px;object-fit:cover;display:block}
.hero-slider .slide.active{opacity:1;z-index:1}
.slider-control{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.85);border:0;width:44px;height:44px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;box-shadow:0 6px 18px rgba(4,14,27,0.12)}
.slider-control.prev{left:16px}
.slider-control.next{right:16px}
.slider-control:focus{outline:2px solid rgba(0,134,255,0.15)}
.slider-indicators{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:8px}
.slider-indicators .indicator{width:10px;height:10px;border-radius:6px;background:rgba(255,255,255,0.6);border:0}
.slider-indicators .indicator.active{background:var(--brand-blue)}

@media (max-width:900px){
   .hero-slider .slides{height:320px}
   .hero-slider .slide img{height:320px}
}

/* Final mobile pin: force bottom-left corner placement for `.hero-caption.bottom-left` */
@media (max-width:900px){
   .sell-hero-banner .hero-caption.bottom-left{
      left: 7px !important;
      bottom: 15px !important;
      top: auto !important;
      transform: none !important;
      text-align: left !important;
      display: block !important;
      z-index: 9999 !important;
   }
}
/* Mobile-specific visual tuning to avoid covering cars */
@media (max-width:699px){
   .sell-hero-banner .hero-caption.bottom-left{
      padding:5px 8px !important;
      max-width:56% !important;
      background: rgba(0,0,0,0.42) !important;
      border-radius:8px !important;
    }
   .sell-hero-banner .hero-caption.bottom-left h1{
      font-size:15px !important;
      line-height:1.1 !important;
      margin-bottom:6px !important;
      white-space: normal !important;
    }
   .sell-hero-banner .hero-caption.bottom-left .muted{
      font-size:10px !important;
      font-weight:400 !important;
      margin:0 !important;
   }
}
@media (max-width:520px){
   .slider-control{width:36px;height:36px;border-radius:18px}
}



/* Sell page CTA (mirrors live /sell-your-vehicle) */
.sell-cta{background:#ffffff;padding:30px 0;color:var(--sg-black)}
.sell-cta .container{max-width:var(--max-width);margin:0 auto;padding:0 var(--site-gutter);text-align:center}
.sell-cta h1{font-family:var(--font-sans);font-size:var(--h1-size);font-weight:var(--fw-regular);line-height:1.02;margin:0 0 18px;white-space:nowrap;overflow-wrap:normal;max-width:100%;}
.sell-cta .sell-cta-logo{margin:10px 0 18px}
.sell-cta .sell-cta-logo img{max-width:300px;width:60%;height:auto;display:inline-block}
.sell-cta p.muted{color:var(--sg-muted-2);font-size:18px;line-height:1.6;margin:0 auto;max-width:760px}

@media (max-width:1000px){
   .sell-cta h1{font-size:42px;white-space:normal;width:auto;margin-left:0;transform:none;font-weight:var(--fw-semibold)}
   .sell-cta .sell-cta-logo img{width:70%;max-width:320px}
   .sell-cta p.muted{font-size:16px;padding:0 6px}
}
@media (max-width:520px){
   .sell-cta h1{font-size:28px}
   .sell-cta .sell-cta-logo img{width:86%;max-width:260px}
   .sell-cta{padding:30px 0}
}

/* Enforce equal vertical spacing for all top-level sections after the hero
    This sets identical top and bottom padding for consistency across the page
    (excludes the hero so its unique layout remains unchanged). */
main > section:not(.hero){padding:var(--section-vertical) 0}
/* Targeted override: ensure sell-cta uses 30px vertical padding despite generic section rule */
main > section.sell-cta{padding:30px 0}


@media (max-width:700px){
   /* Reduce vertical rhythm slightly on small viewports */
   main > section:not(.hero){padding:calc(var(--section-vertical) * 0.7) 0}
}

/* Mobile tweak: bring the sell-cta closer to the hero on small screens */
@media (max-width:700px){
   main > section.sell-cta{padding:12px 0}
}

/* --- End: figma-styles.css content --- */

/* --- Begin: styles.css content --- */
:root{
   --max-width:1200px;
   /* Brand colors extracted from style guide */
   --black:#000000;
   --near-black:#101010;
   --muted-1:#505050;
   --muted-2:#6E6E6E;
   --muted-3:#949494;
   --bg-1:#F8F8F8;
   --bg-2:#F0F0F0;
   --white:#FFFFFF;
   --brand-blue:#0074FF; /* primary accent */
   --brand-blue-2:#1FADFF;
   --brand-dark-blue:#004EAC;
   --brand-gold:#D6BD83;
   --brand-green:#068241;
   --brand-red:#BB454B;
   --card-bg:#fff;
}

*{box-sizing:border-box}
html, body { height: 100%; }
body{
   display:flex;
   flex-direction:column;
   min-height:100vh;
   font-family: var(--font-ui);
   margin:0; color:var(--near-black); background:var(--bg-1);
   -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

main{flex:1}

/* Top bar and nav */
.topbar{background:var(--bg-2);padding:6px 12px;font-size:13px;display:flex;justify-content:space-between;color:var(--muted-2)}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:18px 12px}
.logo{font-weight:700;letter-spacing:2px}
.logo img{height:36px;display:block}
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0;color:var(--muted-2);font-family:Inter}
.btn{background:var(--brand-blue);color:var(--white);border:none;padding:8px 12px;border-radius:6px;font-weight:600}
.btn-outline{background:transparent;border:2px solid var(--white);color:var(--white);padding:8px 12px;border-radius:4px}

/* Hero */
.hero{background:var(--near-black);color:var(--white)}
.hero-inner{position:relative;max-width:var(--max-width);margin:18px auto;overflow:hidden;border-radius:6px}
.hero-inner img{width:100%;height:auto;display:block;filter:brightness(0.6)}
/* Full-cover overlay (linear + radial) — follows W3Schools overlay pattern
   Sits above the image but under the caption, does NOT change image size */
.hero-inner .overlay{position:absolute;inset:0;pointer-events:none;z-index:1;
   background:
     linear-gradient(180deg, rgba(0,0,0,0.05) 10%, rgba(0,0,0,0.55) 100%),
     radial-gradient(ellipse at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.6) 100%);
}
.hero-caption{position:absolute;left:calc((100% - var(--max-width))/2 + 12px);bottom:24px;z-index:2}
.hero-caption h1{margin:0;font-family:'DM Serif Display', Georgia, serif;font-size:64px;line-height:1;color:var(--white);font-weight:400}
.hero-caption p{margin:8px 0;color:#e6e6e6;font-family:Inter}

/* Filters */
.filters{max-width:var(--max-width);margin:18px auto;padding:0 12px}
.filters-inner{display:flex;justify-content:space-between;align-items:center}

/* Card grid */
.card-grid{max-width:var(--max-width);margin:12px auto;padding:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card-bg);border-radius:6px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.card-media{position:relative}
.card-media img{width:100%;height:220px;object-fit:cover;display:block}
.fav{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.6);color:var(--white);padding:6px 8px;border-radius:18px;font-size:13px}
.card-body{padding:12px}
.card-meta{font-size:13px;color:var(--muted-2);margin-bottom:8px;font-family:Inter}
.card-meta .make{font-weight:700;color:var(--near-black);font-family:Inter}
.card-meta .model{font-weight:700;font-size:20px}
.card-footer{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.price{color:var(--near-black)}
.time{color:var(--muted-3);font-weight:400}

/* Global override: force Proxima Nova UI across the site
   Keeps Typekit and other styles intact but ensures Proxima Nova is used
   for all elements (non-destructive; uses var(--font-ui) token). */
html, body, body *{font-family:var(--font-ui) !important}


/* Footer (restored dark site footer to match staging) */
.site-footer{background:#0b0b0b;padding:28px 0 12px;color:rgba(255,255,255,0.95);width:100%;box-sizing:border-box}
.footer-banner{padding:12px 12px}
.footer-top{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;padding-bottom:12px;padding-left:12px;padding-right:12px;border-bottom:1px solid rgba(255,255,255,0.06)}
.footer-top .footer-col{flex:1 1 18%;min-width:160px}
.footer-top .footer-links{display:flex;gap:28px;justify-content:center;align-items:center;width:100%;max-width:560px;margin:0 auto}
.footer-top .footer-links a{color:rgba(255,255,255,0.9);text-decoration:none;font-size:15px;transition:color .14s ease;padding:8px 12px}
.footer-top .footer-links a:link,.footer-top .footer-links a:visited{color:rgba(255,255,255,0.9);text-decoration:none}
.footer-top .footer-links a:hover{color:rgba(255,255,255,0.75);text-decoration:none}

.footer-bottom{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 12px}
.footer-bottom .logo-and-copy{display:flex;align-items:center;gap:18px;opacity:0.85}
.footer-bottom .logo-wrapper{max-width:130px;width:100%;filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(249%) hue-rotate(324deg) brightness(116%) contrast(100%);} 
.footer-bottom .logo img{width:100%;height:auto;max-width:130px;opacity:0.95}
.footer-bottom .copyright{color:rgba(255,255,255,0.45);font-size:13px}
.social-icons{display:flex;gap:20px;align-items:center}
.social-icons a{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:0;color:#ffffff;text-decoration:none;font-size:13px;padding:6px;transition:background .14s ease,color .14s ease,transform .12s ease,filter .14s ease}
.social-icons a img{width:17px;height:17px;display:block}

/* ensure SVG glyphs use currentColor for easy theming */
.social-icons a img, .social-icons a svg{color:inherit}

/* Per-icon image wrapper styles (matches QA snippet) */
.site-footer .social-icons a .image-wrapper{max-width:1.25rem;display:flex;filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(6%) hue-rotate(35deg) brightness(103%) contrast(100%);} 
.social-icons a .image-wrapper.grayscale{filter:grayscale(1) !important;opacity:1}
.site-footer .social-icons a .image-wrapper{margin-right:0;border:1px solid rgba(0,0,0,0);background-color:transparent;font-size:0;transition:all .3s ease-in}
.image-wrapper{display:flex}

/* maintain explicit bitmap sizing (staging) */
.site-footer .social-icons a img{width:17px;height:17px;display:block}

@media (max-width:1000px){
   .footer-top{grid-template-columns:repeat(2,1fr);gap:36px}
}
@media (max-width:700px){
   .footer-top{padding-left:12px;padding-right:12px;gap:8px}
   .footer-top .footer-links{flex-direction:column;gap:12px;max-width:none;width:100%;padding:8px 0}
   .footer-top .footer-links a{font-size:14px}
   .footer-bottom{flex-direction:column;align-items:center;margin:0;padding:12px 0}
   .footer-bottom .logo-and-copy{flex-direction:column;align-items:center;text-align:center;gap:8px}
   .social-icons{justify-content:center}
   .social-icons a{padding:8px}
}

/* Responsive */
@media (max-width:1000px){
   .card-grid{grid-template-columns:repeat(2,1fr)}
   .hero-caption h1{font-size:48px}
}
@media (max-width:640px){
   .nav-links{display:none}
   .card-grid{grid-template-columns:1fr}
   .hero-caption h1{font-size:32px}
}

/* --- End: styles.css content --- */