/* Krishna Auto Repair - site styles (AUG-770)
   Ported from the v2 design. Colours live in the tokens below; light is the
   default and :root[data-theme="dark"] swaps in the dark set. */

/* ---------- Tokens ---------- */
:root {
  --paper: #F5F2EA; --paper2: #ECE7DB; --ink: #16181D; --muted: #585C65; --rule: #D8D1C1;
  --red: #C42B2B; --redText: #B42424; --navy: #1F3866; --navyText: #1F3866;
  --sky: #DCE5EA; --wall: #FBFAF6; --siding: #E2DED4; --trim: #CFCABF; --glass: #26416F;
  --door: #EEECE6; --doorline: #D6D2C8; --road: #4A4D55; --walk: #E4DED0; --tree: #2F5D3A;
  --pole: #5A5E66; --bay: #2A2723; --mapbg: #ECE7DB; --mapst: #FFFFFF; --mapmain: #F7E3B5;
  --gutter: clamp(20px, 5vw, 56px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #111317; --paper2: #181B21; --ink: #EEEAE1; --muted: #A6A69F; --rule: #2C3038;
  --redText: #FF7A6B; --navyText: #A9BEEA;
  --sky: #1A2331; --wall: #2B2F37; --siding: #262A31; --trim: #3A3F48; --glass: #F0C277;
  --door: #3A3E46; --doorline: #30343B; --road: #23262C; --walk: #2E3138; --tree: #21412B;
  --pole: #7A7F88; --bay: #1A1816; --mapbg: #1A1E25; --mapst: #262B34; --mapmain: #4A3F28;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  transition: background .3s, color .3s;
}
a:focus-visible, button:focus-visible { outline: 3px solid var(--navyText); outline-offset: 3px; }
/* The default focus colour is navy, which vanishes on the always-dark areas
   (navy band, footer) and on the inverted top strip. Use a contrasting colour there. */
.band a:focus-visible, .site-footer a:focus-visible { outline-color: #FFFFFF; }
.topbar a:focus-visible { outline-color: var(--paper); }
/* The logo box is always white, so its links always use navy (after the footer rule on purpose) */
.logo a:focus-visible { outline-color: #1F3866; outline-offset: 1px; }

.accent { color: #C42B2B; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.h2 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1;
  letter-spacing: -.02em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 6px;
  font-family: 'Archivo', system-ui, sans-serif; font-stretch: 108%; font-weight: 700;
  font-size: 16px; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 46px; }
.btn-red { background: #C42B2B; color: #FFFFFF; }
.btn-red:hover { background: #A82222; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* ---------- Logo lockup ---------- */
.logo {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  background: #FFFFFF; border: 3px solid #111111; border-radius: 6px;
  padding: 6px 14px 5px;
}
.logo__home, .logo__phone { text-decoration: none; }
/* Taller tap target for the number (>= 24px) without moving anything */
.logo__phone { padding-bottom: 5px; margin-bottom: -5px; }
.logo__row { display: flex; align-items: baseline; gap: 8px; }
.logo__name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1;
  letter-spacing: .03em; color: #C8202F; text-transform: uppercase;
}
.logo__tag { font-style: italic; font-weight: 700; font-size: 20px; line-height: 1; color: #C8202F; }
.logo__inc { font-size: 8px; font-weight: 600; line-height: 1; color: #111111; align-self: flex-start; }
.logo__phone {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; line-height: 1;
  letter-spacing: .08em; color: #111111;
}
.logo--lg { gap: 2px; padding: 8px 18px 6px; }
.logo--lg .logo__row { gap: 10px; }
.logo--lg .logo__name { font-size: 38px; }
.logo--lg .logo__tag { font-size: 25px; }
.logo--lg .logo__inc { font-size: 10px; }
.logo--lg .logo__phone { font-size: 24px; }

/* ---------- Header ---------- */
.topbar { background: var(--ink); color: var(--paper); }
.topbar__inner {
  max-width: 1280px; margin: 0 auto; padding: 8px var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
}
.topbar a { color: inherit; font-weight: 600; }

.masthead {
  max-width: 1280px; margin: 0 auto; padding: 18px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.masthead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 10px 4px; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: #C42B2B; }

/* The toggle needs JavaScript, so it only appears once the head script has added html.js */
.theme-toggle {
  display: none; width: 44px; height: 44px; padding: 0; border-radius: 6px;
  border: 2px solid var(--rule); background: transparent; color: var(--ink);
  align-items: center; justify-content: center; cursor: pointer;
}
.js .theme-toggle { display: inline-flex; }
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ---------- Hero ---------- */
.hero {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: center; gap: clamp(32px, 5vw, 64px);
}
.hero__copy { min-width: 0; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.hero h1 {
  margin: 0; font-family: 'Archivo', sans-serif; font-stretch: 104%; font-weight: 800;
  font-size: clamp(38px, 4.6vw, 64px); line-height: .98; letter-spacing: -.025em;
  max-width: 100%; overflow-wrap: break-word;
}
.hero__lead { margin: 0; max-width: 480px; font-size: 20px; color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.stats {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  border-top: 1px solid var(--rule); padding-top: 22px; width: 100%; max-width: 480px;
}
.stat { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; padding-right: 20px; }
.stat + .stat { padding-right: 0; padding-left: 20px; border-left: 1px solid var(--rule); }
.stat__value {
  font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: 34px; line-height: 1;
}
.stat__star { color: #E0A100; font-size: 24px; margin-left: 4px; }
.stat__label { font-size: 15px; color: var(--muted); }

.hero__art {
  min-width: 0; width: 100%; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--sky);
}
.hero__art svg { display: block; width: 100%; height: auto; }

.stripes__red { height: 12px; background: #C42B2B; }
.stripes__gap { height: 6px; }
.stripes__navy { height: 12px; background: var(--navy); }

/* ---------- Services ---------- */
.services {
  max-width: 1280px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter);
  display: flex; flex-wrap: wrap; gap: 48px clamp(32px, 6vw, 96px);
}
.services__intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.services__intro p { margin: 0; color: var(--muted); max-width: 380px; }
.services__intro .btn { margin-top: 8px; }
.services__list { flex: 2 1 560px; min-width: 0; }
.services__list ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px;
  padding: 24px 12px; border-bottom: 1px solid var(--rule); transition: background .2s;
}
.row:hover { background: var(--paper2); }
.row__num { flex: none; width: 36px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: var(--redText); }
.row__name {
  flex: 1 1 220px; margin: 0; font-family: 'Archivo', sans-serif; font-stretch: 108%;
  font-weight: 700; font-size: 24px; line-height: 1.2;
}
.row__desc { flex: 1.4 1 260px; margin: 0; color: var(--muted); font-size: 17px; }
.services__note { margin: 0; padding: 22px 12px 0; color: var(--muted); font-size: 17px; }
.services__note a { color: var(--ink); font-weight: 600; text-decoration-color: #C42B2B; text-underline-offset: 4px; }

/* ---------- How it works (navy band) ---------- */
.band { background: #1F3866; color: #FFFFFF; }
.band__inner {
  max-width: 1280px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gutter);
  display: flex; flex-direction: column; gap: 48px;
}
.band__title { max-width: 720px; font-size: clamp(34px, 4.4vw, 56px); }
.steps { display: flex; flex-wrap: wrap; gap: 32px 48px; list-style: none; margin: 0; padding: 0; }
.step {
  flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  border-top: 2px solid rgba(255, 255, 255, .35); padding-top: 20px;
}
.step__label { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; color: #FF9A8E; }
.step__title { margin: 0; font-family: 'Archivo', sans-serif; font-stretch: 108%; font-weight: 700; font-size: 24px; }
.step__text { margin: 0; color: #D3DCEE; }

/* ---------- Reviews ---------- */
.reviews {
  max-width: 1280px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter);
  display: flex; flex-direction: column; gap: 48px;
}
.reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.reviews__head .h2 { flex: 1 1 420px; max-width: 680px; }
.rating { display: flex; align-items: center; gap: 16px; }
.rating__num {
  font-family: 'Archivo', sans-serif; font-stretch: 115%; font-weight: 900; font-size: 84px;
  line-height: .85; letter-spacing: -.03em;
}
.rating__meta { display: flex; flex-direction: column; gap: 4px; }
.rating__stars { color: #E0A100; font-size: 22px; letter-spacing: 2px; line-height: 1; }
.rating__count { font-size: 15px; color: var(--muted); font-weight: 500; }

.reviews__grid { display: flex; flex-wrap: wrap; gap: 0; border-top: 2px solid var(--ink); }
.review {
  flex: 1 1 300px; min-width: 0; margin: 0; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
  border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.review:first-child { padding-left: 0; border-left: 0; }
.review:last-child { padding-right: 0; }
.review__mark {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 64px; line-height: .5;
  color: #C42B2B; height: 24px;
}
.review blockquote { margin: 0; font-size: 21px; line-height: 1.45; font-weight: 500; }
.review blockquote strong {
  font-weight: 700; text-decoration: underline; text-decoration-color: #C42B2B;
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.review figcaption { font-size: 15px; color: var(--muted); }
.stars { color: #E0A100; }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.tags__label { margin: 0 4px 0 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.tags__list { display: contents; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--rule); border-radius: 6px; font-size: 15px; font-weight: 600;
}
.reviews__more {
  color: var(--ink); font-weight: 600; font-size: 17px; text-decoration-color: #C42B2B;
  text-underline-offset: 5px; text-decoration-thickness: 2px;
}

/* ---------- Visit ---------- */
.visit { background: var(--paper2); border-top: 1px solid var(--rule); }
.visit__inner {
  max-width: 1280px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter);
  display: flex; flex-wrap: wrap; gap: 40px clamp(32px, 5vw, 72px); align-items: stretch;
}
.visit__info { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.facts { margin: 0; border-top: 2px solid var(--ink); }
.fact { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.fact dt { flex: 0 0 96px; font-weight: 600; color: var(--muted); font-size: 16px; }
.fact dd { margin: 0; flex: 1 1 200px; font-size: 19px; font-weight: 500; }
.fact dd a { color: inherit; }
.visit__buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.mapcard {
  flex: 1.3 1 440px; min-width: 0; position: relative; display: block; min-height: 400px;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--rule);
  text-decoration: none; color: inherit; background: var(--mapbg);
}
.mapcard__map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapcard__badge {
  position: absolute; left: 20px; top: 20px; background: #FFFFFF; color: #16181D;
  border: 2px solid #16181D; border-radius: 6px; padding: 10px 14px;
  display: flex; flex-direction: column; max-width: calc(100% - 40px);
}
.mapcard__name { font-family: 'Archivo', sans-serif; font-stretch: 108%; font-weight: 800; font-size: 18px; line-height: 1.2; }
.mapcard__addr { font-size: 15px; color: #585C65; }
.mapcta {
  position: absolute; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 6px; background: #C42B2B; color: #FFFFFF;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; transition: background .15s;
}
.mapcard:hover .mapcta { background: #A82222; }

/* ---------- Footer ---------- */
.site-footer { background: #16181D; color: #EEEAE1; }
.site-footer__red { height: 8px; background: #C42B2B; }
.site-footer__navy { height: 8px; background: #1F3866; }
.site-footer__inner {
  max-width: 1280px; margin: 0 auto; padding: 48px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.site-footer__contact { display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: #B9B7AF; }
.site-footer address { display: flex; flex-direction: column; gap: 4px; font-style: normal; }
.site-footer address a { color: #FFFFFF; font-weight: 600; text-decoration: none; }
.site-footer small { font-size: 14px; margin-top: 8px; }

/* ---------- Hero illustration + map pin animation ---------- */
.door { animation: doorUp 1.9s cubic-bezier(.65, 0, .25, 1) .6s both; }
.baylight { animation: bayOn 1.1s ease 2.2s both; }
/* "backwards": each car waits off-screen during its delay (the design left both
   cars stacked at the left of the road until their delays ran out) */
.roadcar { animation: drive 12s linear 2.8s infinite backwards; }
.roadcar2 { animation: drive2 17s linear 7s infinite backwards; }
.cloud1 { animation: drift 60s linear infinite; }
.cloud2 { animation: drift 85s linear -30s infinite; }
.opensign { animation: openPulse 2.6s ease-in-out 3s infinite; }
.pulse { transform-box: fill-box; transform-origin: center; animation: pulse 2.2s ease-out infinite; }
@keyframes doorUp { from { transform: translateY(0); } to { transform: translateY(-150px); } }
@keyframes bayOn { 0%, 30% { opacity: 0; } 40% { opacity: .7; } 48% { opacity: .15; } 62%, 100% { opacity: 1; } }
@keyframes drive { from { transform: translateX(-140px); } to { transform: translateX(800px); } }
@keyframes drive2 { from { transform: translateX(780px); } to { transform: translateX(-160px); } }
@keyframes drift { from { transform: translateX(-160px); } to { transform: translateX(760px); } }
@keyframes openPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes pulse { 0% { transform: scale(.4); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Reduced motion ----------
   Garage door shown open, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .door { animation: none; transform: translateY(-150px); }
  .baylight { animation: none; opacity: 1; }
  .roadcar, .roadcar2, .cloud1, .cloud2, .opensign, .pulse { animation: none; }
  /* Not in the original design, which left both cars stacked at the left edge of
     the road and the map pulse as a solid red disc once their animations stopped.
     Park the cars apart (the white car sits 6px higher so its wheels aren't cut
     off by the bottom edge) and hide the pulse ring. */
  .roadcar { transform: translateX(430px); }
  .roadcar2 { transform: translate(170px, -6px); }
  .pulse { display: none; }
}

/* ---------- Small screens ---------- */
/* Not in the original design: once the three reviews no longer fit side by side
   they wrap, and the design's per-column left borders and indents made reviews 2
   and 3 look hanging. Below the 3-column width, use one flush-left column
   (flex-basis 100% so two reviews never share a row without their gutter). */
@media (max-width: 999px) {
  .review, .review:first-child, .review:last-child { flex-basis: 100%; padding: 32px 0; border-left: 0; }
}
/* Not in the original design: at 38px "neighbourhood" is wider than the column
   below about 328px and was split mid-word. Scale the headline down there. */
@media (max-width: 327px) {
  .hero h1 { font-size: 11vw; }
}