@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* Affordable Tire Co — shared styles (light mode) */
:root{
  --ink:#1B1C1E;
  --paper:#FFFFFF;
  --bg:#F5F4F1;
  --red:#C0221E;
  --red-dark:#9C1B18;
  --steel:#5A5F66;
  --line:#DFDDD8;
  --chrome:#ECEDEF;
  --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  padding-bottom:64px;
}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,9vw,4.3rem)}
h2{font-size:clamp(1.9rem,6vw,2.8rem)}
h3{font-size:1.35rem}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.92em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--red);margin-bottom:.6rem}

/* Header — light */
header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 20px;max-width:1060px;margin:0 auto}
.logo{display:block}
.logo img{height:58px;width:auto}
.topbar .phone{font-family:'IBM Plex Mono',monospace;font-size:.9rem;text-decoration:none;color:var(--red);border:1.5px solid var(--red);padding:.35rem .7rem;border-radius:6px;white-space:nowrap;font-weight:600}
.topbar .phone:hover{background:var(--red);color:#fff}
nav.mainnav{background:var(--bg);border-top:1px solid var(--line)}
nav.mainnav ul{display:flex;gap:1.1rem;list-style:none;max-width:1060px;margin:0 auto;padding:0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* The <a> is what a thumb hits, so the height lives here, not on the <li>. */
nav.mainnav a{display:flex;align-items:center;min-height:44px;color:var(--steel);text-decoration:none;font-size:.92rem;white-space:nowrap;font-weight:600}
nav.mainnav a:hover,nav.mainnav a[aria-current]{color:var(--red)}

/* Tread divider — signature, light */
.tread{height:22px;background:
  repeating-linear-gradient(-45deg,#C9C7C1 0 10px,transparent 10px 20px),
  repeating-linear-gradient(45deg,#C9C7C1 0 10px,transparent 10px 20px);
  background-size:40px 11px;background-repeat:repeat-x;background-position:0 0,0 11px}

/* Hero — light */
.hero{background:var(--paper);padding:2.6rem 0 2.8rem;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;gap:1.6rem;align-items:center;justify-items:center;text-align:center}
@media(min-width:820px){.hero .wrap{grid-template-columns:1.15fr .85fr;justify-items:stretch;text-align:left}.hero .art{order:2}}
.hero .art img{display:block;width:min(52vw,220px);height:auto;margin-inline:auto}
@media(min-width:560px){.hero .art img{width:min(40vw,260px)}}
@media(min-width:820px){.hero .art img{width:100%;max-width:330px;margin-inline:0 auto}}
.hero h1 .hl{color:var(--red)}
.hero p.lead{max-width:34rem;margin:1rem auto .4rem;color:var(--steel);font-size:1.06rem}
@media(min-width:820px){.hero p.lead{margin-inline:0}}
.btnrow{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.3rem 0 .6rem}
@media(max-width:819px){.hero .btnrow,.hero .badges{justify-content:center}}
.btn{display:inline-block;text-decoration:none;font-weight:600;padding:.85rem 1.4rem;border-radius:8px;font-size:1rem;text-align:center}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
/* Four badges wrap 2+1+1 on a phone, which reads as a mistake. Grid them 2x2. */
.badges{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1rem;margin-top:1.4rem}
@media(min-width:700px){.badges{display:flex;gap:1.6rem;flex-wrap:wrap}}
.badge b{font-family:'Barlow Condensed',sans-serif;font-size:1.9rem;display:block;line-height:1;color:var(--red)}
.badge small{color:var(--steel);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}

/* Sections */
section{padding:3rem 0}
section.alt{background:var(--paper)}
.grid{display:grid;gap:1rem;margin-top:1.6rem}
@media(min-width:640px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:repeat(3,1fr)}}

/* Service cards */
/* Every card is the same shape: pill, title, blurb, CTA. The flex column plus
   margin-top:auto on .go pins all seven CTAs to a common baseline, so the row
   lines up no matter how long the blurb runs. */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.2rem 1.1rem;text-decoration:none;display:flex;flex-direction:column;height:100%;transition:border-color .15s,transform .15s;box-shadow:0 1px 2px rgba(27,28,30,.05)}
.card:hover{border-color:var(--red);transform:translateY(-2px)}
.card h3{font-size:1.3rem;line-height:1.08;margin-bottom:.35rem;min-height:2.16em;display:flex;align-items:flex-end}
.card p{color:var(--steel);font-size:.95rem;flex:1 1 auto}
.card .go{color:var(--red);font-weight:600;font-size:.9rem;display:inline-block;margin-top:.9rem}
@media(max-width:639px){
  .card{padding:1.05rem 1.1rem}
  .card h3{font-size:1.42rem;min-height:0;display:block}
  .card p{font-size:1rem}
}
section.alt .card{background:var(--bg)}

/* Location blocks */
.loc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:0 1px 2px rgba(27,28,30,.05)}
.loc .addr{margin:.4rem 0 .2rem}
.loc .tel{font-family:'IBM Plex Mono',monospace;text-decoration:none;color:var(--red);font-weight:600}
.loc .status,.card .tag,.brand .tier{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;padding:.2rem .5rem;border-radius:4px;margin-bottom:.5rem}
.status.open{background:#E4F1E4;color:#1E6B2E}
.status.reno{background:#F7ECD8;color:#8A5A00}
.hours{font-family:'IBM Plex Mono',monospace;font-size:.85rem;color:var(--steel);margin-top:.7rem;width:100%}
.hours td{padding:.12rem 0}
.hours td:last-child{text-align:right}
#locations .grid .loc{max-width:430px}
/* Quotable fact table. Two columns on a phone would truncate the values, so it
   stays one row per fact until there is room. */
.facts{margin-top:1.6rem;border-top:1px solid var(--line)}
.facts>div{display:grid;gap:.15rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.facts dt{font-family:'IBM Plex Mono',monospace;font-size:.76rem;text-transform:uppercase;letter-spacing:.11em;color:var(--steel)}
.facts dd{font-size:1.05rem;font-weight:500}
@media(min-width:700px){
  .facts>div{grid-template-columns:15rem 1fr;gap:1.5rem;align-items:baseline}
  .facts dt{padding-top:.15rem}
}
/* The header is sticky and ~120px tall, so anchor jumps (#services, #brands,
   #locations…) must clear it or the heading lands underneath. */
[id]{scroll-margin-top:8.5rem}
/* Price/financing callout. One column on a phone so the numbers stay large. */
.pricebar{display:grid;gap:.9rem;margin-top:1.6rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem}
.pricebar>div{display:flex;align-items:baseline;gap:.7rem}
.pricebar b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.9rem;line-height:1;color:var(--red);white-space:nowrap}
/* Full-bleed storefront band under the hero. Short on a phone so the content
   below stays reachable, taller once there is room. */
.band{position:relative;margin:0;background:var(--ink);overflow:hidden}
.band img{width:100%;height:clamp(200px,42vw,420px);object-fit:cover;object-position:center 45%;display:block}
/* At 1000px the height stops growing and the band only gets wider, so hero_band()
   swaps in the wide crop here. That crop is already letterboxed — it just needs
   biasing upward so a very wide monitor cannot trim the sign off the top. */
@media(min-width:1000px){.band img{object-position:center 25%}}
.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 20px .8rem;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);color:#fff}
.band figcaption span{display:block;max-width:1060px;margin:0 auto;
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}

/* Contextual photo inside a service page. */
.inset{margin:1.6rem 0 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.inset img{width:100%;height:auto;max-height:420px;object-fit:cover;display:block}
.inset figcaption{padding:.75rem 1rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--steel)}
.inset-todo{border-style:dashed;background:transparent}
.inset-todo .todo{aspect-ratio:16/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;text-align:center;padding:1.2rem;
  background:repeating-linear-gradient(45deg,#EFEDE9,#EFEDE9 10px,#E7E4DF 10px,#E7E4DF 20px);color:var(--steel)}
.inset-todo .cam{font-size:1.7rem;filter:grayscale(1);opacity:.55}
.inset-todo b{color:var(--ink);font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:1.05rem}
.inset-todo .todo span:last-child{font-size:.82rem;max-width:30ch;line-height:1.4}

/* Shop photography. aspect-ratio holds the frame before the file loads. */
.shots{display:grid;gap:1rem;margin-top:1.6rem}
@media(min-width:560px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.shots{grid-template-columns:repeat(4,1fr)}}
.shot{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.shot-todo{border-style:dashed;background:transparent}
.shot-todo .todo{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;text-align:center;padding:1rem;background:repeating-linear-gradient(45deg,#EFEDE9,#EFEDE9 10px,#E7E4DF 10px,#E7E4DF 20px);color:var(--steel)}
.shot-todo .cam{font-size:1.7rem;filter:grayscale(1);opacity:.55}
.shot-todo b{color:var(--ink);font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em}
.shot-todo .todo span:last-child{font-size:.82rem;max-width:22ch;line-height:1.4}
.shot figcaption{padding:.75rem 1rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--steel);line-height:1.5}

/* Guides: long-form comparison and seasonal content. */
.guide{max-width:46rem}
.guide h2{margin-top:2.2rem}
.guide h3{margin-top:1.6rem;margin-bottom:.4rem}
.guide p{margin-top:.7rem}
.guide ul{margin:.7rem 0 0 1.1rem}
.guide li{margin-top:.4rem}
.verdict{display:grid;gap:1rem;margin-top:1.6rem}
@media(min-width:700px){.verdict{grid-template-columns:1fr 1fr}}
.verdict>div{border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;background:var(--paper)}
.verdict .yes{border-color:#BFE0C4}
.verdict .no{border-color:#E8C4C2}
.verdict h3{margin-top:0}
.guidecards{display:grid;gap:1rem;margin-top:1.6rem}
@media(min-width:640px){.guidecards{grid-template-columns:repeat(2,1fr)}}

/* Google review carousel. Slides are stacked and cross-faded; the track keeps a
   min-height so the section does not jump as the text length changes. */
.rsummary{margin-top:1rem;font-size:1.05rem}
.rsummary strong{font-size:1.25rem}
.rsummary-placeholder{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--steel);text-transform:uppercase;letter-spacing:.08em}
.stars{color:#E8A020;letter-spacing:.08em;font-size:1.1rem}
.stars.muted{color:var(--line)}
.rtrack{position:relative;margin-top:1.2rem;min-height:15rem}
@media(min-width:700px){.rtrack{min-height:11rem}}
.review{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.review.on{opacity:1;visibility:visible;position:relative}
.review blockquote{font-size:1.05rem;line-height:1.55;flex:1 1 auto}
.review figcaption{font-family:'IBM Plex Mono',monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.review.is-placeholder{border-style:dashed;background:transparent}
.review.is-placeholder blockquote{color:var(--steel)}
.rdots{display:flex;gap:.5rem;margin-top:1rem}
.rdot{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.rdot::after{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .2s}
.rdot.on::after{background:var(--red)}
.rcta{margin-top:.9rem;font-weight:600}
@media(prefers-reduced-motion:reduce){.review{transition:none}}
/* Financing disclosure sits with the terms it qualifies — small, but present. */
.finedisc{margin-top:.7rem;color:var(--steel);font-size:.82rem;line-height:1.5}
.pricebar span{color:var(--steel);font-size:.95rem}
@media(min-width:700px){
  .pricebar{grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .pricebar>div{flex-direction:column;gap:.2rem}
}
/* Brand tiers read as a price ladder: premium warm, mid neutral, value cool. */
.brand h3{margin-bottom:.35rem}
.tier-premium{background:#F3E7D6;color:#7A5310}
.tier-mid{background:var(--chrome);color:var(--steel)}
.tier-value{background:#E4EDF4;color:#2A5A7A}
.areas li a{text-decoration:none}
.areas li:hover{border-color:var(--red)}
.card-feature{border-color:#BFE0C4;box-shadow:0 2px 10px rgba(30,107,46,.10)}
/* Neutral by default so all seven cards start at the same vertical offset;
   the mobile card takes the same green as the "Open · Walk-ins welcome" pill. */
.card .tag{background:var(--chrome);color:var(--steel)}
.card-feature .tag{background:#E4F1E4;color:#1E6B2E}

/* Accepted-payment strip — footer only. The artwork is one wide row, so on a
   phone it is capped by width (not height) and centred; letting it run full
   width would shrink each mark to an illegible smudge. */
.payments{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.payments img{width:100%;max-width:340px;height:auto;display:block}
@media(min-width:640px){.payments img{max-width:420px}}
#mobile .loc h3{margin-bottom:.5rem}
.areas{margin-top:2.2rem;border-top:1px solid var(--line);padding-top:1.6rem}
.areas ul{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}
/* Padding lives on the <a>, not the <li>, so the whole pill is tappable —
   otherwise a thumb landing on the pill's padding hits nothing. */
.areas li{background:var(--paper);border:1px solid var(--line);border-radius:999px;font-size:.92rem;display:flex}
.areas li a{display:flex;align-items:center;min-height:44px;padding:.5rem 1rem}

/* FAQ */
details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);margin-top:.7rem}
summary{cursor:pointer;font-weight:600;padding:1rem 1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-family:'Barlow Condensed';font-size:1.4rem;color:var(--red)}
details[open] summary::after{content:"–"}
details p{padding:0 1.1rem 1rem;color:var(--steel)}

/* Service page article */
article.service{padding:2.6rem 0}
article.service .wrap{max-width:760px}
article.service p{margin:1rem 0;color:#33353a}
article.service ul{margin:1rem 0 1rem 1.2rem;color:#33353a}
article.service li{margin:.35rem 0}
.symptom{background:var(--paper);border-left:4px solid var(--red);border-radius:0 8px 8px 0;padding:1rem 1.1rem;margin:1.4rem 0;box-shadow:0 1px 2px rgba(27,28,30,.05)}
.symptom h3{margin-bottom:.4rem}
.crumbs{font-size:.85rem;color:var(--steel);padding-top:1.4rem}
.crumbs a{color:var(--steel)}

/* CTA band — red pop on light site */
.cta-band{background:var(--red);color:#fff;text-align:center;padding:2.6rem 20px}
.cta-band h2{margin-bottom:.4rem}
.cta-band p{color:#FBE3E2;margin-bottom:1.2rem}
.cta-band .btn-red{background:#fff;color:var(--red)}
.cta-band .btn-red:hover{background:var(--chrome)}

/* Footer — light */
footer{background:var(--paper);border-top:1px solid var(--line);color:var(--steel);padding:2.2rem 0 2.6rem;font-size:.9rem}
footer .wrap{display:grid;gap:1.4rem}
@media(min-width:640px){footer .wrap{grid-template-columns:1fr 1fr 1fr}}
footer h3{color:var(--ink);font-size:1.05rem;margin-bottom:.5rem}
footer a{color:var(--steel);text-decoration:none}
footer a:hover{color:var(--red)}
footer ul{list-style:none}
footer li{margin:.3rem 0}
footer .flogo{height:64px;width:auto;margin-bottom:.7rem}

/* Sticky mobile action bar */
.actionbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;box-shadow:0 -4px 14px rgba(0,0,0,.15)}
.actionbar a{flex:1;text-align:center;padding:.95rem .5rem;font-weight:700;text-decoration:none;font-size:1rem;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.actionbar .call{background:var(--red);color:#fff}
.actionbar .dir{background:var(--ink);color:#fff}
@media(min-width:900px){.actionbar{display:none}body{padding-bottom:0}}

:focus-visible{outline:3px solid var(--red);outline-offset:2px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}

/* Readable measure. Text inside cards and grids is already constrained by its
   container, but prose that spans the full 1060px wrapper runs to ~120
   characters a line on a desktop — roughly double what the eye tracks
   comfortably, and the reason long FAQ answers feel like work to read. */
#faq summary,
#faq details p,
.facts dd,
section:not(.hero) > .wrap > .lead,
section > .wrap > .areas > p{max-width:42rem}