/* ==========================================================================
   Power House Diesel. Hand written CSS, no framework, no build step.
   Section order follows the Premium Restoration Group build:
   utility bar > header > photo hero > value band + form > credentials >
   intro > services > work > the shop > process > reviews > FAQ > contact >
   footer > mobile call bar.
   Every value comes from styles/tokens.css.
   ========================================================================== */

/* ---------- self hosted faces, no Google Fonts API ---------- */
@font-face {
  font-family: "Bai Jamjuree";
  src: url("../assets/fonts/baijamjuree.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-body);
  font-family: var(--font-body);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  margin: 0;
}

p { margin: 0; }

:target { scroll-margin-top: var(--header-h); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: calc(var(--sp-4) * -6);
  z-index: 100;
  background: var(--c-ink);
  color: var(--c-white);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-8); }
.section--grey  { background: var(--c-grey); }
.section--paper { background: var(--c-paper); }
.section--ink   { background: var(--c-ink); }

@media (min-width: 48rem) {
  .section { padding-block: var(--sp-9); }
}

/* ---------- shared furniture ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--c-accent-ink);
  border-left: var(--rule) solid var(--c-accent);
  padding-left: var(--sp-3);
}
.eyebrow--center { border-left: 0; padding-left: 0; }

.rule {
  width: 4.25rem;
  height: var(--rule);
  background: var(--c-accent);
  margin-top: var(--sp-4);
}
.rule--center { margin-inline: auto; }

.section-head { max-width: 46rem; }
.section-head h2 { margin-top: var(--sp-3); font-size: var(--fs-5); line-height: var(--lh-snug); }
.section-head p  { margin-top: var(--sp-4); font-size: var(--fs-3); }
.section-head--center { max-width: 52rem; margin-inline: auto; text-align: center; }

/* a section intro that carries its supporting copy beside the heading rather
   than under it, so the head does not leave the right half of the row empty */
.head-split { display: grid; gap: var(--sp-5); }
.head-aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.head-aside p { margin: 0; }
@media (min-width: 64rem) {
  .head-split { grid-template-columns: 7fr 5fr; gap: var(--sp-8); align-items: end; }
  .head-split .section-head { max-width: none; }
  .head-aside { padding-bottom: var(--sp-2); }
}

.lede { font-size: var(--fs-3); }
.small { font-size: var(--fs-2); }
.muted { color: var(--c-muted); }
.strong-ink { color: var(--c-ink); font-weight: var(--fw-bold); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); box-shadow: var(--shadow-md); }
.btn--accent:hover { background: var(--c-accent-dk); border-color: var(--c-accent-dk); color: var(--c-on-accent); }
.btn--ink { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.btn--ink:hover { background: var(--c-ink-2); }
.btn--outline { border-color: var(--c-ink); color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-white); }
.btn--onphoto { border-color: var(--c-white); color: var(--c-white); }
.btn--onphoto:hover { background: var(--c-white); color: var(--c-ink); }
.btn--block { width: 100%; }
.btn svg { width: 1rem; height: 1rem; flex: none; }

/* ---------- logo lockup ---------- */
/* the client's own artwork. It already carries the name and the descriptor,
   so the lockup is the image plus a locality tag and nothing else. */
.logo {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; min-height: 44px;
}
/* the name is HTML rather than SVG text so it stays crisp and selectable at
   the small sizes a header lockup actually runs at */
.logo-word { display: none; line-height: 1.05; }
.logo-word b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: var(--fw-black);
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--logo-on, var(--c-ink));
}
.logo-word i {
  display: block; font-style: normal;
  font-size: var(--fs-1); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--logo-on, var(--c-ink)); opacity: .68;
}
.logo-word { display: block; }
.logo--light { --logo-on: var(--c-white); }
.logo--light .logo--light .logo-word b { font-size: 1.32rem; }
.logo__place {
  display: none;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--c-line);
  font-family: var(--font-body);
  font-size: var(--fs-1); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-muted);
}
@media (min-width: 48rem) {
    .logo__place { display: block; }
}

