/* ============================================================
   A&L Tire Shop — client-branded demo site
   Brand system: SOURCED from real research (Google Maps listing +
   reviews, lead verified 2026-09-05 / independently re-mined
   2026-09-21) — a small family-owned tire shop on Finfeather Rd in
   Bryan, serving the Brazos Valley 10+ years. Reviews repeat
   "hometown vibe," "small family owned business," staff who
   "remember me and ask about my family," and specifically praise
   an employee named Leo by name for honest, knowledgeable service.
   Palette: warm terracotta + sun-worn denim + sandy tan — a light,
   warm "neighborhood corner shop" system, deliberately NOT the
   dark gunmetal + rust + chrome + caution-mustard "industrial
   toolbox" palette used next door by Soto's Mufflers, which shares
   this exact building address (1312 Finfeather Rd) from an earlier
   batch. Structural signature: a "Meet Leo" named-staff spotlight
   card and a new-vs-used tire comparison panel — neither has any
   equivalent on Soto's page (which runs a shop-rules chalkboard
   and a cash-only ticket stub instead). Typography: Fredoka
   (rounded, warm display) + Nunito (body) + Red Hat Mono (accents)
   — entirely different from Soto's Khand/Overpass/JetBrains Mono
   pairing, and from Mansel's Libre Baskerville/Karla/IBM Plex Mono
   heritage pairing elsewhere in this batch.
   This page carries ZERO Lewis Digital branding.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&family=Red+Hat+Mono:wght@400;500;600&display=swap');

:root {
  --sand: #f2e4cf;
  --sand-deep: #e6d2b2;
  --card: #fffaf0;
  --terracotta: #c1613c;
  --terracotta-deep: #954a2c;
  --terracotta-bright: #d97e57;
  --denim: #2c4a5e;
  --denim-deep: #1c3140;
  --denim-raised: #375d75;
  --denim-line: #4a7592;
  --ink: #2b2013;
  --muted-on-light: #6b5c46;
  --muted-on-dark: #c9d6de;

  --font-display: "Fredoka", "Segoe UI", sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Red Hat Mono", "Courier New", monospace;

  --radius: 16px;
  --shadow: 0 22px 46px -26px rgba(43, 32, 19, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
.container { width: min(1140px, 92%); margin-inline: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

.eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--terracotta-deep);
  font-weight: 500; margin-bottom: 0.9rem;
}
.eyebrow--ondark { color: var(--terracotta-bright); }
.section { padding: 4.8rem 0; }
.section__title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); max-width: 22em; color: var(--denim-deep); }
.section__title--ondark { color: var(--sand); }
.section__lede { margin-top: 1rem; color: var(--muted-on-light); max-width: 46em; font-size: 1.04rem; }
.section__lede--ondark { color: var(--muted-on-dark); }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 0.95rem;
  padding: 0.9rem 1.8rem; border-radius: 999px; font-family: var(--font-body);
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s;
  border: 2px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn--terracotta { background: var(--terracotta); color: #fff8f2; }
.btn--terracotta:hover { background: var(--terracotta-deep); }
.btn--line { border-color: var(--denim); color: var(--denim); }
.btn--line:hover { background: var(--denim); color: var(--sand); }
.btn--line-ondark { border-color: rgba(242,228,207,0.5); color: var(--sand); }
.btn--line-ondark:hover { border-color: var(--terracotta-bright); color: var(--terracotta-bright); }
.btn--big { font-size: 1.04rem; padding: 1.05rem 2.2rem; }

/* ---------- header ---------- */
.site-header { background: var(--sand); border-bottom: 1px solid var(--sand-deep); position: sticky; top: 0; z-index: 60; }
.header__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand__mark {
  width: 44px; height: 44px; border-radius: 50%; background: var(--denim); color: var(--sand);
  font-family: var(--font-display); font-size: 1.35rem; display: flex; align-items: center; justify-content: center; flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-display); font-size: 1.15rem; color: var(--denim-deep); }
