/**
 * JPRO Limo — front-end styles
 * Organised as: tokens, base, layout primitives, header, hero, sections,
 * cards, fleet carousel, forms, blog, footer, responsive.
 * Class hooks are shared with the block patterns and the connector plugin.
 */

/* ------------------------------------------------------------------ *\
   1. Design tokens
\* ------------------------------------------------------------------ */
:root {
  --ink: #0b0b0c;
  --ink-soft: #17181a;
  --paper: #ffffff;
  --tint: #f4f4f5;
  --line: #e6e6e8;
  --line-dark: rgba(255, 255, 255, 0.14);
  --muted: #6b6f76;
  --muted-on-dark: #a9adb4;
  --focus: #4279ab;

  --gutter: 7%;
  --section-y: clamp(3.5rem, 6vw, 6rem);
  --radius-card: 6px;
  --radius-pill: 999px;
  --maxw: 1320px;

  --eyebrow: 0.6875rem;
}

/* ------------------------------------------------------------------ *\
   2. Base
\* ------------------------------------------------------------------ */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  max-width: 100%;
  height: auto;
}
a,
button,
input,
select,
textarea {
  touch-action: manipulation;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.wp-site-blocks > * {
  margin-block-start: 0;
}

/* Upright typography everywhere, including emphasised copy. */
.wp-site-blocks,
.wp-site-blocks p,
.wp-site-blocks a,
.wp-site-blocks li,
.wp-site-blocks em,
.wp-site-blocks i,
.wp-site-blocks cite,
.wp-site-blocks blockquote,
.wp-site-blocks .wp-block-heading {
  font-style: normal;
}

/* ------------------------------------------------------------------ *\
   3. Layout primitives
\* ------------------------------------------------------------------ */
.jpro-section {
  padding: var(--section-y) var(--gutter);
  width: 100%;
}
.jpro-tint {
  background: var(--tint);
}
.jpro-centered {
  text-align: center;
}
.jpro-centered .jpro-eyebrow,
.jpro-centered .wp-block-buttons,
.jpro-centered .jpro-filter-buttons {
  justify-content: center;
}

/* Vertical rhythm — works for direct children AND content nested in columns. */
.jpro-section > *,
.jpro-section .wp-block-column > *,
.jpro-card-copy > *,
.jpro-hero-copy > *,
.jpro-cta-copy > *,
.jpro-prose > * {
  margin-block: 0;
}
.jpro-section > * + *,
.jpro-section .wp-block-column > * + *,
.jpro-card-copy > * + *,
.jpro-prose > * + * {
  margin-block-start: 1.15rem;
}
.jpro-eyebrow + *,
:where(h1, h2, h3) + p,
:where(h1, h2, h3) + .jpro-prose {
  margin-block-start: 0.85rem !important;
}
p + :where(h2, h3),
.jpro-prose + :where(h2, h3) {
  margin-block-start: 1.6rem !important;
}
.jpro-section > .wp-block-buttons,
.jpro-card-copy > .wp-block-buttons {
  margin-block-start: 1.6rem;
}

.jpro-eyebrow {
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.jpro-hero .jpro-eyebrow,
.jpro-cta .jpro-eyebrow {
  color: var(--muted-on-dark);
}

/* Section head: heading on the left, supporting copy on the right. */
.jpro-section-heading {
  align-items: flex-start;
  gap: clamp(1.5rem, 5vw, 5rem) !important;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.jpro-section-heading .wp-block-column:first-child {
  flex-basis: 58% !important;
  flex-grow: 0;
}
.jpro-section-heading p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Two-column media / copy split flush to the page edge. */
.jpro-split {
  gap: 0 !important;
  margin: 0 !important;
  align-items: stretch;
}
.jpro-split > .wp-block-column {
  margin: 0;
}
.jpro-split .jpro-photo,
.jpro-split .jpro-photo-window {
  height: 100%;
  min-height: 320px;
}
.jpro-split .jpro-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
}
.jpro-split h2 {
  max-width: 16ch;
  text-wrap: balance;
}
.jpro-split-reverse {
  flex-direction: row-reverse;
}
.jpro-split + .jpro-split {
  border-top: 1px solid var(--line);
}

/* Arrow link used inside cards and section footers. */
.jpro-card-copy .wp-block-button__link,
.jpro-arrow .wp-block-button__link,
.wp-block-button.is-style-link .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.jpro-card-copy .wp-block-button__link span,
.jpro-arrow .wp-block-button__link span {
  transition: transform 0.2s ease;
}
.jpro-card-copy .wp-block-button__link:hover span,
.jpro-arrow .wp-block-button__link:hover span {
  transform: translateX(4px);
}

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.jpro-light .wp-block-button__link {
  background: var(--paper);
  color: var(--ink);
}
.jpro-light .wp-block-button__link:hover {
  background: #e9e9ea;
}

/* ------------------------------------------------------------------ *\
   4. Header
\* ------------------------------------------------------------------ */
.jpro-header {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  padding: 1.25rem var(--gutter);
  min-height: 84px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.jpro-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  line-height: 0;
}
.jpro-brand .wp-block-site-logo img {
  width: auto;
  max-width: 210px;
  max-height: 52px;
  object-fit: contain;
}
.jpro-brand:has(.wp-block-site-logo img) .wp-block-site-title {
  display: none;
}
.jpro-brand .wp-block-site-title {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.jpro-header .wp-block-navigation {
  margin-left: auto;
  margin-right: clamp(0.75rem, 2vw, 1.75rem);
  font-size: 0.875rem;
  font-weight: 500;
}
.jpro-header .wp-block-navigation__container {
  gap: clamp(1rem, 2vw, 1.9rem);
}
/* "Book Now" lives in the mobile menu sheet only; the header already has its own button. */
.jpro-header .wp-block-navigation-item.jpro-nav-cta {
  display: none;
}
.jpro-header nav[aria-label] {
  flex-shrink: 0;
}
.jpro-header .wp-block-navigation-item__content {
  padding: 0.25rem 0;
  border-bottom: 1.5px solid transparent;
}
.jpro-header
  .wp-block-navigation-item.current-menu-item
  .wp-block-navigation-item__content,
.jpro-header .wp-block-navigation-item__content:hover {
  border-bottom-color: currentColor;
}

/* Native-feeling mobile menu: full-screen dark sheet, large targets, safe areas.
   Scoped entirely to the mobile breakpoint so core's own desktop behaviour
   (hamburger hidden above 600px) is left alone. */
@media (max-width: 768px) {
  .jpro-header .wp-block-navigation__responsive-container-open {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: inherit;
    transition: background-color 0.15s ease;
  }
  .jpro-header .wp-block-navigation__responsive-container-open:hover {
    background: rgba(11, 11, 12, 0.06);
  }
  /* Core ships several high-specificity defaults for this exact state
     (".wp-block-navigation:not(.has-background) …is-menu-open{background:#fff}"
     and the matching color:#000 rule) — !important is the deliberate, narrow
     way to fully re-skin the overlay rather than chase its specificity. */
  .jpro-header .wp-block-navigation__responsive-container.is-menu-open {
    inset: 0 !important;
    background: var(--ink) !important;
    color: var(--paper) !important;
  }
  .jpro-header .wp-block-navigation__responsive-dialog {
    height: 100dvh;
    padding: max(1.5rem, env(safe-area-inset-top)) var(--gutter)
      max(1.5rem, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .jpro-header .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: max(1.1rem, env(safe-area-inset-top));
    right: 7%;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--paper) !important;
  }
  .jpro-header .wp-block-navigation__responsive-container-close:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .jpro-header .wp-block-navigation__responsive-container-content {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding-top: 4.5rem !important;
  }
  .jpro-header .wp-block-navigation__container {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .jpro-header .wp-block-navigation-item {
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent !important;
  }
  .jpro-header .wp-block-navigation-item:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .jpro-header .wp-block-navigation-item__content {
    width: 100% !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    gap: 1rem;
    padding: 1.15rem 0.25rem !important;
    border-bottom: 0;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--paper) !important;
  }
  .jpro-header .wp-block-navigation-item__content::after {
    content: "→";
    opacity: 0.4;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
  .jpro-header .wp-block-navigation-item__content:active::after {
    transform: translateX(3px);
  }
  .jpro-header
    .wp-block-navigation-item.current-menu-item
    .wp-block-navigation-item__content {
    color: var(--muted-on-dark) !important;
  }
  /* "Book Now" added as a nav item (className jpro-nav-cta) becomes the sheet's primary action. */
  .jpro-header .wp-block-navigation-item.jpro-nav-cta {
    display: block;
    border-top: 0;
    margin-top: 1.75rem;
  }
  .jpro-header
    .wp-block-navigation-item.jpro-nav-cta
    .wp-block-navigation-item__content {
    justify-content: center !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    border-radius: var(--radius-pill);
    padding: 1rem !important;
    font-size: 1rem;
    font-weight: 700;
  }
  .jpro-header
    .wp-block-navigation-item.jpro-nav-cta
    .wp-block-navigation-item__content::after {
    opacity: 1;
  }
}
.jpro-languages,
.jpro-lang-switch {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.jpro-languages a,
.jpro-lang-switch a {
  color: var(--muted);
}
.jpro-languages .current-lang a,
.jpro-languages a:hover,
.jpro-lang-switch a:hover,
.jpro-lang-switch a.is-active {
  color: var(--ink);
}
.jpro-lang-switch .jpro-lang-sep {
  color: var(--line);
}
.jpro-header .wp-block-buttons {
  flex-shrink: 0;
  margin: 0;
}
.jpro-header .wp-block-button__link {
  padding: 0.7rem 1.15rem;
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------------ *\
   5. Hero
\* ------------------------------------------------------------------ */
.jpro-hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  align-items: center;
  min-height: clamp(440px, 44vw, 600px);
}
.jpro-hero-photo {
  position: absolute !important;
  inset: 0 0 0 auto;
  width: 56%;
  height: 100%;
  margin: 0;
}
.jpro-hero-photo .jpro-photo-window,
.jpro-hero-photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* "Show the full image" toggle: letterbox instead of cropping. */
.jpro-hero-photo.jpro-photo-fit-contain {
  background: var(--ink);
}
.jpro-hero-photo.jpro-photo-fit-contain img {
  object-fit: contain;
}
/* "Darken with a shadow overlay" toggle: shades the photo itself, on top of
   (not instead of) the text-legibility gradient below. */
.jpro-photo-has-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
}
.jpro-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink) 34%, rgba(11, 11, 12, 0) 66%);
  pointer-events: none;
}
/* "Full-width background" toggle: the photo spans the whole banner instead
   of a side panel, so the side-fade above is swapped for an even wash that
   works with text sitting anywhere over the image (paired, on the photo
   block itself, with its own "shadow overlay" toggle for extra contrast). */
.jpro-hero-photo.jpro-photo-full-bleed {
  width: 100% !important;
  inset: 0 !important;
}
.jpro-hero:has(.jpro-hero-photo.jpro-photo-full-bleed)::after {
  background: linear-gradient(
    180deg,
    rgba(4, 4, 5, 0.55) 0%,
    rgba(4, 4, 5, 0.25) 35%,
    rgba(4, 4, 5, 0.75) 100%
  );
}
.jpro-hero-light:has(.jpro-hero-photo.jpro-photo-full-bleed)::after {
  background: linear-gradient(
    180deg,
    rgba(4, 4, 5, 0.35) 0%,
    rgba(4, 4, 5, 0.1) 35%,
    rgba(4, 4, 5, 0.55) 100%
  );
}
.jpro-hero:has(.jpro-hero-photo.jpro-photo-full-bleed) .jpro-hero-copy,
.jpro-hero:has(.jpro-hero-photo.jpro-photo-full-bleed) .jpro-hero-note {
  color: var(--paper) !important;
}
.jpro-hero:has(.jpro-hero-photo.jpro-photo-full-bleed) .jpro-hero-copy > p:not(.jpro-eyebrow) {
  color: #e7e8ea !important;
}
.jpro-hero-copy {
  position: relative;
  z-index: 1;
  width: min(94%, 34rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem) var(--gutter);
}
.jpro-hero-copy h1 {
  margin: 0;
  text-wrap: balance;
}
.jpro-hero-copy > .jpro-eyebrow + h1 {
  margin-top: 1rem;
}
.jpro-hero-copy > p:not(.jpro-eyebrow) {
  margin-top: 1.3rem;
  max-width: 26rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #e7e8ea;
}
.jpro-hero-copy .wp-block-buttons {
  margin-top: 2rem;
}
.jpro-hero-note {
  margin-top: 1.1rem !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.05em;
  color: var(--muted-on-dark) !important;
  text-transform: uppercase;
}

/* Light hero (Services). */
.jpro-hero-light {
  background: var(--tint);
  color: var(--ink);
}
.jpro-hero-light::after {
  background: linear-gradient(
    90deg,
    var(--tint) 32%,
    rgba(244, 244, 245, 0) 64%
  );
}
.jpro-hero-light .jpro-hero-copy > p:not(.jpro-eyebrow) {
  color: var(--muted);
}
.jpro-hero-light .jpro-hero-note {
  color: var(--muted) !important;
}

/* ------------------------------------------------------------------ *\
   6. Floating quote card (Home / Services)
\* ------------------------------------------------------------------ */
.jpro-quote {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin: -4rem auto 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px -30px rgba(11, 11, 12, 0.25);
}
.jpro-quote.jpro-tint {
  background: var(--paper);
}
.jpro-quote-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.jpro-quote-head h2 {
  font-size: 1.75rem;
  margin: 0.5rem 0 0;
}
.jpro-quote-note {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0;
}
.jpro-quote .jpro-booking {
  margin-top: 1.5rem;
}

/* Compact booking form laid out as a row. */
.jpro-booking-handoff {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.75rem 1rem;
  align-items: end;
}
.jpro-booking-handoff label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.jpro-booking-handoff input {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.8rem 0.85rem;
  background: var(--paper);
  color: var(--ink);
}
.jpro-booking-handoff button {
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 3px;
  padding: 0.85rem 1.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  height: fit-content;
}
.jpro-booking > p {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
}
.jpro-booking > p a {
  color: var(--muted);
}

/* ------------------------------------------------------------------ *\
   7. Cards & grids
\* ------------------------------------------------------------------ */
.jpro-section .wp-block-columns {
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: stretch;
}
.jpro-section .wp-block-columns:not(:last-child) {
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}

.jpro-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper);
  height: 100%;
}
.jpro-card .jpro-photo {
  margin: 0;
  /* !important: a standard card size regardless of the real uploaded
     photo's own dimensions (the block's per-photo ratio is a design
     control, not something a card grid should visually inherit). */
  aspect-ratio: 3 / 2 !important;
}
.jpro-card-copy {
  padding: 1.15rem 1.15rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.jpro-card-copy h3 {
  margin: 0;
}
.jpro-card-copy p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.jpro-card-copy p:empty {
  display: none;
}
.jpro-card-copy .wp-block-buttons {
  margin-top: auto;
  padding-top: 1rem;
}

/* Home services cards use a slightly portrait image. */
.jpro-home-services .jpro-card .jpro-photo {
  aspect-ratio: 4 / 3 !important;
}

/* Our Fleet grid: tinted card body + "View details". Image ratio is a CSS
   variable so it can be changed from wp-admin (JPRO Website screen) without
   touching every photo block; --fleet-photo-ratio falls back to 16/10. */
.jpro-fleet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.jpro-fleet-item[hidden] {
  display: none;
}
.jpro-fleet-grid .jpro-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--tint);
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.04);
}
.jpro-fleet-grid .jpro-card .jpro-photo {
  aspect-ratio: var(--fleet-photo-ratio, 16 / 10) !important;
}
.jpro-fleet-grid .jpro-card-copy {
  padding: 1.15rem 1.25rem 1.35rem;
}
.jpro-fleet-grid .jpro-card-copy p {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ *\
   7b. "Why FF Group" panel (Home)
\* ------------------------------------------------------------------ */
.jpro-why-lead {
  max-width: 56ch;
  color: var(--muted);
  font-size: 1.05rem;
}
.jpro-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  align-items: stretch;
}
.jpro-why-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.jpro-why-card h3 {
  margin: 0;
  font-size: 1.05rem;
}
.jpro-why-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.jpro-why-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--ink);
}
.jpro-why-icon svg {
  width: 20px;
  height: 20px;
}
.jpro-why-tint {
  background: var(--tint);
}
.jpro-why-dark {
  background: var(--ink);
  border-color: var(--ink);
}
.jpro-why-dark h3 {
  color: var(--paper);
}
.jpro-why-dark p {
  color: var(--muted-on-dark);
}
.jpro-why-dark .jpro-why-icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--paper);
}
.jpro-why-wide {
  grid-column: span 2;
}
/* The background photo is set directly on this card via the block's own
   "Styles > Background image" panel (native WordPress). */
