/* ==========================================================================
   Done-Rite Tire & Auto: site styles
   Built from the Claude Design file "Done-Rite Website.dc.html" (desktop
   canvas 1280px, mobile canvas 390px).

   Contents
   1. Tokens
   2. Base
   3. Layout helpers
   4. Buttons and labels
   5. Header (Affirm bar, nav, mobile menu)
   6. Hero and page titles
   7. Embed placeholders
   8. Home sections
   9. Shop Tires
   10. Services
   11. Book an Appointment / Contact
   12. Footer
   13. Service detail pages
   14. Rewards, Financing, Contact form, Thanks / 404
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --red: #d6272e;
  --red-dark: #b81f25;
  --black: #000;
  --white: #fff;
  --panel: #181818;          /* info cards on dark pages */
  --line-dark: #222;         /* hairlines on black */
  --line-dark-2: #2a2a2a;
  --line-light: #e2e2e2;     /* hairlines on white */
  --grey-bg: #f2f2f2;
  --skeleton-1: #eee;
  --skeleton-2: #f3f3f3;
  --text-body: #333;
  --text-muted-dark: rgba(255, 255, 255, .7);

  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1280px;
  --gutter: 48px;
  --tracking-label: .14em;
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 900; text-wrap: balance; }
p, li { text-wrap: pretty; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--white); color: var(--black);
  padding: 10px 16px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 3. Layout helpers -------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-light { background: var(--white); color: var(--black); }
.section-grey  { background: var(--grey-bg); color: var(--black); }
.section-red   { background: var(--red); color: var(--white); }

/* 4. Buttons and labels ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 30px;
  font-weight: 800; font-size: 14px; line-height: 1.2;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--red   { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-dark); }
.btn--white { background: var(--white); color: var(--black); }
.btn--white:hover { background: var(--black); color: var(--white); }
.btn--black { background: var(--black); color: var(--white); }
.btn--black:hover { background: var(--red); }
.btn--outline {
  border: 2.5px solid var(--black); color: var(--black);
  padding: 11px 16px; font-size: 12px;
}
.btn--outline:hover { background: var(--black); color: var(--white); }

/* Small red uppercase label above contact details */
.eyebrow {
  display: block;
  color: var(--red);
  font-weight: 700; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.6;
}

/* Red number chip (01, 02...) */
.num-chip {
  display: inline-block;
  background: var(--red); color: var(--white);
  font-weight: 900; font-size: 15px; line-height: 1.6;
  padding: 0 10px;
}

/* Red uppercase text link with arrow */
.link-arrow {
  color: var(--red);
  font-weight: 800; font-size: 13px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; white-space: nowrap;
}
.link-arrow:hover { color: var(--black); }

/* The tilted red box used in every headline. Text inside is ALWAYS caps. */
.red-box {
  display: inline-block;
  background: var(--red); color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;      /* a red box never wraps onto two lines */
  transform: rotate(-2.5deg);
}

