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

:root{
    --brand:#c34100;
    --brand-dark:#933100;
    --brand-text:#a83800;
    --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:#f4f1ee;
    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;
    aspect-ratio:var(--hero-ar,16/9);
    /* 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=17");--hero-ar:831/466;}
  .view-buick .banner-art{background-image:url("../media/hero-buick-m.jpg?v=17");--hero-ar:831/462;}
  .view-cadillac .banner-art{background-image:url("../media/hero-cadillac-m.jpg?v=17");--hero-ar:832/467;}
  .view-index .banner-art{background-image:url("../media/hero-car-m.jpg?v=17");--hero-ar:1191/294;}
  .view-contact .banner-art{background-image:url("../media/hero-car-m.jpg?v=17");--hero-ar:1191/294;}
  .view-privacy-policy .banner-art{background-image:url("../media/hero-car-m.jpg?v=17");--hero-ar:1191/294;}
  .view-car-key-programming .banner-art{background-image:url("../media/hero-car-key-programming-m.jpg?v=17");--hero-ar:1191/289;}
  .view-chevrolet .banner-art{background-image:url("../media/hero-chevrolet-m.jpg?v=17");--hero-ar:1092/466;}
  .view-chrysler .banner-art{background-image:url("../media/hero-chrysler-m.jpg?v=17");--hero-ar:831/456;}
  .view-dodge .banner-art{background-image:url("../media/hero-dodge-m.jpg?v=17");--hero-ar:831/463;}
  .view-car-key-fob-programming .banner-art{background-image:url("../media/hero-fob-programming-m.jpg?v=17");--hero-ar:1191/295;}
  .view-ford .banner-art{background-image:url("../media/hero-ford-m.jpg?v=17");--hero-ar:1092/467;}
  .view-gmc .banner-art{background-image:url("../media/hero-gmc-m.jpg?v=17");--hero-ar:1093/466;}
  .view-honda .banner-art{background-image:url("../media/hero-honda-m.jpg?v=17");--hero-ar:1093/465;}
  .view-hyundai .banner-art{background-image:url("../media/hero-hyundai-m.jpg?v=17");--hero-ar:1092/463;}
  .view-ignition-repair .banner-art{background-image:url("../media/hero-ignition-repair-m.jpg?v=17");--hero-ar:1191/295;}
  .view-jeep .banner-art{background-image:url("../media/hero-jeep-m.jpg?v=17");--hero-ar:1092/466;}
  .view-kia .banner-art{background-image:url("../media/hero-kia-m.jpg?v=17");--hero-ar:1089/467;}
  .view-lexus .banner-art{background-image:url("../media/hero-lexus-m.jpg?v=17");--hero-ar:832/465;}
  .view-mazda .banner-art{background-image:url("../media/hero-mazda-m.jpg?v=17");--hero-ar:831/463;}
  .view-mitsubishi .banner-art{background-image:url("../media/hero-mitsubishi-m.jpg?v=17");--hero-ar:833/465;}
  .view-nissan .banner-art{background-image:url("../media/hero-nissan-m.jpg?v=17");--hero-ar:1093/468;}
  .view-ram .banner-art{background-image:url("../media/hero-ram-m.jpg?v=17");--hero-ar:831/466;}
  .view-subaru .banner-art{background-image:url("../media/hero-subaru-m.jpg?v=17");--hero-ar:1091/468;}
  .view-toyota .banner-art{background-image:url("../media/hero-toyota-m.jpg?v=17");--hero-ar:1092/467;}
  .view-volkswagen .banner-art{background-image:url("../media/hero-volkswagen-m.jpg?v=17");--hero-ar:832/465;}

  @media (min-width:601px){
    .view-acura .banner-art{background-image:url("../media/hero-acura.jpg?v=17");--hero-ar:831/466;}
    .view-buick .banner-art{background-image:url("../media/hero-buick.jpg?v=17");--hero-ar:831/462;}
    .view-cadillac .banner-art{background-image:url("../media/hero-cadillac.jpg?v=17");--hero-ar:832/467;}
    .view-index .banner-art{background-image:url("../media/hero-car.jpg?v=17");--hero-ar:1191/294;}
    .view-contact .banner-art{background-image:url("../media/hero-car.jpg?v=17");--hero-ar:1191/294;}
    .view-privacy-policy .banner-art{background-image:url("../media/hero-car.jpg?v=17");--hero-ar:1191/294;}
    .view-car-key-programming .banner-art{background-image:url("../media/hero-car-key-programming.jpg?v=17");--hero-ar:1191/289;}
    .view-chevrolet .banner-art{background-image:url("../media/hero-chevrolet.jpg?v=17");--hero-ar:1092/466;}
    .view-chrysler .banner-art{background-image:url("../media/hero-chrysler.jpg?v=17");--hero-ar:831/456;}
    .view-dodge .banner-art{background-image:url("../media/hero-dodge.jpg?v=17");--hero-ar:831/463;}
    .view-car-key-fob-programming .banner-art{background-image:url("../media/hero-fob-programming.jpg?v=17");--hero-ar:1191/295;}
    .view-ford .banner-art{background-image:url("../media/hero-ford.jpg?v=17");--hero-ar:1092/467;}
    .view-gmc .banner-art{background-image:url("../media/hero-gmc.jpg?v=17");--hero-ar:1093/466;}
    .view-honda .banner-art{background-image:url("../media/hero-honda.jpg?v=17");--hero-ar:1093/465;}
    .view-hyundai .banner-art{background-image:url("../media/hero-hyundai.jpg?v=17");--hero-ar:1092/463;}
    .view-ignition-repair .banner-art{background-image:url("../media/hero-ignition-repair.jpg?v=17");--hero-ar:1191/295;}
    .view-jeep .banner-art{background-image:url("../media/hero-jeep.jpg?v=17");--hero-ar:1092/466;}
    .view-kia .banner-art{background-image:url("../media/hero-kia.jpg?v=17");--hero-ar:1089/467;}
    .view-lexus .banner-art{background-image:url("../media/hero-lexus.jpg?v=17");--hero-ar:832/465;}
    .view-mazda .banner-art{background-image:url("../media/hero-mazda.jpg?v=17");--hero-ar:831/463;}
    .view-mitsubishi .banner-art{background-image:url("../media/hero-mitsubishi.jpg?v=17");--hero-ar:833/465;}
    .view-nissan .banner-art{background-image:url("../media/hero-nissan.jpg?v=17");--hero-ar:1093/468;}
    .view-ram .banner-art{background-image:url("../media/hero-ram.jpg?v=17");--hero-ar:831/466;}
    .view-subaru .banner-art{background-image:url("../media/hero-subaru.jpg?v=17");--hero-ar:1091/468;}
    .view-toyota .banner-art{background-image:url("../media/hero-toyota.jpg?v=17");--hero-ar:1092/467;}
    .view-volkswagen .banner-art{background-image:url("../media/hero-volkswagen.jpg?v=17");--hero-ar:832/465;}

    /* ---------- hero layout ----------
       Every banner is artwork that carries its own wording edge to edge, so
       it runs the full width of the column at its own ratio and the quote
       form sits underneath it in two columns. Nothing is cropped. */
    .promo{flex-direction:column;}

    .quotebox{
      flex:none;
      width:100%;
      max-width:none;
      padding:18px 24px 22px;
    }

    .quotebox form{
      display:grid;
      grid-template-columns:1fr 1fr;
      column-gap:18px;
    }

    .quotebox .qfield-wide,
    .quotebox button,
    .quotebox .quotemsg{grid-column:1 / -1;}

    .quotebox button{margin-top:5px;}

    .quotecall{
      flex-direction:row;
      align-items:baseline;
      gap:12px;
    }


    .view-index .quotecall,
    .view-car-key-programming .quotecall,
    .view-car-key-fob-programming .quotecall,
    .view-ignition-repair .quotecall,
    .view-contact .quotecall{
      flex-direction:row;
      align-items:baseline;
      gap:12px;
    }

  }

  /* ---------- 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 .qfield-wide,
  .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:#f0e6df;
    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 ----------
     Two jobs on one panel: take the details, and make the phone number
     impossible to miss. A lost key at 2am is a phone call, not a form,
     so the number is the largest thing in the box after the heading. */
  .quotebox{
    flex:0 0 320px;
    background:var(--brand-dark);
    color:#fff;
    padding:20px 22px 18px;
  }
  .quotebox h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:21px;
    line-height:1.2;
    margin:0 0 6px;
    color:#fff;
  }
  .quotenote{
    font-size:13px;
    line-height:1.5;
    margin:0 0 16px;
    color:#f4e3d8;
  }
  .quotebox label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:5px;
    color:#fff;
  }
  .quotebox input{
    display:block;
    width:100%;
    font:inherit;
    font-size:14px;
    padding:9px 10px;
    margin-bottom:13px;
    border:1px solid rgba(255,255,255,.35);
    background:#fff;
    color:#222;
    border-radius:0;
  }
  .quotebox input::placeholder{color:#8a8a8a;}
  .quotebox input:focus{
    outline:2px solid #ffd34d;
    outline-offset:-1px;
    border-color:#ffd34d;
  }
  .quotebox input:invalid.touched{border-color:#e06b6b;background:#fff4f4;}
  .quotebox button{
    display:block;
    width:100%;
    font:inherit;
    font-size:15px;
    font-weight:bold;
    color:#3a1900;
    background:#ffc93c;
    border:0;
    padding:12px 14px;
    margin-top:3px;
    cursor:pointer;
    transition:background .15s ease;
  }
  .quotebox button:hover{background:#ffd76b;}
  .quotebox button:focus-visible{outline:2px solid #fff;outline-offset:2px;}
  @media (prefers-reduced-motion:reduce){
    .quotebox button{transition:none;}
  }
  .quotemsg{
    font-size:13px;
    line-height:1.45;
    margin:12px 0 0;
    color:#ffd76b;
  }
  .quotemsg:empty{margin:0;}

  .quotecall{
    display:flex;
    flex-direction:column;
    gap:1px;
    margin:16px 0 0;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.22);
  }
  .quotecall span{
    font-size:12px;
    color:#f4e3d8;
  }
  .quotecall a{
    font-family:Georgia,"Times New Roman",serif;
    font-size:25px;
    font-weight:bold;
    line-height:1.15;
    color:#ffc93c;
    text-decoration:none;
  }
  .quotecall a:hover{text-decoration:underline;}
  .quotecall a:focus-visible{outline:2px solid #fff;outline-offset:2px;}


  /* ---------- sidebar table ---------- */
  .pluses{
    width:100%;
    margin-top:14px;
    border-collapse:collapse;
    border:1px solid #d8cec6;
    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 #eae3dd;
    position:relative;
  }
  .pluses tr:first-child td{border-top:0;}
  .pluses tr:nth-child(even) td{background:#faf6f3;}
  .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:#faf6f3;
    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 #d8cec6;
  }
  .offer:focus-visible{outline:2px solid #ffd34d;outline-offset:2px;}


  /* ---------- brand logo strip ---------- */
  /* ---------- makes we service ----------
     Each badge is its own file and links through to that brand's page, so
     the strip doubles as navigation rather than being one flat picture. */
  .makers{background:#fff;}
  .makers .inner{padding-top:30px;padding-bottom:30px;}
  .makers h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:19px;
    font-weight:normal;
    color:var(--brand-text);
    text-align:center;
    margin:0 0 22px;
  }
  .makerlist{
    list-style:none;
    margin:0 auto;
    padding:0;
    max-width:920px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px 10px;
  }
  .makerlist a{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    padding:10px 8px;
    border:1px solid transparent;
  }
  .makerlist img{
    display:block;
    width:100%;
    max-width:150px;
    height:auto;
  }
  .makerlist a:hover{border-color:#e4dcd6;}
  .makerlist a:focus-visible{
    outline:2px solid var(--brand);
    outline-offset:-2px;
  }

  @media (max-width:820px){
    .makerlist{grid-template-columns:repeat(4,1fr);}
  }
  @media (max-width:560px){
    .makerlist{grid-template-columns:repeat(3,1fr);gap:4px;}
    .makers h2{font-size:17px;}
  }


  /* ---------- 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{
      background-size:100% auto;
      background-position:top center;
    }
    .view-contact .quotebox form{grid-template-columns:1fr;}
    .view-index .quotebox form,
    .view-car-key-programming .quotebox form,
    .view-car-key-fob-programming .quotebox form,
    .view-ignition-repair .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 .article h4{
    font-family:Georgia,"Times New Roman",serif;
    font-size:15px;
    color:var(--brand-text);
    margin:20px 0 8px;
  }
  .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:#faf6f3;border-top:1px solid #e8e0d9;border-bottom:1px solid #e8e0d9;}
  .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 #e4dcd6;
    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;
    }
  }