.jpro-why-photo {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 280px;
  justify-content: flex-end;
  background-color: var(--tint);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.jpro-why-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.75) 100%
  );
  pointer-events: none;
}
.jpro-why-photo-copy {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  margin-top: auto;
}
.jpro-why-photo-copy h3,
.jpro-why-photo-copy p {
  color: var(--paper);
}
.jpro-why-photo-copy .jpro-eyebrow {
  color: rgba(255, 255, 255, 0.8);
}

/* Filter pills. */
.jpro-filter-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}
.jpro-filter-buttons button {
  border: 1px solid var(--line);
  padding: 0.6rem 1.15rem;
  background: var(--paper);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.jpro-filter-buttons button:hover {
  color: var(--ink);
}
.jpro-filter-buttons button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ------------------------------------------------------------------ *\
   8. Fleet carousel (Home)
\* ------------------------------------------------------------------ */
.jpro-home-fleet .jpro-fleet-headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.jpro-home-fleet .jpro-fleet-headrow > div:first-child > * {
  margin: 0;
}
.jpro-home-fleet .jpro-fleet-headrow .jpro-eyebrow {
  margin-bottom: 0.6rem;
}
.jpro-fleet-viewall .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.jpro-carousel {
  position: relative;
}
.jpro-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 30vw, 360px);
  gap: clamp(1rem, 2.4vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.jpro-carousel-track::-webkit-scrollbar {
  display: none;
}
.jpro-carousel-slide {
  scroll-snap-align: start;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(17, 17, 19, 0.04);
  overflow: hidden;
  padding-bottom: 1.1rem;
}
.jpro-carousel-slide .jpro-photo {
  margin: 0 0 1rem;
  /* Same admin-editable ratio as the Our Fleet grid, so vehicles look
     consistent whether seen on Home or on the Our Fleet page. */
  aspect-ratio: var(--fleet-photo-ratio, 16 / 10) !important;
}
.jpro-carousel-slide .jpro-photo-regular {
  background: var(--tint);
}
.jpro-carousel-slide .jpro-photo-regular img {
  /* Fill the frame completely (no gray letterbox bars around a photo whose
     shape doesn't exactly match the card). */
  object-fit: cover;
}
/* In the block editor, lay slides out in a normal wrapping row instead of
   the front end's horizontal-scroll track — every slide's "Select Photo"
   is reachable without fighting a tiny scrollable strip. Front-end look is
   unaffected: this only applies inside the editor's own iframe. */
.editor-styles-wrapper .jpro-carousel-track {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
}
.editor-styles-wrapper .jpro-carousel-slide {
  flex: 1 1 240px;
  max-width: 320px;
}
.jpro-carousel-slide h3,
.jpro-carousel-slide p,
.jpro-carousel-slide .jpro-vehicle-stats,
.jpro-carousel-slide .wp-block-buttons {
  padding-inline: 1.1rem;
}
.jpro-carousel-slide h3 {
  margin: 0 0 0.3rem;
}
.jpro-carousel-slide p {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.jpro-carousel-slide .wp-block-buttons {
  margin-top: 0.9rem !important;
  justify-content: center;
}
.jpro-vehicle-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem !important;
  font-size: 0.8125rem;
  color: var(--muted);
}
.jpro-vehicle-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.jpro-vehicle-stats span::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.jpro-stat-seats::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 17V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v11'/><path d='M6 12h7'/><path d='M4 17h13a2 2 0 0 1 2 2v2H6a2 2 0 0 1-2-2v-2Z'/><path d='M17 13l3 1.2a2 2 0 0 1 1 1.8V17'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 17V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v11'/><path d='M6 12h7'/><path d='M4 17h13a2 2 0 0 1 2 2v2H6a2 2 0 0 1-2-2v-2Z'/><path d='M17 13l3 1.2a2 2 0 0 1 1 1.8V17'/></svg>");
}
.jpro-stat-bags::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='7' width='16' height='13' rx='2'/><path d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/><path d='M4 12h16'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='7' width='16' height='13' rx='2'/><path d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/><path d='M4 12h16'/></svg>");
}
.jpro-fleet-grid .jpro-vehicle-stats {
  justify-content: flex-start;
  padding-inline: 0;
}
.jpro-carousel-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.jpro-carousel-nav button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
}
.jpro-carousel-nav button:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.jpro-carousel-nav button[disabled] {
  opacity: 0.35;
  cursor: default;
}
.jpro-carousel-nav button:hover[disabled] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