/* 5. Header ---------------------------------------------------------------- */
.affirm-bar {
  background: var(--red);
  text-align: center;
  padding: 10px 12px;
  font-weight: 700; font-size: 13px; line-height: 1.4;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.affirm-bar a:hover { text-decoration: underline; }
.affirm-bar__short { display: none; }

.site-header { position: relative; z-index: 50; background: var(--black); border-bottom: 1px solid var(--line-dark); }

.site-header__inner {
  display: flex; align-items: center; gap: 36px;
  padding-block: 14px;
}

.site-logo { flex: none; margin-left: -10px; }
.site-logo img { height: 120px; width: auto; }

.header-menu { display: contents; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.main-nav a {
  position: relative; display: block;
  font-weight: 700; font-size: 13px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; line-height: 1.6;
}
.main-nav a:hover { color: var(--red); }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px;
  height: 3px; background: var(--red);
}

.header-cta {
  display: flex; flex-direction: column; gap: 10px;
  padding-left: 36px; border-left: 1px solid #333;
}
.header-cta__phone { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.header-cta__phone .eyebrow { font-size: 11px; letter-spacing: .16em; }
.header-cta__phone a { font-weight: 800; font-size: 22px; letter-spacing: .01em; }
.header-cta__phone a:hover { color: var(--red); }
.header-cta .btn { padding: 13px 20px; font-size: 13px; letter-spacing: .12em; }

.menu-toggle { display: none; }
.header-book-mobile { display: none; }

@media (max-width: 1080px) {
  .affirm-bar { font-size: 11px; letter-spacing: .12em; padding: 9px 12px; }
  .affirm-bar__long { display: none; }
  .affirm-bar__short { display: inline; }

  .site-header__inner { gap: 10px; padding-block: 10px; }
  .site-logo { margin-left: -6px; margin-right: auto; }
  .site-logo img { height: 72px; }

  .header-book-mobile {
    display: inline-flex; height: 44px; padding: 0 16px;
    font-size: 12px; letter-spacing: .12em;
  }

  .menu-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .menu-toggle span { width: 26px; height: 3px; background: var(--white); transition: transform .2s, opacity .2s; }
  .menu-open .menu-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* Nav + call block become one drop-down panel */
  .header-menu { display: none; }
  .menu-open .header-menu {
    display: block;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--black);
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
    padding: 0 var(--gutter) 28px;
  }
  .main-nav { margin: 0; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { padding: 18px 0; font-size: 15px; border-bottom: 1px solid var(--line-dark); }
  .main-nav a[aria-current="page"] { color: var(--red); }
  .main-nav a[aria-current="page"]::after { display: none; }
  .header-cta { border-left: 0; padding: 22px 0 0; }
  .header-cta .btn { display: none; }
}

/* 6. Hero and page titles -------------------------------------------------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 70%, #000 100%);
}
.hero__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 60px var(--gutter);
}
.hero__title {
  display: flex; flex-direction: column; align-items: center;
  font-size: 128px; line-height: .95; letter-spacing: -.02em; text-transform: uppercase;
}
.hero__title .red-box { line-height: 1; padding: 4px 32px 10px; margin: 4px 0; }
.hero__sub { font-size: 20px; line-height: 1.45; max-width: 600px; margin: 30px 0 26px; }

@media (max-width: 1080px) {
  .hero__title { font-size: 96px; }
}
@media (max-width: 760px) {
  .hero { min-height: 560px; }
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.75) 70%, #000 100%); }
  .hero__content { align-self: stretch; justify-content: center; padding-inline: var(--gutter); }
  .hero__title { font-size: 66px; }
  .hero__title .red-box { font-size: 62px; padding: 2px 18px 6px; }
  .hero__sub { font-size: 16px; margin: 22px 0 20px; }
  .hero .btn { align-self: stretch; padding: 16px 22px; font-size: 13px; letter-spacing: .12em; }
}
@media (max-width: 360px) {
  .hero__title { font-size: 56px; }
  .hero__title .red-box { font-size: 52px; }
}

/* Inner-page title band: black, big headline with red box, intro on the right */
.page-title {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  padding-top: 80px; padding-bottom: 60px;
}
.page-title--end { align-items: end; padding-bottom: 70px; }
.page-title--book { grid-template-columns: 1.2fr 1fr; align-items: end; padding-bottom: 50px; }
.page-title h1 { font-size: 110px; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; }
.page-title--book h1 { font-size: 100px; }
.page-title h1 .red-box { padding: 2px 26px 8px; margin-top: 6px; }
.page-title p { font-size: 18px; line-height: 1.6; }
.page-title--book p { font-size: 17px; }

@media (max-width: 1080px) {
  .page-title, .page-title--book { grid-template-columns: 1fr; gap: 28px; }
  .page-title h1, .page-title--book h1 { font-size: 84px; }
}
@media (max-width: 760px) {
  .page-title, .page-title--end, .page-title--book { padding-top: 48px; padding-bottom: 40px; }
  .page-title h1 { font-size: clamp(40px, 13vw, 54px); }
  .page-title--book h1 { font-size: clamp(28px, 9vw, 54px); }  /* "APPOINTMENT" is the longest boxed word */
  .page-title h1 .red-box { padding: 2px 14px 6px; }
  .page-title p, .page-title--book p { font-size: 16px; }
}


/* 7. Embed placeholders -----------------------------------------------------
   Every .embed block marks where a third-party widget goes. Replace the whole
   block with the vendor's embed code. Skeleton bars are for layout only. */
.embed { background: var(--white); color: var(--black); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.embed__label {
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: #777;
}
.embed__bar { background: var(--skeleton-1); height: 88px; }
.embed__split { display: grid; grid-template-columns: 1.8fr 1fr; gap: 14px; height: 420px; }
.embed__split > :first-child { background: var(--skeleton-2); }
.embed__split > :last-child { background: var(--skeleton-1); }

.embed--dashed {
  background: none; color: var(--white);
  border: 1.5px dashed rgba(255, 255, 255, .6);
  min-height: 110px; align-items: center; justify-content: center;
}
.embed--dashed .embed__label { color: inherit; text-align: center; padding-inline: 16px; }

@media (max-width: 760px) {
  .embed { padding: 16px; gap: 12px; }
  .embed__label { font-size: 11px; }
  .embed__bar { height: 150px; }
  .embed__split { grid-template-columns: 1fr; height: auto; }
  .embed__split > :first-child { height: 280px; }
  .embed__split > :last-child { height: 200px; }
  .embed--dashed { min-height: 140px; }
}

/* Live widgets (TireConnect: Tire Wizard on Shop Tires, service requests on Home and Book)
   sit on a white card. min-height stops the page jumping while the widget loads. */
.widget-card { background: var(--white); color: var(--black); padding: 22px; min-height: 420px; scroll-margin-top: 24px; }
@media (max-width: 760px) { .widget-card { padding: 12px; } }
/* Small phones: TireConnect's forms need ~270px, so the card runs edge to edge */
@media (max-width: 400px) { .widget-card { margin-inline: calc(-1 * var(--gutter)); padding: 8px; } }
/* Costar scheduler. Costar draws its own black background, so there's no white card or padding;
   it sits straight on the page. We can't style inside the frame, so it's lined up from outside:
   Costar keeps a fixed strip on the left for its red "!" markers and a few px on the right, so the
   frame is pulled left (into the gutter) and widened until the form's boxes line up with our
   headings and banner. Costar's layout (measured Nov 2026):
     - frame narrower than 668px: one column; markers 5-35px from the left, boxes start at 39px,
       end 5px from the right. Needs a 1200px-tall frame.
     - 668px or wider: two columns; markers at 10-40px, boxes start at 44px, end 10px from the
       right. Needs 800px. Past 1050px Costar stops growing and centres itself, so the frame is
       capped at 1050px to keep the form lined up on the left. Beyond that, main.js sets --fit
       (container width / 996px, the widest the boxes get) and the frame is scaled up so the form
       still reaches the right edge; margin-bottom makes room for the extra height.
   The 638px container query is where the widened frame reaches 668px. On phones the gutter is only
   20px, so the pull is limited to that and the boxes sit a little in from the left edge. */
.widget-card--scheduler { container-type: inline-size; min-height: 0; background: none; padding: 0; margin: 20px 0 0; }
@media (max-width: 760px) { .widget-card--scheduler { margin-top: 12px; } }
.scheduler-frame {
  --pull: min(39px, var(--gutter));
  display: block; border: 0; height: 1200px;
  margin-left: calc(-1 * var(--pull)); width: calc(100% + var(--pull) + 5px); max-width: none;
}
@container (min-width: 638px) {
  .scheduler-frame {
    --pull: min(44px, var(--gutter)); width: calc(100% + var(--pull) + 10px); max-width: 1050px; height: 800px;
    margin-left: calc(-1 * var(--pull) * var(--fit, 1));
    transform: scale(var(--fit, 1)); transform-origin: 0 0; margin-bottom: calc(800px * (var(--fit, 1) - 1));
  }
}
.booking-layout__main { min-width: 0; }   /* let the Book page column shrink around the widget */

/* Red "changeovers are open" banner; its button scrolls to the booking widget */
/* The headline is sized from the room the button leaves (cqw = 1% of the banner's width): one line on
   the Home banner, two balanced lines on the narrower Book banner. If the button runs out of room it
   drops below the text. */
.changeover-banner {
  background: var(--red);
  padding: 32px 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  container-type: inline-size;
}
.changeover-banner > div:first-child { flex: 1 1 340px; min-width: 0; }
.changeover-banner h2 { font-size: clamp(26px, calc((100cqw - 380px) / 19.2), 44px); line-height: 1.05; text-transform: uppercase; }
.changeover-banner p { font-size: clamp(16px, 1.55cqw, 19px); line-height: 1.5; margin-top: 8px; }
.changeover-banner__br { display: none; }
.changeover-banner__action { flex: none; }
.changeover-banner--compact { padding: 28px 32px; column-gap: 28px; }
.changeover-banner--compact h2 { font-size: clamp(24px, calc((100cqw - 360px) / 13.4), 36px); }
.changeover-banner--compact .changeover-banner__br { display: inline; }

@media (max-width: 860px) {
  .changeover-banner, .changeover-banner--compact { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px; }
  .changeover-banner > div:first-child { flex: none; }
  .changeover-banner h2, .changeover-banner--compact h2 { font-size: clamp(18px, calc(100cqw / 13.2), 26px); }
  .changeover-banner p { font-size: 14px; margin-top: 6px; }
  .changeover-banner__br { display: inline; }
  .changeover-banner__action .btn { width: 100%; }
}

/* 8. Home sections --------------------------------------------------------- */
.home-booking { padding-top: 40px; padding-bottom: 90px; display: flex; flex-direction: column; gap: 22px; }
.home-booking__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-top: 40px;
}
.home-booking__head h2 { font-size: 56px; line-height: .95; text-transform: uppercase; }
.home-booking__head p { text-align: right; font-size: 15px; line-height: 1.7; }
.nowrap { white-space: nowrap; }   /* phone numbers and short phrases that shouldn't split */

/* Below ~910px the heading and the hours no longer fit side by side, so stack them. */
@media (max-width: 910px) {
  .home-booking__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .home-booking__head p { text-align: left; }
}

@media (max-width: 760px) {
  .home-booking { padding-top: 24px; padding-bottom: 60px; gap: 16px; }
  .home-booking__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; }
  .home-booking__head h2 { font-size: 34px; }
  .home-booking__head p { text-align: left; font-size: 14px; line-height: 1.6; }
}

.services-teaser { padding-block: 90px; }
.services-teaser__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: 40px;
}
.services-teaser__head h2 { font-size: 52px; line-height: 1.05; letter-spacing: -.01em; }
.services-teaser__head .link-arrow { padding-bottom: 6px; }