/* ---------- utility bar ---------- */
.utility {
  display: none;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.utility .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
}
.utility ul { display: flex; align-items: center; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.utility li + li { border-left: 1px solid var(--c-line-dk); padding-left: var(--sp-4); }
.utility a { text-decoration: none; }
.utility a:hover { text-decoration: underline; }
@media (min-width: 64rem) { .utility { display: block; } }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.nav { display: none; align-items: center; gap: var(--sp-5); }
.nav a {
  position: relative;
  white-space: nowrap;
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink);
  text-decoration: none;
  padding-block: var(--sp-1);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--c-accent);
  transition: width var(--t-base);
}
.nav a:hover::after, .nav a:focus-visible::after { width: 100%; }

.header-cta { display: flex; align-items: center; gap: var(--sp-4); }
.header-phone { display: none; text-align: right; text-decoration: none; }
.header-phone span {
  display: block;
  white-space: nowrap;
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-accent);
}
.header-phone strong {
  display: block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-black);
  line-height: 1.1;
  color: var(--c-ink);
}
.header-cta .btn { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  color: var(--c-ink);
  cursor: pointer;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }

.mobile-nav { display: none; border-top: 1px solid var(--c-line); background: var(--c-white); }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav nav { display: flex; flex-direction: column; padding-block: var(--sp-3); }
.mobile-nav a:not(.btn) {
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-ink);
  text-decoration: none;
}
.mobile-nav a:not(.btn):hover { background: var(--c-grey); }
.mobile-nav .btn { margin-top: var(--sp-3); }

@media (min-width: 64rem) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .header-cta .btn { display: inline-flex; }
}
@media (min-width: 80rem) { .header-phone { display: block; } }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--c-ink); overflow: hidden; }
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 60%;   /* the bay door and the trucks, not the sky */
  z-index: -2;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-hero-sm);
}
@media (min-width: 64rem) { .hero__scrim { background: var(--scrim-hero); } }
.hero .wrap { padding-block: var(--sp-9); }
.hero h1 {
  margin-top: var(--sp-5);
  max-width: 20ch;
  font-size: var(--fs-6);
  line-height: var(--lh-tight);
  color: var(--c-white);
}
.hero h1 em { font-style: normal; color: var(--c-accent-lt); }
.hero p {
  margin-top: var(--sp-5);
  max-width: 54ch;
  color: var(--c-on-dark);
}
.hero p strong { color: var(--c-white); font-weight: var(--fw-bold); }
.hero .eyebrow { color: var(--c-accent-lt); border-left-color: var(--c-accent); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }

.hero__grid { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--sp-8); }
  .hero .wrap { padding-block: var(--sp-9); }
}
/* the hero sets light copy on the photo. The card sitting in it is white,
   so it has to opt back out of that or the text disappears. */
.hero .form-card { border-top-color: var(--c-accent); }
.hero .form-card p { color: var(--c-body); max-width: none; margin-top: var(--sp-2); }
.hero .form-card h2, .hero .form-card h3 { color: var(--c-ink); }
.hero .form-card .form__note { color: var(--c-muted); }
.hero .form-card strong { color: var(--c-ink); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); padding: 0; list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line-dk);
  border-radius: var(--radius);
  background: var(--c-glass);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-white);
}
.chips li::before {
  content: "";
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--c-accent-lt);
}
.chips--light li { border-color: var(--c-line); background: var(--c-white); color: var(--c-ink); }

@media (min-width: 64rem) { .hero .wrap { padding-block: var(--sp-10); } }

/* ---------- value band + form ---------- */
.band { display: grid; gap: var(--sp-8); }
.value-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 64rem) { .value-grid.value-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.value-item h3 { margin-top: var(--sp-4); font-size: var(--fs-4); line-height: var(--lh-snug); }
.value-item p { margin-top: var(--sp-2); font-size: var(--fs-2); }
.value-item .icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius);
  background: var(--c-accent-tint);
  color: var(--c-accent-ink);
}
.value-item .icon svg { width: 1.25rem; height: 1.25rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-7) 0 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
}
.stats dt {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--c-accent-ink);
}
.stats dd {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-muted);
}

