/* ==========================================================================
   Lane's RV Repair: Mobile Service — client brand system
   Sourced from real research (Google Business listing + reviews, verified
   2026-09-21): a mobile-only RV repair service around College Station, TX
   run by Clay, 4.7 stars from 31 reviews. Owner replies to nearly every
   review personally and warmly, often signing off "Thank you and God
   bless" — repeat customers describe using the service "over the years."
   No fixed shop address exists to visit — Clay comes to you — so the
   signature layout element is a dashed "service route" map instead of a
   storefront hero. Palette is a designer choice (no business photos exist
   to extract from — §1 fallback) seeded by the trade itself: retro
   camper/highway two-tone (turquoise + sunset coral + cream), evoking
   classic RV paint jobs and open-road travel, paired with a warm brown-
   charcoal ink (never the teal-black already used for A & K Transmission
   Repair elsewhere in this batch, to keep the two visually distinct).
   Typography: Baloo 2 (rounded, friendly display — matches Clay's warm,
   personal review tone) + Mulish (body) + DM Mono (route labels).
   This page carries ZERO Lewis Digital branding.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Mulish:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --turquoise: #1f8a8c;
  --turquoise-deep: #146366;
  --turquoise-bright: #35a8aa;
  --coral: #e8734a;
  --coral-deep: #c05530;
  --coral-bright: #f28f63;
  --cream: #fbf3e6;
  --cream-deep: #f2e3cb;
  --white: #fffdf8;
  --ink: #2a2420;
  --ink-soft: #5c5347;
  --muted-on-dark: #cfe6e6;

  --font-display: "Baloo 2", "Segoe UI", sans-serif;
  --font-body: "Mulish", "Segoe UI", system-ui, sans-serif;
  --font-mono: "DM Mono", "Courier New", monospace;

  --radius: 18px;
  --shadow: 0 22px 46px -26px rgba(20, 36, 36, 0.4);
}

* { 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(--cream);
  color: var(--ink);
  line-height: 1.6;
  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: 700; line-height: 1.18; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--coral); 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(--turquoise-deep);
  font-weight: 500; margin-bottom: 0.9rem;
}
.eyebrow--ondark { color: var(--coral-bright); }
.section { padding: 4.6rem 0; }
.section__title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); max-width: 24em; color: var(--turquoise-deep); }
.section__title--ondark { color: var(--white); }
.section__lede { margin-top: 0.9rem; color: var(--ink-soft); max-width: 46em; font-size: 1.02rem; }
.section__lede--ondark { color: var(--muted-on-dark); }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 0.95rem;
  padding: 0.85rem 1.7rem; 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--coral { background: var(--coral); color: var(--white); }
.btn--coral:hover { background: var(--coral-deep); }
.btn--line { border-color: var(--white); color: var(--white); }
.btn--line:hover { border-color: var(--coral-bright); color: var(--coral-bright); }
.btn--line-dark { border-color: var(--turquoise-deep); color: var(--turquoise-deep); }
.btn--line-dark:hover { background: var(--turquoise-deep); color: var(--white); }
.btn--big { font-size: 1.05rem; padding: 1rem 2.2rem; }

/* ---------- header ---------- */
.site-header { background: var(--white); border-bottom: 3px solid var(--turquoise); position: sticky; top: 0; z-index: 60; }
.header__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.8rem 0; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand__mark {
  width: 42px; height: 42px; border-radius: 50%; background: var(--turquoise); color: var(--white);
  font-family: var(--font-display); font-size: 1rem; 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.05rem; color: var(--turquoise-deep); }