.service-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.service-card {
  border-top: 6px solid var(--black);
  padding-top: 20px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.service-card__title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.service-card h3 { font-weight: 800; font-size: 22px; line-height: 1.15; }
.service-card p { font-size: 15px; line-height: 1.55; color: var(--text-body); flex: 1; }
.service-card .btn { margin-top: 8px; }

@media (max-width: 1080px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}
@media (max-width: 760px) {
  .services-teaser { padding-block: 60px; }
  .services-teaser__head { margin-bottom: 28px; }
  .services-teaser__head h2 { font-size: 32px; }
  .services-teaser__head .link-arrow { display: none; }
  .service-cards { grid-template-columns: 1fr; gap: 28px; }
  .service-card { border-top-width: 5px; padding-top: 16px; gap: 10px; }
  /* Mobile: number chip sits inline with the title */
  .service-card__title { flex-direction: row; align-items: center; }
  .service-card .num-chip { font-size: 13px; padding: 0 8px; }
  .service-card h3 { font-size: 20px; }
  .service-card .btn { margin-top: 0; }
}
.services-teaser__more { display: none; }
@media (max-width: 760px) {
  .services-teaser__more { display: inline-block; margin-top: 32px; font-size: 12px; letter-spacing: .06em; }
}

.testimonial { padding-block: 80px; text-align: center; }
.testimonial__stars { font-size: 26px; letter-spacing: .2em; line-height: 1; }
.testimonial blockquote { margin: 22px auto; max-width: 880px; }

/* Review carousel: all slides share one grid cell, so the band is as tall as the longest
   review and the page never jumps. Reviews are trimmed to 3 lines or fewer. */
.testimonial__slides { display: grid; }
.testimonial__slide {
  grid-area: 1 / 1; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.testimonial__slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.testimonial__dots { display: flex; justify-content: center; margin-top: 26px; }
.testimonial__dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.testimonial__dot::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--white); transition: background-color .15s;
}
.testimonial__dot.is-active::before, .testimonial__dot:hover::before { background: var(--white); }
.testimonial__dot:focus-visible { outline-color: var(--white); outline-offset: 0; }