.form-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: var(--rule) solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
}
.form-card h2, .form-card h3 { letter-spacing: var(--ls-tight); }
.form-card h2, .form-card h3 { font-size: var(--fs-4); line-height: var(--lh-snug); }
.form-card > p { margin-top: var(--sp-2); font-size: var(--fs-2); }
.form-card > h2 + .form,
.form-card > h3 + .form { margin-top: var(--sp-5); }
.form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.form__row { display: grid; gap: var(--sp-3); }
.field {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  color: var(--c-ink);
}
.field::placeholder { color: var(--c-muted); }
.field:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-focus); }
select.field { appearance: none; background-image: none; }
textarea.field { resize: vertical; min-height: 6rem; }
.form__note { font-size: var(--fs-1); color: var(--c-muted); }
.form__status { display: none; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); font-size: var(--fs-2); }
.form__status[data-state="ok"]  { display: block; background: var(--c-grey); color: var(--c-ink); border-left: var(--rule) solid var(--c-accent); }
.form__status[data-state="err"] { display: block; background: var(--c-accent-tint); color: var(--c-accent-dk); border-left: var(--rule) solid var(--c-accent); }

@media (min-width: 40rem) {
  .value-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .form__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
  .band { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--sp-8); }
}

/* ---------- 24/7 hi-vis bar ---------- */
.hivis {
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}
.hivis .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-4);
  font-size: var(--fs-4);
}
.hivis span { display: inline-flex; align-items: center; gap: var(--sp-3); }
.hivis svg { width: 1.4rem; height: 1.4rem; }
.hivis a { text-decoration: none; }
.hivis a:hover { text-decoration: underline; }

/* ---------- credentials strip ---------- */
.creds { background: var(--c-white); border-block: 1px solid var(--c-line); padding-block: var(--sp-6); text-align: center; }
.creds > .wrap > p {
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--c-muted);
}
.creds ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}
.creds li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink);
}
.creds li::before { content: ""; width: 3px; height: 1rem; background: var(--c-accent); }

/* ---------- card grids ---------- */
.grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .grid.grid--4 { grid-template-columns: repeat(4, 1fr); } }


.card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: var(--rule) solid var(--c-steel);
  border-radius: var(--radius);
  padding: var(--sp-5);
  transition: transform var(--t-base), box-shadow var(--t-base), border-left-color var(--t-base);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-left-color: var(--c-accent); }
.card h3 { margin-top: var(--sp-4); font-size: var(--fs-4); line-height: var(--lh-snug); }
.card p { margin-top: var(--sp-3); font-size: var(--fs-2); }
.card .icon {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius);
  background: var(--c-accent-tint);
  color: var(--c-accent-ink);
}
.card .icon svg { width: 1.15rem; height: 1.15rem; }
.card__src {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-muted);
}
.card--dark { background: var(--c-ink); border-color: var(--c-ink); border-left-color: var(--c-accent); }
.card--dark h3 { color: var(--c-white); }
.card--dark p { color: var(--c-on-dark-soft); }
.card--dark .icon { background: var(--c-line-dk); color: var(--c-white); }
.card--dark .btn { margin-top: var(--sp-5); align-self: flex-start; }

/* ---------- work gallery ---------- */
@media (min-width: 48rem) { .work-head { grid-template-columns: 1fr auto; } }

.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-ink);
  box-shadow: var(--shadow-md);
}
.tile img {
  width: 100%;
  height: 19rem;
  object-fit: cover;
  transition: transform var(--t-slow), opacity var(--t-base);
}
.tile:hover img { transform: scale(1.05); opacity: .85; }
.tile figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-8) var(--sp-4) var(--sp-4);
  background: var(--scrim-caption);
  color: var(--c-white);
}
.tile figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}
.tile figcaption span { display: block; margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--c-on-dark-soft); }
.badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 1;
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-accent);
  border-radius: var(--radius);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-on-accent);
}
.badge--ink { background: var(--c-ink); }

