/* ==========================================================================
   I Buy Rhode Island Houses — shared stylesheet  v1 · Oct 9 2026
   - Every rule is scoped under .jbj. Components are two levels deep
     (.jbj .jbj-x) so the wrapper's element rules never override them.
   - No IDs, no @import, no external assets. Fonts load sitewide:
     "Public Sans" 400/600/700 and "Bitter" 600/700/800.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
.jbj {
  /* Brand */
  --jbj-blue: #166dab;          /* client brand blue: links, focus, accents on light */
  --jbj-blue-700: #115a8e;
  --jbj-blue-50: #eaf2f9;       /* "Selling to us" column tint */
  --jbj-navy: #0d4267;          /* dark sections */
  --jbj-navy-800: #0b3657;      /* cards on navy */
  --jbj-navy-900: #072540;      /* top bar, footer, photo overlays */
  /* Accent: "Hope" gold, from the anchor on the state flag. Buttons only. */
  --jbj-gold: #f0b23e;
  --jbj-gold-600: #dc9a1f;
  --jbj-gold-ink: #072540;      /* text on gold */
  /* Neutrals: weathered cedar shingle, sand, white clapboard */
  --jbj-ink: #1b2732;
  --jbj-ink-2: #47515b;
  --jbj-cedar: #8a7a68;
  --jbj-shingle: #a39b8f;
  --jbj-field: #7c7366;         /* form field borders (4.5:1 on white) */
  --jbj-line: #ddd3c3;
  --jbj-sand-2: #e9e1d3;
  --jbj-sand: #f4efe6;
  --jbj-clapboard: #fbfaf7;
  --jbj-white: #ffffff;
  --jbj-on-dark: #ffffff;
  --jbj-on-dark-2: #cbd8e4;

  /* Context (overridden inside dark sections) */
  --jbj-heading: var(--jbj-navy);
  --jbj-muted: var(--jbj-ink-2);
  --jbj-link: var(--jbj-blue);
  --jbj-link-hover: var(--jbj-blue-700);
  --jbj-focus: var(--jbj-blue);

  /* Type */
  --jbj-font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --jbj-font-display: "Bitter", Georgia, "Times New Roman", serif;
  --jbj-fs-h1: 56px;
  --jbj-fs-h2: 40px;
  --jbj-fs-h3: 22px;
  --jbj-fs-stat: 44px;
  --jbj-fs-lead: 20px;
  --jbj-fs-body: 18px;
  --jbj-fs-small: 16px;
  --jbj-fs-xs: 15px;
  --jbj-lh-body: 1.65;
  --jbj-lh-tight: 1.12;

  /* Space (4px base) */
  --jbj-s1: 4px; --jbj-s2: 8px; --jbj-s3: 12px; --jbj-s4: 16px; --jbj-s5: 24px;
  --jbj-s6: 32px; --jbj-s7: 48px; --jbj-s8: 64px; --jbj-s9: 96px;
  --jbj-section: 96px;
  --jbj-gutter: 32px;
  --jbj-max: 1240px;
  --jbj-max-wide: 1360px;

  /* Radii */
  --jbj-r-sm: 8px;
  --jbj-r: 10px;
  --jbj-r-lg: 14px;
  --jbj-r-pill: 999px;

  /* Shadows */
  --jbj-shadow-sm: 0 1px 2px rgba(7, 37, 64, .06), 0 2px 6px rgba(7, 37, 64, .06);
  --jbj-shadow: 0 2px 4px rgba(7, 37, 64, .06), 0 12px 28px rgba(7, 37, 64, .12);
  --jbj-shadow-lg: 0 4px 10px rgba(3, 20, 36, .18), 0 30px 60px -14px rgba(3, 20, 36, .5);

  /* Texture: cedar shingle courses */
  --jbj-shingle-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36'%3E%3Cg fill='none' stroke='%237a6a58' stroke-opacity='.16'%3E%3Cpath d='M0 17.5h72M0 35.5h72M.5 0v17M27.5 0v17M49.5 0v17M13.5 18v17M38.5 18v17M61.5 18v17'/%3E%3C/g%3E%3C/svg%3E");

  font-family: var(--jbj-font-body);
  font-size: var(--jbj-fs-body);
  line-height: var(--jbj-lh-body);
  color: var(--jbj-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (max-width: 760px) {
  .jbj {
    --jbj-fs-h1: 36px;
    --jbj-fs-h2: 30px;
    --jbj-fs-h3: 20px;
    --jbj-fs-stat: 32px;
    --jbj-fs-lead: 18px;
    --jbj-fs-body: 17px;
    --jbj-section: 60px;
    --jbj-gutter: 20px;
  }
}

/* ---------- 2. Wrapper element rules (one level deep) ---------- */
.jbj, .jbj *, .jbj *::before, .jbj *::after { box-sizing: border-box; }
.jbj [hidden] { display: none !important; }
.jbj h1, .jbj h2, .jbj h3, .jbj h4 {
  margin: 0;
  font-family: var(--jbj-font-display);
  font-weight: 700;
  line-height: var(--jbj-lh-tight);
  letter-spacing: -.01em;
  color: var(--jbj-heading);
  text-wrap: balance;
}
.jbj h1 { font-size: var(--jbj-fs-h1); }
.jbj h2 { font-size: var(--jbj-fs-h2); }
.jbj h3 { font-size: var(--jbj-fs-h3); }
.jbj p { margin: 0 0 1em; text-wrap: pretty; }
.jbj p:where(:last-child) { margin-bottom: 0; }
.jbj ul, .jbj ol { margin: 0 0 1em; padding-left: 1.25em; }
.jbj img { display: block; max-width: 100%; height: auto; }
.jbj figure { margin: 0; }
.jbj blockquote { margin: 0; }
.jbj table { width: 100%; border-collapse: collapse; }
.jbj button, .jbj input, .jbj select, .jbj textarea { font: inherit; color: inherit; }
.jbj a:not([class]) {
  color: var(--jbj-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.jbj a:not([class]):hover { color: var(--jbj-link-hover); text-decoration-thickness: 2px; }
.jbj :focus-visible { outline: 3px solid var(--jbj-focus); outline-offset: 3px; }

/* ---------- 3. Layout ---------- */
.jbj .jbj-wrap { width: 100%; max-width: var(--jbj-max); margin: 0 auto; padding-left: var(--jbj-gutter); padding-right: var(--jbj-gutter); }
.jbj .jbj-wrap--wide { max-width: var(--jbj-max-wide); }
.jbj .jbj-section { padding: var(--jbj-section) 0; background: var(--jbj-white); }
.jbj .jbj-section--sand { background: var(--jbj-sand); }
.jbj .jbj-dark,
.jbj .jbj-section--navy {
  --jbj-heading: var(--jbj-on-dark);
  --jbj-muted: var(--jbj-on-dark-2);
  --jbj-link: var(--jbj-on-dark);
  --jbj-link-hover: var(--jbj-gold);
  --jbj-focus: var(--jbj-gold);
  color: var(--jbj-on-dark);
}
.jbj .jbj-section--navy { background: var(--jbj-navy); }
.jbj .jbj-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jbj .jbj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jbj-s4); margin-top: var(--jbj-s6); }
.jbj .jbj-actions--center { justify-content: center; margin-top: 40px; }
.jbj .jbj-prose { max-width: 62ch; }
.jbj .jbj-prose p { margin-bottom: 1.1em; }

/* Section header */
.jbj .jbj-head { max-width: 780px; margin: 0 0 var(--jbj-s7); }
.jbj .jbj-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.jbj .jbj-head--tight { margin-bottom: var(--jbj-s5); }
.jbj .jbj-head__title::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: var(--jbj-gold);
}
.jbj .jbj-head--center .jbj-head__title::before { margin-left: auto; margin-right: auto; }
.jbj .jbj-head__intro { margin-top: var(--jbj-s4); font-size: var(--jbj-fs-lead); color: var(--jbj-muted); }