/* Single review on a service page (e.g. Diagnostics) */
.detail-quote { margin: 0; padding-left: 26px; border-left: 6px solid var(--red); }
.detail-quote__stars { color: var(--red); font-size: 18px; letter-spacing: .2em; line-height: 1; }
.detail-quote blockquote { margin: 14px 0; }
.detail-quote blockquote p { font-size: 19px; line-height: 1.55; font-weight: 600; color: var(--black); max-width: 680px; }
.detail-quote cite {
  font-style: normal; font-weight: 700; font-size: 13px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
@media (max-width: 760px) { .detail-quote { padding-left: 18px; } .detail-quote blockquote p { font-size: 17px; } }
.testimonial blockquote p { font-size: 28px; line-height: 1.45; font-weight: 600; }
.testimonial cite {
  font-style: normal; font-weight: 700; font-size: 14px;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
@media (max-width: 760px) {
  .testimonial { padding-block: 56px; }
  .testimonial__stars { font-size: 20px; }
  .testimonial blockquote { margin: 16px auto; }
  .testimonial blockquote p { font-size: clamp(15px, 4.2vw, 19px); line-height: 1.45; }   /* keeps every review to 3 lines */
  .testimonial__dots { margin-top: 18px; }
  .testimonial cite { font-size: 12px; }
}
@media (max-width: 359px) {
  .testimonial blockquote p { font-size: 14px; }
}

/* 9. Shop Tires ------------------------------------------------------------ */
.tire-finder { padding-bottom: 90px; }
.tire-finder__head {
  border-top: 1px solid var(--line-dark-2);
  padding-top: 28px; margin-bottom: 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.tire-finder__head h2 { font-size: 28px; letter-spacing: .02em; text-transform: uppercase; }
.tire-finder__head p { font-size: 16px; line-height: 1.55; }

.embed__fields { display: grid; grid-template-columns: repeat(4, 1fr) 180px; gap: 12px; }
.embed__fields > * { background: var(--skeleton-1); height: 56px; }
.embed__fields > :last-child { background: #ddd; }
.embed__results { display: grid; grid-template-columns: 260px 1fr; gap: 14px; height: 520px; }
.embed__results > * { background: var(--skeleton-2); }
.embed__results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; background: none !important; }
.embed__results-grid > * { background: var(--skeleton-2); }

.affirm-note {
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid var(--line-dark-2);
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 32px; align-items: center;
}
.affirm-note img { width: 124px; opacity: .85; }
.affirm-note__lead { font-size: 15px; line-height: 1.5; font-weight: 600; }
.affirm-note__legal { margin-top: 12px; font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, .6); }
.affirm-note__legal a { color: rgba(255, 255, 255, .8); text-decoration: underline; }

.consult { display: grid; grid-template-columns: 1fr 1fr; }
.consult__img { position: relative; min-height: 440px; }
.consult__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.consult__body { padding: 70px 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; }
.consult__body h2 { font-size: 44px; line-height: 1.05; text-transform: uppercase; }
.consult__body h2 .red-box { padding: 0 12px 4px; transform: rotate(-2deg); }
.consult__body p { font-size: 17px; line-height: 1.6; }
.consult__body .btn { padding: 16px 26px; font-size: 13px; letter-spacing: .12em; }

.dealers {
  border-block: 1px solid var(--line-dark);
  padding: 60px var(--gutter);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 32px 56px;
}
.dealers__label { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--red); text-transform: uppercase; }
.dealers__bridgestone { height: 24px; width: auto; }
.dealers__firestone { height: 31px; width: auto; position: relative; top: 5px; }

@media (max-width: 1080px) {
  .tire-finder__head { grid-template-columns: 1fr; gap: 12px; }
  .embed__fields { grid-template-columns: repeat(2, 1fr); }
  .embed__results { grid-template-columns: 1fr; height: auto; }
  .embed__results > :first-child { height: 120px; }
  .embed__results-grid { grid-template-columns: repeat(2, 1fr); }
  .embed__results-grid > * { height: 260px; }
  .consult { grid-template-columns: 1fr; }
  .consult__img { min-height: 280px; }
}
@media (max-width: 760px) {
  .tire-finder { padding-bottom: 60px; }
  .tire-finder__head h2 { font-size: 24px; }
  .embed__fields { grid-template-columns: 1fr; }
  .embed__results-grid { grid-template-columns: 1fr; }
  .affirm-note { grid-template-columns: 1fr; gap: 18px; }
  .consult__body { padding: 48px var(--gutter); }
  .consult__body h2 { font-size: 30px; }
  .consult__body p { font-size: 16px; }
  .dealers { padding-block: 44px; gap: 28px 40px; }
}

/* 10. Services ------------------------------------------------------------- */
.service-lists { padding-block: 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.service-list__head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 6px solid var(--black); padding-bottom: 14px;
}
.service-list__head h2 { font-size: 36px; line-height: 1.2; text-transform: uppercase; }
.service-list__head .num-chip { font-size: 14px; }
.service-list ul { margin: 0; padding: 0; list-style: none; }
.service-list li a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 1.5px solid var(--line-light);
  font-weight: 700; font-size: 19px; line-height: 1.3;
}
.service-list li a span {
  flex: none;
  color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.service-list li a:hover { color: var(--red); }

.checklist-band { padding-block: 80px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 60px; align-items: center; }
.checklist-band h2 { font-size: 44px; line-height: 1.05; }
.checklist-band p { margin-top: 18px; font-size: 16px; line-height: 1.6; }
.checklist {
  display: grid; grid-template-columns: max-content max-content; justify-content: center;
  row-gap: 18px; column-gap: 64px;
  margin: 0; padding: 0; list-style: none;
  font-weight: 700; font-size: 19px; line-height: 1.25;
}
.checklist li { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.checklist svg { flex: none; }

.cta-band { padding-block: 60px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.cta-band h2 { font-size: 40px; line-height: 1.05; text-transform: uppercase; }
.cta-band .btn { flex: none; font-size: 14px; padding: 17px 28px; }

@media (max-width: 1080px) {
  .service-lists { grid-template-columns: 1fr; gap: 60px; }
  .checklist-band { grid-template-columns: 1fr; gap: 36px; }
  .checklist { justify-content: start; }
}
@media (max-width: 760px) {
  .service-lists { padding-block: 60px; }
  .service-list__head h2 { font-size: 28px; }
  .service-list li a { font-size: 17px; }
  .checklist-band { padding-block: 60px; }
  .checklist-band h2 { font-size: 32px; }
  .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch;
    column-gap: 16px; row-gap: 12px; font-size: 14px;
  }
  .checklist li { white-space: normal; gap: 8px; align-items: flex-start; }
  .checklist svg { width: 16px; height: 16px; margin-top: 1px; }   /* sits on the first line when an item wraps */
  .cta-band { flex-direction: column; align-items: flex-start; padding-block: 48px; }
  .cta-band h2 { font-size: 28px; }
  .cta-band .btn { align-self: stretch; }
}

/* 11. Book an Appointment / Contact --------------------------------------- */
.booking-layout { padding-bottom: 90px; display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
.booking-layout__main { display: flex; flex-direction: column; gap: 18px; }
.booking-layout .embed__split { grid-template-columns: 1.6fr 1fr; height: 460px; }

.info-stack { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.6; }
.info-card { background: var(--panel); padding: 22px; }
.info-card__big { display: block; font-weight: 800; font-size: 20px; }
.info-card a:hover { color: var(--red); }
.info-map { position: relative; height: 220px; background: var(--panel); }
.info-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 1080px) {
  .booking-layout { grid-template-columns: 1fr; }
  .info-stack { display: grid; grid-template-columns: repeat(2, 1fr); }
  .info-map { grid-column: 1 / -1; height: 300px; }
}
@media (max-width: 760px) {
  .booking-layout { padding-bottom: 60px; }
  .booking-layout .embed__split { grid-template-columns: 1fr; height: auto; }
  .info-stack { grid-template-columns: 1fr; }
}

.contact-layout { padding-bottom: 90px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: stretch; }
.contact-layout .info-map { height: auto; min-height: 420px; }
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; padding-bottom: 60px; }
  .contact-layout .info-stack { grid-template-columns: 1fr; }
  .contact-layout .info-map { min-height: 300px; }
}