.brand__tag { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-on-light); }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a:not(.site-nav__cta) { display: none; color: var(--denim-deep); text-decoration: none; font-weight: 700; font-size: 0.9rem; }
.site-nav a:not(.site-nav__cta):hover { color: var(--terracotta-deep); }
.site-nav__cta { background: var(--terracotta); color: var(--sand) !important; padding: 0.6rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.site-nav__cta:hover { background: var(--terracotta-deep); }
@media (min-width: 860px) { .site-nav a:not(.site-nav__cta) { display: inline; } }

/* ---------- hero ---------- */
.hero { background: var(--sand); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.2rem; align-items: center; padding: 3.8rem 0 3.2rem; }
.hero__title { color: var(--denim-deep); font-size: clamp(2.2rem, 4.5vw, 3.2rem); margin-bottom: 1.15rem; }
.hero__title em { font-style: normal; color: var(--terracotta-deep); }
.hero__tagline { max-width: 32em; color: var(--muted-on-light); font-size: 1.06rem; margin-bottom: 1.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.5rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.78rem; background: var(--card); border: 1px solid var(--sand-deep); color: var(--denim-deep); padding: 0.45rem 0.85rem; border-radius: 999px; }
.photo-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 3px solid var(--card); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.photo-caption { margin-top: 0.6rem; font-size: 0.72rem; color: var(--muted-on-light); }

/* ---------- hometown trust strip ---------- */
.trust { background: var(--denim); color: var(--sand); }
.trust__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; padding: 2.1rem 0; }
.trust-item { text-align: center; }
.trust-item__icon { font-size: 1.7rem; margin-bottom: 0.5rem; }
.trust-item__label { font-family: var(--font-display); font-size: 1.15rem; color: var(--sand); }
.trust-item__sub { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted-on-dark); margin-top: 0.35rem; }

/* ---------- meet Leo spotlight (signature) ---------- */
.spotlight { background: var(--sand); }
.spotlight__card {
  display: grid; grid-template-columns: auto 1fr; gap: 1.8rem; align-items: center;
  background: var(--card); border: 1px solid var(--sand-deep); border-radius: var(--radius); padding: 2.2rem; margin-top: 1.6rem;
  box-shadow: var(--shadow);
}
.spotlight__avatar {
  width: 96px; height: 96px; border-radius: 50%; background: var(--terracotta); color: var(--sand);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.6rem; flex: none;
}
.spotlight__card h3 { font-size: 1.3rem; color: var(--denim-deep); margin-bottom: 0.5rem; }
.spotlight__card p { font-size: 0.98rem; color: var(--muted-on-light); margin-bottom: 0.6rem; }
.spotlight__source { font-size: 0.78rem; color: var(--muted-on-light); }

/* ---------- services / tire comparison ---------- */
.services { background: var(--sand-deep); }
.tire-compare { display: grid; grid-template-columns: 1fr 1fr 0.85fr; gap: 1.4rem; margin-top: 2.2rem; align-items: stretch; }
.tire-card { background: var(--card); border-radius: var(--radius); padding: 1.8rem 1.7rem; border: 1px solid rgba(44,74,94,0.12); }
.tire-card--featured { border: 2px solid var(--terracotta); }
.tire-card__kicker { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--terracotta-deep); margin-bottom: 0.4rem; display: block; }
.tire-card h3 { font-size: 1.3rem; color: var(--denim-deep); margin-bottom: 0.6rem; }
.tire-card p { font-size: 0.94rem; color: var(--muted-on-light); }
.tire-compare__photo .photo-frame { height: 100%; }
.tire-compare__photo .photo-frame img { height: 100%; aspect-ratio: auto; }
.services__note { margin-top: 2rem; font-size: 0.9rem; color: var(--muted-on-light); max-width: 56em; }
.services__note a { color: var(--terracotta-deep); font-weight: 700; }

