/* ==========================================================================
   Renew Auto Body & Paint, Fresno — home page mockup
   Concept: "an update at every step." The page follows one car through the shop
   the way Renew's reviewers describe it ("they kept us informed of every step"):
   drop-off at the counter on Effie Street, then the updates from the frame rack,
   the dent bench, the color match and the paint oven, ending on the checkered
   finish line lifted from the yellow checker band of their own logo.
   Palette: their logo (checker yellow, wrench-badge teal, black) plus the epoxy
   shop-floor grey of a clean bay. Type: Chakra Petch, squared and cut at the
   corners like the "Renew" lettering in the logo and a fender badge; Kumbh Sans,
   a plain geometric text face kin to the logo's "Auto & Body Repair" line.
   ========================================================================== */
:root {
  /* color, from the logo and the shop */
  --ink: #121314;          /* logo black, the bubble and the night band */
  --checker: #F4EC1F;      /* logo checker band; on ink only, never text on white */
  --badge: #2E9FC6;        /* wrench-badge teal; on ink only (6.2:1) */
  --badge-deep: #17698A;   /* the same teal deepened for links on light grounds (6.1:1) */
  --floor: #ECEFEF;        /* epoxy shop floor, the page ground */
  --steel: #4A5257;        /* secondary text on the floor (6.9:1) */
  --paper: #FFFFFF;
  --mist: #D9DEE0;         /* hairlines on the floor */
  --on-ink: #E4E8EA;       /* body text on ink (14:1) */

  /* type */
  --display: "Chakra Petch", "Bahnschrift", "DIN Alternate", "Arial Narrow", sans-serif;
  --text: "Kumbh Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --fs-hero: clamp(2.5rem, 1.2rem + 4.6vw, 4.5rem);    /* 40 -> 72 */
  --fs-h2: clamp(2rem, 1.45rem + 1.9vw, 2.75rem);      /* 32 -> 44 */
  --fs-h3: 1.375rem;
  --fs-body: 1.125rem;                                 /* 18 */
  --fs-small: 0.9375rem;

  /* space */
  --gutter: 16px;
  --section: clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --header-h: 62px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body {
  margin: 0;
  background: var(--floor);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
p { margin: 0; }
a { color: var(--badge-deep); text-underline-offset: 3px; text-decoration-thickness: 2px; }
ul { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--checker);
}
.on-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--checker); box-shadow: 0 0 0 8px var(--ink); }

.wrap { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--ink); color: var(--checker); padding: 12px 16px; font-weight: 600;
}
.skip:focus { top: 8px; }

/* the checker band from the logo: two staggered rows of yellow squares on black */
.checker {
  height: 16px;
  background: var(--ink) repeating-conic-gradient(var(--checker) 0 25%, var(--ink) 0 50%) 0 0 / 16px 16px;
}
.checker--thin { height: 8px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
}
.bar {
  display: flex; align-items: center; gap: 8px;
  min-height: 54px;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.brand img { width: auto; height: 36px; }
.menu-btn {
  display: none;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  font: 600 1rem/1 var(--text); color: var(--ink);
  background: transparent; border: 2px solid var(--ink); border-radius: 2px; cursor: pointer;
}
.call {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  background: var(--ink); color: var(--checker);
  font: 700 1rem/1 var(--display); text-decoration: none; border-radius: 2px;
}
.call svg { width: 18px; height: 18px; flex: none; }
.call-long { display: none; }

.site-nav ul { list-style: none; }
.site-nav a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* no JavaScript: the nav is a plain list under the logo, the header scrolls away */
html:not(.js) .site-header { position: relative; }
html:not(.js) .bar { flex-wrap: wrap; }
html:not(.js) .site-nav { flex-basis: 100%; }
html:not(.js) .site-nav a { padding: 0 4px; }

/* with JavaScript, below 1024 px: a Menu button opens a panel under the header */
.js .menu-btn { display: inline-flex; align-items: center; }
.js .site-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--ink); padding: 8px var(--gutter) 20px;
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.js .site-header.open .site-nav { display: block; }
.js .site-nav a { color: var(--paper); font-family: var(--display); font-size: 1.25rem; border-bottom: 1px solid #2B2F31; }
.js .site-nav a:hover { color: var(--checker); }
.js .site-nav :focus-visible { outline-color: var(--checker); box-shadow: none; }

@media (min-width: 420px) {
  .call-short { display: none; }
  .call-long { display: inline; }
}

@media (min-width: 1024px) {
  html { scroll-padding-top: 150px; }
  .bar {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand . call" "nav nav nav";
    column-gap: 24px; padding-top: 8px;
  }
  .brand { grid-area: brand; }
  .brand img { height: 44px; }
  .call { grid-area: call; padding: 0 18px; }
  .js .menu-btn, .menu-btn { display: none; }
  .js .site-nav, .site-nav {
    grid-area: nav; display: block; position: static;
    background: none; padding: 0; max-height: none; overflow: visible;
  }
  .site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .js .site-nav a, .site-nav a {
    color: var(--ink); font-family: var(--text); font-size: 0.97rem; border: 0; padding: 0;
  }
  .js .site-nav a:hover, .site-nav a:hover { color: var(--badge-deep); }
  .js .site-nav :focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 8px var(--checker); }
}
@media (min-width: 1400px) {
  html { scroll-padding-top: 110px; }
  .bar { grid-template-areas: "brand nav call"; grid-template-columns: auto 1fr auto; padding-top: 0; min-height: 72px; }
  .site-nav ul { justify-content: flex-end; gap: 4px 18px; }
}