/* ---------- 4. Buttons + links ---------- */
.jbj .jbj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: var(--jbj-r-sm);
  font-family: var(--jbj-font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.jbj .jbj-btn svg { flex: none; width: 20px; height: 20px; }
.jbj .jbj-btn--primary { background: var(--jbj-gold); border-color: var(--jbj-gold-600); color: var(--jbj-gold-ink); }
.jbj .jbj-btn--primary:hover { background: var(--jbj-gold-600); color: var(--jbj-gold-ink); }
.jbj .jbj-btn--secondary { background: var(--jbj-white); border-color: var(--jbj-navy); color: var(--jbj-navy); }
.jbj .jbj-btn--secondary:hover { background: var(--jbj-navy); color: var(--jbj-white); }
.jbj .jbj-btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, .85); color: var(--jbj-white); }
.jbj .jbj-btn--on-dark:hover { background: var(--jbj-white); color: var(--jbj-navy); }
.jbj .jbj-btn--lg { min-height: 60px; padding: 14px 30px; font-size: 19px; }
.jbj .jbj-btn--block { width: 100%; }

.jbj .jbj-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--jbj-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .22em;
}
.jbj .jbj-more:hover { color: var(--jbj-link-hover); text-decoration-color: currentColor; }
.jbj .jbj-more svg { flex: none; width: 18px; height: 18px; transition: transform .15s ease; }
.jbj .jbj-more:hover svg { transform: translateX(3px); }

/* ---------- 5. Top bar ---------- */
.jbj .jbj-topbar { background: var(--jbj-navy-900); color: var(--jbj-on-dark-2); font-size: var(--jbj-fs-xs); line-height: 1.35; --jbj-focus: var(--jbj-gold); }
.jbj .jbj-topbar__inner { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
.jbj .jbj-topbar__text { margin: 0; }
.jbj .jbj-topbar__dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--jbj-gold); }
.jbj .jbj-topbar__phone { color: var(--jbj-white); font-weight: 700; text-decoration: none; white-space: nowrap; }
.jbj .jbj-topbar__phone:hover { text-decoration: underline; }

/* ---------- 6. Header ---------- */
.jbj .jbj-header { position: relative; z-index: 50; background: var(--jbj-white); border-bottom: 1px solid var(--jbj-line); }
.jbj .jbj-header__inner { display: flex; align-items: center; gap: 20px; min-height: 84px; }

.jbj .jbj-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--jbj-navy); text-decoration: none; }
.jbj .jbj-brand__mark { flex: none; width: 30px; height: 30px; color: var(--jbj-blue); }
.jbj .jbj-brand__name { font-family: var(--jbj-font-display); font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -.012em; white-space: nowrap; }
.jbj .jbj-brand--light { color: var(--jbj-white); }
.jbj .jbj-brand--light .jbj-brand__mark { color: var(--jbj-gold); }

.jbj .jbj-nav { margin-left: auto; }
.jbj .jbj-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.jbj .jbj-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 11px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--jbj-ink);
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}
.jbj .jbj-nav__link::-webkit-details-marker { display: none; }
.jbj .jbj-nav__link:hover { background: var(--jbj-sand); color: var(--jbj-blue); }
.jbj .jbj-nav__link svg { width: 16px; height: 16px; transition: transform .15s ease; }