/* 12. Footer --------------------------------------------------------------- */
.site-footer { background: var(--black); }
.site-footer__top {
  padding-top: 56px;
  display: grid; grid-template-columns: 1.2fr 3fr; gap: 30px; align-items: center;
}
.site-footer__logo { margin-left: -10px; }
.site-footer__logo img { height: 120px; width: auto; }
.site-footer__info {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  font-size: 15px; line-height: 1.7;
}
.site-footer__info a:hover { color: var(--red); }
/* Bottom row: red DONERITE.CA tab (left edge) · centred copyright · white social icons (right) */
.site-footer__bottom {
  padding-top: 32px; padding-bottom: 44px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px;
}
.site-footer__bottom .domain-tab { justify-self: start; }
/* Red "DONERITE.CA" tab bleeds off the left edge of the viewport */
.domain-tab {
  display: inline-block;
  background: var(--red); color: var(--white);
  font-weight: 800; font-size: 18px; letter-spacing: var(--tracking-label);
  padding: 11px 20px 11px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.domain-tab:hover { background: var(--red-dark); }
.copyright { font-size: 13px; color: var(--text-muted-dark); text-align: center; }
.social-icons {
  justify-self: end; display: flex; align-items: center; gap: 18px;
  margin: 0; padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 0 0;
  list-style: none;
}
.social-icons a { display: block; color: var(--white); transition: color .15s; }
.social-icons a:hover { color: var(--red); }
.social-icons svg { display: block; width: 22px; height: 22px; }

@media (max-width: 860px) {
  /* Mobile footer: logo + tab + copyright on the left, contact details on the right */
  .site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "logo info" "tab info" "copy info" "social info";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 20px; row-gap: 18px;
    padding: 44px 20px 40px 0;
  }
  .site-footer__top, .site-footer__bottom { display: contents; }
  .site-footer__logo { grid-area: logo; margin-left: 12px; align-self: start; }
  .site-footer__logo img { height: 104px; }
  .site-footer__info { grid-area: info; grid-template-columns: 1fr; gap: 16px; font-size: 13px; line-height: 1.55; }
  .site-footer__info .eyebrow { font-size: 11px; }
  .domain-tab { grid-area: tab; justify-self: start; font-size: 13px; letter-spacing: .12em; padding: 9px 24px; width: 159px; }
  .copyright { grid-area: copy; padding: 0 0 0 24px; font-size: 11px; line-height: 1.5; text-align: left; }
  .social-icons { grid-area: social; justify-self: start; align-self: start; padding: 0 0 0 24px; gap: 16px; }
  .social-icons svg { width: 20px; height: 20px; }
}

