/* Mark Car Key Phoenix - markcarkeyphoenix.com
   Stylesheet for all pages. Edit here once and every page updates. */

:root{
    --brand:#b8860b;
    --brand-dark:#8a6407;
    --brand-text:#7a5a06;
    --panel:#2a2015;
    --gray-band:#dcdcdc;
    --list-gray:#ebebeb;
  }

  *{box-sizing:border-box;}

  html,body{margin:0;padding:0;}

  body{
    font-family:Verdana,Geneva,Arial,sans-serif;
    background:#f2efe7;
    color:#222;
  }

  /* thin brand rule across the very top */
  .topbar{height:5px;background:var(--brand);}

  .wrap{max-width:1000px;margin:0 auto;padding:0 20px;}

  /* ---------- header ---------- */
  .masthead{background:#fff;}
  .masthead .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-top:22px;
    padding-bottom:22px;
  }
  .site-name{
    margin:0;
    font-size:30px;
    font-weight:bold;
    color:var(--brand-text);
    letter-spacing:-0.3px;
  }
  .site-name a{color:inherit;text-decoration:none;}
  .site-name .brand{
    display:flex;
    align-items:center;
    gap:16px;
    line-height:normal;
  }
  .phone{
    font-family:Georgia,"Times New Roman",serif;
    font-size:30px;
    font-weight:bold;
    color:var(--brand-text);
    white-space:nowrap;
    text-decoration:none;
  }

  /* ---------- nav ---------- */
  .navband{background:var(--gray-band);padding-top:18px;}
  .nav{
    background:var(--brand);
    display:flex;
    list-style:none;
    margin:0;
    padding:0;
  }
  .nav li + li{border-left:1px solid #fff;}
  .nav a{
    display:block;
    padding:13px 30px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
  }
  .nav a:hover,
  .nav a:focus-visible{background:var(--brand-dark);}
  .nav .current a{background:var(--brand-dark);font-weight:bold;}

  /* ---------- hero panel ---------- */
  .hero-shell{background:var(--gray-band);}
  .hero-shell .wrap{padding-top:16px;padding-bottom:20px;}
  .hero{
    background:transparent;
    padding:0;
    display:flex;
    gap:0;
  }
  .hero-photo{
    --hero-ar:3/2;
    flex:1 1 auto;
    aspect-ratio:var(--hero-ar);
    min-height:260px;
    background-color:#6b6250;
    background-image:linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }

  /* ---------- hero image per page ---------- */
  .page-acura .hero-photo{background-image:url("../images/hero-acura.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-buick .hero-photo{background-image:url("../images/hero-buick.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-cadillac .hero-photo{background-image:url("../images/hero-cadillac.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-index .hero-photo{background-image:url("../images/hero-car.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-contact .hero-photo{background-image:url("../images/hero-car.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-privacy-policy .hero-photo{background-image:url("../images/hero-car.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-car-key-programming .hero-photo{background-image:url("../images/hero-car-key-programming.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-chevrolet .hero-photo{background-image:url("../images/hero-chevrolet.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-chrysler .hero-photo{background-image:url("../images/hero-chrysler.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-dodge .hero-photo{background-image:url("../images/hero-dodge.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-car-key-fob-programming .hero-photo{background-image:url("../images/hero-fob-programming.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-ford .hero-photo{background-image:url("../images/hero-ford.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-gmc .hero-photo{background-image:url("../images/hero-gmc.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-honda .hero-photo{background-image:url("../images/hero-honda.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-hyundai .hero-photo{background-image:url("../images/hero-hyundai.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-ignition-repair .hero-photo{background-image:url("../images/hero-ignition-repair.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-jeep .hero-photo{background-image:url("../images/hero-jeep.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-kia .hero-photo{background-image:url("../images/hero-kia.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-lexus .hero-photo{background-image:url("../images/hero-lexus.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-mazda .hero-photo{background-image:url("../images/hero-mazda.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-mitsubishi .hero-photo{background-image:url("../images/hero-mitsubishi.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-nissan .hero-photo{background-image:url("../images/hero-nissan.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-ram .hero-photo{background-image:url("../images/hero-ram.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-subaru .hero-photo{background-image:url("../images/hero-subaru.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-toyota .hero-photo{background-image:url("../images/hero-toyota.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  .page-volkswagen .hero-photo{background-image:url("../images/hero-volkswagen.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}

  /* ---------- full-width banner hero ----------
     The home page and the three service pages use wide 2.52:1 banners
     that carry their own headline artwork. Cropping one into the narrow
     photo box beside the form would cut the headline off, so on those
     pages the banner runs the full width and the quote form sits under
     it, two fields per row. Add class="hero banner-hero" to switch a
     page over. The 20 vehicle pages keep the 3:2 photo beside the form. */
  .banner-hero{flex-direction:column;}
  .banner-hero .hero-photo{
    --hero-ar:1180/468;
    width:100%;
    /* Hold the box to the banner's exact 1180:468 ratio at every width.
       padding-bottom is a percentage of the container's WIDTH, so the box
       is always the right height and background-size:cover never has any
       overflow to crop. This works in every browser, unlike aspect-ratio,
       and it replaces the min-height that was forcing a 200px-tall box on
       phones and cutting ~40% off the sides of the banner. */
    height:0;
    min-height:0;
    padding-bottom:39.661%;         /* 468 / 1180 */
    background-position:center;
  }
  .banner-hero .lead-form{
    flex:none;
    width:100%;
    max-width:none;
    padding:18px 24px 20px;
  }
  /* three fields across so a full-width panel stays shallow */
  .banner-hero .lead-form form{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    column-gap:18px;
    align-items:end;
  }
  .banner-hero .lead-form button{margin-bottom:10px;}
  .banner-hero .lead-form .form-msg{grid-column:1 / -1;}

  /* ---------- contact page: form inside the content ---------- */
  .page-contact .lead-form{
    flex:none;
    width:100%;
    max-width:none;
    margin:0 0 26px;
    padding:20px 24px 24px;
  }
  /* two fields per row so the wider panel is not one long column */
  .page-contact .lead-form form{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:18px;
  }
  .page-contact .lead-form label{grid-column:span 1;}
  .page-contact .lead-form input{grid-column:span 1;}
  .page-contact .lead-form label[for="q-address"],
  .page-contact .lead-form input#q-address,
  .page-contact .lead-form button,
  .page-contact .lead-form .form-msg{grid-column:1 / -1;}
  .page-contact .lead-form button{margin-top:8px;}
  /* the in-content link colour must not win over the panel's own link colour */
  .page-contact .copy .lead-call a{color:#ffc93c;text-decoration:none;}
  .page-contact .copy .lead-call a:hover{color:#ffd76b;text-decoration:underline;}
  .page-contact .content .wrap{padding-top:14px;}

  /* ---------- privacy page: single column ---------- */
  .page-privacy-policy .copy{max-width:760px;}
  .page-privacy-policy .content .wrap{padding-top:14px;}

  /* ---------- main content ---------- */
  .content{background:#fff;padding-bottom:40px;}
  .content .wrap{padding-left:60px;padding-right:60px;}

  .section-title{
    background:var(--brand);
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    margin:0 0 22px;
    padding:11px 16px;
  }

  .columns{display:flex;gap:30px;align-items:flex-start;}
  .copy{flex:1 1 auto;}
  .copy p{
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
    line-height:1.65;
    text-align:left;
    margin:0 0 16px;
  }
  .sidebar{flex:0 0 225px;}

  .callout{
    margin-top:26px;
    border-top:2px solid var(--brand);
    padding-top:16px;
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
  }
  .callout strong{color:var(--brand-text);font-size:20px;}

  /* ---------- footer ---------- */
  .footer{
    background:var(--brand-dark);
    color:#f0e2c2;
    font-size:11px;
    text-align:center;
  }
  .footer .wrap{padding-top:14px;padding-bottom:14px;}
  .footer a{color:#fff;}

  a:focus-visible{outline:2px solid #ffd34d;outline-offset:2px;}


  /* ---------- nav dropdown ---------- */
  .nav li{position:relative;}
  .nav .caret{font-size:9px;margin-left:6px;vertical-align:1px;}
  .drop{
    list-style:none;
    margin:0;
    padding:0;
    position:absolute;
    top:100%;
    left:0;
    min-width:235px;
    background:var(--brand-dark);
    box-shadow:0 3px 9px rgba(0,0,0,.3);
    opacity:0;
    visibility:hidden;
    transition:opacity .12s ease;
    z-index:60;
  }
  .has-drop:hover > .drop,
  .has-drop:focus-within > .drop{opacity:1;visibility:visible;}
  .drop li + li{border-left:0;}
  .drop li{border-top:1px solid rgba(255,255,255,.22);}
  .drop a{padding:11px 16px;font-size:12px;white-space:nowrap;}
  .drop a:hover,
  .drop a:focus-visible{background:var(--brand);}
  .drop .current a{background:var(--brand);font-weight:bold;}
  @media (prefers-reduced-motion:reduce){.drop{transition:none;}}


  /* ---------- mobile menu button (hidden on desktop) ---------- */
  .nav-toggle{
    position:absolute;
    width:1px;height:1px;
    opacity:0;
    margin:0;
  }
  .nav-btn{display:none;}
  .bars{
    display:inline-block;
    width:18px;
    height:2px;
    background:#fff;
    position:relative;
    margin-right:10px;
  }
  .bars::before,
  .bars::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:#fff;
  }
  .bars::before{top:-6px;}
  .bars::after{top:6px;}


  /* ---------- mobile submenu toggle (hidden on desktop) ---------- */
  .drop-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;}
  .drop-btn{display:none;}


  /* ---------- hero quote form ---------- */
  .lead-form{
    flex:0 0 300px;
    background:var(--brand-dark);
    color:#fff;
    padding:16px 18px 18px;
  }
  .lead-form h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    margin:0 0 14px;
    color:#fff;
  }
  .lead-form label{
    display:block;
    font-size:11px;
    letter-spacing:.03em;
    text-transform:uppercase;
    margin-bottom:3px;
    color:#e6d4ae;
  }
  .lead-form input{
    display:block;
    width:100%;
    font:inherit;
    font-size:13px;
    padding:7px 8px;
    margin-bottom:10px;
    border:1px solid #8a6f3f;
    background:#fff;
    color:#222;
    border-radius:0;
  }
  .lead-form input:focus{
    outline:2px solid #ffd34d;
    outline-offset:-1px;
  }
  .lead-form input:invalid.touched{border-color:#e06b6b;background:#fff4f4;}
  .lead-form button{
    display:block;
    width:100%;
    font:inherit;
    font-size:14px;
    font-weight:bold;
    color:#3a2c08;
    background:#ffc93c;
    border:0;
    padding:11px 12px;
    margin-top:4px;
    cursor:pointer;
  }
  .lead-form button:hover{background:#ffd76b;}
  .lead-form button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  .form-msg{
    font-size:12px;
    line-height:1.4;
    margin:10px 0 0;
    color:#ffd76b;
  }
  .form-msg:empty{margin:0;}
  .lead-call{
    font-size:12px;
    margin:12px 0 0;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.2);
    color:#e6d4ae;
  }
  .lead-call a{color:#ffc93c;font-weight:bold;}


  /* ---------- sidebar table ---------- */
  .why{
    width:100%;
    margin-top:14px;
    border-collapse:collapse;
    border:1px solid #d8cdb4;
    background:#fff;
  }
  .why caption{
    background:var(--brand-dark);
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:15px;
    text-align:left;
    padding:9px 12px;
  }
  .why td{
    font-size:12.5px;
    line-height:1.4;
    padding:8px 12px 8px 26px;
    border-top:1px solid #e8e0cf;
    position:relative;
  }
  .why tr:first-child td{border-top:0;}
  .why tr:nth-child(even) td{background:#faf6ea;}
  .why td::before{
    content:"\2713";
    position:absolute;
    left:9px;
    color:var(--brand);
    font-weight:bold;
  }


  /* ---------- wide vehicles dropdown ---------- */
  .drop-wide{
    display:grid;
    grid-template-columns:repeat(2,minmax(190px,1fr));
    min-width:420px;
  }
  .drop-wide li:nth-child(-n+2){border-top:0;}
  .drop-wide li:nth-child(odd){border-right:1px solid rgba(255,255,255,.22);}


  .models{
    background:#faf7ef;
    border-left:3px solid var(--brand);
    padding:10px 14px;
  }


  /* ---------- logo + site name ---------- */
  .site-name a{display:block;line-height:0;}
  .site-name img{
    display:block;
    width:290px;
    max-width:100%;
    height:auto;
    flex:0 0 auto;
  }
  /* the website name shown to the right of the logo */
  .site-title{
    font-family:"Source Sans 3",Verdana,Geneva,Arial,sans-serif;
    font-size:25px;
    font-weight:700;
    line-height:1.15;
    letter-spacing:-0.2px;
    color:var(--brand-text);
    white-space:nowrap;
    padding-left:16px;
    border-left:3px solid var(--brand);
  }
  .brand:hover .site-title{color:var(--brand-dark);}


  /* ---------- sidebar coupon ---------- */
  .coupon{display:block;line-height:0;}
  .coupon img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid #d8cdb4;
  }
  .coupon:focus-visible{outline:2px solid #ffd34d;outline-offset:2px;}


  /* ---------- brand logo strip ---------- */
  .brands{background:#fff;}
  .brands .wrap{padding-top:26px;padding-bottom:26px;}
  .brand-grid{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }
  .brand-grid li{margin:0;width:10%;}
  .brand-grid a{
    display:block;
    padding:8px 5px;
    border-radius:3px;
    transition:background .15s ease;
  }
  .brand-grid a:hover{background:#faf6ea;}
  .brand-grid a:focus-visible{outline:2px solid #ffd34d;outline-offset:1px;}
  .brand-grid img{display:block;width:100%;height:auto;}
  @media (prefers-reduced-motion:reduce){.brand-grid a{transition:none;}}


  /* ---------- footer address ---------- */
  .footer .addr{white-space:nowrap;}


  /* ---------- header phone block ---------- */
  .phone-block{text-align:right;}
  .phone-label{
    display:block;
    font-size:12px;
    font-weight:bold;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--brand);
    margin-bottom:2px;
  }
  .phone{display:block;}


  /* ---------- in-content links ---------- */
  .copy p a{
    color:var(--brand-text);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .copy p a:hover{color:var(--brand-dark);}

  @media (max-width:820px){
    .masthead .wrap{flex-direction:column;align-items:center;gap:10px;text-align:center;}
    .phone{font-size:24px;}
    .phone-block{text-align:center;}
    .phone-label{font-size:11px;}
    .site-name .brand{flex-direction:column;gap:8px;}
    .site-name img{width:230px;margin:0 auto;}
    .site-title{
      font-size:21px;
      padding-left:0;
      border-left:0;
      text-align:center;
    }
    .nav-btn{
      display:flex;
      align-items:center;
      background:var(--brand);
      color:#fff;
      font-size:13px;
      padding:14px 16px;
      cursor:pointer;
      user-select:none;
    }
    .nav-toggle:focus-visible + .nav-btn{outline:2px solid #ffd34d;outline-offset:-3px;}
    .nav-toggle:checked + .nav-btn{background:var(--brand-dark);}
    .nav-toggle:checked + .nav-btn .bars{background:transparent;}
    .nav-toggle:checked + .nav-btn .bars::before{top:0;transform:rotate(45deg);}
    .nav-toggle:checked + .nav-btn .bars::after{top:0;transform:rotate(-45deg);}
    .nav{display:none;}
    .nav-toggle:checked ~ nav .nav{display:block;}
    .nav li + li{border-left:0;border-top:1px solid rgba(255,255,255,.3);}
    .nav .caret{display:none;}
    .drop{
      position:static;
      opacity:1;
      visibility:visible;
      box-shadow:none;
      background:rgba(0,0,0,.13);
    }
    .drop a{padding-left:34px;}
    /* Services row becomes a tap-to-open toggle */
    .has-drop > a{display:none;}
    .drop-btn{
      display:flex;
      align-items:center;
      justify-content:space-between;
      color:#fff;
      font-size:13px;
      padding:13px 16px;
      cursor:pointer;
      user-select:none;
    }
    .drop-toggle:focus-visible + .drop-btn{outline:2px solid #ffd34d;outline-offset:-3px;}
    .drop-toggle:checked + .drop-btn{background:var(--brand-dark);}
    .drop-btn .caret{
      display:inline-block;
      font-size:9px;
      margin:0;
      transition:transform .15s ease;
    }
    .drop-toggle:checked + .drop-btn .caret{transform:rotate(180deg);}
    .drop{display:none;}
    .drop-toggle:checked ~ .drop{display:block;}
    .drop-wide{display:none;grid-template-columns:1fr;min-width:0;}
    .drop-toggle:checked ~ .drop-wide{display:block;}
    .drop-wide li:nth-child(odd){border-right:0;}
    .drop-wide li{border-top:1px solid rgba(255,255,255,.22);}

    @media (prefers-reduced-motion:reduce){.drop-btn .caret{transition:none;}}
    .nav a{padding:12px 18px;}
    .hero{flex-direction:column;}
    .lead-form{flex:1 1 auto;}
    .hero-photo{
      min-height:170px;              /* fallback if aspect-ratio is unsupported */
      aspect-ratio:var(--hero-ar);   /* shows the whole banner, nothing cropped */
      background-size:cover;
      background-position:center;
    }
    .page-contact .lead-form form{grid-template-columns:1fr;}
    .banner-hero .lead-form form{grid-template-columns:1fr;}
    .banner-hero .lead-form{padding:16px 18px 18px;}
    .brand-grid li{width:25%;}
    .columns{flex-direction:column;}
    .sidebar{flex:1 1 auto;width:100%;}
    .coupon{max-width:340px;margin:0 auto;}
    .content .wrap{padding-left:20px;padding-right:20px;}
  }

  /* ---------- inner pages ---------- */
  .content h3{
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    color:var(--brand-text);
    margin:26px 0 10px;
  }
  .content ul.plain{
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
    line-height:1.6;
    margin:0 0 16px;
    padding-left:22px;
  }
  .content ul.plain li{margin-bottom:6px;}
  .crumbs{
    font-size:11px;
    color:#666;
    padding-top:14px;
  }
  .crumbs a{color:var(--brand-text);}

  /* ---------- reviews ---------- */
  .reviews{background:#faf7ef;border-top:1px solid #e9e1cf;border-bottom:1px solid #e9e1cf;}
  .reviews .wrap{padding-top:26px;padding-bottom:26px;}
  .reviews h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    color:var(--brand-text);
    margin:0 0 4px;
  }
  .rating-line{font-size:11px;color:#556;margin:0 0 18px;}
  .review-grid{display:flex;gap:16px;flex-wrap:wrap;}
  .review{
    flex:1 1 200px;
    background:#fff;
    border:1px solid #e0d7c3;
    padding:14px 15px;
  }
  .stars{color:#e8a317;letter-spacing:3px;font-size:15px;line-height:1;}
  .review p{
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:13px;
    line-height:1.5;
    margin:9px 0 11px;
  }
  .reviewer{font-size:11px;color:#555;border-top:1px solid #eee;padding-top:8px;}
  .reviewer strong{color:#222;}

  /* ---------- faq ---------- */
  .faq{margin-top:34px;}
  .faq-item{border-bottom:1px solid #e4e4e4;padding-bottom:12px;margin-bottom:16px;}
  .faq-item:last-child{border-bottom:0;}
  .faq-item h3{margin:0 0 7px;}
  .faq-item p{
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
    line-height:1.6;
    margin:0;
  }

  /* ---------- phone-sized hero images ----------
     Under 640px the hero is at most ~430 CSS px wide, so the 1180px
     banner is wasted bytes. These 800px versions cover a phone at 2x
     for about a third of the weight. Plain JPEG on purpose: WebP here
     would have to come through image-set(), and an engine that accepts
     that declaration but cannot resolve it drops the hero entirely. */
  @media (max-width:640px){
    .page-acura .hero-photo{background-image:url("../images/hero-acura-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-buick .hero-photo{background-image:url("../images/hero-buick-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-cadillac .hero-photo{background-image:url("../images/hero-cadillac-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-index .hero-photo{background-image:url("../images/hero-car-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-contact .hero-photo{background-image:url("../images/hero-car-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-privacy-policy .hero-photo{background-image:url("../images/hero-car-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-car-key-programming .hero-photo{background-image:url("../images/hero-car-key-programming-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-chevrolet .hero-photo{background-image:url("../images/hero-chevrolet-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-chrysler .hero-photo{background-image:url("../images/hero-chrysler-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-dodge .hero-photo{background-image:url("../images/hero-dodge-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-car-key-fob-programming .hero-photo{background-image:url("../images/hero-fob-programming-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-ford .hero-photo{background-image:url("../images/hero-ford-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-gmc .hero-photo{background-image:url("../images/hero-gmc-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-honda .hero-photo{background-image:url("../images/hero-honda-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-hyundai .hero-photo{background-image:url("../images/hero-hyundai-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-ignition-repair .hero-photo{background-image:url("../images/hero-ignition-repair-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-jeep .hero-photo{background-image:url("../images/hero-jeep-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-kia .hero-photo{background-image:url("../images/hero-kia-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-lexus .hero-photo{background-image:url("../images/hero-lexus-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-mazda .hero-photo{background-image:url("../images/hero-mazda-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-mitsubishi .hero-photo{background-image:url("../images/hero-mitsubishi-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-nissan .hero-photo{background-image:url("../images/hero-nissan-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-ram .hero-photo{background-image:url("../images/hero-ram-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-subaru .hero-photo{background-image:url("../images/hero-subaru-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-toyota .hero-photo{background-image:url("../images/hero-toyota-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
    .page-volkswagen .hero-photo{background-image:url("../images/hero-volkswagen-m.jpg"),linear-gradient(160deg,#6d7783 0%,#3f4750 55%,#272d34 100%);}
  }