/* ------------------------------------------------------------------ *\
   9. "Travel together" panel (Our Fleet)
\* ------------------------------------------------------------------ */
.jpro-panel {
  align-items: stretch !important;
  gap: 0 !important;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0 !important;
  background: var(--tint);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.jpro-panel > .wp-block-column {
  margin: 0;
}
.jpro-panel .jpro-photo,
.jpro-panel .jpro-photo-window {
  height: 100%;
  min-height: 260px;
}
.jpro-panel .jpro-panel-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(2rem, 4vw, 3rem);
}
.jpro-panel .jpro-panel-copy h2 {
  margin: 0;
}
.jpro-panel .jpro-panel-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.jpro-panel .jpro-panel-copy .wp-block-buttons {
  margin-top: 1rem;
}

/* ------------------------------------------------------------------ *\
   10. About — values & reasons
\* ------------------------------------------------------------------ */
.jpro-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.jpro-value {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.jpro-value:not(:first-child) {
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
  border-left: 1px solid var(--line);
}
.jpro-value-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.jpro-tint .jpro-value-icon {
  background: var(--paper);
}
.jpro-value-icon svg {
  width: 20px;
  height: 20px;
}
.jpro-value h3 {
  margin: 0.25rem 0 0;
}
.jpro-value p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.jpro-reasons {
  display: grid;
  gap: 0;
}
.jpro-reason {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}
.jpro-reason:last-child {
  border-bottom: 1px solid var(--line);
}
.jpro-reason svg {
  width: 24px;
  height: 24px;
  margin-top: 0.15rem;
  color: var(--ink);
}
.jpro-reason h3 {
  margin: 0 0 0.3rem;
}
.jpro-reason p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ *\
   11. CTA band
\* ------------------------------------------------------------------ */
/* The background photo is set directly on this card via the block's own
   "Styles > Background image" panel (native WordPress, no separate photo
   block needed) — background-size/position are set by that panel too;
   these are just sane defaults for when they aren't. */
.jpro-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-soft);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--paper);
  min-height: 280px;
  display: grid;
  align-items: center;
}
.jpro-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 11, 12, 0.85),
    rgba(11, 11, 12, 0.35)
  );
}
.jpro-cta-copy {
  position: relative;
  z-index: 1;
  padding: clamp(2.75rem, 5vw, 4rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  width: 100%;
}
.jpro-cta-text {
  flex: 1 1 26rem;
}
.jpro-cta-text > * {
  margin: 0;
}
.jpro-cta-copy .jpro-eyebrow + h2 {
  margin-top: 0.75rem;
}
.jpro-cta-copy h2 {
  max-width: 22ch;
  text-wrap: balance;
  color: var(--paper);
}
.jpro-cta-copy h2 + p {
  margin-top: 0.85rem;
  color: var(--muted-on-dark);
}
.jpro-cta-copy .wp-block-buttons {
  margin: 0;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ *\
   12. Blog
\* ------------------------------------------------------------------ */
.jpro-blog-head {
  max-width: 52rem;
}
.jpro-blog-head h1 {
  margin: 0.75rem 0 0;
}
.wp-block-search {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0 !important;
}
.wp-block-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.35rem 0.35rem 1.1rem;
  background: var(--paper);
}
.wp-block-search input.wp-block-search__input {
  border: 0;
  background: transparent;
  min-height: 40px;
  padding: 0;
  font-size: 0.95rem;
}
.wp-block-search input.wp-block-search__input:focus-visible {
  outline: 0;
}
.wp-block-search button.wp-block-search__button {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.4rem;
  font-weight: 600;
  font-size: 0.8125rem;
}

.jpro-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
}
.jpro-blog-filters a {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}
.jpro-blog-filters a[aria-current="true"],
.jpro-blog-filters a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.jpro-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.jpro-featured .jpro-photo,
.jpro-featured .jpro-photo-window {
  height: 100%;
  min-height: 300px;
}
.jpro-featured-copy {
  background: var(--tint);
  padding: clamp(2rem, 4vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.jpro-featured-copy h2 {
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
}
.jpro-featured-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.jpro-explore {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.jpro-explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.jpro-explore-grid .jpro-card {
  border: 0;
}
.jpro-explore-grid .jpro-card .jpro-photo {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.jpro-explore-grid .jpro-card-copy {
  padding: 1rem 0 0;
}

/* Native post query fallback (when the editor keeps wp:query). */
.wp-block-post-template {
  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}
.wp-block-post-template > li {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding-bottom: 1.25rem;
  list-style: none;
}
.wp-block-post-template .wp-block-post-title,
.wp-block-post-template .wp-block-post-excerpt {
  padding: 0 1.25rem;
}
.wp-block-post-title {
  margin: 1rem 0 0.5rem;
}
.wp-block-query-pagination {
  display: flex;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* Help / FAQ. */
.wp-block-details {
  border-bottom: 1px solid var(--line);
  padding: 1.35rem 0;
}
.wp-block-details summary {
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
}

/* ------------------------------------------------------------------ *\
   13. Legal pages
\* ------------------------------------------------------------------ */
.jpro-legal-page {
  width: min(100% - 3rem, 820px);
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.jpro-legal-page h1 {
  margin: 0 0 2rem;
}
.jpro-legal-page h2 {
  font-size: 1.4rem;
  margin: 2.25rem 0 0.75rem;
}
.jpro-legal-page p {
  color: var(--muted);
  line-height: 1.8;
}

/* ------------------------------------------------------------------ *\
   14. Footer
\* ------------------------------------------------------------------ */
.jpro-footer {
  background: var(--ink);
  color: var(--paper);
}
.jpro-footer-top {
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter) clamp(2rem, 3vw, 2.5rem);
}
.jpro-footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin: 0 !important;
}
.jpro-footer-grid > .wp-block-column {
  margin: 0;
  min-width: 0;
}
.jpro-footer .wp-block-site-logo img {
  width: 175px;
  max-height: 52px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.jpro-footer .wp-block-site-logo:has(img) + .wp-block-site-title {
  display: none;
}
.jpro-footer-grid p:first-of-type {
  margin-top: 1rem;
}
.jpro-footer-grid h3 {
  margin: 0 0 1.1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.jpro-footer-grid p {
  margin: 0 0 0.7rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #d4d6d9;
  overflow-wrap: anywhere;
}
.jpro-footer-grid a {
  color: #d4d6d9;
}
.jpro-footer-grid a:hover {
  color: var(--paper);
}
.jpro-footer .jpro-contact p {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.jpro-footer .jpro-contact p::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  opacity: 0.7;
}
.jpro-footer .jpro-contact p:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.7 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.74a2 2 0 0 1 2.11-.45c.74.34 1.53.57 2.34.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.81.36 1.6.7 2.34a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.74-1.74a2 2 0 0 1 2.11-.45c.74.34 1.53.57 2.34.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.jpro-footer .jpro-contact p:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E");
}
.jpro-footer .jpro-contact p:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}
.jpro-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin: 0 var(--gutter);
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-dark);
}
.jpro-footer-bottom p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted-on-dark);
}
.jpro-footer-bottom a {
  color: var(--muted-on-dark);
}
.jpro-footer-bottom a:hover {
  color: var(--paper);
}