/* 13. Service detail pages (site/services/*.html) ------------------------- */
.page-title--service { grid-template-columns: 1fr; gap: 0; padding-bottom: 70px; }
.page-title--service h1 { font-size: clamp(28px, 9vw, 96px); }
.page-title--service .page-title__lead { max-width: 720px; margin-top: 34px; }
.breadcrumb {
  margin-bottom: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted-dark);
}
.breadcrumb a { color: var(--red); }
.breadcrumb a:hover { color: var(--white); }

.service-detail { padding-block: 90px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.service-detail__main { display: flex; flex-direction: column; gap: 56px; }
.detail-block { display: flex; flex-direction: column; gap: 16px; }
.detail-block__head {
  display: flex; align-items: center; gap: 14px;
  border-bottom: 6px solid var(--black); padding-bottom: 14px; margin-bottom: 6px;
}
.detail-block__head h2 { font-size: 30px; line-height: 1.15; text-transform: uppercase; }
.detail-block p { font-size: 17px; line-height: 1.65; color: var(--text-body); max-width: 680px; }
.detail-block h3 { font-weight: 800; font-size: 18px; margin-top: 8px; }

.tick-list, .sign-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px;
  font-weight: 700; font-size: 17px; line-height: 1.35;
}
.tick-list li, .sign-list li { display: flex; align-items: flex-start; gap: 12px; }
.tick-list svg { flex: none; margin-top: -1px; }
.sign-list li::before {
  content: "!"; flex: none;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--red); color: var(--white);
  font-weight: 900; font-size: 14px; line-height: 1;
}

