/* ==========================================================================
   Dunmarrow Mobile Mechanic. 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: "Familjen Grotesk";
  src: url("../assets/fonts/familjen.woff2") format("woff2");
  font-weight: 600 700;
  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: 42% 38%;   /* truck body up, dead asphalt out of the bottom band */
  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); } }
/* at two columns an odd last step sits centred under the others instead of alone on the left */
@media (min-width: 40rem) and (max-width: 63.99rem) { .steps > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--sp-5)) / 2); } }
@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; } }


/* ---------- rate us (review funnel) ---------- */
.rate { max-width: 36rem; margin: var(--sp-7) auto 0; text-align: center; }
.rate__stars { display: flex; justify-content: center; gap: var(--sp-2); }
.rate__star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; padding: 0; cursor: pointer;
  border: 2px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-white); color: var(--c-line);
  transition: transform var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rate__star svg { width: 2rem; height: 2rem; fill: currentColor; }
.rate__star.is-lit { color: var(--c-star); border-color: var(--c-star); }
.rate__star:hover { transform: translateY(-2px); }
.rate__star:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.rate__hint { margin-top: var(--sp-3); font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--c-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.rate__panel {
  margin-top: var(--sp-6); padding: var(--sp-6); text-align: left;
  background: var(--c-white); border: 1px solid var(--c-line); border-top: var(--rule) solid var(--c-accent);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.rate__panel[hidden] { display: none; }
.rate__panel h3 { font-size: var(--fs-4); line-height: var(--lh-snug); }
.rate__panel > p { margin-top: var(--sp-2); }
.rate__panel > .field, .rate__panel > .btn, .rate__panel .form { margin-top: var(--sp-4); }
.rate__issues { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; border: 0; }
.rate__issues legend { width: 100%; margin-bottom: var(--sp-2); font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--c-ink); }
.rate__chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-paper);
  font-size: var(--fs-2); color: var(--c-ink); cursor: pointer;
}
.rate__chip input { accent-color: var(--c-accent); }
.rate__chip:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-tint); color: var(--c-accent-dk); }
.rate__note { margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--c-muted); }
@media (max-width: 23.9375rem) { .rate__star { width: 3rem; height: 3rem; } }
@media (prefers-reduced-motion: reduce) { .rate__star { transition: none; } .rate__star:hover { transform: none; } }

/* even line lengths: no word left alone on a heading's last line, no stub under a centred intro */
h1, h2, h3, .section-head--center p { text-wrap: balance; }