:root {
  color-scheme: light;

  --brand-primary:    #002A91;   /* white on it 12.07:1 */
  --brand-accent:     #E00014;   /* 5.02:1 on bg, white on it 5.02:1 */
  --brand-neutral:    #1A1A1A;
  --brand-bg:         #FFFFFF;
  --brand-on-primary: #ffffff;

  --brand-accent-raw: #FF0013;   /* 3.99:1 - non-text only */

  --color-primary:       var(--brand-primary);
  --color-primary-hover: color-mix(in oklch, var(--brand-primary) 85%, black);
  --color-accent:        var(--brand-accent);

  --color-accent-text: #E00014;                /* 5.02:1 on bg, 4.61:1 on bg-alt */
  --color-accent-text-hover: #B80010;          /* white on it 6.90:1 */

  --focus-ring:        #E00014;                /* 5.02:1 on bg */

  --color-text:       var(--brand-neutral);    /* 17.40:1 on bg */
  --color-text-muted: #595959;                 /* verified 7.00:1 on bg, 6.37:1 on bg-alt */
  --color-bg:         var(--brand-bg);
  --color-bg-alt:     #f4f4f4;

  --color-border:        #d4d4d4;
  --color-border-strong: #767676;              /* form controls - 4.54:1 on bg */

  --font-sans:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Oswald", "Arial Narrow", Impact, var(--font-sans);

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem;
  --sp-12: 3rem;  --sp-16: 4rem;  --sp-20: 5rem;
  --content-max: 72rem;
  --reading-max: 42rem;
  --radius-sm: 4px;
  --radius-md: 6px;

  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); }
h3 { font-size: 1.25rem; }

p { max-width: var(--reading-max); }
a { color: var(--color-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.prose a, p a { text-decoration: underline; text-underline-offset: 3px; }

.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-5); }
.eyebrow { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-text); }
.lead { font-size: 1.125rem; color: var(--color-text-muted); }
.section-title { margin-bottom: var(--sp-6); }
section { padding-block: var(--sp-16); }

.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.site-header__inner {
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--color-text); font-weight: 700; }
.brand__name { font-family: var(--font-display); }

.nav-desktop { display: flex; align-items: center; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; }
.nav-desktop a { color: var(--color-text); font-weight: 500; }
.nav-desktop a[aria-current="page"] { color: var(--color-accent-text); }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer;
}
@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-toggle  { display: inline-flex; }
}

.nav-mobile {
  padding: var(--sp-16) var(--sp-6) var(--sp-6);
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  color: var(--color-text);
}
.nav-mobile__close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.nav-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.nav-mobile a { display: block; padding: var(--sp-3) var(--sp-4); color: var(--color-text); font-weight: 500; }
.nav-mobile a[aria-current="page"] { color: var(--color-accent-text); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--color-accent-text); color: var(--brand-on-primary); }
.btn-primary:hover { background: var(--color-accent-text-hover); }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-bg-alt); }
.btn-lg { padding: var(--sp-4) var(--sp-8); }

@media (max-width: 400px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}

.hero { padding-block: var(--sp-20); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__highlight { color: var(--color-accent-text); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-6); }
.card { padding: var(--sp-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.card__icon { color: var(--color-accent); margin-bottom: var(--sp-3); }   /* non-text: 3:1 is fine */

.cta-band { padding-block: var(--sp-16); background: var(--color-bg-alt); }

.breadcrumbs { font-size: .875rem; color: var(--color-text-muted); padding-block: var(--sp-4); }

.form { display: grid; gap: var(--sp-4); max-width: 40rem; }
.form-row { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form label { font-weight: 600; }
.form input, .form textarea, .form select {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--color-border);   /* a UI boundary: owes 3:1 (1.4.11) */
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--color-primary); }
.form textarea { min-height: 9rem; resize: vertical; }
.form-help { font-size: .875rem; color: var(--color-text-muted); }
.form-status { font-weight: 600; }
.hp { position: absolute; left: -10000px; opacity: 0; pointer-events: none; }

.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--sp-12); background: var(--color-bg-alt); }
.site-footer__grid {
  max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-5);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-8);
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer h2 {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-text-muted); margin-bottom: var(--sp-4); font-weight: 600;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer a { color: var(--color-text); }
.site-footer__tagline, .site-footer__address { color: var(--color-text-muted); margin-top: var(--sp-3); }
.spark-mark { display: inline-block; width: 2.2em; height: 2.2em; margin-left: 0.15em; vertical-align: middle; }
.site-footer__bottom {
  max-width: var(--content-max); margin: var(--sp-8) auto 0; padding: var(--sp-6) var(--sp-5) 0;
  border-top: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: .875rem; color: var(--color-text-muted);
}