.booking-card {
  position: sticky; top: 24px;
  background: var(--black); color: var(--white);
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 16px;
  font-size: 15px; line-height: 1.6;
}
.booking-card h2 { font-size: 26px; line-height: 1.1; text-transform: uppercase; }
.booking-card .btn { padding: 15px 20px; font-size: 13px; letter-spacing: .12em; }
.booking-card__row { border-top: 1px solid #333; padding-top: 14px; }
.booking-card__phone { display: block; font-weight: 800; font-size: 20px; }
.booking-card a:not(.btn):hover { color: var(--red); }

.related-services { padding-block: 80px; }
.related-services .service-list__head { gap: 24px; }
.related-services .service-list__head h2 { font-size: 30px; }
.related-services__list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px;
}
.related-services__list a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 1.5px solid #d8d8d8;
  font-weight: 700; font-size: 18px; line-height: 1.3;
}
.related-services__list a > span {
  flex: none; color: var(--red);
  font-size: 12px; font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.related-services__list a:hover { color: var(--red); }

@media (max-width: 1080px) {
  .service-detail { grid-template-columns: 1fr; gap: 56px; }
  .booking-card { position: static; }
}
@media (max-width: 760px) {
  .page-title--service { padding-bottom: 44px; }
  .page-title--service .page-title__lead { margin-top: 24px; }
  .service-detail { padding-block: 56px; }
  .service-detail__main { gap: 44px; }
  .detail-block__head h2 { font-size: 24px; }
  .detail-block p, .tick-list, .sign-list { font-size: 16px; }
  .tick-list, .sign-list { grid-template-columns: 1fr; }
  .related-services { padding-block: 56px; }
  .related-services .service-list__head { flex-wrap: wrap; }
  .related-services .service-list__head h2 { font-size: 24px; }
  .related-services__list { grid-template-columns: 1fr; }
  .related-services__list a { font-size: 16px; }
}

/* 14. Rewards, Financing, Contact form, Thanks / 404 ---------------------- */
.service-cards--3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 1080px) { .service-cards--3 { grid-template-columns: 1fr; gap: 28px; } }
.fine-print { margin-top: 44px; font-size: 13px; color: #666; }

/* Rewards: red "+1" points band (bleeds off the left edge like the footer tab)
   and the text-to-join block, both from the in-store FiveStars poster. */
.points-strip {
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  display: flex; align-items: center; gap: 28px;
  margin-right: var(--edge);
  padding: 26px 32px 26px var(--edge);
  background: var(--red);
}
.points-strip__badge {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white); color: var(--red);
  font-weight: 900; font-size: 32px; letter-spacing: -.04em;
}
.points-strip p {
  font-weight: 800; font-size: 22px; line-height: 1.4;
  letter-spacing: .3em; text-transform: uppercase;
}
/* Desktop: one line across the page, with the badge sized to match */
@media (min-width: 1081px) {
  .points-strip { gap: 24px; padding-top: 20px; padding-bottom: 20px; }
  .points-strip__br { display: none; }
  .points-strip p { font-size: clamp(18px, 1.85vw, 26px); white-space: nowrap; }
  .points-strip__badge { width: 56px; height: 56px; font-size: 25px; }
}

