/* ============================================================================
   service-page.css — base layout + typography shared by every "sub" page:
     tire-repair, brakes, alignments, rotations, tpms, suspension,
     tire-quote, brake-estimate, wheels.

   Loaded AFTER glass.css so it inherits the design tokens (--glass-bg,
   --glass-shadow-stack, etc.) but applies the layout shell common to those
   nine pages. Page-specific component styles (.tire-spot, .brake-card,
   .vehicle-card, .field, .meta, etc.) stay in each page's inline <style>.

   Index, booking, tires, and faqs each have their own distinct layouts and
   intentionally do NOT load this file.
   ============================================================================ */

:root {
  --navy:      #17244A;
  --navy-soft: #2a3a6b;
  --gold:      #EBA911;
  --gold-soft: #fbd06b;
  --ink:       #17244A;
  --muted:     #6b7180;
  --line:      #e6e8ef;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  /* background handled by glass.css (layered ambient) */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Saira', 'Inter', sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

p { margin: 0 0 1rem; }

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* The frosted-glass shell every sub-page wraps its content in. Service pages
   center their body via `.service-card h1` + `.service-card .tagline` rules
   below; quote pages keep form fields left-aligned via their own .field
   selectors, so this rule deliberately does NOT set text-align. */
.service-card {
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border-radius: var(--glass-radius);
  padding: 2rem 1.5rem;
  box-shadow: var(--glass-shadow-stack);
}

.service-icon {
  width: 72px;
  height: 72px;
  /* Stroke/fill rules below are inert for <img> photo icons but kept so
     line-icon SVGs (if reintroduced) still render in the brand gold. */
  color: var(--gold);
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Photo support: object-fit lets non-square images render inside the box
     without squishing; soft drop-shadow gives the photo a subtle ground. */
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.15));
  margin: 0 auto 0.5rem;
  display: block;
}

.service-card h1 {
  font-size: 2.4rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.service-card .tagline {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 1.75rem;
  text-align: center;
}