.site-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }

.site-footer__social { flex-direction: row; gap: var(--sp-3); margin-top: var(--sp-5); }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.site-footer__social svg { width: 18px; height: 18px; }

.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-text); color: var(--color-bg);
  border-top: 2px solid var(--color-accent);
}
.consent-banner[hidden] { display: none; }
.consent-banner__text { max-width: 60ch; font-size: .9rem; margin: 0; }
.consent-banner__text a { color: inherit; text-decoration: underline; }
.consent-banner__actions { display: flex; gap: var(--sp-3); }

.consent-banner .btn-ghost {
  color: var(--color-bg);
  border-color: var(--color-bg);
  background: transparent;
}
.consent-banner .btn-ghost:hover { background: rgba(255,255,255,.12); }
.consent-banner .btn-primary {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-bg);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  box-shadow: 0 0 0 var(--focus-ring-offset, 2px) #ffffff;
}

input,
textarea,
select {
  border: 1px solid var(--color-border-strong);
}

.jps-rule {
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--brand-accent-raw);
  margin: 0 0 var(--sp-5);
}
.jps-rule--center { margin-left: auto; margin-right: auto; }

.jps-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8125rem;
  color: var(--color-accent-text);
  margin: 0 0 var(--sp-3);
}

.jps-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: clamp(var(--sp-16), 10vw, 7rem) 0 calc(clamp(var(--sp-12), 8vw, 5.5rem) + var(--sp-12));
  background: var(--brand-primary);
  overflow: hidden;
}
.jps-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jps-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    rgba(0, 20, 70, .93) 0%,
    rgba(0, 42, 145, .86) 46%,
    rgba(0, 42, 145, .58) 100%);
}
.jps-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  margin: 0 0 var(--sp-5);
  max-width: 18ch;
}
.jps-hero .lead {
  color: rgba(255, 255, 255, .92);
  max-width: 54ch;
  margin: 0 0 var(--sp-8);
}
.jps-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}
.jps-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-bottom: 3px solid var(--brand-accent-raw);
  padding-bottom: 2px;
}
.jps-hero__phone:hover { border-bottom-color: #fff; }
.jps-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8125rem;
  color: #fff;
  margin: 0 0 var(--sp-4);
  opacity: .95;
}

/* Proof strip: a white card that overlaps the bottom of the hero, not a second
   navy slab stacked under a navy-tinted photo. Left-aligned to the container
   so it lines up with the hero copy above it. */
.jps-proof {
  position: relative;
  z-index: 2;
  padding: 0;
  margin-top: calc(-1 * var(--sp-12));
}
.jps-proof__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border-top: 4px solid var(--brand-accent-raw);
  box-shadow: 0 14px 36px rgba(0, 20, 70, .16);
}
.jps-proof__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-8);
}
.jps-proof__item + .jps-proof__item { border-left: 1px solid var(--color-border); }
.jps-proof__icon {
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--brand-accent-raw);   /* non-text: 3:1 is fine */
}
.jps-proof__icon svg { width: 100%; height: 100%; }
.jps-proof__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jps-proof__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--brand-primary);
  text-decoration: none;
}
a.jps-proof__num:hover { text-decoration: underline; text-underline-offset: 4px; }
.jps-proof__label {
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
@media (max-width: 960px) {
  .jps-proof__item { padding: var(--sp-5); }
}
@media (max-width: 760px) {
  .jps-proof { margin-top: calc(-1 * var(--sp-8)); }
  .jps-proof__grid { grid-template-columns: 1fr; }
  .jps-proof__item { padding: var(--sp-4) var(--sp-5); align-items: center; }
  .jps-proof__item + .jps-proof__item { border-left: 0; border-top: 1px solid var(--color-border); }
  .jps-proof__icon { width: 32px; height: 32px; }
  .jps-proof__num { font-size: 1.25rem; }
}

.jps-grid { display: grid; gap: var(--sp-6); }
.jps-grid--2 { grid-template-columns: repeat(2, 1fr); }
.jps-grid--3 { grid-template-columns: repeat(3, 1fr); }
.jps-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .jps-grid--3, .jps-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .jps-grid--2, .jps-grid--3, .jps-grid--4 { grid-template-columns: 1fr; }
}