.text-to-join { padding-top: 80px; padding-bottom: 100px; }
.text-to-join__line {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1em .35em;
  font-size: clamp(30px, 7vw, 72px); line-height: 1.15; text-transform: uppercase;
}
.text-to-join__line > span { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.keyword-box {
  display: inline-block;
  border: 4px solid var(--red); color: var(--red);
  padding: .02em .22em .06em; line-height: 1.05;
}
.text-to-join__number { color: var(--red); }
.text-to-join__number:hover { color: var(--white); }
.text-to-join__sub {
  margin-top: 14px;
  font-weight: 900; font-size: clamp(18px, 3.4vw, 36px); line-height: 1.2; text-transform: uppercase;
}
.text-to-join__btn { margin-top: 30px; }
/* Texting only makes sense on a phone: hide the button on mouse-driven screens */
@media (hover: hover) and (pointer: fine) { .text-to-join__btn { display: none; } }
.text-to-join__legal { margin-top: 32px; max-width: 620px; font-size: 13px; line-height: 1.6; color: var(--text-muted-dark); }
.text-to-join__legal a { text-decoration: underline; }
.fine-print a { color: var(--red); text-decoration: underline; }

/* FiveStars logo: above the intro on desktop; on tablet/mobile it moves down into the
   disclaimer row, laid out like the footer of the in-store poster. */
.fivestars-logo { display: block; width: auto; }
.fivestars-logo--title { height: 40px; margin-bottom: 26px; }
.fivestars-logo--legal { display: none; }
@media (max-width: 1080px) {
  .fivestars-logo--title { display: none; }
  .fivestars-logo--legal { display: block; flex: none; height: 34px; }
  .join-legal {
    display: flex; align-items: center; gap: 28px;
    margin-top: 36px; padding-top: 28px; border-top: 1px solid #333;
  }
  .join-legal .text-to-join__legal { margin-top: 0; padding-left: 28px; border-left: 1px solid #333; }
}
@media (max-width: 760px) {
  .join-legal { flex-direction: column; align-items: flex-start; gap: 16px; }
  .join-legal .text-to-join__legal { padding-left: 0; border-left: 0; }
  .fivestars-logo--legal { height: 28px; }
}

@media (max-width: 760px) {
  .points-strip { gap: 16px; padding-top: 18px; padding-bottom: 18px; padding-right: 20px; }
  .points-strip__badge { width: 52px; height: 52px; font-size: 23px; }
  .points-strip p { font-size: 13px; letter-spacing: .2em; }
  .text-to-join { padding-top: 52px; padding-bottom: 64px; }
  .keyword-box { border-width: 3px; }
  .text-to-join__btn { display: flex; }
}

.checklist-band__list { min-width: 0; }
/* Right-hand stack: check-mark list, van and road. The box shrinks to the width of the two
   check-mark columns, so the road runs exactly under them. The van is sized so the stack
   (list 149px + 32px gap + van + 16px road) is about as tall as the intro column (352px). */
.checklist-band__list { width: fit-content; max-width: 100%; justify-self: center; }
.shuttle-van { display: block; width: 100%; max-width: 440px; height: auto; margin: 32px auto 0; }

/* The van's road. Same lines, colours and dash rhythm as the van artwork drawn at 440px wide
   (0.5px per artwork unit): dash period 121 units = 60.5px, in step with the wheels. */
.shuttle-road {
  --period: 60.5px;
  height: 16px;
  background:
    linear-gradient(#c8c8c8, #c8c8c8) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(90deg, #dcdcdc 23px, transparent 0) 0 7.8px / var(--period) 1.5px repeat-x,
    linear-gradient(90deg, #dcdcdc 12px, transparent 0) 30px 14.8px / var(--period) 1.5px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  animation: shuttle-road .6s linear infinite;   /* van faces left, so the road moves right */
}
@keyframes shuttle-road {
  to { background-position: 0 0, var(--period) 7.8px, calc(30px + var(--period)) 14.8px; }
}
@media (prefers-reduced-motion: reduce) { .shuttle-road { animation: none; } }

/* Narrow desktops: tighten the check-mark list so it fits its column */
@media (min-width: 1081px) and (max-width: 1200px) {
  .checklist { font-size: 17px; column-gap: 32px; }
}
@media (max-width: 1080px) { .checklist-band__list { justify-self: start; } }
@media (max-width: 760px) {
  .checklist-band__list { width: auto; justify-self: stretch; }
  .shuttle-van { margin-top: 32px; }
}

.shuttle-note { margin-top: 18px; padding-top: 18px; border-top: 1px solid #d4d4d4; font-size: 15px; line-height: 1.6; }

.affirm-note__more { margin-top: 14px; }
.affirm-note__more .link-arrow:hover { color: var(--white); }
.financing-terms { padding-block: 30px 90px; }
.financing-terms .affirm-note { margin-top: 0; border-top: 0; }
@media (max-width: 760px) { .financing-terms { padding-bottom: 60px; } }

.info-card__note { display: block; margin-top: 6px; font-size: 13px; color: var(--text-muted-dark); }

.contact-form-band { padding-block: 90px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 60px; align-items: start; }
.contact-form-band__intro h2 { font-size: 44px; line-height: 1.05; text-transform: uppercase; }
.contact-form-band__intro p { margin-top: 18px; font-size: 16px; line-height: 1.6; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 12px; font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.field label span { color: var(--red); }
.field input, .field textarea {
  width: 100%;
  border: 2.5px solid var(--black); border-radius: 0;
  background: var(--white); color: var(--black);
  padding: 14px 16px;
  font: 500 16px/1.4 var(--font);
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(214, 39, 46, .2); }
.field .btn { align-self: flex-start; border: 0; cursor: pointer; font-family: var(--font); }
.form-note { font-size: 13px; color: #666; }
.form-note span { color: var(--red); }
@media (max-width: 1080px) {
  .contact-form-band { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .contact-form-band { padding-block: 56px; }
  .contact-form-band__intro h2 { font-size: 32px; }
  .contact-form { grid-template-columns: 1fr; }
  .field .btn { align-self: stretch; }
}

.page-title--message { padding-bottom: 110px; }
.page-title__sub { margin-top: 14px; }
.page-title__sub a { color: var(--red); font-weight: 700; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 760px) { .button-row .btn { flex: 1 1 100%; } }