/* ---------- pull quote, used where a second photo would go ---------- */
.pullquote {
  margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: var(--rule) solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.pullquote p {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}
.pullquote footer {
  margin-top: var(--sp-4);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-muted);
}

/* ---------- the shop ---------- */
.split { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 64rem) { .split { grid-template-columns: repeat(2, 1fr); } }
.split__media { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.split__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); }

/* a captioned photograph. The caption sits on the image so the column keeps
   an even rhythm with the quote and rating card stacked under it. */
.shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.shot img { display: block; aspect-ratio: 16 / 10; box-shadow: none; border-radius: 0; }
.shot figcaption {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--sp-7) var(--sp-5) var(--sp-4);
  background: var(--scrim-caption);
  font-size: var(--fs-2); font-weight: var(--fw-bold);
  color: var(--c-white);
}
.split p + p { margin-top: var(--sp-3); }

.feature-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 40rem) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
/* full width under both columns, so the split above stays balanced */
@media (min-width: 64rem) {
}
.feature { border-left: var(--rule) solid var(--c-accent); padding-left: var(--sp-4); }
.feature strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}
.feature p { margin-top: var(--sp-1); font-size: var(--fs-2); }

.rating-card {
  background: var(--c-ink);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
}
.rating-card .score {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--c-white);
}
.rating-card .score span { color: var(--c-accent-lt); }
.rating-card p { margin-top: var(--sp-2); font-size: var(--fs-2); color: var(--c-on-dark-soft); }
.rating-card .meta {
  margin-top: var(--sp-4);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-accent-lt);
}

/* ---------- process ---------- */
.steps { display: grid; gap: var(--sp-5); margin: var(--sp-8) 0 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-bottom: var(--rule) solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
}
/* amber number chips carry dark text too */
.step b {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-black);
  /* the display faces carry deep descenders, so the default line box
     drops the numeral low in the chip. Collapse it so place-items can
     actually centre the glyph. */
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.step h3 { margin-top: var(--sp-4); font-size: var(--fs-4); line-height: var(--lh-snug); }
.step p { margin-top: var(--sp-2); font-size: var(--fs-2); }

/* ---------- reviews ---------- */
.reviews-layout { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 64rem) {
  .reviews-layout { grid-template-columns: 5fr 7fr; }
  /* the review grid is always taller than the summary, so the summary travels
     with it instead of leaving a hole beneath itself */
  .score-panel { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}

.panel-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-2); font-weight: var(--fw-bold);
  color: var(--c-accent-ink); text-decoration: none;
}
.panel-cta svg { width: 1rem; height: 1rem; flex: none; }
.panel-cta:hover { color: var(--c-ink); }

.score-panel {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: var(--rule) solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.score-panel .big {
  font-family: var(--font-display);
  font-size: var(--fs-6);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--c-ink);
}
.score-panel .stars { margin-top: var(--sp-2); font-size: var(--fs-4); color: var(--c-accent-ink); letter-spacing: .1em; }
.score-panel .count { margin-top: var(--sp-2); font-size: var(--fs-2); }

.dist { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.dist-row { display: grid; grid-template-columns: 2.5rem 1fr 2rem; align-items: center; gap: var(--sp-3); font-size: var(--fs-1); color: var(--c-muted); }
.dist-row .track { height: .5rem; border-radius: var(--radius); background: var(--c-grey); overflow: hidden; }
.dist-row .fill { display: block; height: 100%; background: var(--c-accent); }
.dist-row .num { text-align: right; font-weight: var(--fw-bold); color: var(--c-ink); }

.topics { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.topics > p {
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-muted);
}
.topics ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.topics li {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-white);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-ink);
}
.topics li b { color: var(--c-accent-ink); }