.jbj .jbj-drop { position: relative; }
.jbj .jbj-drop[open] > .jbj-nav__link { background: var(--jbj-sand); color: var(--jbj-blue); }
.jbj .jbj-drop[open] > .jbj-nav__link svg { transform: rotate(180deg); }
.jbj .jbj-drop__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 2px 8px;
  margin: 0;
  padding: 12px;
  list-style: none;
  background: var(--jbj-white);
  border: 1px solid var(--jbj-line);
  border-radius: var(--jbj-r);
  box-shadow: var(--jbj-shadow);
}
.jbj .jbj-drop__link { display: block; padding: 9px 12px; border-radius: 6px; font-size: 17px; color: var(--jbj-ink); text-decoration: none; }
.jbj .jbj-drop__link:hover { background: var(--jbj-sand); color: var(--jbj-blue); }

.jbj .jbj-header__phone { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 19px; font-weight: 700; color: var(--jbj-navy); text-decoration: none; white-space: nowrap; }
.jbj .jbj-header__phone svg { width: 20px; height: 20px; color: var(--jbj-blue); }
.jbj .jbj-header__phone:hover { color: var(--jbj-blue); text-decoration: underline; }
.jbj .jbj-header__cta { flex: none; min-height: 48px; padding: 10px 20px; }

/* Collapsed menu (no JS: <details>) */
.jbj .jbj-menu { display: none; }
.jbj .jbj-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--jbj-line);
  border-radius: var(--jbj-r-sm);
  color: var(--jbj-navy);
  list-style: none;
  cursor: pointer;
}
.jbj .jbj-menu__toggle::-webkit-details-marker { display: none; }
.jbj .jbj-menu__toggle svg { width: 24px; height: 24px; }
.jbj .jbj-menu__close { display: none; }
.jbj .jbj-menu[open] .jbj-menu__open { display: none; }
.jbj .jbj-menu[open] .jbj-menu__close { display: block; }
.jbj .jbj-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: 8px var(--jbj-gutter) 24px;
  background: var(--jbj-white);
  border-top: 1px solid var(--jbj-line);
  box-shadow: 0 18px 30px rgba(7, 37, 64, .18);
}
.jbj .jbj-menu__list { margin: 0 0 20px; padding: 0; list-style: none; }
.jbj .jbj-menu__list > li { border-bottom: 1px solid var(--jbj-line); }
.jbj .jbj-menu__link { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 19px; font-weight: 700; color: var(--jbj-navy); text-decoration: none; list-style: none; cursor: pointer; }
.jbj .jbj-menu__link::-webkit-details-marker { display: none; }
.jbj .jbj-menu__link svg { width: 20px; height: 20px; transition: transform .15s ease; }
.jbj .jbj-menu__sub[open] .jbj-menu__link svg { transform: rotate(180deg); }
.jbj .jbj-menu__sublist { margin: 0 0 12px; padding: 0; list-style: none; }
.jbj .jbj-menu__sublink { display: flex; align-items: center; min-height: 44px; padding-left: 14px; font-size: 18px; color: var(--jbj-ink); text-decoration: none; }

