/* Mobile Repair 1
   Palette is the Ink and ember direction with the accent replaced by the blue
   sampled off the owner's own decal artwork. Every value below clears WCAG AA
   against the surface it is used on. Checked, not assumed. */

:root {
  --ground: #0B0E13;
  --panel: #151B24;
  --panel-2: #1D2531;
  --line: #2A3442;

  --ink: #EDF2F8;
  --ink-2: #9FAEC0;

  --brand: #4E9BE0;
  --brand-rgb: 78, 155, 224;
  --brand-ink: #1F5E96;

  --amber: #F5A623;
  --amber-rgb: 245, 166, 35;
  --on-amber: #131313;

  --shell: min(1180px, 100% - 2rem);
  --r: 14px;

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", var(--sans);
}

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

/* R1. The UA sheet gives figure and blockquote margin 1em 40px, which makes any
   semantic card 80px narrower than its own grid track. */
figure, blockquote, dl, dd, h1, h2, h3, h4, p, ul, ol { margin: 0; }

/* R2. The hidden attribute only carries display none from the UA sheet, so any
   display rule on the element beats it. */
[hidden] { display: none !important; }

/* R3. Without height auto, a width and height attribute pair renders as a
   literal pixel size and distorts the photo. */
img { max-width: 100%; height: auto; display: block; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3, h4 { line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

a { color: var(--brand); }
main p a, main li a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.shell { width: var(--shell); margin-inline: auto; }
.stack > * + * { margin-top: 1rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--amber); color: var(--on-amber);
  padding: .75rem 1.1rem; font-weight: 800; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ── header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(11, 14, 19, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .shell {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px; padding-block: .55rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand img { width: 46px; height: 46px; border-radius: 9px; }
.brand b { font-family: var(--cond); font-size: 1.5rem; letter-spacing: .01em; text-transform: uppercase; display: block; line-height: 1; }
.brand span { display: block; font-size: .72rem; color: var(--ink-2); letter-spacing: .09em; text-transform: uppercase; }

/* R8. flex-shrink 0 so a future link overflows in plain sight rather than
   silently overlapping the logo. */
.nav { display: flex; gap: .15rem; margin-left: auto; flex-shrink: 0; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-weight: 650; font-size: .93rem;
  padding: .5rem .7rem; border-radius: 8px;
}
.nav a:hover { color: var(--ink); background: var(--panel-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--panel-2); }

.header-cta { display: flex; gap: .5rem; flex-shrink: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-weight: 800; font-size: .95rem; text-decoration: none;
  padding: .72rem 1.15rem; border-radius: 11px; border: 1px solid transparent;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
/* R5. Restate the foreground on the button, after the region rules, because
   .nav a { color } is 0,1,1 and beats .btn--call at 0,1,0. */
.btn--call, .nav a.btn--call, .site-header a.btn--call {
  background: var(--amber); color: var(--on-amber);
}
.btn--call:hover { background: #ffb63f; }
.btn--ghost, .nav a.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--solid, .nav a.btn--solid { background: var(--brand-ink); color: #FFFFFF; }
.btn--solid:hover { background: #276fae; }
.btn--lg { padding: .95rem 1.5rem; font-size: 1.05rem; }

.nav-toggle { display: none; }

/* R7. Tiers cover every width with no gap. */
@media (max-width: 1040px) {
  .nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    padding: .5rem 1rem 1rem; max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav[data-open="false"] { display: none; }
  .nav a { padding: .8rem .6rem; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1rem; }
  .nav-toggle {
    display: inline-flex; margin-left: auto; background: transparent;
    border: 1px solid var(--line); color: var(--ink); border-radius: 10px;
    padding: .55rem .8rem; font: inherit; font-weight: 700; cursor: pointer;
  }
  /* the call bar below takes this over */
  .header-cta { display: none; }
}
@media (max-width: 560px) {
  .brand span span { display: none; }
}

/* The fixed call bar.
   D8 asks for a call bar under about 1040px that hides while the header CTA
   row is on screen. This header is sticky, so its call button never leaves the
   viewport and a bar conditioned on that would never appear once. So the rule
   is inverted rather than faked: under 1040px the header drops its call button
   and the bar carries it instead, permanently, at thumb reach. One call action,
   in the right place, with no script deciding whether it exists. */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 210;
  display: none; gap: .6rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(11, 14, 19, .96); border-top: 1px solid var(--line);
}
.callbar .btn { flex: 1; }
@media (max-width: 1040px) {
  .callbar { display: flex; }
  /* clear the bar so it never covers the last line of the footer */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero { position: relative; padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(var(--brand-rgb), .20), transparent 70%),
    radial-gradient(700px 380px at 92% 8%, rgba(var(--amber-rgb), .10), transparent 70%);
}
.hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1.05fr .95fr; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.eyebrow {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
  font-size: .95rem; font-weight: 600; color: var(--brand);
}
.lede { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--ink-2); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hero-shot { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.hero-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.trustline {
  display: flex; flex-wrap: wrap; gap: .5rem .55rem; padding-top: .35rem;
}
.trustline span {
  font-size: .85rem; font-weight: 650; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .32rem .75rem;
  background: var(--panel);
}

/* ── sections and cards ───────────────────────────────────────────────── */

section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
section.tight { padding-block: clamp(1.8rem, 4vw, 3rem); }
.band { background: var(--panel); border-block: 1px solid var(--line); }

.section-head { max-width: 62ch; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.section-head p { color: var(--ink-2); margin-top: .6rem; }

.grid { display: grid; gap: 1rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.3rem;
}
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--ink-2); font-size: .97rem; }
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--brand); background: var(--panel-2); }
a.card .more { color: var(--brand); font-weight: 750; font-size: .92rem; display: inline-block; margin-top: .7rem; }

.card--price { display: flex; flex-direction: column; gap: .3rem; }
.price { font-family: var(--cond); font-size: 3rem; line-height: 1; color: var(--amber); }
.price small { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); font-weight: 600; }

/* the bite, the snack and the meal */
.bite {
  border-left: 4px solid var(--brand); background: var(--panel);
  padding: 1.05rem 1.25rem; border-radius: 0 var(--r) var(--r) 0;
  font-size: 1.08rem;
}
.snack { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem 1.35rem; }
.snack h2, .snack h3 {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .95rem; color: var(--ink-2); font-weight: 600; margin-bottom: .7rem;
}
.snack ul { margin: 0; padding-left: 1.1rem; }
.snack li { margin-block: .4rem; }
.snack li::marker { color: var(--brand); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0; }
.kv dt { color: var(--ink-2); font-size: .9rem; }
.kv dd { margin: 0; font-weight: 650; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.05rem; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-block: .35rem; }
.prose li::marker { color: var(--brand); }

.quote {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.3rem;
}
.quote p { font-size: 1rem; }
.quote footer { margin-top: .8rem; color: var(--ink-2); font-size: .88rem; font-weight: 650; }
.stars { color: var(--amber); letter-spacing: .12em; font-size: .95rem; }

/* photos */
.shots { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.shot { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.shot.wide img { aspect-ratio: 4 / 3; }
.shot figcaption { padding: .65rem .85rem; font-size: .85rem; color: var(--ink-2); }

.split { display: grid; gap: clamp(1.4rem, 4vw, 2.8rem); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* area list */
.towns { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.towns li {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: .38rem .85rem; font-size: .92rem; font-weight: 650;
}

/* ── form ─────────────────────────────────────────────────────────────── */

.form { display: grid; gap: .9rem; max-width: 560px; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 700; font-size: .93rem; }
.field .hint { color: var(--ink-2); font-size: .84rem; font-weight: 400; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: .75rem .85rem; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); }
.field textarea { min-height: 120px; resize: vertical; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: #FF8A7A; }
.err { color: #FF9B8C; font-size: .86rem; font-weight: 650; }
.hp { position: absolute; left: -9999px; }

/* ── faq ──────────────────────────────────────────────────────────────── */

.faq { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 1.05rem 1.25rem; font-weight: 750; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 1.25rem 1.15rem; color: var(--ink-2); }
.faq .answer > * + * { margin-top: .8rem; }

/* ── blog ─────────────────────────────────────────────────────────────── */

.post-lead {
  display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: 1.15fr .85fr;
  align-items: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.2rem, 3vw, 2rem); text-decoration: none; color: inherit;
}
.post-lead:hover { border-color: var(--brand); }
.post-lead img { border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (max-width: 800px) { .post-lead { grid-template-columns: 1fr; } }
.meta { color: var(--ink-2); font-size: .86rem; }
.byline { color: var(--ink-2); font-size: .92rem; }

/* ── footer ───────────────────────────────────────────────────────────── */

.site-footer { background: var(--panel); border-top: 1px solid var(--line); padding: clamp(2rem, 5vw, 3rem) 0 2rem; }
.foot-grid { display: grid; gap: 1.6rem; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em;
  font-size: .9rem; color: var(--ink-2); font-weight: 600; margin-bottom: .6rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-block: .38rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.colophon {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; justify-content: space-between;
}

/* ── the demo chip ────────────────────────────────────────────────────── */
/* D10. A fixed corner chip, never a block in the flow. A block at the top of
   body means the first impression is a site that loads under the fold. */
.demo-chip {
  position: fixed; right: 12px; bottom: 12px; z-index: 300;
  background: var(--amber); color: var(--on-amber);
  font-size: .76rem; font-weight: 800; letter-spacing: .04em;
  padding: .4rem .7rem; border-radius: 999px; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
@media (max-width: 1040px) { .demo-chip { bottom: 76px; } }

/* R11 partner. Reveal is opt in from script, so no JS means everything is
   visible rather than a blank page to a crawler or a screenshot. */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }

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

/* R4. A deliberate full bleed needs max-width none, because the global
   max-width 100% clamps calc(100% + Npx) back to the content box. */
.bleed { max-width: none; }
.grid, .shots { content-visibility: auto; contain-intrinsic-size: auto 400px; }

/* ── Signature features (2026-10-06) ─────────────────────────────────── */
/* Picked from the signature-features skill. This site: exclusive FAQ
   accordion that animates to auto height, anchor positioned popover tips on
   the pricing page, sibling-index staggers on the reveals, and the everywhere
   hygiene. Neighbors in the mobile mechanic trade use other sets. */

/* The FAQ. details[name] makes it exclusive with no script. interpolate-size
   lets Chrome animate to auto; everyone else opens instantly, which is fine. */
:root { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .28s ease, content-visibility .28s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq summary::after { transition: rotate .2s ease; display: inline-block; }
.faq details[open] summary::after { content: "+"; rotate: 45deg; }

/* Pricing tips. A term that opens a note anchored above itself. */
.tip-btn {
  all: unset; cursor: pointer; color: var(--brand);
  text-decoration: underline dotted; text-underline-offset: .18em; text-decoration-thickness: 1.5px;
}
.tip-btn:hover { color: var(--ink); }
.tip-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.tip {
  position-area: top; position-try-fallbacks: flip-block, flip-inline;
  margin: 0 0 .5rem; inset: auto;
  width: max-content; max-width: min(30ch, calc(100vw - 2rem));
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: var(--ink); font-size: .92rem; line-height: 1.45;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .7);
  opacity: 0; translate: 0 6px;
  transition: opacity .18s ease, translate .18s ease, display .18s allow-discrete, overlay .18s allow-discrete;
}
.tip:popover-open { opacity: 1; translate: 0; }
@starting-style { .tip:popover-open { opacity: 0; translate: 0 6px; } }
/* No popover support at all: the term stays a plain word and the note is gone,
   never an inline paragraph that reads as a stray sentence. */
@supports not selector(:popover-open) {
  .tip { display: none; }
  .tip-btn { color: inherit; text-decoration: none; cursor: text; }
}

/* Reveals come in one after another instead of as a block. */
@supports (transition-delay: calc(sibling-index() * 1ms)) {
  .js .reveal { transition-delay: calc((sibling-index() - 1) * 70ms); }
}

/* Everywhere hygiene. */
textarea { field-sizing: content; min-block-size: 3lh; max-block-size: 12lh; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.btn, .price { text-box: trim-both cap alphabetic; }
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content, .tip { transition: none; }
  .js .reveal { transition-delay: 0s; }
}

/* ── MechanicRank credential ──────────────────────────────────────────── */
.mr-chip {
  display: inline-flex; align-items: center; gap: .85rem; max-width: 100%;
  padding: .45rem 1.1rem .45rem .6rem; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  text-decoration: none; line-height: 1.3; align-self: flex-start;
}
.mr-chip:hover { border-color: var(--amber); }
.mr-chip picture { display: block; flex: none; width: 60px; }
.mr-chip img { display: block; width: 60px; max-width: none; height: auto; }
.mr-chip b { display: block; font-family: var(--cond); font-weight: 700; font-size: 1.2rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.mr-chip small { display: block; font-size: .92rem; color: var(--ink-2); }
.mr-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  padding: 1.3rem 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.mr-card picture { display: block; flex: none; width: 150px; max-width: 100%; }
.mr-card img { display: block; width: 100%; height: auto; }
.mr-card > div { flex: 1 1 260px; min-width: 0; }
.mr-card h3 { margin: 0 0 .4rem; }
.mr-card p { margin: 0 0 .6rem; }
.mr-card ul { margin: 0 0 .8rem 1.1rem; padding: 0; }
.mr-card a { font-weight: 650; color: var(--amber); }