.review-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 40rem) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
.review {
  margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: var(--rule) solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.review .stars { font-size: var(--fs-2); color: var(--c-accent-ink); letter-spacing: .12em; }
.review p { margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--c-ink); }
.review footer {
  margin-top: var(--sp-4);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-muted);
}

/* ---------- FAQ ---------- */
.faq-layout { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 64rem) {
  .faq-layout { grid-template-columns: 4fr 8fr; }
  /* the heading column is short next to the question list, so it travels with it */
  .faq-layout > :first-child { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}
.faq-list { border-block: 1px solid var(--c-line); }
.faq { border-bottom: 1px solid var(--c-line); }
.faq:last-child { border-bottom: 0; }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-3);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--c-accent-ink); font-size: var(--fs-4); line-height: 1; }
.faq[open] summary::after { content: "\2013"; }
.faq p { padding-bottom: var(--sp-4); font-size: var(--fs-2); max-width: 68ch; }

/* ---------- contact ---------- */
.contact-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-6) 0 0; }
.contact-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}
.contact-row dt {
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-accent-ink);
  padding-top: var(--sp-1);
}
.contact-row dd { margin: 0; font-size: var(--fs-2); }
.contact-row dd a { text-decoration: none; }
.contact-row dd a:hover { color: var(--c-accent-ink); }
.contact-row .phone {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-black);
  color: var(--c-ink);
}

.map-frame { margin-top: var(--sp-6); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.map-frame img { width: 100%; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--c-ink);
  color: var(--c-on-dark-mute);
  border-top: var(--rule) solid var(--c-accent);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-9);
}
.footer-grid { display: grid; gap: var(--sp-7); }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer p { font-size: var(--fs-2); }
.footer-h {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--c-white);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-accent);
}
.footer-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-2); }
.footer-list a { text-decoration: none; }
.footer-list a:hover { color: var(--c-accent-lt); }
.footer-phone {
  display: inline-block;
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-black);
  color: var(--c-white);
  text-decoration: none;
}
.footer-phone:hover { color: var(--c-accent-lt); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line-dk);
  font-size: var(--fs-1);
}
@media (min-width: 48rem) { .footer-bottom { flex-direction: row; justify-content: space-between; } }

/* ---------- mobile call bar ---------- */
.mobile-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.mobile-bar a {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
}
.mobile-bar .call { background: var(--c-accent); color: var(--c-on-accent); }
.mobile-bar .msg { background: var(--c-ink); color: var(--c-white); }
@media (min-width: 64rem) { .mobile-bar { display: none; } .site-footer { padding-bottom: var(--sp-8); } }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .card:hover, .btn:hover { transform: none; }
  .tile:hover img { transform: none; }
}

/* ---------- small helpers ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.h-section { margin-top: var(--sp-3); font-size: var(--fs-5); line-height: var(--lh-snug); }
.mt-3 { margin-top: var(--sp-3); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.split--top { align-items: start; }

/* contact: the details column runs longer than the form, which leaves a hole to
   the right of it. Stretch the card and let the message box absorb the height. */
@media (min-width: 64rem) {
  #contact .split--top { align-items: stretch; }
  #contact .form-card { display: flex; flex-direction: column; }
  #contact .form { flex: 1; }
  #contact .form textarea.field { flex: 1; }
}

/* the work tiles come from mixed sources, portrait and landscape, so the image
   box is fixed and the photo is cropped into it. Without this the row bottoms
   go ragged and the short tile leaves a hole under it. */
.grid--4 .tile img { height: 24rem; }
@media (min-width: 64rem) { .grid--4 .tile img { height: 26rem; } }


/* the three usable photographs are all portrait, so the work row is 3 across
   with a fixed image box rather than 4 with a hole in it */
.grid--3 .tile img { height: 24rem; }
@media (min-width: 64rem) { .grid--3 .tile img { height: 28rem; } }



/* the badge takes real width in the lockup, so the locality tag waits until
   there is room for it rather than pushing the header past the viewport */
