/* roycarkeyseattle - site styles
   One stylesheet drives every page. Brand colours are the
   custom properties in the :root block directly below. */

:root{
    --brand:#d94250;
    --brand-dark:#a8303c;
    --brand-nav:#b93744;
    --brand-text:#b83745;
    --panel:#241a17;
    --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:#f1eeee;
    color:#222;
  }

  /* hairline of brand colour above everything */
  .edgeline{height:5px;background:var(--brand);}

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

  /* ---------- top brand bar ---------- */
  .brandbar{background:#fff;}
  .brandbar .shell{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-top:22px;
    padding-bottom:22px;
  }
  .mark{
    margin:0;
    font-size:30px;
    font-weight:bold;
    color:var(--brand-text);
    letter-spacing:-0.3px;
  }
  .mark a{color:inherit;text-decoration:none;}
  .hail-num{
    font-family:Georgia,"Times New Roman",serif;
    font-size:30px;
    font-weight:bold;
    color:var(--brand-text);
    white-space:nowrap;
    text-decoration:none;
  }

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

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

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

  /* brand banners: show the whole artwork, never crop the logo */
  .v-subaru .bannerart,
  .v-ford .bannerart,
  .v-toyota .bannerart,
  .v-jeep .bannerart,
  .v-honda .bannerart,
  .v-chevrolet .bannerart,
  .v-nissan .bannerart,
  .v-mazda .bannerart,
  .v-hyundai .bannerart,
  .v-gmc .bannerart,
  .v-kia .bannerart,
  .v-dodge .bannerart,
  .v-volkswagen .bannerart,
  .v-ram .bannerart,
  .v-lexus .bannerart,
  .v-chrysler .bannerart,
  .v-acura .bannerart,
  .v-cadillac .bannerart,
  .v-mitsubishi .bannerart,
  .v-buick .bannerart{
    background-size:contain;
    background-color:#fff;
    background-position:center;
  }


  /* ---------- contact page: form inside the content ---------- */
  .v-contact .askpanel{
    flex:none;
    width:100%;
    max-width:none;
    margin:0 0 26px;
    padding:20px 24px 24px;
  }
  /* pair the fields up so the wide panel is not one tall stack */
  .v-contact .askpanel form{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:18px;
  }
  .v-contact .askpanel label{grid-column:span 1;}
  .v-contact .askpanel input{grid-column:span 1;}
  .v-contact .askpanel label[for="fld-where"],
  .v-contact .askpanel input#fld-where,
  .v-contact .askpanel button,
  .v-contact .askpanel .askpanel-alert{grid-column:1 / -1;}
  .v-contact .askpanel button{margin-top:8px;}
  .v-contact .mainband .shell{padding-top:14px;}
  /* the form sits inside .prose here, so .prose p a would otherwise repaint
     the phone link dark red on the dark red panel */
  .v-contact .prose .askpanel p a{color:#ffd76b;}
  .v-contact .prose .askpanel p a:hover{color:#fff;}

  /* ---------- privacy page: single column ---------- */
  .v-privacy-policy .prose{max-width:760px;}
  .v-privacy-policy .mainband .shell{padding-top:14px;}

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

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

  .duo{display:flex;gap:30px;align-items:flex-start;}
  .prose{flex:1 1 auto;}
  .prose 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;
  }
  .rail{flex:0 0 225px;}

  .endnote{
    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;
  }
  .endnote strong{color:var(--brand-text);font-size:20px;}

  /* ---------- base bar ---------- */
  .basebar{
    background:var(--brand-dark);
    color:#fadfe2;
    font-size:11px;
    text-align:center;
  }
  .basebar .shell{padding-top:14px;padding-bottom:14px;}
  .basebar a{color:#fff;}

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


  /* ---------- nav dropdown ---------- */
  .menu li{position:relative;}
  .menu .tick{font-size:9px;margin-left:6px;vertical-align:1px;}
  .sublist{
    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;
  }
  .holds:hover > .sublist,
  .holds:focus-within > .sublist{opacity:1;visibility:visible;}
  .sublist li + li{border-left:0;}
  .sublist li{border-top:1px solid rgba(255,255,255,.22);}
  .sublist a{padding:11px 16px;font-size:12px;white-space:nowrap;}
  .sublist a:hover,
  .sublist a:focus-visible{background:var(--brand-nav);}
  .sublist .onpage a{background:var(--brand-nav);font-weight:bold;}
  @media (prefers-reduced-motion:reduce){.sublist{transition:none;}}


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


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


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


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


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


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


  /* ---------- wordmark ---------- */
  .mark a{display:block;line-height:0;}
  .mark img{
    display:block;
    width:100%;
    max-width:330px;
    height:auto;
  }


  /* ---------- rail: offer panel ---------- */
  .dealbox{display:block;line-height:0;}
  .dealbox img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid #d8d2d1;
  }
  .dealbox:focus-visible{outline:2px solid #ffd34d;outline-offset:2px;}


  /* ---------- brand logo strip ---------- */
  .marques{background:#fff;}
  .marques .shell{padding-top:26px;padding-bottom:26px;}
  .marques img{
    display:block;
    width:100%;
    max-width:900px;
    height:auto;
    margin:0 auto;
  }


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


  /* ---------- header site name + phone block ---------- */
  .hail{text-align:right;}
  .hail-name{
    display:block;
    font-family:Georgia,"Times New Roman",serif;
    font-size:20px;
    font-weight:bold;
    line-height:1.2;
    letter-spacing:.01em;
    color:var(--panel);
    margin-bottom:5px;
    white-space:nowrap;
  }
  .hail-tag{
    display:block;
    font-size:12px;
    font-weight:bold;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--brand-text);
    margin-bottom:2px;
  }
  .hail-num{display:block;}


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

  @media (max-width:820px){
    .brandbar .shell{flex-direction:column;align-items:center;gap:10px;text-align:center;}
    .hail-num{font-size:24px;}
    .hail{text-align:center;}
    .hail-name{font-size:17px;}
    .hail-tag{font-size:11px;}
    .mark img{max-width:250px;margin:0 auto;}
    .menukey{
      display:flex;
      align-items:center;
      background:var(--brand-nav);
      color:#fff;
      font-size:13px;
      padding:14px 16px;
      cursor:pointer;
      user-select:none;
    }
    .menuswitch:focus-visible + .menukey{outline:2px solid #ffd34d;outline-offset:-3px;}
    .menuswitch:checked + .menukey{background:var(--brand-dark);}
    .menuswitch:checked + .menukey .grill{background:transparent;}
    .menuswitch:checked + .menukey .grill::before{top:0;transform:rotate(45deg);}
    .menuswitch:checked + .menukey .grill::after{top:0;transform:rotate(-45deg);}
    .menu{display:none;}
    .menuswitch:checked ~ nav .menu{display:block;}
    .menu li + li{border-left:0;border-top:1px solid rgba(255,255,255,.3);}
    .menu .tick{display:none;}
    .sublist{
      position:static;
      opacity:1;
      visibility:visible;
      box-shadow:none;
      background:rgba(0,0,0,.13);
    }
    .sublist a{padding-left:34px;}
    /* Services row becomes a tap-to-open toggle */
    .holds > a{display:none;}
    .subkey{
      display:flex;
      align-items:center;
      justify-content:space-between;
      color:#fff;
      font-size:13px;
      padding:13px 16px;
      cursor:pointer;
      user-select:none;
    }
    .subswitch:focus-visible + .subkey{outline:2px solid #ffd34d;outline-offset:-3px;}
    .subswitch:checked + .subkey{background:var(--brand-dark);}
    .subkey .tick{
      display:inline-block;
      font-size:9px;
      margin:0;
      transition:transform .15s ease;
    }
    .subswitch:checked + .subkey .tick{transform:rotate(180deg);}
    .sublist{display:none;}
    .subswitch:checked ~ .sublist{display:block;}
    .sublist-wide{display:none;grid-template-columns:1fr;min-width:0;}
    .subswitch:checked ~ .sublist-wide{display:block;}
    .sublist-wide li:nth-child(odd){border-right:0;}
    .sublist-wide li{border-top:1px solid rgba(255,255,255,.22);}

    @media (prefers-reduced-motion:reduce){.subkey .tick{transition:none;}}
    .menu a{padding:12px 18px;}
    .banner{flex-direction:column;}
    .askpanel{flex:1 1 auto;}
    .bannerart{
      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;
    }
    .v-contact .askpanel form{grid-template-columns:1fr;}
    .duo{flex-direction:column;}
    .rail{flex:1 1 auto;width:100%;}
    .dealbox{max-width:340px;margin:0 auto;}
    .mainband .shell{padding-left:20px;padding-right:20px;}
  }

  /* ---------- inner pages ---------- */
  .mainband h3{
    font-family:Georgia,"Times New Roman",serif;
    font-size:17px;
    color:var(--brand-text);
    margin:26px 0 10px;
  }
  .mainband 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;
  }
  .mainband ul.plain li{margin-bottom:6px;}
  .trail{
    font-size:11px;
    color:#666;
    padding-top:14px;
  }
  .trail a{color:var(--brand-text);}

  /* ---------- reviews ---------- */
  .praise{background:#f9f5f5;border-top:1px solid #e5dedd;border-bottom:1px solid #e5dedd;}
  .praise .shell{padding-top:26px;padding-bottom:26px;}
  .praise h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    color:var(--brand-text);
    margin:0 0 4px;
  }
  .praise-score{font-size:11px;color:#556;margin:0 0 18px;}
  .praise-grid{display:flex;gap:16px;flex-wrap:wrap;}
  .praise-card{
    flex:1 1 200px;
    background:#fff;
    border:1px solid #ded7d6;
    padding:14px 15px;
  }
  .pips{color:#e8a317;letter-spacing:3px;font-size:15px;line-height:1;}
  .praise-card 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;
  }
  .praise-by{font-size:11px;color:#555;border-top:1px solid #eee;padding-top:8px;}
  .praise-by strong{color:#222;}

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