/* ------------------------------------------------------------------ *\
   15. Editable photo block
\* ------------------------------------------------------------------ */
.jpro-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  width: 100%;
  background: var(--tint);
}
.jpro-photo-window {
  position: relative;
  width: 100%;
  height: 100%;
}
.jpro-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jpro-photo-empty {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    -45deg,
    var(--tint),
    var(--tint) 12px,
    #eeeef0 12px,
    #eeeef0 24px
  );
  color: var(--muted);
}
.jpro-photo-empty span {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 3px;
}
.jpro-hero-photo.jpro-photo-empty,
.jpro-cta-photo.jpro-photo-empty {
  background: #16171a;
  color: var(--muted-on-dark);
}
.jpro-hero-photo.jpro-photo-empty span,
.jpro-cta-photo.jpro-photo-empty span {
  background: rgba(255, 255, 255, 0.08);
}
.jpro-hero-light .jpro-hero-photo.jpro-photo-empty {
  background: repeating-linear-gradient(
    -45deg,
    #ededf0,
    #ededf0 12px,
    #e4e4e8 12px,
    #e4e4e8 24px
  );
  color: var(--muted);
}
.jpro-hero-light .jpro-hero-photo.jpro-photo-empty span {
  background: rgba(255, 255, 255, 0.8);
}