@media (min-width: 64rem) and (max-width: 74.9375rem) { .logo__place { display: none; } }

/* the hexagon mark. It is decorative beside the wordmark, so it carries an
   empty alt and the accessible name lives on the anchor. The dark green and
   near black read on white and on ink alike, so there is no second file. */
.logo-badge { display: block; width: auto; height: 2.7rem; flex: none; }
@media (min-width: 48rem) { .logo-badge { height: 3.2rem; } }
.logo--light .logo-badge { height: 3.2rem; }
@media (min-width: 64rem) and (max-width: 76rem) { .logo__place { display: none; } }

/* who we work on: the breadth is the story here, so the row is a strip of
   equal cards rather than a paragraph nobody reads */
.fits { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); grid-template-columns: repeat(2,1fr); }
@media (min-width: 56rem) { .fits { grid-template-columns: repeat(4,1fr); } }
.fit {
  background: var(--c-white); border: 1px solid var(--c-line);
  border-top: var(--rule) solid var(--c-accent);
  border-radius: var(--radius); padding: var(--sp-5) var(--sp-4);
}
.fit b { display: block; font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-3); text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--c-ink); }
.fit span { display: block; margin-top: var(--sp-2); font-size: var(--fs-2); color: var(--c-muted); }

/* ---------- inner pages ----------
   Every page after the homepage opens on a short ink band rather than a
   photo hero, so the header, nav and footer stay pixel identical across the
   site and only the middle changes. */
.page-hero { background: var(--c-ink); color: var(--c-on-dark); padding-block: var(--sp-8); }
@media (min-width: 48rem) { .page-hero { padding-block: var(--sp-9); } }
.page-hero h1 { color: var(--c-white); font-size: var(--fs-5); line-height: var(--lh-snug); margin-top: var(--sp-3); max-width: 22ch; }
.page-hero p { max-width: 46rem; margin-top: var(--sp-4); color: var(--c-on-dark-soft); font-size: var(--fs-3); }
.page-hero .eyebrow { color: var(--c-accent-lt); border-left-color: var(--c-accent-lt); }
.page-hero .btn { margin-top: var(--sp-6); }

/* the page you are on is marked in the nav, not only by the URL */
.nav a[aria-current="page"] { color: var(--c-accent-ink); box-shadow: inset 0 calc(var(--rule) * -1) 0 var(--c-accent); }
.mobile-nav a[aria-current="page"] { color: var(--c-accent-ink); }

/* honeypot: off canvas, never display:none, so bots still fill it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* status messages now carry a link */
.form__status a { color: inherit; font-weight: var(--fw-bold); }

/* a closing band on the inner pages: phone and a route to the form, so no
   page ends on a footer with nothing to do */
.close-cta { background: var(--c-accent-tint); border-top: var(--rule) solid var(--c-accent); }
.close-cta .wrap { display: grid; gap: var(--sp-5); padding-block: var(--sp-8); }
@media (min-width: 56rem) { .close-cta .wrap { grid-template-columns: 1fr auto; align-items: center; } }
.close-cta h2 { font-size: var(--fs-4); line-height: var(--lh-snug); }
.close-cta p { margin-top: var(--sp-2); color: var(--c-muted); }
.close-cta .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* the reviews page lists every review in a two column flow */
.review-list { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 48rem) { .review-list { grid-template-columns: repeat(2, 1fr); } }

/* the work page pairs a photograph with the review that goes with it */
.case { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 56rem) { .case { grid-template-columns: 1.15fr 1fr; align-items: center; } .case--flip > figure { order: 2; } }
.case figure { margin: 0; }
.case img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; height: auto; }
.case h3 { font-size: var(--fs-4); line-height: var(--lh-snug); }
.case .review { margin-top: var(--sp-4); }

/* the inner page hero is two columns on desktop: the title, and a facts panel
   with the three things every visitor to an inner page is likely hunting for.
   Without it the right half of a full width ink band sits empty. */
