/* Car Key Replacement Houston TX
   Stylesheet for all pages. Edit here once and every page updates. */

:root{
    --brand:#316e36;
    --brand-dark:#234f27;
    --brand-text:#2a5f2f;
    --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:#eef0f2;
    color:#222;
  }

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

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

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

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

  /* ---------- hero panel ---------- */
  .banner-band{background:var(--gray-band);}
  .banner-band .inner{padding-top:16px;padding-bottom:20px;}
  .promo{
    background:transparent;
    padding:0;
    display:flex;
    gap:0;
  }
  .banner-art{
    flex:1 1 auto;
    min-height:200px;
    /* The banner is drawn at full column width, top aligned, at its own
       ratio, so nothing is cropped and there are no bands. The panel
       stretches to the height of the quote form beside it and the brand
       green fills whatever is left underneath, finishing level with the
       call line at the foot of the form. */
    background-color:var(--brand-dark);
    background-position:top center;
    background-size:100% auto;
    background-repeat:no-repeat;
  }

  /* ---------- hero image per page ----------
     Mobile first: the 640px wide files load by default, so phones never
     fetch the desktop artwork. Viewports above 600px get the 880px files. */
  .view-acura .banner-art{background-image:url("../media/hero-acura-m.jpg?v=10");}
  .view-buick .banner-art{background-image:url("../media/hero-buick-m.jpg?v=10");}
  .view-cadillac .banner-art{background-image:url("../media/hero-cadillac-m.jpg?v=10");}
  .view-index .banner-art{background-image:url("../media/hero-car-m.jpg?v=10");}
  .view-contact .banner-art{background-image:url("../media/hero-car-m.jpg?v=10");}
  .view-privacy-policy .banner-art{background-image:url("../media/hero-car-m.jpg?v=10");}
  .view-car-key-programming .banner-art{background-image:url("../media/hero-car-key-programming-m.jpg?v=10");}
  .view-chevrolet .banner-art{background-image:url("../media/hero-chevrolet-m.jpg?v=10");}
  .view-chrysler .banner-art{background-image:url("../media/hero-chrysler-m.jpg?v=10");}
  .view-dodge .banner-art{background-image:url("../media/hero-dodge-m.jpg?v=10");}
  .view-car-key-fob-programming .banner-art{background-image:url("../media/hero-fob-programming-m.jpg?v=10");}
  .view-ford .banner-art{background-image:url("../media/hero-ford-m.jpg?v=10");}
  .view-gmc .banner-art{background-image:url("../media/hero-gmc-m.jpg?v=10");}
  .view-honda .banner-art{background-image:url("../media/hero-honda-m.jpg?v=10");}
  .view-hyundai .banner-art{background-image:url("../media/hero-hyundai-m.jpg?v=10");}
  .view-ignition-repair .banner-art{background-image:url("../media/hero-ignition-repair-m.jpg?v=10");}
  .view-jeep .banner-art{background-image:url("../media/hero-jeep-m.jpg?v=10");}
  .view-kia .banner-art{background-image:url("../media/hero-kia-m.jpg?v=10");}
  .view-lexus .banner-art{background-image:url("../media/hero-lexus-m.jpg?v=10");}
  .view-mazda .banner-art{background-image:url("../media/hero-mazda-m.jpg?v=10");}
  .view-mitsubishi .banner-art{background-image:url("../media/hero-mitsubishi-m.jpg?v=10");}
  .view-nissan .banner-art{background-image:url("../media/hero-nissan-m.jpg?v=10");}
  .view-ram .banner-art{background-image:url("../media/hero-ram-m.jpg?v=10");}
  .view-subaru .banner-art{background-image:url("../media/hero-subaru-m.jpg?v=10");}
  .view-toyota .banner-art{background-image:url("../media/hero-toyota-m.jpg?v=10");}
  .view-volkswagen .banner-art{background-image:url("../media/hero-volkswagen-m.jpg?v=10");}

  @media (min-width:601px){
    .view-acura .banner-art{background-image:url("../media/hero-acura.jpg?v=10");}
    .view-buick .banner-art{background-image:url("../media/hero-buick.jpg?v=10");}
    .view-cadillac .banner-art{background-image:url("../media/hero-cadillac.jpg?v=10");}
    .view-index .banner-art{background-image:url("../media/hero-car.jpg?v=10");}
    .view-contact .banner-art{background-image:url("../media/hero-car.jpg?v=10");}
    .view-privacy-policy .banner-art{background-image:url("../media/hero-car.jpg?v=10");}
    .view-car-key-programming .banner-art{background-image:url("../media/hero-car-key-programming.jpg?v=10");}
    .view-chevrolet .banner-art{background-image:url("../media/hero-chevrolet.jpg?v=10");}
    .view-chrysler .banner-art{background-image:url("../media/hero-chrysler.jpg?v=10");}
    .view-dodge .banner-art{background-image:url("../media/hero-dodge.jpg?v=10");}
    .view-car-key-fob-programming .banner-art{background-image:url("../media/hero-fob-programming.jpg?v=10");}
    .view-ford .banner-art{background-image:url("../media/hero-ford.jpg?v=10");}
    .view-gmc .banner-art{background-image:url("../media/hero-gmc.jpg?v=10");}
    .view-honda .banner-art{background-image:url("../media/hero-honda.jpg?v=10");}
    .view-hyundai .banner-art{background-image:url("../media/hero-hyundai.jpg?v=10");}
    .view-ignition-repair .banner-art{background-image:url("../media/hero-ignition-repair.jpg?v=10");}
    .view-jeep .banner-art{background-image:url("../media/hero-jeep.jpg?v=10");}
    .view-kia .banner-art{background-image:url("../media/hero-kia.jpg?v=10");}
    .view-lexus .banner-art{background-image:url("../media/hero-lexus.jpg?v=10");}
    .view-mazda .banner-art{background-image:url("../media/hero-mazda.jpg?v=10");}
    .view-mitsubishi .banner-art{background-image:url("../media/hero-mitsubishi.jpg?v=10");}
    .view-nissan .banner-art{background-image:url("../media/hero-nissan.jpg?v=10");}
    .view-ram .banner-art{background-image:url("../media/hero-ram.jpg?v=10");}
    .view-subaru .banner-art{background-image:url("../media/hero-subaru.jpg?v=10");}
    .view-toyota .banner-art{background-image:url("../media/hero-toyota.jpg?v=10");}
    .view-volkswagen .banner-art{background-image:url("../media/hero-volkswagen.jpg?v=10");}
  }

  /* ---------- contact page: form inside the content ---------- */
  .view-contact .quotebox{
    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 */
  .view-contact .quotebox form{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:18px;
  }
  .view-contact .quotebox label{grid-column:span 1;}
  .view-contact .quotebox input{grid-column:span 1;}
  .view-contact .quotebox label[for="q-address"],
  .view-contact .quotebox input#f-addr,
  .view-contact .quotebox button,
  .view-contact .quotebox .quotemsg{grid-column:1 / -1;}
  .view-contact .quotebox button{margin-top:8px;}
  .view-contact .mainblock .inner{padding-top:14px;}

  /* ---------- privacy page: single column ---------- */
  .view-privacy-policy .article{max-width:760px;}
  .view-privacy-policy .mainblock .inner{padding-top:14px;}

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

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

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

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

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

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


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


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


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


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


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


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


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


  /* ---------- logo ---------- */
  .brandmark a{
    display:flex;
    align-items:center;
    gap:14px;
    line-height:0;
  }
  .brandmark img{
    display:block;
    width:100%;
    max-width:300px;
    height:auto;
    flex:0 1 auto;
    min-width:0;
  }
  /* website name shown to the right of the logo */
  .sitename{
    line-height:1.15;
    font-family:Georgia,"Times New Roman",serif;
    font-size:26px;
    font-weight:bold;
    color:var(--brand-text);
    letter-spacing:-0.3px;
    white-space:nowrap;
  }


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


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


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


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


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

  @media (max-width:820px){
    .headstrip .inner{flex-direction:column;align-items:center;gap:10px;text-align:center;}
    .callnum{font-size:24px;}
    .callbox{text-align:center;}
    .callnote{font-size:11px;}
    .brandmark img{max-width:230px;margin:0;}
    .brandmark a{justify-content:center;gap:12px;}
    .sitename{font-size:22px;}
    .menu-open{
      display:flex;
      align-items:center;
      background:var(--brand);
      color:#fff;
      font-size:13px;
      padding:14px 16px;
      cursor:pointer;
      user-select:none;
    }
    .menu-switch:focus-visible + .menu-open{outline:2px solid #ffd34d;outline-offset:-3px;}
    .menu-switch:checked + .menu-open{background:var(--brand-dark);}
    .menu-switch:checked + .menu-open .burger{background:transparent;}
    .menu-switch:checked + .menu-open .burger::before{top:0;transform:rotate(45deg);}
    .menu-switch:checked + .menu-open .burger::after{top:0;transform:rotate(-45deg);}
    .navlist{display:none;}
    .menu-switch:checked ~ nav .navlist{display:block;}
    .navlist li + li{border-left:0;border-top:1px solid rgba(255,255,255,.3);}
    .navlist .chev{display:none;}
    .flyout{
      position:static;
      opacity:1;
      visibility:visible;
      box-shadow:none;
      background:rgba(0,0,0,.13);
    }
    .flyout a{padding-left:34px;}
    /* Services row becomes a tap-to-open toggle */
    .sub > a{display:none;}
    .sub-open{
      display:flex;
      align-items:center;
      justify-content:space-between;
      color:#fff;
      font-size:13px;
      padding:13px 16px;
      cursor:pointer;
      user-select:none;
    }
    .sub-switch:focus-visible + .sub-open{outline:2px solid #ffd34d;outline-offset:-3px;}
    .sub-switch:checked + .sub-open{background:var(--brand-dark);}
    .sub-open .chev{
      display:inline-block;
      font-size:9px;
      margin:0;
      transition:transform .15s ease;
    }
    .sub-switch:checked + .sub-open .chev{transform:rotate(180deg);}
    .flyout{display:none;}
    .sub-switch:checked ~ .flyout{display:block;}
    .flyout-wide{display:none;grid-template-columns:1fr;min-width:0;}
    .sub-switch:checked ~ .flyout-wide{display:block;}
    .flyout-wide li:nth-child(odd){border-right:0;}
    .flyout-wide li{border-top:1px solid rgba(255,255,255,.22);}

    @media (prefers-reduced-motion:reduce){.sub-open .chev{transition:none;}}
    .navlist a{padding:12px 18px;}
    .promo{flex-direction:column;}
    .quotebox{flex:1 1 auto;}
    .banner-art{
      min-height:170px;              /* fallback if aspect-ratio is unsupported */
      --hero-ar:16/9;                /* stacked, so the whole banner fits */
      aspect-ratio:var(--hero-ar);
      background-size:cover;
      background-position:center;
    }
    .view-contact .quotebox form{grid-template-columns:1fr;}
    .split{flex-direction:column;}
    .railcol{flex:1 1 auto;width:100%;}
    .offer{max-width:340px;margin:0 auto;}
    .mainblock .inner{padding-left:20px;padding-right:20px;}
  }

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

  /* ---------- reviews ---------- */
  .feedback{background:#f2f5f9;border-top:1px solid #dde3ea;border-bottom:1px solid #dde3ea;}
  .feedback .inner{padding-top:26px;padding-bottom:26px;}
  .feedback h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    color:var(--brand-text);
    margin:0 0 4px;
  }
  .scoreline{font-size:11px;color:#556;margin:0 0 18px;}
  .feedback-grid{display:flex;gap:16px;flex-wrap:wrap;}
  .feedback-item{
    flex:1 1 200px;
    background:#fff;
    border:1px solid #d6dce4;
    padding:14px 15px;
  }
  .score{color:#e8a317;letter-spacing:3px;font-size:15px;line-height:1;}
  .feedback-item 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;
  }
  .feedback-item blockquote{margin:0;}
  .author{font-size:11px;color:#555;border-top:1px solid #eee;padding-top:8px;}
  .author strong{color:#222;}
/* ---------- faq ---------- */
  .questions{margin-top:34px;}
  .question{border-bottom:1px solid #e4e4e4;padding-bottom:12px;margin-bottom:16px;}
  .question:last-child{border-bottom:0;}
  .question h3{margin:0 0 7px;}
  .question p{
    font-family:"Source Sans 3","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:15px;
    line-height:1.6;
    margin:0;
  }

  /* ---------- site name: stack under the logo on narrow phones ---------- */
  @media (max-width:560px){
    .brandmark a{flex-direction:column;gap:8px;}
    .brandmark img{max-width:210px;margin:0 auto;}
    .sitename{
      font-size:20px;
      white-space:normal;
      text-align:center;
    }
  }