@media (max-width: 1279px) {
  .jbj .jbj-nav { display: none; }
  .jbj .jbj-menu { display: block; }
  .jbj .jbj-header__phone { margin-left: auto; }
}
@media (max-width: 760px) {
  .jbj .jbj-topbar { font-size: 13px; }
  .jbj .jbj-topbar__inner { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  .jbj .jbj-topbar__dot, .jbj .jbj-topbar__phone { display: none; }
  .jbj .jbj-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand menu" "phone menu";
    gap: 2px 12px;
    min-height: 76px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .jbj .jbj-brand { grid-area: brand; gap: 8px; }
  .jbj .jbj-brand__mark { width: 24px; height: 24px; }
  .jbj .jbj-brand__name { font-size: 18px; }
  .jbj .jbj-header__phone { grid-area: phone; margin-left: 32px; font-size: 17px; }
  .jbj .jbj-header__phone svg { width: 16px; height: 16px; }
  .jbj .jbj-header__cta { display: none; }
  .jbj .jbj-menu { grid-area: menu; }
}

/* ---------- 7. Breadcrumb ---------- */
.jbj .jbj-crumbs { margin-bottom: var(--jbj-s5); font-size: var(--jbj-fs-small); color: var(--jbj-muted); }
.jbj .jbj-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.jbj .jbj-crumbs__item { display: inline-flex; align-items: center; }
.jbj .jbj-crumbs__item + .jbj-crumbs__item::before {
  content: "";
  width: 7px;
  height: 7px;
  margin: 0 12px 0 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
}
.jbj .jbj-crumbs__link { color: var(--jbj-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.jbj .jbj-crumbs__link:hover { color: var(--jbj-link-hover); }
.jbj .jbj-crumbs__current { font-weight: 700; color: inherit; }

/* ---------- 8. Hero ---------- */
.jbj .jbj-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--jbj-navy-900);
  --jbj-heading: var(--jbj-on-dark);
  --jbj-muted: #e1e9f0;
  --jbj-link: var(--jbj-on-dark);
  --jbj-link-hover: var(--jbj-gold);
  --jbj-focus: var(--jbj-gold);
  color: var(--jbj-on-dark);
}
.jbj .jbj-hero__media { position: absolute; inset: 0; z-index: -2; display: block; }
.jbj .jbj-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* Version B (people): widen the crop so the faces land between the headline and the form */
.jbj .jbj-hero__media--people .jbj-hero__img { width: 88%; max-width: none; margin-left: 12%; object-position: 30% 22%; }
/* Overlay: keeps white text at AA (>= 4.5:1) even over the brightest sky */
.jbj .jbj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7, 37, 64, .92) 0%, rgba(7, 37, 64, .84) 38%, rgba(7, 37, 64, .7) 58%, rgba(7, 37, 64, .42) 100%);
}
/* B: dark behind the text column (>= .7 keeps white text above 4.5:1), clear over the faces */
.jbj .jbj-hero--people::before {
  background: linear-gradient(90deg, rgba(7, 37, 64, .93) 0%, rgba(7, 37, 64, .82) 30%, rgba(7, 37, 64, .72) 48%, rgba(7, 37, 64, .7) 51%, rgba(7, 37, 64, .08) 55.5%, rgba(7, 37, 64, .04) 76%, rgba(7, 37, 64, .2) 100%);
}
.jbj .jbj-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  align-items: center;
  gap: 72px;
  padding-top: 80px;
  padding-bottom: 88px;
}
.jbj .jbj-hero__title { max-width: 13em; font-size: var(--jbj-fs-h1); }
.jbj .jbj-hero__sub { max-width: 30em; margin: 22px 0 0; font-size: var(--jbj-fs-lead); line-height: 1.6; color: var(--jbj-muted); }
.jbj .jbj-hero__trust { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 34px 0 0; padding: 0; list-style: none; }
.jbj .jbj-hero__trust li { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.jbj .jbj-hero__trust svg { flex: none; width: 24px; height: 24px; color: var(--jbj-gold); }

@media (max-width: 1023px) {
  .jbj .jbj-hero__inner { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; }
}
@media (max-width: 760px) {
  .jbj .jbj-hero::before { background: linear-gradient(180deg, rgba(7, 37, 64, .74) 0%, rgba(7, 37, 64, .8) 40%, rgba(7, 37, 64, .9) 100%); }
  .jbj .jbj-hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 32px; padding-bottom: 40px; }
  .jbj .jbj-hero__media--people .jbj-hero__img { width: 100%; margin-left: 0; object-position: 38% 0; }
  .jbj .jbj-hero__main { display: contents; }
  .jbj .jbj-crumbs { order: 1; }
  .jbj .jbj-hero__copy { order: 2; }
  .jbj .jbj-hero__form { order: 3; margin-top: 28px; }
  .jbj .jbj-hero__trust { order: 4; flex-direction: column; gap: 10px; margin-top: 28px; }
  .jbj .jbj-hero__sub { margin-top: 16px; }
  .jbj .jbj-hero__trust li { font-size: 17px; }
}

/* ---------- 9. Offer form (hero card) ---------- */
.jbj .jbj-form {
  scroll-margin-top: 24px;
  padding: 32px;
  background: var(--jbj-white);
  border-radius: var(--jbj-r-lg);
  box-shadow: var(--jbj-shadow-lg);
  color: var(--jbj-ink);
  --jbj-heading: var(--jbj-navy);
  --jbj-muted: var(--jbj-ink-2);
  --jbj-link: var(--jbj-blue);
  --jbj-link-hover: var(--jbj-blue-700);
  --jbj-focus: var(--jbj-blue);
}
.jbj .jbj-form__title { font-size: 28px; }
.jbj .jbj-form__sub { margin: 10px 0 22px; font-size: 17px; line-height: 1.5; color: var(--jbj-muted); }
.jbj .jbj-form__form { margin: 0; }
.jbj .jbj-form__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.jbj .jbj-form__progress { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: var(--jbj-fs-xs); font-weight: 700; color: var(--jbj-navy); white-space: nowrap; }
.jbj .jbj-form__bar { display: flex; flex: 1; gap: 6px; }
.jbj .jbj-form__bar span { flex: 1; height: 6px; border-radius: 3px; background: var(--jbj-sand-2); }
.jbj .jbj-form__bar .is-on { background: var(--jbj-blue); }
.jbj .jbj-field { margin: 0 0 16px; }
.jbj .jbj-field__label { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--jbj-ink); }
.jbj .jbj-field__input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  font-size: 18px;
  color: var(--jbj-ink);
  background: var(--jbj-white);
  border: 2px solid var(--jbj-field);
  border-radius: var(--jbj-r-sm);
  transition: border-color .15s ease;
}
.jbj .jbj-field__input:hover { border-color: var(--jbj-ink-2); }
.jbj .jbj-field__input:focus { border-color: var(--jbj-blue); outline: 3px solid color-mix(in srgb, var(--jbj-blue) 35%, transparent); outline-offset: 1px; }
.jbj .jbj-form__consent { margin: 4px 0 18px; font-size: var(--jbj-fs-xs); line-height: 1.5; color: var(--jbj-muted); }
.jbj .jbj-form__micro { display: flex; gap: 10px; margin: 16px 0 0; font-size: var(--jbj-fs-xs); line-height: 1.45; color: var(--jbj-muted); }
.jbj .jbj-form__micro svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--jbj-blue); }
.jbj .jbj-form__done { outline: none; }
.jbj .jbj-form__done-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--jbj-blue-50); color: var(--jbj-blue); }
.jbj .jbj-form__done-icon svg { width: 28px; height: 28px; }
.jbj .jbj-form__done-title { font-size: 28px; }
.jbj .jbj-form__done-body { margin: 12px 0 0; font-size: var(--jbj-fs-body); color: var(--jbj-muted); }
.jbj .jbj-form__done-phone { font-weight: 700; color: var(--jbj-blue); }
@media (max-width: 760px) {
  .jbj .jbj-form { padding: 24px 20px; }
  .jbj .jbj-form__title, .jbj .jbj-form__done-title { font-size: 24px; }
}