/* WhatsApp floating button (connector). */
.jpro-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
}

/* ------------------------------------------------------------------ *\
   15b. Mobile bottom tab bar — native-app-style primary navigation.
\* ------------------------------------------------------------------ */
.jpro-tabbar {
  display: none;
}
@media (max-width: 768px) {
  .jpro-tabbar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(11, 11, 12, 0.07);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .jpro-tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 8px 2px 7px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .jpro-tabbar-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
  }
  .jpro-tabbar-icon svg {
    width: 22px;
    height: 22px;
  }
  .jpro-tabbar-item.is-active {
    color: var(--ink);
  }
  .jpro-tabbar-item.is-active .jpro-tabbar-icon svg {
    transform: scale(1.05);
  }
  /* Center "Book" action: raised, filled, app-style primary button. */
  .jpro-tabbar-cta {
    color: var(--ink);
  }
  .jpro-tabbar-cta .jpro-tabbar-icon {
    width: 46px;
    height: 46px;
    margin-top: -22px;
    border-radius: 999px;
    background: var(--ink);
    box-shadow: 0 6px 14px rgba(11, 11, 12, 0.32);
  }
  .jpro-tabbar-cta .jpro-tabbar-icon svg {
    width: 21px;
    height: 21px;
    color: var(--paper);
  }
  .jpro-tabbar-cta .jpro-tabbar-label {
    color: var(--ink);
  }
  /* Reserve room so the fixed bar never covers the last section, and lift
     the WhatsApp button clear of it. */
  .wp-site-blocks {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .jpro-whatsapp {
    bottom: calc(64px + env(safe-area-inset-bottom) + 14px) !important;
    right: 16px !important;
  }
  /* App-style card elevation: a soft shadow reads more like a native card
     than a thin border alone. */
  .jpro-card,
  .jpro-featured,
  .jpro-panel,
  .jpro-quote {
    border-color: transparent;
    box-shadow: 0 2px 14px rgba(11, 11, 12, 0.08);
  }
}