.service-grid { list-style: none; margin-top: 1.8rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.service-card { background: var(--card); border-radius: var(--radius); padding: 1.4rem 1.3rem; border: 1px solid rgba(44,74,94,0.1); }
.service-card__icon { font-size: 1.4rem; margin-bottom: 0.6rem; }
.service-card h3 { font-size: 0.98rem; color: var(--denim-deep); margin-bottom: 0.3rem; }
.service-card p { font-size: 0.88rem; color: var(--muted-on-light); }

/* ---------- reviews ---------- */
.reviews { background: var(--sand); }
.reviews__grid { display: grid; grid-template-columns: 0.7fr 1.5fr; gap: 3rem; align-items: center; margin-top: 2.2rem; }
.rating-badge { text-align: center; background: var(--terracotta); color: #fff8f2; border-radius: var(--radius); padding: 2.2rem 1.5rem; box-shadow: var(--shadow); }
.rating-badge__num { font-family: var(--font-display); font-size: 3rem; }
.rating-badge__stars { color: #ffe4d1; letter-spacing: 0.14em; font-size: 1.1rem; margin: 0.4rem 0; }
.rating-badge__count { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.9; }
.reviews__copy p { font-size: 1.02rem; color: var(--muted-on-light); margin-bottom: 1rem; }
.reviews__placeholder { font-style: italic; color: var(--muted-on-light); border-left: 4px solid var(--terracotta); padding-left: 1rem; margin: 1.1rem 0 1.3rem; }
.reviews__source { font-size: 0.82rem; color: var(--muted-on-light); }

/* ---------- hours ---------- */
.hours { background: var(--denim-deep); color: var(--sand); }
.hours__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; margin-top: 2.2rem; }
.info-card { background: var(--denim-raised); border-radius: var(--radius); padding: 1.8rem; border: 1px solid var(--denim-line); }
.info-card h3 { font-size: 1.05rem; margin-bottom: 1rem; color: var(--sand); }
.info-card p { margin-bottom: 0.7rem; font-size: 0.98rem; color: var(--muted-on-dark); }
.info-card p a { color: var(--terracotta-bright); text-decoration: none; font-weight: 700; }
.info-card p a:hover { text-decoration: underline; }
.info-card__muted { font-size: 0.84rem !important; }

/* ---------- contact ---------- */
.contact { background: var(--terracotta); color: #fff8f2; text-align: center; padding: 5rem 0; }
.contact__title { color: #fff8f2; font-size: clamp(2rem, 3.9vw, 2.6rem); }
.contact__text { margin: 1.1rem auto 1.9rem; max-width: 34em; color: #ffe4d1; font-size: 1.06rem; }
.contact__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.contact__directions { margin-top: 1.7rem; font-size: 0.92rem; }
.contact__directions a { color: #fff8f2; font-weight: 700; text-decoration: underline; }

/* ---------- footer ---------- */
.footer { background: var(--sand); color: var(--muted-on-light); font-size: 0.85rem; border-top: 1px solid var(--sand-deep); }
.footer__inner { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; text-align: center; padding: 1.8rem 0; }
.footer a { color: var(--terracotta-deep); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { order: -1; max-width: 420px; margin-inline: auto; }
  .trust__row { grid-template-columns: 1fr; gap: 1.6rem; }
  .spotlight__card { grid-template-columns: 1fr; text-align: center; }
  .spotlight__avatar { margin-inline: auto; }
  .tire-compare { grid-template-columns: 1fr; }
  .tire-compare__photo { order: -1; max-width: 380px; margin-inline: auto; }
  .tire-compare__photo .photo-frame img { aspect-ratio: 4/3; height: auto; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .hours__grid { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; text-align: center; }
  .reviews__placeholder { border-left: none; border-top: 4px solid var(--terracotta); padding-left: 0; padding-top: 0.9rem; }
}
@media (max-width: 640px) {
  .section { padding: 3.4rem 0; }
  .service-grid { grid-template-columns: 1fr; }
  .hero__actions, .contact__actions { flex-direction: column; align-items: stretch; }
}