/* ---------- 10. Stats bar ---------- */
.jbj .jbj-stats { background-color: var(--jbj-sand); background-image: var(--jbj-shingle-tex); border-bottom: 1px solid var(--jbj-line); }
.jbj .jbj-stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.jbj .jbj-stats__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 34px 24px; text-align: center; }
.jbj .jbj-stats__item + .jbj-stats__item { border-left: 1px solid var(--jbj-line); }
.jbj .jbj-stats__num { font-family: var(--jbj-font-display); font-size: var(--jbj-fs-stat); font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--jbj-navy); }
.jbj .jbj-stats__label { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--jbj-ink-2); }
@media (max-width: 760px) {
  .jbj .jbj-stats__list { grid-template-columns: 1fr; }
  .jbj .jbj-stats__item { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 0; text-align: left; }
  .jbj .jbj-stats__item + .jbj-stats__item { border-left: 0; border-top: 1px solid var(--jbj-line); }
  .jbj .jbj-stats__num { flex: none; min-width: 108px; }
  .jbj .jbj-stats__label { font-size: 17px; }
}

/* ---------- 11. Split: photo + text ---------- */
.jbj .jbj-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 88px; }
.jbj .jbj-split--media-right .jbj-split__media { order: 2; }
.jbj .jbj-split--top { align-items: start; }
.jbj .jbj-split--narrow { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.jbj .jbj-split__body .jbj-head { margin-bottom: var(--jbj-s5); }
@media (max-width: 1023px) { .jbj .jbj-split { gap: 56px; } }
@media (max-width: 760px) {
  .jbj .jbj-split { grid-template-columns: 1fr; gap: 40px; }
  .jbj .jbj-split--media-right .jbj-split__media { order: 0; }
}

/* Photo with caption overlay */
.jbj .jbj-photo { position: relative; }
.jbj .jbj-photo__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--jbj-r-lg); box-shadow: var(--jbj-shadow); }
.jbj .jbj-photo--wide .jbj-photo__img { aspect-ratio: 3 / 2; }
.jbj .jbj-photo--land .jbj-photo__img { aspect-ratio: 16 / 10; }
.jbj .jbj-photo__cap {
  position: absolute;
  right: -28px;
  bottom: -28px;
  max-width: 300px;
  padding: 20px 24px 22px;
  background: var(--jbj-navy);
  border-radius: var(--jbj-r);
  box-shadow: var(--jbj-shadow);
  font-family: var(--jbj-font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--jbj-white);
}
.jbj .jbj-photo__cap::before { content: ""; display: block; width: 30px; height: 3px; margin-bottom: 12px; border-radius: 2px; background: var(--jbj-gold); }
.jbj .jbj-photo--cap-left .jbj-photo__cap { right: auto; left: -28px; }
@media (max-width: 1023px) {
  .jbj .jbj-photo__cap { right: 16px; bottom: 16px; }
  .jbj .jbj-photo--cap-left .jbj-photo__cap { left: 16px; }
}
@media (max-width: 760px) {
  .jbj .jbj-photo__img { aspect-ratio: 4 / 3; }
  .jbj .jbj-photo__cap { right: 12px; bottom: 12px; left: 12px; max-width: none; padding: 14px 18px 16px; font-size: 17px; }
  .jbj .jbj-photo--cap-left .jbj-photo__cap { right: 12px; left: 12px; }
  .jbj .jbj-photo__cap::before { margin-bottom: 8px; }
}

/* JB portrait slot (placeholder until the real photo arrives) */
.jbj .jbj-portrait {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--jbj-r-lg);
  background-color: var(--jbj-sand-2);
  background-image: var(--jbj-shingle-tex);
  box-shadow: var(--jbj-shadow);
}
.jbj .jbj-portrait img { width: 100%; height: 100%; object-fit: cover; }
.jbj .jbj-portrait__mono {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border: 3px solid var(--jbj-white);
  border-radius: 50%;
  background: var(--jbj-navy);
  box-shadow: 0 0 0 1px var(--jbj-line);
  font-family: var(--jbj-font-display);
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--jbj-white);
}
@media (max-width: 760px) { .jbj .jbj-portrait { aspect-ratio: 4 / 3; } .jbj .jbj-portrait__mono { width: 38%; } }

/* ---------- 12. Steps (how it works) ---------- */
.jbj .jbj-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.jbj .jbj-step { padding: 32px; background: var(--jbj-white); border: 1px solid var(--jbj-line); border-radius: var(--jbj-r); box-shadow: var(--jbj-shadow-sm); }
.jbj .jbj-step__num { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; border-radius: 50%; background: var(--jbj-navy); font-family: var(--jbj-font-display); font-size: 21px; font-weight: 700; color: var(--jbj-white); }
.jbj .jbj-step__title { margin-bottom: 10px; }
.jbj .jbj-step__body { margin: 0; color: var(--jbj-ink-2); }
@media (max-width: 900px) { .jbj .jbj-steps { grid-template-columns: 1fr; gap: 16px; } .jbj .jbj-step { padding: 24px; } }