/* ---------- buttons ---------- */
.btn-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 20px;
  background: var(--checker); color: var(--ink);
  font: 700 1.125rem/1 var(--display); text-decoration: none; border-radius: 2px;
}
.btn-call svg { width: 20px; height: 20px; }
.btn-call:hover { background: var(--paper); }

/* ---------- hero: the car out front, the finish band, the line on the shop's black ---------- */
.hero { background: var(--ink); color: var(--paper); }
.hero-photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 38% 70%;
}
.hero-copy { padding: 26px 0 48px; display: grid; gap: 22px; }
.hero h1 { font-size: var(--fs-hero); line-height: 1; }
.hero h1 .renewed { color: var(--checker); }
.deck { color: var(--on-ink); font-size: 1.1875rem; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 4px; }
.hero .text-link, .on-ink .text-link { color: var(--paper); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; text-decoration-color: var(--checker); }
.when { color: var(--on-ink); font-size: var(--fs-small); line-height: 1.55; }
.when strong { color: var(--paper); font-weight: 600; }

@media (min-width: 760px) {
  .hero-photo { aspect-ratio: auto; height: clamp(320px, 44vh, 520px); object-position: 40% 62%; }
}
@media (min-width: 1024px) {
  .hero-copy { grid-template-columns: 8fr 5fr; column-gap: 56px; align-items: end; padding: 40px 0 72px; }
  .hero-side { display: grid; gap: 20px; padding-bottom: 8px; }
}

/* ---------- the front counter ---------- */
.frontdesk { padding: var(--section) 0; }
.fd-grid { display: grid; gap: 28px; }
.fd-photo { margin: 0; }
.fd-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% 50%; }
.fd-copy { display: grid; gap: 18px; align-content: start; }
.fd-copy p { color: var(--steel); }
.fd-copy p strong { color: var(--ink); }
.fd-list { list-style: none; border-top: 3px solid var(--ink); }
.fd-list li { padding: 12px 0; border-bottom: 1px solid var(--mist); }
.fd-list b { font-family: var(--display); font-size: 1.1875rem; }
@media (min-width: 900px) {
  .fd-grid { grid-template-columns: 7fr 5fr; column-gap: 56px; align-items: center; }
  .fd-photo { margin-left: calc(-1 * max(var(--gutter), (100vw - 1200px) / 2)); }
  .fd-photo img { aspect-ratio: 5 / 4; }
}

/* ---------- the updates: the signature ---------- */
.updates { padding: 0 0 0; }
.up-grid { display: grid; gap: 32px; }
.up-head { display: grid; gap: 16px; align-content: start; }
.up-head p { color: var(--steel); max-width: 30em; }
.up-head q { color: var(--ink); font-weight: 600; }
.thread { list-style: none; display: grid; gap: 22px; padding-bottom: 0; }
.msg {
  max-width: 600px;
  background: var(--ink); color: var(--paper);
  border-radius: 22px 22px 22px 6px;
  padding: 10px 10px 18px;
}
.msg img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px 14px 6px 6px; }
.msg .from {
  font-family: var(--display); font-weight: 600; font-size: 0.9375rem; color: var(--badge);
  padding: 14px 10px 2px;
}
.msg .body { padding: 0 10px; font-size: 1.0625rem; line-height: 1.55; color: var(--on-ink); }
.msg .body b { color: var(--paper); font-family: var(--display); font-size: 1.25rem; display: block; line-height: 1.2; margin-bottom: 2px; }
.msg--done { position: relative; z-index: 1; margin-bottom: -96px; box-shadow: 0 0 0 4px var(--checker); }
.msg--done .body b { color: var(--checker); }

@media (min-width: 900px) {
  .up-grid { grid-template-columns: 5fr 7fr; column-gap: 64px; }
  .up-head { position: sticky; top: 140px; align-self: start; padding-top: 8px; }
  .thread { gap: 28px; }
  .thread .msg:nth-child(2) { margin-left: 56px; }
  .thread .msg:nth-child(3) { margin-left: 18px; }
  .thread .msg:nth-child(4) { margin-left: 80px; }
}

