/* Smith Motors — built to brand guidelines v1.4.
     White ground, black text, Graphite headings, Spray Yellow on buttons and rules only.
     Deliberately single-theme: the guidelines specify a white website. */
  :root{
    --white:#FFFFFF;
    --graphite:#383838;
    --ink:#000000;
    --yellow:#FDFB3C;
    --grey:#ECECEA;
    --steel:#6E7175;
    --hairline:#CFCFCB;
    --amber:#A65F05;

    --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
    --sans:"Barlow",Arial,Helvetica,sans-serif;

    --max:1080px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  section[id]{scroll-margin-top:156px}
  @media (max-width:560px){ section[id]{scroll-margin-top:140px} }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  body{
    background:var(--white);
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{margin:0;font-family:var(--cond);color:var(--graphite);line-height:1.08;text-wrap:balance}
  h1{font-weight:700;font-size:clamp(38px,7vw,64px);text-transform:none}
  h2{font-weight:600;font-size:clamp(28px,4vw,40px)}
  h3{font-weight:600;font-size:22px}
  p{margin:0}
  a{color:inherit}
  img,svg{max-width:100%}
  ul{margin:0;padding:0;list-style:none}

  .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:20px}
  .label{
    font-family:var(--sans);font-weight:600;font-size:14px;color:var(--graphite);
    letter-spacing:.06em;text-transform:uppercase;
  }
  .headline p.label{margin-top:0}
  .label-dark{color:#C9C9C4}
  .sub{font-family:var(--sans);font-weight:600;font-size:20px;color:var(--ink)}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:var(--sans);font-weight:600;font-size:17px;line-height:1;
    padding:15px 22px;border-radius:4px;border:2px solid transparent;
    text-decoration:none;cursor:pointer;background:none;
  }
  .btn-yellow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
  .btn-yellow:hover{background:#F2F03A}
  .btn-line{background:var(--white);color:var(--ink);border-color:var(--graphite)}
  .btn-line:hover{background:var(--grey)}
  a:focus-visible,button:focus-visible,summary:focus-visible{
    outline:3px solid var(--graphite);outline-offset:2px
  }
  .find a:focus-visible,.top a:focus-visible{outline-color:var(--white)}
  .btn svg{width:18px;height:18px;flex:none}

  /* ---------- header: graphite, logo left, phone always reachable ---------- */
  .top{position:sticky;top:0;z-index:50;background:var(--graphite);border-bottom:3px solid var(--yellow)}
  .top .wrap{display:flex;align-items:center;gap:16px;padding-block:12px}
  .top .logo{width:172px;flex:none}
  .top nav{margin-left:auto;display:flex;gap:22px}
  .top nav a{font-size:16px;font-weight:500;text-decoration:none;color:#E6E6E3}
  .top nav a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px;
    text-decoration-thickness:2px;text-decoration-color:var(--yellow)}
  .top .btn{margin-left:auto;padding:12px 18px;font-size:16px;white-space:nowrap}
  @media (min-width:901px){ .top nav + .btn{margin-left:0} }

  /* ---------- hero ---------- */
  .hero{padding-block:48px 40px}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:stretch}
  .hero p.lede{margin-top:20px;font-size:19px;max-width:60ch}
  .hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
  .hero .shot{width:100%;height:100%;min-height:400px;object-fit:cover;display:block;
    align-self:stretch;border:1px solid var(--hairline)}
  .hero .aside{border:1px solid var(--hairline);padding:22px;margin-top:34px}
  .hero .aside p{margin-top:10px;font-size:16px}
  .hero .aside .num{
    font-family:var(--cond);font-weight:700;font-size:30px;color:var(--graphite);
    display:block;margin-top:14px;text-decoration:none;letter-spacing:.01em;
  }
  .hero .aside .num span{display:block;font-family:var(--sans);font-size:13px;font-weight:600;
    color:var(--steel);text-transform:uppercase;letter-spacing:.06em}

  /* ---------- before & after — first thing under the hero ---------- */
  .work{background:var(--grey);padding-block:52px;border-block:1px solid var(--hairline)}
  .headline{max-width:62ch}
  .headline p{margin-top:12px;color:var(--ink)}
  .pairs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:32px}
  .pair{background:var(--white);border:1px solid var(--hairline)}
  .pair .shots{display:grid;grid-template-columns:1fr 1fr}
  .pair figure{margin:0;position:relative;border-right:1px solid var(--hairline)}
  .pair figure:last-child{border-right:0}
  .pair figure img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 64%}
  .pair figcaption{
    position:absolute;left:0;top:0;background:var(--graphite);color:var(--white);
    font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em;
    text-transform:uppercase;padding:5px 10px;
  }
  .pair .cap{padding:13px 15px;border-top:1px solid var(--hairline);font-size:15px}
  .pair .cap h3{font-family:var(--cond);font-weight:600;font-size:20px;color:var(--graphite);
    display:block;margin-bottom:2px}

  /* three-step panel sequence */
  .seq{list-style:none;margin:22px 0 0;padding:0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
  .seq li{counter-increment:step;position:relative}
  .seq figure{margin:0;background:var(--white);border:1px solid var(--hairline);height:100%}
  .seq img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
  .seq figcaption{padding:13px 15px;font-size:15px}
  .seq figcaption b{display:block;font-family:var(--cond);font-weight:600;font-size:20px;
    color:var(--graphite)}
  .seq li::before{
    content:counter(step);position:absolute;left:0;top:0;z-index:2;
    background:var(--yellow);color:var(--ink);font-family:var(--cond);font-weight:700;
    font-size:17px;line-height:1;padding:8px 12px;border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
  }

  /* workshop strip */
  .sub-head{margin-top:52px}

  /* ---------- what we do ---------- */
  .does{padding-block:56px}
  .grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;margin-top:32px}
  .does .item{border-top:4px solid var(--yellow);padding-top:16px}
  .does .item h3{font-size:21px}
  .does .item p{margin-top:8px;font-size:16px}

  /* ---------- plant ---------- */
  .plantwork{background:var(--grey);padding-block:56px;border-top:1px solid var(--hairline)}

  /* ---------- how it works ---------- */
  .how{background:var(--white);padding-block:56px;border-block:1px solid var(--hairline)}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:32px}
  .step{background:var(--white);border:1px solid var(--hairline);padding:24px}
  .step .n{
    font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.1em;
    color:var(--steel);display:block;margin-bottom:8px;
  }
  .step p{margin-top:10px;font-size:16px}

  /* ---------- paint code ---------- */
  .paint{background:var(--grey);padding-block:56px;border-bottom:1px solid var(--hairline)}
  .paint .wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  .paint p{margin-top:14px;max-width:58ch}
  .paint-right{display:grid;gap:22px;align-content:start}
  .paint .black{margin:0}
  .paint .black img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
    object-position:center 45%;border:1px solid var(--hairline)}
  .paint .black figcaption{margin-top:10px;font-size:15px;color:var(--graphite)}
  .where{background:var(--white);border:1px solid var(--hairline);padding:22px}
  .where li{display:flex;gap:12px;padding-block:11px;border-bottom:1px solid var(--hairline);font-size:16px}
  .where li:last-child{border-bottom:0}
  .where li::before{
    content:"";width:10px;height:10px;flex:none;margin-top:8px;background:var(--yellow);
    border:1px solid var(--graphite);
  }

  /* ---------- reviews ---------- */
  .reviews{padding-block:56px;border-top:1px solid var(--hairline)}
  .quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
  .quotes blockquote{margin:0;background:var(--white);border:1px solid var(--hairline);
    border-top:4px solid var(--yellow);padding:22px}
  .quotes blockquote p{font-size:17px}
  .quotes .stars{display:flex;gap:3px;margin-bottom:12px}
  .quotes .stars svg{width:18px;height:18px;fill:var(--amber);flex:none}
  .quotes cite{display:block;margin-top:14px;font-style:normal;font-size:15px;color:var(--steel)}

  .reviews .seeall{margin-top:26px;font-size:17px;font-weight:600}
  .reviews .seeall a{text-decoration:underline;text-underline-offset:4px;
    text-decoration-thickness:3px;text-decoration-color:var(--yellow)}
  .reviews .seeall a:hover{text-decoration-color:var(--graphite)}

  /* ---------- find us ---------- */
  .find{background:var(--graphite);color:var(--white);padding-block:52px}
  .find h2{color:var(--white)}
  .find .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
  .find p{margin-top:14px;font-size:17px}
  .find .addr{font-family:var(--cond);font-weight:600;font-size:clamp(21px,2.4vw,27px);
    line-height:1.25;margin-top:18px}
  .find .hours{font-family:var(--sans);font-weight:600;font-size:17px;margin-top:14px}
  .find .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
  .find .btn-line{background:transparent;color:var(--white);border-color:var(--white)}
  .find .btn-line:hover{background:rgba(255,255,255,.12)}
  .find .unit{margin:0}
  .find .unit img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
    border:1px solid rgba(255,255,255,.22)}
  .find .unit figcaption{margin-top:10px;font-size:15px;color:#C8C8C4}

  /* ---------- footer ---------- */
  footer{background:var(--white);padding-block:40px;border-top:3px solid var(--yellow)}
  .findus{
    display:flex;align-items:center;gap:18px;text-decoration:none;
    background:var(--grey);border:1px solid var(--hairline);
    padding:22px 24px;margin-bottom:36px;flex-wrap:wrap;
  }
  .findus:hover{background:#E4E4E1}
  .findus .pin{flex:none;color:var(--graphite)}
  .findus .pin svg{width:34px;height:34px;display:block}
  .findus-text{flex:1 1 280px;display:grid;gap:3px}
  .findus-text b{font-family:var(--cond);font-weight:600;font-size:23px;color:var(--graphite)}
  .findus-text span{font-size:16px;color:var(--ink)}
  .findus-go{
    flex:none;font-weight:600;font-size:16px;color:var(--ink);
    border-bottom:3px solid var(--yellow);padding-bottom:2px;
  }
  .foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
  .foot h3{font-size:17px;margin-bottom:10px}
  .foot p,.foot a{font-size:16px;display:block;margin-bottom:5px;text-decoration:none}
  .foot a:hover{text-decoration:underline;text-underline-offset:3px}
  .foot .steel{color:var(--steel);font-size:15px}
  .legal{margin-top:34px;padding-block:18px 0;color:var(--steel);font-size:14px}
  .legal .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    border-top:1px solid var(--hairline);padding-top:18px}

  /* layout variants in use on the page */
  .pairs1{grid-template-columns:1fr;max-width:640px}
  .quotes3{grid-template-columns:repeat(3,1fr)}
  .seq2{grid-template-columns:repeat(2,1fr);max-width:660px}

  @media (max-width:900px){
    .hero .wrap,.paint .wrap,.find .wrap{grid-template-columns:1fr;gap:30px}
    .pairs,.steps,.quotes{grid-template-columns:1fr 1fr}
    .quotes3{grid-template-columns:1fr}
    .pairs1{max-width:none}
    .seq{grid-template-columns:1fr}
    .grid4{grid-template-columns:1fr 1fr}
    .foot{grid-template-columns:1fr 1fr}
    .top nav{display:none}
    .top .btn{margin-left:auto}
    .find .unit img{aspect-ratio:16/10}
  }
  @media (max-width:560px){
    .pairs,.steps,.grid4,.foot,.seq,.seq2,.quotes{grid-template-columns:1fr}
    .top .logo{width:150px}
    .top .btn{padding:11px 14px;font-size:15px}
    .hero{padding-block:36px 32px}
    .hero .shot{min-height:0;aspect-ratio:4/3;height:auto}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* ---------- show more ---------- */
  .more{margin-top:30px}
  .more summary{
    display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
    font-family:var(--sans);font-weight:600;font-size:17px;color:var(--ink);
    background:var(--white);border:2px solid var(--graphite);border-radius:4px;
    padding:13px 20px;
  }
  .more summary::-webkit-details-marker{display:none}
  .more summary:hover{background:var(--yellow);border-color:var(--yellow)}
  .more summary:focus-visible{outline:3px solid var(--graphite);outline-offset:3px}
  .more summary::after{
    content:"";width:11px;height:11px;flex:none;margin-top:-4px;
    border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
    transform:rotate(45deg);transition:transform .15s ease;
  }
  .more[open] summary::after{transform:rotate(-135deg);margin-top:3px}
  .more .more-open{display:none}
  .more[open] .more-shut{display:none}
  .more[open] .more-open{display:inline}
  .more-body{padding-top:30px}
  .more-body .pairs{margin-top:0}
  .sub-h{font-family:var(--cond);font-weight:600;font-size:clamp(22px,2.6vw,28px);
    color:var(--graphite)}
  @media (prefers-reduced-motion:reduce){ .more summary::after{transition:none} }

  .ext{width:14px;height:14px;display:inline-block;vertical-align:-1px;margin-left:5px;
    opacity:.75;flex:none}

  .since{
    margin-top:22px;padding-left:16px;border-left:4px solid var(--yellow);
    font-family:var(--cond);font-weight:600;font-size:clamp(21px,2.4vw,26px);
    color:var(--graphite);line-height:1.25;
  }

  /* hero bullet list + opening hours in the price box */
  .lede-list{margin-top:20px;display:grid;gap:9px;max-width:46ch}
  .lede-list li{display:flex;gap:12px;font-size:18px;align-items:flex-start}
  .lede-list li::before{
    content:"";width:11px;height:11px;flex:none;margin-top:9px;
    background:var(--yellow);border:1px solid var(--graphite);
  }
  .hero p.lede{margin-top:18px;font-size:18px}
  .hero .aside .hrs{
    margin-top:0;font-family:var(--cond);font-weight:600;
    font-size:21px;color:var(--graphite);line-height:1.25;
  }
  .hero .aside .hrs span{
    display:block;font-family:var(--sans);font-size:13px;font-weight:600;
    color:var(--steel);text-transform:uppercase;letter-spacing:.06em;
  }

  /* plant section: words beside the pictures so the band fills */
  .plant-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  .plant-words h2{margin-top:8px}
  .plant-words p{margin-top:16px;max-width:52ch}
  .plant-words .more{margin-top:26px}
  .plant-pics .pairs1{max-width:none;margin-top:0}
  @media (max-width:900px){ .plant-grid{grid-template-columns:1fr;gap:30px} }

  .legal .privacy{max-width:52ch;line-height:1.5}

  /* social links in the footer */
  .social{display:flex;gap:10px;margin-top:12px;list-style:none;padding:0}
  .social a{
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;
    border:1px solid var(--hairline);border-radius:4px;padding:8px 12px 8px 10px;
    font-size:15px;font-weight:600;color:var(--ink);background:var(--white);
  }
  .social a:hover{background:var(--grey);border-color:var(--graphite)}
  .social svg{width:20px;height:20px;flex:none;color:var(--graphite)}
  @media (max-width:560px){ .social{flex-wrap:wrap} }