.jps-svc {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.jps-svc:hover {
  transform: translateY(-3px);
  border-color: var(--brand-primary);
  box-shadow: 0 10px 28px rgba(0, 42, 145, .12);
}
.jps-svc__icon {
  width: 44px;
  height: 44px;
  color: var(--brand-accent-raw);
}
.jps-svc__icon svg { width: 100%; height: 100%; }
.jps-svc h3 { margin: 0; font-size: 1.1875rem; }
.jps-svc p { margin: 0; color: var(--color-text-muted); }
.jps-svc a { margin-top: auto; font-weight: 600; }

.jps-steps { counter-reset: jpsstep; display: grid; gap: var(--sp-6); }
.jps-steps--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .jps-steps--3 { grid-template-columns: 1fr; } }
.jps-step { display: flex; align-items: flex-start; gap: var(--sp-5); }
.jps-step__num {
  counter-increment: jpsstep;
  flex: none;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
}
.jps-step__num::before { content: counter(jpsstep); }
.jps-step__body { min-width: 0; }
.jps-step h3 { margin: .25rem 0 var(--sp-2); font-size: 1.125rem; }
.jps-step p { margin: 0; color: var(--color-text-muted); }

.jps-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-8), 5vw, var(--sp-16));
  align-items: center;
}
@media (max-width: 900px) { .jps-split { grid-template-columns: 1fr; } }
.jps-split--flip .jps-split__media { order: 2; }
@media (max-width: 900px) { .jps-split--flip .jps-split__media { order: 0; } }

.jps-figure { margin: 0; }
.jps-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  display: block;
}
.jps-figure figcaption {
  margin-top: var(--sp-3);
  font-size: .875rem;
  color: var(--color-text-muted);
}
.jps-figure--tall img { aspect-ratio: 3 / 4; object-fit: cover; }
.jps-figure--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
/* Two photos side by side in one split column: the riser going in, then finished. */
.jps-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.jps-pair .jps-figure img { aspect-ratio: 3 / 4; object-fit: cover; }

.jps-member { text-align: center; }
.jps-member img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: var(--sp-4);
}
.jps-member__name { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.jps-member__role { color: var(--color-text-muted); font-size: .9375rem; }

.jps-area {
  border-left: 4px solid var(--brand-accent-raw);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
}
.jps-area h3 { margin: 0 0 var(--sp-2); font-size: 1.1875rem; }
.jps-area p { margin: 0; color: var(--color-text-muted); }

.jps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.jps-list li { position: relative; padding-left: 1.85rem; }
.jps-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--brand-accent-raw);
}

.jps-faq { display: grid; gap: var(--sp-3); max-width: 52rem; }
.jps-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  overflow: hidden;
}
.jps-faq__item[open] { border-color: var(--brand-primary); }
.jps-faq__q {
  cursor: pointer;
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}
.jps-faq__q::-webkit-details-marker { display: none; }
.jps-faq__q::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--color-accent-text);
  border-bottom: 3px solid var(--color-accent-text);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-out);
}
.jps-faq__item[open] .jps-faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.jps-faq__a { padding: 0 var(--sp-6) var(--sp-5); color: var(--color-text-muted); margin: 0; }

.jps-band {
  background: var(--brand-primary);
  color: #fff;
  padding: clamp(var(--sp-12), 8vw, var(--sp-20)) 0;
}
.jps-band h2 { color: #fff; }
.jps-band p { color: rgba(255, 255, 255, .9); }
.jps-band .btn-primary {
  background: #fff;
  color: var(--brand-primary);
  border-color: #fff;
}
.jps-band .btn-primary:hover { background: rgba(255, 255, 255, .88); }
.jps-band__inner { text-align: center; max-width: 46rem; margin-inline: auto; }

.jps-muted { background: var(--color-bg-alt); }
.jps-section { padding: clamp(var(--sp-12), 8vw, var(--sp-20)) 0; }

.jps-callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  background: var(--color-accent-text);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .22);
}
.jps-callbar__btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
}
.jps-callbar__btn:hover,
.jps-callbar__btn:focus-visible { background: var(--color-accent-text-hover); color: #fff; }
.jps-callbar__btn--text { flex: 0 0 38%; border-left: 1px solid rgba(255, 255, 255, .35); }
@media (max-width: 760px) {
  .jps-callbar { display: flex; }
  body { padding-bottom: 4.25rem; }
}

.js .jps-reveal {
  transform: translateY(14px);
  transition: transform .55s var(--ease-out);
}
.jps-reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .jps-reveal { opacity: 1; transform: none; transition: none; }
}