/* fade the pictures in as the updates arrive (pictures only, never the words) */
.js .reveal.pre { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.pre.in { opacity: 1; transform: none; }

/* ---------- reviews on the shop's black, opened by the finish band ---------- */
.reviews { background: var(--ink); color: var(--paper); padding: 0 0 var(--section); }
.reviews .checker { height: 32px; background-size: 32px 32px; }
.rv-inner { padding-top: 120px; display: grid; gap: 40px; }
.reviews h2 { color: var(--paper); }
.reviews h2 span { color: var(--checker); }
.pull { margin: 0; display: grid; gap: 14px; }
.pull blockquote { margin: 0; }
.pull blockquote p {
  font-family: var(--display); font-weight: 700; line-height: 1.12;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem); text-wrap: balance;
}
.pull figcaption, .quote figcaption { color: var(--on-ink); font-size: var(--fs-small); }
.quotes { display: grid; gap: 32px; }
.quote { margin: 0; padding-top: 16px; border-top: 2px solid var(--badge); display: grid; gap: 10px; }
.quote blockquote { margin: 0; }
.quote p { color: var(--paper); }
.quote--ava p { font-size: 1.375rem; line-height: 1.45; }
.quote--italia p { font-size: 1.1875rem; }
@media (min-width: 900px) {
  .rv-inner { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 48px; }
  .reviews h2 { grid-column: 1 / 8; }
  .pull { grid-column: 1 / 11; }
  .quotes { grid-column: 1 / -1; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; }
  .quote--ava { grid-column: 1 / 7; }
  .quote--italia { grid-column: 8 / 12; margin-top: 64px; }
  .rv-more { grid-column: 1 / -1; }
}

/* ---------- fleet: the bay, full width, then the work-vehicle story ---------- */
.fleet { padding-bottom: var(--section); }
.fleet-photo { margin: 0; }
.fleet-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 40%; }
.fleet-grid { display: grid; gap: 28px; padding-top: 40px; }
.fleet-grid > div { display: grid; gap: 16px; align-content: start; }
.fleet-grid p { color: var(--steel); }
.nick { margin: 0; border-left: 6px solid var(--ink); padding: 4px 0 4px 20px; display: grid; gap: 10px; }
.nick blockquote { margin: 0; }
.nick p { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.25; color: var(--ink); }
.nick figcaption { color: var(--steel); font-size: var(--fs-small); }
@media (min-width: 760px) {
  .fleet-photo img { aspect-ratio: 21 / 9; }
}
@media (min-width: 900px) {
  .fleet-grid { grid-template-columns: 6fr 5fr; column-gap: 72px; padding-top: 56px; }
}

/* ---------- visit and estimate ---------- */
.visit { background: var(--paper); padding: var(--section) 0; border-top: 3px solid var(--ink); }
.visit-grid { display: grid; gap: 40px; }
.visit-info { display: grid; gap: 18px; align-content: start; }
.visit-info p { color: var(--steel); }
.visit-info address { font-style: normal; font-size: 1.25rem; line-height: 1.5; }
.visit-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; }
.sherri { margin: 0; display: grid; gap: 6px; padding-left: 18px; border-left: 6px solid var(--ink); }
.sherri blockquote { margin: 0; }
.sherri p { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.sherri figcaption { font-size: var(--fs-small); color: var(--steel); }
.visit .btn-call { background: var(--ink); color: var(--checker); justify-self: start; }
.visit .btn-call:hover { background: #2B2F31; }
.hours { list-style: none; border-top: 1px solid var(--mist); }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--mist); }

.estimate-form { display: grid; gap: 18px; background: var(--floor); padding: 24px var(--gutter); border-top: 6px solid var(--ink); }
.estimate-form h3 { font-size: var(--fs-h3); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; }
.field label span { font-weight: 400; color: var(--steel); }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--steel); border-radius: 2px; padding: 10px 12px; min-height: 48px; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.send {
  justify-self: start; min-height: 52px; padding: 0 22px; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 2px;
  font: 700 1.125rem/1 var(--display);
}
.send:hover { background: var(--ink); color: var(--checker); }
.form-note { font-size: var(--fs-small); color: var(--steel); }
.form-status:not(:empty) { font-weight: 600; padding: 12px 14px; background: var(--paper); border-left: 6px solid var(--badge-deep); }
@media (min-width: 900px) {
  .visit-grid { grid-template-columns: 5fr 6fr; column-gap: 72px; }
  .estimate-form { padding: 32px; }
}

/* ---------- stub pages ---------- */
.stub { background: var(--ink); color: var(--paper); }
.stub-inner { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; display: grid; gap: 22px; max-width: 760px; }
.stub h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); }
.stub p { color: var(--on-ink); font-size: 1.1875rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink); font-size: var(--fs-small); }
.site-footer a { color: var(--paper); }
.foot-grid { display: grid; gap: 28px; padding: 48px 0 28px; }
.foot-name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--paper); margin-bottom: 8px; }
.foot-grid p + p { margin-top: 4px; }
.foot-nav ul { list-style: none; display: grid; gap: 2px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.foot-nav a:hover { color: var(--checker); text-decoration: underline; }
.foot-tel { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
.mockup-line { padding: 16px 0 28px; border-top: 1px solid #2B2F31; color: #AEB5B9; font-size: 0.8125rem; }
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .reveal.pre { opacity: 1; transform: none; }
}