.page-hero .wrap { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 56rem) { .page-hero .wrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-8); } }
.hero-facts {
  background: var(--c-glass); border: 1px solid var(--c-line-dk);
  border-left: var(--rule) solid var(--c-accent-lt);
  border-radius: var(--radius); padding: var(--sp-5); min-width: 16rem;
}
.hero-facts dl { margin: 0; display: grid; gap: var(--sp-4); }
.hero-facts dt { font-size: var(--fs-1); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-accent-lt); }
.hero-facts dd { margin: var(--sp-1) 0 0; font-size: var(--fs-2); line-height: 1.5; color: var(--c-white); }
.hero-facts a { color: var(--c-white); font-weight: var(--fw-bold); text-decoration: none; }
.hero-facts a:hover, .hero-facts a:focus-visible { text-decoration: underline; }

/* ---------- symptom router ----------
   People do not search for "diagnostics", they search for what the truck is
   doing. This turns the symptom into the entry point and routes it. */
.symptoms { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (min-width: 40rem) { .symptoms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .symptoms { grid-template-columns: repeat(3, 1fr); } }
.symptom {
  display: block; background: var(--c-white); border: 1px solid var(--c-line);
  border-left: var(--rule) solid var(--c-accent); border-radius: var(--radius);
  padding: var(--sp-5); text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.symptom:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-accent); }
.symptom b { display: block; font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-3); color: var(--c-ink); line-height: var(--lh-snug); }
.symptom span { display: block; margin-top: var(--sp-2); font-size: var(--fs-2); color: var(--c-body); }
.symptom em { display: block; margin-top: var(--sp-3); font-style: normal; font-size: var(--fs-1);
  font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-accent-ink); }

/* ---------- the promise band ----------
   Research is blunt that an explicit no-work-without-approval policy answers
   the biggest objection a driver has. It gets its own band, not a footnote. */
.promise { background: var(--c-ink); color: var(--c-on-dark); }
.promise .wrap { padding-block: var(--sp-8); }
@media (min-width: 48rem) { .promise .wrap { padding-block: var(--sp-9); } }
.promise h2 { color: var(--c-white); font-size: var(--fs-4); max-width: 24ch; }
.promise .rule { background: var(--c-accent-lt); }
.promise-grid { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }
@media (min-width: 48rem) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .promise-grid { grid-template-columns: repeat(4, 1fr); } }
.promise-item { border-top: 2px solid var(--c-line-dk); padding-top: var(--sp-4); }
.promise-item b { display: block; font-family: var(--font-display); font-weight: var(--fw-black);
  text-transform: uppercase; font-size: var(--fs-3); color: var(--c-accent-lt); letter-spacing: var(--ls-tight); }
.promise-item p { margin-top: var(--sp-2); font-size: var(--fs-2); color: var(--c-on-dark-soft); }

/* a short banner for the urgent pages: one line, one phone number */
.urgent { background: var(--c-accent); color: var(--c-on-accent); }
.urgent .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-5); }
.urgent p { font-family: var(--font-display); font-weight: var(--fw-black); text-transform: uppercase;
  font-size: var(--fs-3); letter-spacing: var(--ls-tight); max-width: 40ch; }
.urgent .btn { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
.urgent .btn:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }

/* a plain prose column for the pages that genuinely need to explain something */
.prose { max-width: 44rem; }
.prose h3 { margin-top: var(--sp-7); font-size: var(--fs-4); line-height: var(--lh-snug); }
.prose p { margin-top: var(--sp-4); }
.prose ul { margin: var(--sp-4) 0 0; padding-left: var(--sp-5); }
.prose li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--c-accent); }

/* Grid children default to min-width:auto, so a text column refuses to shrink
   below its content and pushes the page sideways on a 360px phone. */
.split > *, .head-split > *, .faq-layout > *, .reviews-layout > *,
.case > *, .page-hero .wrap > *, .close-cta .wrap > * { min-width: 0; }
.prose { min-width: 0; }