.brand__mark img { display: block; height: 56px; width: auto; }  /* text wordmark, truck removed 2026-09-30 */
.brand__name { font-size: 1.0625rem; letter-spacing: .01em; color: var(--brand-primary); }

.nav-desktop ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.nav-desktop li { position: relative; }
.nav-desktop a {
  display: inline-block;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: .01em;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-desktop a:hover { background: var(--color-bg-alt); color: var(--brand-primary); }
.nav-desktop a[aria-current="page"] { color: var(--brand-primary); }
.nav-desktop a.cta {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  margin-left: var(--sp-3);
}
.nav-desktop a.cta:hover { background: var(--color-primary-hover); color: var(--brand-on-primary); }

.has-dropdown > a::after {
  content: "";
  display: inline-block;
  margin-left: .45em;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 232px;
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: 50;
}
/* `.nav-desktop ul` is a flex row and out-ranks `.dropdown`, which laid the menu out sideways. */
.nav-desktop .dropdown { display: block; }
.dropdown li { display: block; }
.dropdown a { display: block; white-space: nowrap; }
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.nav-mobile .dropdown {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: 0;
  padding: 0 0 0 var(--sp-4);
  min-width: 0;
  background: transparent;
}
.nav-mobile a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.nav-mobile a:hover { background: var(--color-bg-alt); color: var(--brand-primary); }
.nav-mobile .has-dropdown > a::after { display: none; }

.jps-band a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .6);
  text-underline-offset: 3px;
}
.jps-band a:hover { text-decoration-color: #fff; }

.no-js .jps-reveal { transform: none; }

.jps-hero .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .75);
  background: transparent;
}
.jps-hero .btn-ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
  color: #fff;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before {
  content: "/";
  color: var(--color-border-strong);
}
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-primary); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 600; }

.nav-desktop a.cta { background: var(--color-accent-text); }
.nav-desktop a.cta:hover { background: var(--color-accent-text-hover); }

/* ============================================================================
   Design proof 2026-09-21
   base.css resets every margin to 0, and nothing in this theme put vertical
   rhythm back, so every heading sat directly on its paragraph and every button
   sat on the text above it. One flow rule, scoped to the text containers.
   ============================================================================ */
.section-title > * + *,
.jps-split__body > * + *,
.jps-band__inner > * + *,
.prose > * + * { margin-top: var(--sp-4); }

.section-title > .jps-rule + *,
.jps-split__body > .jps-rule + * { margin-top: 0; }

.section-title h2 + p,
.jps-split__body h2 + p,
.jps-band__inner h2 + p { margin-top: var(--sp-4); }

.section-title p { color: var(--color-text-muted); font-size: 1.0625rem; }
.jps-split__body > .jps-list { margin-top: var(--sp-6); }

/* A paragraph that only holds buttons is a button row, not a paragraph. */
.section-title > p:has(> .btn),
.jps-split__body > p:has(> .btn),
.jps-band__inner > p:has(> .btn),
.jps-actions { margin-top: var(--sp-8); }
.jps-actions,
.section-title > p:has(> .btn),
.jps-split__body > p:has(> .btn),
.jps-band__inner > p:has(> .btn) {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
}
.jps-band__inner > p:has(> .btn) { justify-content: center; }

.prose h2 { margin-top: var(--sp-10); }
.prose h3 { margin-top: var(--sp-8); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-3); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--sp-2); }

/* Ghost buttons on light grounds: the decorative border (1.48:1) made them look
   disabled next to the red primary. Navy outline instead. Hero and consent
   banner keep their own overrides. */
.btn-ghost {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: transparent;
}
.btn-ghost:hover { background: var(--brand-primary); color: #fff; }

/* Section heading block keeps a steady gap to the grid below it. */
.section-title { margin-bottom: var(--sp-10); }
.section-title:last-child { margin-bottom: 0; }

/* Footer: Jay's truck mark, not the template's placeholder "L". */
.site-footer .brand__mark img { height: 56px; width: auto; }
.site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-5); } }
.site-footer__address { font-style: normal; line-height: 1.7; }
.site-footer__tagline { margin-top: var(--sp-4); }
.site-footer__bottom {
  align-items: center;
  width: calc(100% - 2 * var(--sp-5));
  max-width: calc(var(--content-max) - 2 * var(--sp-5));
  padding-inline: 0;
}
.spark-mark { width: 1.6em; height: 1.6em; vertical-align: -.45em; }
.spark-nowrap { white-space: nowrap; }