/* ------------------------------------------------------------------ *\
   16. Responsive
\* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .jpro-section .wp-block-columns {
    flex-wrap: wrap;
  }
  .jpro-section-heading .wp-block-column:first-child {
    flex-basis: 100% !important;
  }
  .jpro-home-services .wp-block-columns .wp-block-column {
    flex-basis: calc(50% - 1rem) !important;
  }
  .jpro-fleet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .jpro-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .jpro-featured {
    grid-template-columns: 1fr;
  }
  .jpro-explore-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .jpro-header {
    gap: 0.75rem;
    min-height: 72px;
    padding: 0.9rem var(--gutter);
  }
  .jpro-header .wp-block-navigation {
    margin: 0;
  }
  .jpro-header .jpro-languages {
    display: none;
  }
  .jpro-header .jpro-lang-switch {
    margin-left: auto;
  }
  /* Book Now stays reachable from the hero and the mobile menu. */
  .jpro-header .wp-block-buttons {
    display: none;
  }
  .jpro-quote {
    margin-top: 1.75rem;
  }
  .jpro-hero {
    min-height: 0;
    display: block;
  }
  .jpro-hero-photo {
    position: relative !important;
    width: 100%;
    height: 260px;
  }
  .jpro-hero::after {
    display: none;
  }
  .jpro-hero-copy {
    width: 100%;
    padding: clamp(2rem, 8vw, 3rem) var(--gutter);
    background: var(--ink);
  }
  .jpro-hero-light .jpro-hero-copy {
    background: var(--tint);
  }
  .jpro-booking-handoff {
    grid-template-columns: 1fr;
  }
  .jpro-booking-handoff button {
    width: 100%;
  }
  .jpro-split {
    flex-direction: column;
  }
  .jpro-split .jpro-photo,
  .jpro-split .jpro-photo-window {
    min-height: 240px;
  }
  .jpro-values {
    grid-template-columns: 1fr;
  }
  .jpro-value:not(:first-child) {
    padding-left: 0;
    border-left: 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
  }
  .jpro-cta-copy {
    grid-template-columns: 1fr;
  }
  .jpro-panel {
    display: flex;
    flex-direction: column;
  }
  .jpro-panel .jpro-photo,
  .jpro-panel .jpro-photo-window {
    min-height: 220px;
  }
  .jpro-explore-grid {
    grid-template-columns: 1fr;
  }
  .jpro-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .jpro-footer-grid > .wp-block-column:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .jpro-home-services .wp-block-columns .wp-block-column {
    flex-basis: 100% !important;
  }
  .jpro-fleet-grid {
    grid-template-columns: 1fr;
  }
  .jpro-why-grid {
    grid-template-columns: 1fr;
  }
  .jpro-why-wide {
    grid-column: span 1;
  }
  .jpro-carousel-track {
    grid-auto-columns: 78%;
  }
  .jpro-footer-grid {
    grid-template-columns: 1fr;
  }
  .jpro-footer-bottom {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .jpro-carousel-track {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ *\
   16. Blog article (single post)
\* ------------------------------------------------------------------ */
.jpro-article {
  padding-block: clamp(2rem, 4vw, 3.5rem);
  padding-inline: var(--gutter);
}
/* Same width as every other section on the site (.jpro-section's
   padding: var(--gutter) treatment) — head, photo, body and nav all line
   up at that width instead of a narrower reading column adrift on a wide
   page. */
.jpro-article-head,
.jpro-article-photo,
.jpro-article-body,
.jpro-article-nav {
  width: 100%;
}
.jpro-article-head {
  text-align: center;
}
.jpro-article-head .wp-block-buttons {
  justify-content: center;
  margin-bottom: 1.25rem;
}
.jpro-article-head .jpro-eyebrow {
  margin-bottom: 0.75rem;
}
.jpro-article-head h1 {
  text-wrap: balance;
}
.jpro-article-date {
  display: block;
  margin-top: 1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-transform: uppercase;
}
.jpro-article-photo {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.jpro-article-photo img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}
.jpro-article-body {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.jpro-article-body :where(p, ul, ol, blockquote) {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
}
.jpro-article-body > * + * {
  margin-top: 1.4rem;
}
.jpro-article-body h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
}
.jpro-article-body h3 {
  margin-top: 2rem;
  font-size: 1.2rem;
}
.jpro-article-body ul,
.jpro-article-body ol {
  padding-left: 1.4rem;
}
.jpro-article-body li + li {
  margin-top: 0.5rem;
}
.jpro-article-body img {
  border-radius: var(--radius-card);
  height: auto;
}
.jpro-article-body blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--ink);
  font-style: italic;
  color: var(--muted);
}
.jpro-article-body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jpro-article-nav {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}
.jpro-article-nav a {
  color: var(--ink);
  font-weight: 600;
}
.jpro-article-nav:not(:has(a)) {
  display: none;
}