/* ------------------------------------------------------------------
   Tire Central Services — light-mode, mobile-first
   Layout: single-column stack — sticky header, two-column hero
   (QR + copy), service cards, contact section (QR + contact panel),
   footer.
   ------------------------------------------------------------------ */

:root{
  /* color */
  --bg:       #F6F3EF;
  --surface:  #FFFFFF;
  --ink:      #17130F;
  --ink-soft: #5B534C;
  --line:     #E7E0D7;
  --red:      #D31A20;
  --red-deep: #9E1116;
  --on-red:   #FFF8F5;

  /* type */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{
  max-width:1080px;
  margin-inline:auto;
  padding-inline:20px;
}
h1,h2,h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.01em;
  text-wrap:balance;
  margin:0;
}
p{ margin:0; line-height:1.55; }
.eyebrow{
  font-family:var(--font-display);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--red);
}

/* --- header --- */
header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow 0.2s ease;
}
header.is-scrolled{ box-shadow:0 4px 14px rgba(23,19,15,0.06); }
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block:10px;
}
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand-logo{ height:32px; width:auto; }
.header-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--red);
  color:var(--on-red);
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  text-decoration:none;
  padding:10px 14px;
  border-radius:8px;
  white-space:nowrap;
}
.header-cta:active{ background:var(--red-deep); }

/* --- hero --- */
.hero{ padding-block:36px 32px; position:relative; overflow:hidden; }
.hero::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto auto;
  width:340px;
  height:340px;
  background:radial-gradient(circle at center, transparent 0 30%, rgba(211,26,32,0.08) 31% 100%);
  border-radius:50%;
  pointer-events:none;
}
.hero-grid{ position:relative; display:flex; flex-direction:column; gap:32px; }
.hero-copy{ display:flex; flex-direction:column; gap:18px; max-width:640px; min-width:0; }
.hero h1{ font-size:clamp(2rem, 8vw, 3.1rem); line-height:1.02; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero-sub{ font-size:1.02rem; color:var(--ink-soft); max-width:46ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.hero-qr{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  align-self:center;
  max-width:300px;
}
.hero-qr img{ width:100%; max-width:220px; height:auto; border-radius:8px; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.92rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 20px;
  border-radius:9px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{ background:var(--red); color:var(--on-red); }
.btn-primary:active{ background:var(--red-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }

/* --- section shell --- */
section{ padding-block:38px; }
.section-head{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; max-width:56ch; }
.section-head h2{ font-size:clamp(1.5rem, 5vw, 2rem); }

/* --- services grid --- */
.services-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.service-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.service-icon{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px;
  background:rgba(211,26,32,0.1);
  color:var(--red);
  flex:none;
}
.service-card h3{
  font-size:1.02rem;
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
  font-family:var(--font-body);
}
.service-card p{ color:var(--ink-soft); font-size:0.92rem; }

/* --- contact / location --- */
.contact-layout{ display:flex; flex-direction:column; gap:16px; }
.qr-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
}
.qr-card img{ width:100%; max-width:180px; height:auto; border-radius:8px; }
.contact-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}
.contact-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding-block:14px;
  border-top:1px solid var(--line);
}
.contact-row:first-child{ border-top:none; padding-top:0; }
.contact-icon{
  width:38px; height:38px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:rgba(211,26,32,0.1);
  color:var(--red);
}
.contact-body{ min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; }
.contact-label{
  font-family:var(--font-display);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.contact-value{
  font-size:1.05rem;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  word-break:break-word;
  font-variant-numeric:tabular-nums;
}
.contact-link{ color:var(--red); font-size:0.86rem; font-weight:600; text-decoration:none; }
a.contact-value.contact-link{ font-size:1.05rem; color:var(--ink); }
a.contact-value.contact-link:hover{ color:var(--red); }

.qr-label{
  font-family:var(--font-display);
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* --- footer --- */
footer{ border-top:1px solid var(--line); padding-block:24px; }
.footer-fine{ font-size:0.82rem; color:var(--ink-soft); text-align:center; }

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

@media (min-width:640px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:720px){
  .hero-grid{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:48px;
  }
  .hero-copy{ order:1; }
  .hero-qr{ order:2; align-self:center; max-width:none; }
  .hero-qr img{ max-width:260px; }
}
@media (min-width:860px){
  .contact-layout{ flex-direction:row; align-items:stretch; }
  .qr-card{ width:240px; flex:none; justify-content:center; }
  .contact-panel{ flex:1; }
}
@media (min-width:900px){
  .services-grid{ grid-template-columns:repeat(3,1fr); }
  .hero{ padding-block:76px 64px; }
  .header-row{ padding-block:14px; }
  .hero-qr img{ max-width:280px; }
  section{ padding-block:46px; }
  .section-head{ margin-bottom:26px; }
}