/* The sticky call bar reserved its space with body padding, which showed as a
   white strip under the grey footer. Reserve it inside the footer instead. */
@media (max-width: 760px) {
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(var(--sp-12) + 4.25rem); }
}

/* Services hub: 10 services in a 3-up grid left the last one alone on row four.
   Two columns with the icon beside the text fills five even rows. */
#all-services .jps-grid--3 { grid-template-columns: repeat(2, 1fr); }
#all-services .jps-svc {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: var(--sp-5);
  row-gap: var(--sp-2);
  align-content: start;
}
#all-services .jps-svc__icon { grid-row: span 2; }
@media (max-width: 620px) { #all-services .jps-grid--3 { grid-template-columns: 1fr; } }

/* Inner page headers sat 130px below the breadcrumbs. */
#intro.jps-section { padding-top: var(--sp-8); padding-bottom: clamp(var(--sp-10), 5vw, var(--sp-16)); }

/* "p a" underlines inline links, and was underlining buttons that sit in a <p>. */
.btn, p a.btn, .prose a.btn { text-decoration: none; }

/* Repair gallery mixed 3:4 and 4:3 photos, so rows and captions did not line up.
   One ratio for the set. 4:5 keeps both lids in the one landscape shot. */
#work .jps-figure img { aspect-ratio: 4 / 5; object-fit: cover; }

/* Icons dropped into a .jps-area were inline spans, so their 44px box was
   ignored and the SVG grew to the full column width. */
.jps-svc__icon { display: block; }
.jps-area .jps-svc__icon { width: 36px; height: 36px; margin-bottom: var(--sp-3); }
.jps-area h3 + p { margin-top: 0; }

/* Contact form: TEMPLATE .form-row is a two-up row of FIELDS. Each field is a
   label over its control. */
.form-field { display: grid; gap: var(--sp-2); align-content: start; }
.form-row { gap: var(--sp-4) var(--sp-5); }
.form input, .form textarea, .form select { border-color: var(--color-border-strong); }
.form input, .form select { min-height: 48px; }
.form textarea { min-height: 9rem; }
.form label { font-size: .9375rem; }
#contact-form-section .form { margin-top: var(--sp-6); }

/* 404 uses the TEMPLATE .hero: give it the same rhythm as the rest of the site. */
.hero { padding-block: clamp(var(--sp-16), 10vw, 8rem); }
.hero .eyebrow { font-family: var(--font-display); font-weight: 600; margin-bottom: var(--sp-3); }
.hero h1 + .lead { margin-top: var(--sp-4); }

/* Short pages (404) left white showing under the footer. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }

/* ============================================================================
   Round two, 2026-09-23
   ============================================================================ */

/* Centred bands: `p` is capped at 42rem, so inside a 46rem centred block it sat
   32px left of the heading. The known "bare p flushes left in a centred block".*/
.jps-band__inner p { margin-inline: auto; }

/* FAQ block centred under its heading instead of hanging off the left edge.
   Questions and answers stay left-aligned inside each item. */
#faq .section-title { text-align: center; }
#faq .jps-rule { margin-left: auto; margin-right: auto; }
#faq .section-title p { margin-inline: auto; }
.jps-faq { margin-inline: auto; }

/* Closing CTA: copy left, buttons right on one line. */
.jps-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6) var(--sp-10); }
.jps-cta-row__text { flex: 1 1 22rem; }
.jps-cta-row__text > * + * { margin-top: var(--sp-4); }
.jps-cta-row__text > .jps-rule + * { margin-top: 0; }
.jps-cta-row .jps-actions { margin-top: 0; flex: 0 0 auto; }
@media (max-width: 760px) {
  .jps-cta-row { display: block; }
  .jps-cta-row .jps-actions { margin-top: var(--sp-8); }
}

/* Service areas and contact details: the red left bar read as an unfinished
   list. Same card language as the service cards instead. */
.jps-area {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.jps-area h3 { position: relative; padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); }
.jps-area h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-accent-raw);   /* non-text: 3:1 is fine */
}
.jps-area:hover { transform: translateY(-3px); border-color: var(--brand-primary); box-shadow: 0 10px 28px rgba(0, 42, 145, .12); }
.jps-area .jps-svc__icon { margin-bottom: var(--sp-4); }

/* Service area: the eight "farther out" towns are name-only cards. Keep them two-up on
   phones instead of a 1,300px single column. */
@media (max-width: 620px) {
  #farther-out .jps-grid--4 { grid-template-columns: repeat(2, 1fr); }
}