/* ---------- 13. Situation cards ---------- */
.jbj .jbj-sits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.jbj .jbj-sit {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 60px;
  background: var(--jbj-white);
  border: 1px solid var(--jbj-line);
  border-radius: var(--jbj-r);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.jbj .jbj-sit:hover { border-color: var(--jbj-blue); box-shadow: var(--jbj-shadow); }
.jbj .jbj-sit:focus-within { outline: 3px solid var(--jbj-focus); outline-offset: 3px; }
.jbj .jbj-sit__title { margin-bottom: 8px; font-size: 21px; }
.jbj .jbj-sit__link { color: inherit; text-decoration: none; }
.jbj .jbj-sit__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.jbj .jbj-sit__link:focus-visible { outline: none; }
.jbj .jbj-sit__text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--jbj-ink-2); }
.jbj .jbj-sit__arrow { position: absolute; left: 24px; bottom: 22px; width: 22px; height: 22px; color: var(--jbj-blue); transition: transform .15s ease; }
.jbj .jbj-sit:hover .jbj-sit__arrow { transform: translateX(4px); }
.jbj .jbj-sits__photo { position: relative; grid-column: span 2; min-height: 220px; }
.jbj .jbj-sits__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--jbj-r); }
@media (max-width: 1023px) { .jbj .jbj-sits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .jbj .jbj-sits { grid-template-columns: 1fr; gap: 12px; }
  .jbj .jbj-sit { padding: 18px 52px 18px 20px; }
  .jbj .jbj-sit__title { font-size: 19px; margin-bottom: 4px; }
  .jbj .jbj-sit__text { font-size: 16px; }
  .jbj .jbj-sit__arrow { left: auto; right: 18px; bottom: auto; top: 22px; }
  .jbj .jbj-sits__photo { grid-column: auto; min-height: 0; }
  .jbj .jbj-sits__photo img { position: static; aspect-ratio: 3 / 2; height: auto; }
}

/* ---------- 14. Comparison table ---------- */
.jbj .jbj-compare { max-width: 1040px; margin: 0 auto; }
.jbj .jbj-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--jbj-white); border: 1px solid var(--jbj-line); border-radius: var(--jbj-r-lg); box-shadow: var(--jbj-shadow-sm); font-size: 18px; line-height: 1.45; }
.jbj .jbj-table th, .jbj .jbj-table td { padding: 18px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--jbj-line); }
.jbj .jbj-table thead > tr > * { width: 39%; }
.jbj .jbj-table thead > tr > :first-child { width: 22%; background: var(--jbj-sand); border-top: 0; }
.jbj .jbj-table thead th { padding: 20px 24px; border-top: 0; background: var(--jbj-sand); font-family: var(--jbj-font-display); font-size: 20px; font-weight: 700; color: var(--jbj-navy); }
.jbj .jbj-table tbody th { font-weight: 700; color: var(--jbj-ink); }
.jbj .jbj-table td { color: var(--jbj-ink-2); }
.jbj .jbj-table .jbj-table__us { background: var(--jbj-blue-50); font-weight: 700; color: var(--jbj-navy); box-shadow: inset 2px 0 0 var(--jbj-blue), inset -2px 0 0 var(--jbj-blue); }
.jbj .jbj-table thead .jbj-table__us { background: var(--jbj-navy); color: var(--jbj-white); box-shadow: inset 0 4px 0 var(--jbj-gold); }
.jbj .jbj-table tbody tr:last-child .jbj-table__us { box-shadow: inset 2px 0 0 var(--jbj-blue), inset -2px 0 0 var(--jbj-blue), inset 0 -2px 0 var(--jbj-blue); }
.jbj .jbj-note { max-width: 780px; margin: 28px auto 0; text-align: center; font-size: 17px; color: var(--jbj-muted); }
@media (max-width: 760px) {
  .jbj .jbj-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jbj .jbj-table { table-layout: auto; }
  .jbj .jbj-table, .jbj .jbj-table tbody, .jbj .jbj-table tr, .jbj .jbj-table th, .jbj .jbj-table td { display: block; width: auto; }
  .jbj .jbj-table tr { padding: 18px 16px; border-top: 1px solid var(--jbj-line); }
  .jbj .jbj-table tbody tr:first-child { border-top: 0; }
  .jbj .jbj-table tbody th { width: auto; padding: 0 0 10px; border: 0; font-family: var(--jbj-font-display); font-size: 19px; color: var(--jbj-navy); }
  .jbj .jbj-table td { width: auto; padding: 10px 14px; border: 0; border-radius: var(--jbj-r-sm); font-size: 16px; }
  .jbj .jbj-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 14px; font-weight: 700; color: var(--jbj-ink-2); }
  .jbj .jbj-table .jbj-table__us, .jbj .jbj-table tbody tr:last-child .jbj-table__us { margin-bottom: 6px; box-shadow: inset 3px 0 0 var(--jbj-blue); }
  .jbj .jbj-table .jbj-table__us::before { color: var(--jbj-blue-700); }
  .jbj .jbj-note { text-align: left; }
}

/* ---------- 15. Offer math (ledger) ---------- */
.jbj .jbj-ledger { margin: 0; padding: 0; list-style: none; overflow: hidden; background: var(--jbj-white); border: 1px solid var(--jbj-line); border-radius: var(--jbj-r-lg); box-shadow: var(--jbj-shadow); }
.jbj .jbj-ledger__row { display: flex; align-items: center; gap: 18px; min-height: 76px; padding: 16px 28px; font-size: 19px; font-weight: 700; color: var(--jbj-ink); }
.jbj .jbj-ledger__row + .jbj-ledger__row { border-top: 1px solid var(--jbj-line); }
.jbj .jbj-ledger__op { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--jbj-sand); font-family: var(--jbj-font-display); font-size: 22px; font-weight: 700; line-height: 1; color: var(--jbj-navy); }
.jbj .jbj-ledger__op--start { background: transparent; box-shadow: inset 0 0 0 2px var(--jbj-line); }
.jbj .jbj-ledger__row--result { min-height: 88px; background: var(--jbj-navy); font-family: var(--jbj-font-display); font-size: 25px; color: var(--jbj-white); }
.jbj .jbj-ledger__row--result .jbj-ledger__op { background: var(--jbj-gold); color: var(--jbj-gold-ink); }
.jbj .jbj-ledger__row + .jbj-ledger__row--result { border-top: 0; }
@media (max-width: 760px) {
  .jbj .jbj-ledger__row { gap: 14px; min-height: 64px; padding: 14px 18px; font-size: 17px; }
  .jbj .jbj-ledger__row--result { min-height: 72px; font-size: 21px; }
  .jbj .jbj-ledger__op { width: 32px; height: 32px; font-size: 20px; }
}