.brand__tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--coral-deep); }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a:not(.site-nav__cta) { display: none; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.site-nav a:not(.site-nav__cta):hover { color: var(--turquoise-deep); }
.site-nav__cta { background: var(--coral); color: var(--white) !important; padding: 0.55rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.site-nav__cta:hover { background: var(--coral-deep); }
@media (min-width: 860px) { .site-nav a:not(.site-nav__cta) { display: inline; } }

/* ---------- hero: full photo with two-tone camper stripe ---------- */
.hero { position: relative; background: var(--turquoise-deep); color: var(--white); overflow: hidden; }
.hero__stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: var(--turquoise); z-index: 0; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; padding: 4rem 0 3.6rem; }
.hero__title { color: var(--white); font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin-bottom: 1.1rem; }
.hero__title em { font-style: normal; color: var(--coral-bright); }
.hero__tagline { max-width: 32em; color: var(--muted-on-dark); font-size: 1.05rem; margin-bottom: 1.7rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.5rem; }
.hero__rating { display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.12); border-radius: 999px; padding: 0.5rem 1.1rem; font-family: var(--font-mono); font-size: 0.86rem; }
.hero__rating strong { color: var(--coral-bright); font-family: var(--font-display); font-size: 1.1rem; }
.hero__photo { position: relative; }
.round-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 4px solid var(--white); }
.round-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.photo-caption { margin-top: 0.6rem; font-size: 0.72rem; color: var(--muted-on-dark); }
.photo-caption--onlight { color: var(--ink-soft); }

/* ---------- service-route map (signature section) ---------- */
.route { background: var(--cream); }
.route__map {
  margin-top: 2.4rem; position: relative; padding: 2.4rem 1.5rem;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
}
.route__line {
  display: flex; align-items: center; justify-content: space-between; position: relative;
  padding: 0 0.5rem;
}
.route__line::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 3px;
  background-image: linear-gradient(90deg, var(--coral) 0 10px, transparent 10px 20px);
  background-size: 20px 3px; transform: translateY(-50%);
}
.route__stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex: 1; }
.route__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--turquoise); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--turquoise); }
.route__stop--van .route__dot { background: var(--coral); box-shadow: 0 0 0 2px var(--coral); width: 22px; height: 22px; }
.route__label { font-family: var(--font-mono); font-size: 0.76rem; text-align: center; color: var(--ink-soft); }
.route__note { margin-top: 2rem; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }

/* ---------- services ---------- */
.services { background: var(--white); }
.service-grid { list-style: none; margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.service-card { background: var(--cream); border-radius: var(--radius); padding: 1.7rem 1.6rem; border-bottom: 5px solid var(--coral); }
.service-card h3 { font-size: 1.02rem; margin-bottom: 0.5rem; color: var(--turquoise-deep); }
.service-card p { font-size: 0.92rem; color: var(--ink-soft); }
.services__note { margin-top: 2rem; font-size: 0.9rem; color: var(--ink-soft); background: var(--cream-deep); border-radius: var(--radius); padding: 1rem 1.4rem; }
.services__note a { color: var(--coral-deep); font-weight: 700; }

/* ---------- about ---------- */
.about { background: var(--cream); }
.about__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3rem; align-items: center; margin-top: 2.2rem; }
.about__copy p { color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 1rem; }
.about__source { margin-top: 1rem; font-size: 0.84rem; color: var(--ink-soft); }
.about__photo .round-frame img { aspect-ratio: 3/4; }

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

/* ---------- reviews ---------- */
.reviews { background: var(--white); }
.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(--coral); color: var(--white); 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: var(--cream); 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(--ink-soft); margin-bottom: 1rem; }
.reviews__placeholder { font-style: italic; color: var(--ink-soft); border-left: 4px solid var(--turquoise); padding-left: 1rem; margin: 1.1rem 0 1.3rem; }
.reviews__source { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- contact ---------- */
.contact { background: var(--cream-deep); color: var(--ink); text-align: center; padding: 4.8rem 0; }
.contact__title { color: var(--turquoise-deep); font-size: clamp(1.9rem, 3.8vw, 2.5rem); }
.contact__text { margin: 1.1rem auto 1.8rem; max-width: 34em; color: var(--ink-soft); font-size: 1.05rem; }
.contact__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.contact__note { margin-top: 1.6rem; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #cfc4b5; font-size: 0.85rem; }
.footer__inner { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; text-align: center; padding: 1.8rem 0; }
.footer a { color: var(--coral-bright); 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; }
  .route__line { flex-direction: column; gap: 1.6rem; }
  .route__line::before { left: 50%; top: 4%; bottom: 4%; right: auto; width: 3px; height: auto; background-image: linear-gradient(180deg, var(--coral) 0 10px, transparent 10px 20px); background-size: 3px 20px; transform: translateX(-50%); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { order: -1; max-width: 380px; margin-inline: auto; }
  .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(--turquoise); 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; }
}