/* Mason's Automotive Service, demo build 2026-07-27.
   Content per research/10. CALM PASS after Matt: "the content is right but the
   style and busy-ness of this is making my head spin."

   Three things were doing it:
   1. Three fixed bars competing (status strip, nav, call bar). Now two: status
      lives inside the nav.
   2. The yellow build notes were the loudest element on every page, and they are
      notes for Matt, not for the customer. Now hidden behind one small toggle.
   3. No breathing room. Wider leading, bigger gaps, one idea per band. */
:root{--blue:#0d47a8;--blue-deep:#0a3480;--ink:#1b2027;--dim:#646d77;--paper:#fcfcfb;
      --panel:#fff;--rule:#e7eaed;--napa:#00539f;--napa-y:#ffcb05;
      --note:#f7f4ec;--note-b:#e3dcc9;--note-ink:#6a5a30}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Newsreader',Georgia,serif;
     font-size:19px;line-height:1.75;padding-bottom:76px}
.disp{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.05}
h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}
.wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 1.35rem}
.narrow{max-width:660px}   /* a comfortable measure, not a full-width slab */

/* one fixed bar, not two: status sits inside the navigation */
nav{background:var(--panel);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:35}
.nav{max-width:1000px;margin:0 auto;padding:.7rem 1.35rem;display:flex;gap:1.15rem;align-items:center;flex-wrap:wrap}
.brand{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1rem;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em;margin-right:auto}
.nav a.lk{color:var(--dim);text-decoration:none;font-size:.93rem}
.nav a.lk:hover,.nav a.lk[aria-current]{color:var(--blue)}
.nav .cta{background:var(--blue);color:#fff;text-decoration:none;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:.88rem;padding:.42rem .85rem;border-radius:7px}
.open{display:flex;align-items:center;gap:.4rem;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600;font-size:.85rem;color:var(--dim)}
.dot{width:8px;height:8px;border-radius:50%;background:#28a765;flex:none}
.dot.shut{background:#c9584f}
@media(max-width:700px){.nav a.lk{display:none}}

main{padding:2.4rem 0 0}
h1{font-size:clamp(1.9rem,5.2vw,2.6rem);margin:.3rem 0 .9rem}
h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.22rem;
   letter-spacing:-.02em;margin:3rem 0 .8rem}
h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1rem;margin:2rem 0 .4rem}
p+p{margin-top:1rem}
.lede{font-size:1.18rem;color:var(--dim);margin-bottom:1.6rem;line-height:1.65}
ul,ol{margin:.9rem 0 .9rem 1.15rem}
li{margin:.55rem 0}
.kicker{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.8rem;
  color:var(--dim);letter-spacing:.02em}

.tel{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(1.6rem,6vw,2.1rem);color:var(--blue);text-decoration:none;letter-spacing:-.035em;line-height:1}
.telsub{color:var(--dim);font-size:.93rem;margin-top:.35rem}
.callblock{margin:2.2rem 0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin-top:1.4rem}
.card{display:block;border:1px solid var(--rule);background:var(--panel);border-radius:10px;
  padding:1.05rem 1.15rem;text-decoration:none;color:var(--ink);transition:border-color .15s}
.card b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.98rem}
.card span{display:block;font-size:.88rem;color:var(--dim);margin-top:.25rem;line-height:1.5}
.card:hover{border-color:var(--blue)}

/* symptom lists read better unboxed. The list IS the structure. */
.sym{margin-top:1rem}
.sym ul{margin-left:0;list-style:none}
.sym li{margin:1.1rem 0;padding-left:1.1rem;border-left:2px solid var(--rule)}
.sym li b{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.97rem}

.proof{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;font-size:.92rem;color:var(--dim);
  padding:1rem 0;border-top:1px solid var(--rule);margin:2.4rem 0 0}
.stars{color:#c98800;letter-spacing:.06em}
.napa{background:var(--napa);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:.72rem;padding:.18rem .48rem;border-bottom:3px solid var(--napa-y)}
.q{font-style:italic;margin-top:1.1rem;font-size:1.08rem}
.qby{color:var(--dim);font-size:.82rem;font-family:'Bricolage Grotesque',sans-serif;margin-top:.2rem}

/* build notes: for Matt, not the customer. Off by default, quiet when on. */
.todo{display:none}
body.notes .todo{display:block;background:var(--note);border:1px solid var(--note-b);
  border-radius:7px;padding:.75rem .9rem;font-size:.88rem;line-height:1.6;
  color:var(--note-ink);margin-top:1.2rem;font-family:'Bricolage Grotesque',sans-serif;font-weight:400}
.todo b{font-weight:700}
.notetoggle{position:fixed;right:.8rem;bottom:5.4rem;z-index:46;background:var(--panel);
  border:1px solid var(--rule);border-radius:100px;padding:.4rem .8rem;font-size:.78rem;
  font-family:'Bricolage Grotesque',sans-serif;color:var(--dim);cursor:pointer;opacity:.75}
.notetoggle:hover{opacity:1}
body.notes .notetoggle{background:var(--note);border-color:var(--note-b);color:var(--note-ink);opacity:1}

form{margin-top:1.4rem}
label{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.88rem;margin:1.3rem 0 .3rem}
input,select,textarea{width:100%;font:inherit;font-size:1rem;padding:.75rem .85rem;
  border:1px solid var(--rule);border-radius:8px;background:var(--panel);color:var(--ink)}
textarea{min-height:120px;line-height:1.6}
button{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.02rem;
  background:var(--blue);color:#fff;border:0;border-radius:9px;padding:.9rem 1.5rem;margin-top:1.5rem;cursor:pointer}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:.55rem 1.35rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(252,252,251,.97);border-top:1px solid var(--rule)}
.bar a{display:block;max-width:1000px;margin:0 auto;text-align:center;background:var(--blue);color:#fff;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.05rem;
  text-decoration:none;padding:.85rem;border-radius:9px}
.note{background:#f1f2f3;color:var(--dim);font-size:.78rem;text-align:center;padding:.42rem 1rem}
footer{margin-top:4rem;border-top:1px solid var(--rule);padding:1.8rem 0 2rem;color:var(--dim);font-size:.88rem}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--blue)}
.fgrid{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-bottom:1.1rem}
.fgrid b{display:none}
.fgrid div{display:contents}
.fgrid a{font-size:.9rem}

@media(min-width:860px){
  body{padding-bottom:0}
  .bar{display:none}
  .notetoggle{bottom:1rem}
  .two{display:grid;grid-template-columns:1.25fr .75fr;gap:0 4rem;align-items:start}
  main{padding-top:3.2rem}
}