/* ---------- 16. Reviews ---------- */
.jbj .jbj-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.jbj .jbj-review { display: flex; flex-direction: column; height: 100%; padding: 32px; background: var(--jbj-navy-800); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--jbj-r-lg); color: var(--jbj-white); }
.jbj .jbj-review__mark { display: block; height: 30px; margin-bottom: 14px; font-family: var(--jbj-font-display); font-size: 72px; font-weight: 700; line-height: .82; color: var(--jbj-gold); }
.jbj .jbj-review__quote { flex: 1; font-size: 19px; line-height: 1.6; }
.jbj .jbj-review__quote p { margin: 0; }
.jbj .jbj-review__by { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: var(--jbj-fs-small); font-weight: 700; color: var(--jbj-on-dark-2); }
.jbj .jbj-review--solo { max-width: 860px; margin: 0 auto; padding: 44px 48px; text-align: center; }
.jbj .jbj-review--solo .jbj-review__quote { font-family: var(--jbj-font-display); font-size: 26px; font-weight: 600; line-height: 1.45; }
@media (max-width: 1023px) { .jbj .jbj-reviews { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 760px) {
  .jbj .jbj-review { padding: 24px; }
  .jbj .jbj-review__quote { font-size: 18px; }
  .jbj .jbj-review--solo { padding: 28px 24px; text-align: left; }
  .jbj .jbj-review--solo .jbj-review__quote { font-size: 21px; }
}

/* ---------- 17. Town tags + county groups ---------- */
.jbj .jbj-areas__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 72px; margin-bottom: 72px; }
.jbj .jbj-counties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.jbj .jbj-county--wide { grid-column: span 2; }
.jbj .jbj-county__title { margin-bottom: 14px; font-size: 20px; }
.jbj .jbj-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jbj .jbj-tag { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; background: var(--jbj-white); border: 1px solid var(--jbj-line); border-radius: var(--jbj-r-pill); font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--jbj-navy); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.jbj .jbj-tag:hover { border-color: var(--jbj-blue); color: var(--jbj-blue); }
.jbj .jbj-tag--plain { background: var(--jbj-white); border-color: var(--jbj-line); font-weight: 400; color: var(--jbj-ink); }
@media (max-width: 1023px) { .jbj .jbj-areas__top { grid-template-columns: 1fr; gap: 40px; } .jbj .jbj-counties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .jbj .jbj-areas__top { margin-bottom: 48px; }
  .jbj .jbj-counties { grid-template-columns: 1fr; gap: 32px; }
  .jbj .jbj-county--wide { grid-column: auto; }
  .jbj .jbj-tag { padding: 8px 14px; font-size: 16px; }
}

/* ---------- 18. FAQ ---------- */
.jbj .jbj-faq { display: flex; flex-direction: column; gap: 12px; max-width: 880px; margin: 0 auto; }
.jbj .jbj-faq__item { background: var(--jbj-white); border: 1px solid var(--jbj-line); border-radius: var(--jbj-r); transition: border-color .15s ease; }
.jbj .jbj-faq__item[open] { border-color: var(--jbj-shingle); box-shadow: var(--jbj-shadow-sm); }
.jbj .jbj-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 18px 24px; list-style: none; cursor: pointer; }
.jbj .jbj-faq__q::-webkit-details-marker { display: none; }
.jbj .jbj-faq__q:hover .jbj-faq__title { color: var(--jbj-blue); }
.jbj .jbj-faq__title { font-family: var(--jbj-font-body); font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.jbj .jbj-faq__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--jbj-sand); }
.jbj .jbj-faq__icon::before, .jbj .jbj-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: var(--jbj-navy); transition: transform .2s ease; }
.jbj .jbj-faq__icon::after { transform: rotate(90deg); }
.jbj .jbj-faq__item[open] .jbj-faq__icon::after { transform: rotate(0deg); }
.jbj .jbj-faq__a { max-width: 70ch; padding: 0 24px 22px; color: var(--jbj-ink-2); }
@media (max-width: 760px) {
  .jbj .jbj-faq__q { padding: 16px 18px; }
  .jbj .jbj-faq__title { font-size: 18px; }
  .jbj .jbj-faq__a { padding: 0 18px 20px; }
}

/* ---------- 19. Link list (related situations, nearby towns) ---------- */
.jbj .jbj-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.jbj .jbj-links__a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 22px; background: var(--jbj-white); border: 1px solid var(--jbj-line); border-radius: var(--jbj-r); font-size: 19px; font-weight: 700; color: var(--jbj-navy); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.jbj .jbj-links__a:hover { border-color: var(--jbj-blue); color: var(--jbj-blue); }
.jbj .jbj-links__a svg { flex: none; width: 20px; height: 20px; color: var(--jbj-blue); }
@media (max-width: 760px) { .jbj .jbj-links { grid-template-columns: 1fr; } .jbj .jbj-links__a { font-size: 18px; } }

/* ---------- 20. Facts panel (city) ---------- */
.jbj .jbj-facts { margin: 0; padding: 8px 28px; background: var(--jbj-white); border: 1px solid var(--jbj-line); border-radius: var(--jbj-r-lg); box-shadow: var(--jbj-shadow-sm); }
.jbj .jbj-facts__row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 18px 0; }
.jbj .jbj-facts__row + .jbj-facts__row { border-top: 1px solid var(--jbj-line); }
.jbj .jbj-facts__label { font-weight: 700; color: var(--jbj-ink-2); }
.jbj .jbj-facts__value { margin: 0; font-weight: 700; color: var(--jbj-navy); }
@media (max-width: 760px) { .jbj .jbj-facts { padding: 4px 20px; } .jbj .jbj-facts__row { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; } }

/* ---------- 20b. Inner-page layouts ---------- */
.jbj .jbj-narrow { max-width: 1000px; }
.jbj .jbj-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 72px; }
.jbj .jbj-pair .jbj-head { margin-bottom: var(--jbj-s5); }
.jbj .jbj-tags--center { justify-content: center; }
.jbj .jbj-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 72px; }
.jbj .jbj-duo .jbj-head { margin: 0; }
.jbj .jbj-duo__body { max-width: 40em; margin: 0; padding-top: 24px; font-size: var(--jbj-fs-lead); line-height: 1.65; }
.jbj .jbj-points { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--jbj-line); }
.jbj .jbj-points__item { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--jbj-line); font-size: 19px; line-height: 1.55; }
.jbj .jbj-points__item::before { content: ""; flex: none; width: 20px; height: 3px; margin-top: .78em; border-radius: 2px; background: var(--jbj-gold-600); }
@media (max-width: 1023px) { .jbj .jbj-pair { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 760px) {
  .jbj .jbj-duo { grid-template-columns: 1fr; gap: 16px; }
  .jbj .jbj-duo__body { padding-top: 0; font-size: var(--jbj-fs-body); }
  .jbj .jbj-points__item { font-size: 18px; padding: 16px 0; }
  .jbj .jbj-tags--center { justify-content: flex-start; }
}

/* ---------- 21. Closing band ---------- */
.jbj .jbj-cta__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 72px; }
.jbj .jbj-cta__title { font-size: 46px; }
.jbj .jbj-cta__body { margin: 18px 0 0; max-width: 34em; font-size: var(--jbj-fs-lead); color: var(--jbj-muted); }
.jbj .jbj-cta__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--jbj-r-lg); }
@media (max-width: 760px) {
  .jbj .jbj-cta__inner { grid-template-columns: 1fr; gap: 32px; }
  .jbj .jbj-cta__media { order: -1; }
  .jbj .jbj-cta__img { aspect-ratio: 16 / 9; }
  .jbj .jbj-cta__title { font-size: 32px; }
  .jbj .jbj-cta .jbj-btn { width: 100%; }
}

/* ---------- 22. Footer ---------- */
.jbj .jbj-footer { padding: 72px 0 32px; background: var(--jbj-navy-900); color: var(--jbj-on-dark-2); font-size: var(--jbj-fs-small); --jbj-focus: var(--jbj-gold); }
.jbj .jbj-footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 56px; padding-bottom: 48px; }
.jbj .jbj-footer__about { max-width: 34em; margin: 18px 0 0; line-height: 1.6; }
.jbj .jbj-footer__contact { display: flex; flex-direction: column; gap: 8px; font-style: normal; }
.jbj .jbj-footer__phone { font-family: var(--jbj-font-display); font-size: 26px; font-weight: 700; color: var(--jbj-white); text-decoration: none; }
.jbj .jbj-footer__email { color: var(--jbj-white); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(255, 255, 255, .4); overflow-wrap: anywhere; }
.jbj .jbj-footer__phone:hover, .jbj .jbj-footer__email:hover { color: var(--jbj-gold); }
.jbj .jbj-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.jbj .jbj-footer__link { display: inline-flex; align-items: center; min-height: 40px; color: var(--jbj-white); text-decoration: none; }
.jbj .jbj-footer__link:hover { color: var(--jbj-gold); text-decoration: underline; }
.jbj .jbj-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--jbj-fs-xs); }
.jbj .jbj-footer__legal p { margin: 0; }
.jbj .jbj-footer__legal-links { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.jbj .jbj-footer__legal-link { color: var(--jbj-on-dark-2); text-decoration: underline; text-underline-offset: .2em; }
.jbj .jbj-footer__legal-link:hover { color: var(--jbj-white); }
@media (max-width: 1023px) { .jbj .jbj-footer__top { grid-template-columns: 1fr 1fr; } .jbj .jbj-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .jbj .jbj-footer { padding: 56px 0 120px; }
  .jbj .jbj-footer__top { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- 23. Sticky mobile bar ---------- */
.jbj .jbj-mobilebar { display: none; }
@media (max-width: 760px) {
  .jbj .jbj-mobilebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--jbj-white);
    border-top: 1px solid var(--jbj-line);
    box-shadow: 0 -8px 24px rgba(7, 37, 64, .14);
  }
  .jbj .jbj-mobilebar .jbj-btn { min-height: 52px; padding: 8px 8px; gap: 6px; font-size: 16px; }
  .jbj .jbj-mobilebar .jbj-btn svg { width: 18px; height: 18px; }
}

/* ---------- 24. Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .jbj *, .jbj *::before, .jbj *::after { transition: none !important; }
}