/* ==========================================================================
   JPG Insurance — public website stylesheet
   One design system for every public page (home, motor, health, life,
   services, about, contact, privacy). The admin panel has its own
   stylesheet (admin/css/admin-theme.css) built on the same colours.

    1. Fonts & tokens        7. Product cards
    2. Base                  8. Benefits & facts
    3. Header                9. Partners carousel
    4. Buttons, forms,      10. Protect / support band
       alerts               11. Inner-page components
    5. Home hero            12. Footer
    6. Quote card           13. Responsive
   ========================================================================== */

/* 1. FONTS & TOKENS ======================================================== */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Kaushan Script"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/kaushan-script-latin-400-normal.woff2") format("woff2"); }

:root {
  /* Brand (from the JPG Insurance logo: red "JPG", blue "Insurance") */
  --jpg-red: #e3202a;
  --jpg-blue: #0757f9;
  --jpg-blue-600: #0647d6;
  --jpg-navy: #06245d;
  --jpg-hero-dark: #032653;
  --jpg-cyan: #35bdf4;
  --jpg-green: #08b86b;
  --jpg-green-600: #079a5a;
  --jpg-orange: #ff8a1f;

  /* Text, surfaces, borders */
  --jpg-text: #09255f;
  --jpg-text-2: #405a86;
  --jpg-muted: #6b7fa3;
  --jpg-border: #d8e5f7;
  --jpg-page: #f5f9ff;
  --jpg-card: #ffffff;
  --jpg-white: #ffffff;

  /* Tints */
  --jpg-bg-blue: #eaf4ff;
  --jpg-bg-green: #e4faf2;
  --jpg-bg-yellow: #fff5d9;
  --jpg-bg-lavender: #f0eaff;
  --jpg-bg-pink: #ffe9e7;
  --jpg-bg-cyan: #e4f8fc;

  /* Status */
  --jpg-success: #08b86b;
  --jpg-warning: #f5a300;
  --jpg-error: #d93a32;
  --jpg-info: #0757f9;

  --jpg-font: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
  --jpg-font-script: "Kaushan Script", "Brush Script MT", cursive;

  --jpg-container: 1280px;
  --jpg-gutter: 24px;
  --jpg-radius-sm: 8px;
  --jpg-radius: 12px;
  --jpg-radius-lg: 18px;
  --jpg-radius-pill: 999px;
  --jpg-header-h: 74px;
  --jpg-field-h: 46px;
  --jpg-shadow-card: 0 10px 30px rgba(6, 36, 93, 0.08);
  --jpg-shadow-form: 0 24px 60px rgba(3, 24, 70, 0.28);
  --jpg-ease: 0.2s ease;
}

/* 2. BASE ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.jpg-site {
  margin: 0;
  font-family: var(--jpg-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--jpg-text);
  background: var(--jpg-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Element resets use :where() so they never out-rank component classes. */
:where(.jpg-site) h1, :where(.jpg-site) h2, :where(.jpg-site) h3, :where(.jpg-site) h4 { margin: 0; color: var(--jpg-navy); line-height: 1.2; font-weight: 700; }
:where(.jpg-site) p { margin: 0; }
:where(.jpg-site) ul, :where(.jpg-site) ol { margin: 0; padding: 0; }
:where(.jpg-site) a { color: inherit; text-decoration: none; }
:where(.jpg-site) img { max-width: 100%; height: auto; }
:where(.jpg-site) button, :where(.jpg-site) input, :where(.jpg-site) select, :where(.jpg-site) textarea { font: inherit; }
:where(.jpg-site) :is(a, button, select, input, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--jpg-cyan); outline-offset: 2px; }

.jpg-container { width: 100%; max-width: var(--jpg-container); margin: 0 auto; padding: 0 var(--jpg-gutter); }

.jpg-icon { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.jpg-icon-fill { fill: currentColor; }

.jpg-sr, .jpg-hp {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jpg-skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px;
  background: var(--jpg-navy); color: var(--jpg-white); border-radius: var(--jpg-radius-sm);
}
.jpg-skip:focus { top: 12px; }

/* Image placeholder (shown until a real image file is uploaded) */
.jpg-ph {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--jpg-radius); background: rgba(7, 87, 249, 0.07); color: rgba(7, 87, 249, 0.38);
}
.jpg-ph__icon { width: 42%; height: 42%; max-width: 72px; max-height: 72px; stroke-width: 1.4; }

.jpg-section { padding: 56px 0; }
.jpg-section--tint { background: var(--jpg-page); }
.jpg-section__head { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.jpg-eyebrow {
  display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: var(--jpg-radius-pill);
  background: var(--jpg-bg-blue); color: var(--jpg-blue); font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
}
.jpg-section__title { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.jpg-section__lead { margin-top: 10px; color: var(--jpg-text-2); font-size: 15.5px; }

/* 3. HEADER ================================================================ */
.jpg-header {
  position: sticky; top: 0; z-index: 50; background: var(--jpg-white);
  box-shadow: 0 1px 0 var(--jpg-border), 0 4px 18px rgba(6, 36, 93, 0.05);
}
.jpg-header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--jpg-header-h); }
.jpg-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.jpg-logo__img { display: block; height: 46px; width: auto; }
.jpg-header__panel { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.jpg-nav { flex: 1; display: flex; justify-content: center; }
.jpg-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; }
.jpg-nav__link {
  display: block; padding: 8px 11px; border-radius: var(--jpg-radius-sm);
  font-size: 14px; font-weight: 500; color: var(--jpg-navy); white-space: nowrap;
  transition: background var(--jpg-ease), color var(--jpg-ease);
}
.jpg-nav__link:hover { background: var(--jpg-bg-blue); color: var(--jpg-blue); }
.jpg-nav__link.is-active, .jpg-nav__link.is-active:hover {
  background: var(--jpg-blue); color: var(--jpg-white); font-weight: 600; padding: 8px 18px;
  box-shadow: 0 6px 14px rgba(7, 87, 249, 0.28);
}
.jpg-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.jpg-header__sep { width: 1px; height: 34px; background: var(--jpg-border); }
.jpg-hcontact { display: inline-flex; align-items: center; gap: 9px; }
.jpg-hcontact__icon {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--jpg-white);
}
.jpg-hcontact__icon--call { background: var(--jpg-blue); }
.jpg-hcontact__icon--wa { background: var(--jpg-green); font-size: 19px; }
.jpg-hcontact__text { display: flex; flex-direction: column; line-height: 1.2; }
.jpg-hcontact__label { font-size: 11.5px; color: var(--jpg-text-2); font-weight: 500; }
.jpg-hcontact__value { font-size: 14px; font-weight: 700; color: var(--jpg-navy); white-space: nowrap; }
.jpg-hcontact__value--wa { color: var(--jpg-green); }
.jpg-hcontact:hover .jpg-hcontact__value { text-decoration: underline; }
.jpg-nav-toggle, .jpg-header__call-mobile { display: none; }

/* 4. BUTTONS, FORMS, ALERTS =============================================== */
.jpg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border-radius: 10px; border: 1.5px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background var(--jpg-ease), color var(--jpg-ease), border-color var(--jpg-ease), transform var(--jpg-ease);
}
.jpg-btn .jpg-icon { font-size: 19px; }
.jpg-btn:active { transform: translateY(1px); }
.jpg-btn--primary { background: linear-gradient(90deg, var(--jpg-blue), #1f6bff); color: var(--jpg-white); box-shadow: 0 10px 20px rgba(7, 87, 249, 0.28); }
.jpg-btn--primary:hover { background: var(--jpg-blue-600); }
.jpg-btn--primary[disabled] { opacity: 0.7; cursor: progress; }
.jpg-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.jpg-btn--ghost { background: var(--jpg-white); border-color: var(--jpg-border); color: var(--jpg-navy); }
.jpg-btn--ghost:hover { border-color: var(--jpg-blue); color: var(--jpg-blue); }
.jpg-btn--light { background: var(--jpg-white); color: var(--jpg-blue); }
.jpg-btn--light:hover { background: var(--jpg-bg-blue); }
.jpg-btn--wa-outline { height: 46px; background: var(--jpg-white); border-color: var(--jpg-green); color: var(--jpg-green); }
.jpg-btn--wa-outline:hover { background: var(--jpg-bg-green); }
.jpg-btn--wa { background: var(--jpg-green); color: var(--jpg-white); box-shadow: 0 8px 18px rgba(8, 184, 107, 0.32); }
.jpg-btn--wa:hover { background: var(--jpg-green-600); }
.jpg-btn--block { width: 100%; }

.jpg-field { position: relative; margin-bottom: 12px; }
.jpg-field__label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--jpg-navy); }
.jpg-field__label .req { color: var(--jpg-error); }
.jpg-field__wrap { position: relative; }
.jpg-field__icon {
  position: absolute; left: 14px; top: calc(var(--jpg-field-h) / 2); transform: translateY(-50%);
  font-size: 18px; color: var(--jpg-blue); pointer-events: none; display: inline-flex;
}
.jpg-field__caret {
  position: absolute; right: 14px; top: calc(var(--jpg-field-h) / 2); transform: translateY(-50%);
  font-size: 16px; color: var(--jpg-text-2); pointer-events: none; display: inline-flex;
}
.jpg-field__control {
  display: block; width: 100%; height: var(--jpg-field-h); margin: 0; padding: 0 14px;
  border: 1px solid var(--jpg-border); border-radius: 10px; background: var(--jpg-white);
  font-size: 14px; color: var(--jpg-text);
  transition: border-color var(--jpg-ease), box-shadow var(--jpg-ease);
}
.jpg-field__wrap .jpg-field__control { padding-left: 44px; }
textarea.jpg-field__control { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
.jpg-field__control::placeholder { color: #7d90b3; opacity: 1; }
.jpg-field__control:focus { outline: none; border-color: var(--jpg-blue); box-shadow: 0 0 0 3px rgba(7, 87, 249, 0.14); }
select.jpg-field__control { padding-right: 40px; appearance: none; -webkit-appearance: none; cursor: pointer; }
select.jpg-field__control:invalid { color: #7d90b3; }
select.jpg-field__control option { color: var(--jpg-text); }
.jpg-field__control--upper { text-transform: uppercase; }
.jpg-field__control--upper::placeholder { text-transform: none; }
.jpg-field.is-hidden { display: none; }
.jpg-field.has-error .jpg-field__control { border-color: var(--jpg-error); }
.jpg-field.has-error .jpg-field__icon { color: var(--jpg-error); }
.jpg-field__error { display: block; margin-top: 4px; font-size: 12px; color: #c62d26; }
.jpg-field__hint { display: block; margin-top: 4px; font-size: 12px; color: var(--jpg-muted); }
.jpg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.jpg-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.jpg-choice label {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 1px solid var(--jpg-border); border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; background: var(--jpg-white);
}
.jpg-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jpg-choice label .jpg-icon { font-size: 18px; color: var(--jpg-blue); }
.jpg-choice input:checked + span { color: var(--jpg-blue); font-weight: 700; }
.jpg-choice label:has(input:checked) { border-color: var(--jpg-blue); background: var(--jpg-bg-blue); box-shadow: 0 0 0 2px rgba(7, 87, 249, 0.15); }
.jpg-choice label:has(input:focus-visible) { outline: 3px solid var(--jpg-cyan); outline-offset: 2px; }
.jpg-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--jpg-text-2); margin: 4px 0 14px; }
.jpg-consent input { margin-top: 4px; }

.jpg-alert {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 11px 13px;
  border-radius: 10px; font-size: 13.5px; line-height: 1.45;
}
.jpg-alert .jpg-icon { font-size: 18px; margin-top: 1px; }
.jpg-alert--success { background: var(--jpg-bg-green); color: #05673c; border: 1px solid #a6e8c9; }
.jpg-alert--error { background: #fff0ef; color: #a5231d; border: 1px solid #f6c3bf; }
.jpg-alert--info { background: var(--jpg-bg-blue); color: #0b3d8f; border: 1px solid var(--jpg-border); }
.jpg-alert a { text-decoration: underline; font-weight: 600; }

/* 5. HOME HERO ============================================================= */
.jpg-hero {
  position: relative; overflow: hidden; color: var(--jpg-white);
  background: linear-gradient(105deg, var(--jpg-hero-dark) 0%, #04367f 38%, #0550d8 72%, #0a63ff 100%);
}
.jpg-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 70% at 52% 55%, rgba(53, 189, 244, 0.26), transparent 70%),
    radial-gradient(ellipse 30% 50% at 95% 10%, rgba(255, 255, 255, 0.14), transparent 70%),
    radial-gradient(circle at 8% 110%, rgba(53, 189, 244, 0.18), transparent 40%);
}
.jpg-hero::after {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -60px; height: 120px;
  background: var(--jpg-white); border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: 0.08; pointer-events: none;
}
.jpg-hero__inner {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr) 372px; align-items: center; gap: 28px;
  padding-top: 26px; padding-bottom: 30px; min-height: 420px;
}
.jpg-hero__title { font-size: 48px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; color: var(--jpg-white); }
.jpg-hero__accent { color: var(--jpg-cyan); }
.jpg-hero__tagline { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.95); }
.jpg-hero__pipe { color: rgba(255, 255, 255, 0.45); font-weight: 300; }
.jpg-hero__perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; list-style: none; }
.jpg-hero__perk { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 8px; border-right: 1px solid rgba(255, 255, 255, 0.16); }
.jpg-hero__perk:last-child { border-right: 0; }
.jpg-hero__perk-icon {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--jpg-green); color: var(--jpg-white); font-size: 20px; box-shadow: 0 0 0 5px rgba(8, 184, 107, 0.18);
}
.jpg-hero__perk-text { font-size: 13px; font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, 0.92); }
.jpg-hero__visual { position: relative; align-self: stretch; display: flex; flex-direction: column; min-width: 0; }
.jpg-hero__slogan {
  position: relative; z-index: 3; align-self: center; margin-left: 18%;
  font-family: var(--jpg-font-script); font-size: 30px; line-height: 1.1; color: var(--jpg-white);
  transform: rotate(-4deg); text-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.jpg-hero__slogan span { position: relative; display: inline-block; padding-left: 26px; }
.jpg-hero__slogan span::after {
  content: ""; position: absolute; left: 34px; right: -6px; bottom: -8px; height: 4px; border-radius: 4px;
  background: var(--jpg-orange); transform: rotate(-2deg);
}
.jpg-hero__vehicles { position: relative; flex: 1; min-height: 250px; margin-top: 6px; }
.jpg-hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.jpg-hero__veh { position: absolute; display: block; object-fit: contain; }
.jpg-hero__veh--truck { right: 0; bottom: 56px; width: 56%; height: 70%; z-index: 1; }
.jpg-hero__veh--car   { left: 21%; bottom: 0; width: 54%; height: 52%; z-index: 2; }
.jpg-hero__veh--bike  { left: 0; bottom: 10px; width: 30%; height: 46%; z-index: 3; }
img.jpg-hero__veh { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.28)); }

/* 6. QUOTE CARD (home hero + inner pages) ================================== */
.jpg-quote { position: relative; z-index: 4; scroll-margin-top: calc(var(--jpg-header-h) + 16px); }
.jpg-quote__form {
  background: var(--jpg-white); color: var(--jpg-text); border-radius: var(--jpg-radius-lg);
  padding: 20px 22px; box-shadow: var(--jpg-shadow-form);
}
.jpg-quote__title { font-size: 20px; font-weight: 700; color: var(--jpg-navy); text-align: center; }
.jpg-quote__sub { margin: 2px 0 14px; text-align: center; font-size: 13px; font-weight: 500; color: var(--jpg-text-2); }
.jpg-quote__sub span { margin: 0 6px; color: var(--jpg-border); }
.jpg-quote .jpg-field { margin-bottom: 9px; }
.jpg-quote .jpg-btn--primary { width: 100%; margin-top: 3px; height: 46px; }
.jpg-quote .jpg-btn--wa-outline { width: 100%; margin-top: 8px; height: 42px; }
.jpg-quote__note { margin-top: 10px; font-size: 11.5px; color: var(--jpg-muted); text-align: center; }

/* 7. PRODUCT CARDS ========================================================= */
.jpg-products { padding: 18px 0 0; }
.jpg-products__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; list-style: none; }
.jpg-pcard {
  --pc-bg: var(--jpg-bg-blue); --pc-accent: var(--jpg-blue); --pc-title: var(--jpg-blue);
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 168px;
  padding: 14px 14px 12px; border-radius: 16px; background: var(--pc-bg); border: 1px solid rgba(6, 36, 93, 0.04);
  transition: transform var(--jpg-ease), box-shadow var(--jpg-ease);
}
.jpg-pcard:hover { transform: translateY(-3px); box-shadow: var(--jpg-shadow-card); }
.jpg-pcard--blue   { --pc-bg: var(--jpg-bg-blue);     --pc-accent: var(--jpg-blue); --pc-title: var(--jpg-blue); }
.jpg-pcard--green  { --pc-bg: var(--jpg-bg-green);    --pc-accent: #0aa866;         --pc-title: var(--jpg-navy); }
.jpg-pcard--yellow { --pc-bg: var(--jpg-bg-yellow);   --pc-accent: #e48a00;         --pc-title: var(--jpg-navy); }
.jpg-pcard--purple { --pc-bg: var(--jpg-bg-lavender); --pc-accent: #7a4df0;         --pc-title: var(--jpg-navy); }
.jpg-pcard--red    { --pc-bg: var(--jpg-bg-pink);     --pc-accent: #e5372f;         --pc-title: #c8241c; }
.jpg-pcard--teal   { --pc-bg: var(--jpg-bg-cyan);     --pc-accent: #0b9aa9;         --pc-title: #06737f; }
.jpg-pcard__title { font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--pc-title); min-height: 2.5em; max-width: 11em; }
.jpg-pcard__visual {
  align-self: flex-end; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 2px 0 6px; border-radius: 18px; background: var(--jpg-white);
  color: var(--pc-accent); font-size: 34px; box-shadow: 0 6px 16px rgba(6, 36, 93, 0.08);
}
.jpg-pcard__visual img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.jpg-pcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.jpg-pcard__cta { font-size: 13px; font-weight: 600; color: var(--jpg-navy); line-height: 1.25; }
.jpg-pcard__cta small { display: block; font-size: 11.5px; font-weight: 400; color: var(--jpg-text-2); }
.jpg-pcard__arrow {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--pc-accent); color: var(--jpg-white); font-size: 16px; transition: transform var(--jpg-ease);
}
.jpg-pcard:hover .jpg-pcard__arrow { transform: translateX(3px); }
.jpg-products__note { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; margin-top: 6px; font-size: 12px; color: var(--jpg-text-2); }
.jpg-products__ext { display: inline-flex; align-items: center; gap: 4px; color: var(--jpg-blue); font-weight: 500; }
.jpg-products__ext:hover { text-decoration: underline; }

/* 8. BENEFITS & FACTS ====================================================== */
.jpg-why { padding: 14px 0 0; }
.jpg-why__inner { display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: 14px; }
.jpg-why__benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; }
.jpg-benefit { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: var(--jpg-radius); background: var(--jpg-bg-blue); border: 1px solid var(--jpg-border); }
.jpg-benefit__icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--jpg-white); color: var(--jpg-blue); font-size: 20px; box-shadow: 0 3px 8px rgba(7, 87, 249, 0.1);
}
.jpg-benefit__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.jpg-benefit__text strong { font-size: 13.5px; font-weight: 700; color: var(--jpg-navy); }
.jpg-benefit__text span { font-size: 12px; color: var(--jpg-text-2); }
.jpg-why__facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; padding: 6px 4px;
  border-radius: var(--jpg-radius); background: linear-gradient(90deg, var(--jpg-bg-blue), #f3f8ff); border: 1px solid var(--jpg-border); list-style: none;
}
.jpg-fact { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 8px; border-right: 1px solid var(--jpg-border); }
.jpg-fact:last-child { border-right: 0; }
.jpg-fact__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--jpg-blue); color: var(--jpg-white); font-size: 19px;
}
.jpg-fact:nth-child(2) .jpg-fact__icon { background: var(--jpg-green); }
.jpg-fact:nth-child(3) .jpg-fact__icon { background: #f5a300; }
.jpg-fact:nth-child(4) .jpg-fact__icon { background: var(--jpg-red); }
.jpg-fact__text { display: flex; flex-direction: column; line-height: 1.2; }
.jpg-fact__text strong { font-size: 18px; font-weight: 800; color: var(--jpg-navy); }
.jpg-fact__text span { font-size: 11.5px; color: var(--jpg-text-2); }

/* 9. PARTNERS CAROUSEL ===================================================== */
.jpg-partners { padding: 18px 0 0; }
.jpg-title-lines {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 18px; font-weight: 700; color: var(--jpg-navy); text-align: center;
}
.jpg-title-lines::before, .jpg-title-lines::after { content: ""; width: 46px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--jpg-blue)); }
.jpg-title-lines::after { background: linear-gradient(90deg, var(--jpg-blue), transparent); }
.jpg-carousel { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.jpg-carousel__track {
  flex: 1; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 2px; list-style: none;
}
.jpg-carousel__track::-webkit-scrollbar { display: none; }
.jpg-carousel__arrow {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--jpg-border); background: var(--jpg-white);
  color: var(--jpg-navy); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 3px 10px rgba(6, 36, 93, 0.08); transition: background var(--jpg-ease), color var(--jpg-ease), opacity var(--jpg-ease);
}
.jpg-carousel__arrow:hover:not(:disabled) { background: var(--jpg-blue); color: var(--jpg-white); border-color: var(--jpg-blue); }
.jpg-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.jpg-carousel.is-static .jpg-carousel__arrow { display: none; }
.jpg-carousel.is-static .jpg-carousel__track { justify-content: center; }
.jpg-partner {
  flex: 0 0 180px; height: 72px; scroll-snap-align: start; display: flex; align-items: center; justify-content: center;
  padding: 8px 14px; background: var(--jpg-white); border: 1px solid var(--jpg-border); border-radius: 10px;
}
.jpg-partner img { max-width: 100%; max-height: 58px; object-fit: contain; display: block; }
.jpg-partner__name { font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--jpg-text-2); }

/* 10. PROTECT / SUPPORT BAND =============================================== */
.jpg-protect { padding: 18px 0 40px; }
.jpg-protect__inner {
  display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 37fr) minmax(0, 33fr); align-items: stretch;
  border-radius: var(--jpg-radius-lg); background: linear-gradient(90deg, var(--jpg-bg-blue), #f7fbff 60%);
  border: 1px solid var(--jpg-border); overflow: hidden;
}
.jpg-protect__media { position: relative; min-height: 170px; }
.jpg-protect__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jpg-protect__content { display: flex; flex-direction: column; justify-content: center; padding: 14px 24px; }
.jpg-protect__title { font-size: 23px; font-weight: 800; color: var(--jpg-navy); letter-spacing: -0.4px; }
.jpg-protect__sub { margin-top: 4px; font-size: 13.5px; color: var(--jpg-text-2); }
.jpg-protect__cats { display: flex; margin-top: 12px; list-style: none; }
.jpg-protect__cats li { flex: 1; border-right: 1px solid var(--jpg-border); }
.jpg-protect__cats li:last-child { border-right: 0; }
.jpg-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--jpg-radius-sm); transition: background var(--jpg-ease); }
.jpg-cat:hover { background: rgba(7, 87, 249, 0.06); }
.jpg-cat__icon {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--jpg-white); color: var(--jpg-blue); font-size: 20px; box-shadow: 0 4px 12px rgba(7, 87, 249, 0.12);
}
.jpg-cat__label { font-size: 13px; font-weight: 600; color: var(--jpg-navy); }
.jpg-support {
  position: relative; display: flex; align-items: stretch; margin: 8px; border-radius: var(--jpg-radius-lg); color: var(--jpg-white);
  background: radial-gradient(circle at 85% 20%, rgba(53, 189, 244, 0.35), transparent 50%), linear-gradient(120deg, var(--jpg-hero-dark), #0548c4 85%);
  overflow: hidden; scroll-margin-top: calc(var(--jpg-header-h) + 16px);
}
.jpg-support__body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 14px 0 14px 22px; }
.jpg-support__title { font-size: 22px; font-weight: 800; color: var(--jpg-white); }
.jpg-support__sub { margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.jpg-support__phone { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 10px; font-size: 17px; font-weight: 700; color: var(--jpg-white); white-space: nowrap; }
.jpg-support__phone-icon { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); font-size: 15px; }
.jpg-support .jpg-btn--wa { height: 42px; padding: 0 18px; }
.jpg-support__art { position: relative; z-index: 1; flex: 0 0 36%; width: 36%; display: flex; align-items: flex-end; justify-content: center; padding: 10px 10px 0 0; }
.jpg-support__art img { max-height: 150px; width: auto; object-fit: contain; }

/* 11. INNER-PAGE COMPONENTS ================================================ */
.jpg-page-hero {
  position: relative; overflow: hidden; color: var(--jpg-white);
  background: linear-gradient(105deg, var(--jpg-hero-dark) 0%, #04367f 45%, #0757f9 100%);
}
.jpg-page-hero__inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: 40px;
  padding-top: 40px; padding-bottom: 44px;
}
.jpg-page-hero--simple .jpg-page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); padding-top: 36px; padding-bottom: 40px; }
.jpg-crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 13px; color: rgba(255, 255, 255, 0.75); margin-bottom: 14px; }
.jpg-crumbs li + li::before { content: "/"; margin-right: 6px; color: rgba(255, 255, 255, 0.45); }
.jpg-crumbs a:hover { color: var(--jpg-white); text-decoration: underline; }
.jpg-page-hero__title { font-size: 40px; font-weight: 800; letter-spacing: -0.8px; color: var(--jpg-white); }
.jpg-page-hero__title span { color: var(--jpg-cyan); }
.jpg-page-hero__lead { margin-top: 12px; max-width: 600px; font-size: 16px; color: rgba(255, 255, 255, 0.9); }
.jpg-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 22px; list-style: none; max-width: 600px; }
.jpg-ticks li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.95); }
.jpg-ticks .jpg-icon { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--jpg-green); color: var(--jpg-white); }
.jpg-page-hero__art { display: flex; justify-content: center; }
.jpg-page-hero__art img { max-height: 280px; width: auto; border-radius: var(--jpg-radius-lg); }
.jpg-page-hero__art--photo img { max-height: 300px; object-fit: cover; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25); }

.jpg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; }
.jpg-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jpg-card {
  display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border-radius: var(--jpg-radius-lg);
  background: var(--jpg-card); border: 1px solid var(--jpg-border); box-shadow: 0 4px 14px rgba(6, 36, 93, 0.04);
  transition: transform var(--jpg-ease), box-shadow var(--jpg-ease), border-color var(--jpg-ease);
}
a.jpg-card:hover { transform: translateY(-3px); box-shadow: var(--jpg-shadow-card); border-color: #c4d8f5; }
.jpg-card__icon {
  width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--jpg-bg-blue); color: var(--jpg-blue); font-size: 24px;
}
.jpg-card__icon--green { background: var(--jpg-bg-green); color: #079a5a; }
.jpg-card__icon--red { background: var(--jpg-bg-pink); color: #d42a22; }
.jpg-card__icon--yellow { background: var(--jpg-bg-yellow); color: #c27400; }
.jpg-card__icon--purple { background: var(--jpg-bg-lavender); color: #6a3fe0; }
.jpg-card__icon--teal { background: var(--jpg-bg-cyan); color: #08808d; }
.jpg-card__title { font-size: 17px; font-weight: 700; color: var(--jpg-navy); }
.jpg-card__text { font-size: 14px; color: var(--jpg-text-2); }
.jpg-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--jpg-blue); }

.jpg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; counter-reset: step; }
.jpg-step { position: relative; padding: 22px 20px; border-radius: var(--jpg-radius-lg); background: var(--jpg-white); border: 1px solid var(--jpg-border); }
.jpg-step::before {
  counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--jpg-blue); color: var(--jpg-white); font-weight: 700;
}
.jpg-step h3 { font-size: 16px; }
.jpg-step p { margin-top: 6px; font-size: 13.5px; color: var(--jpg-text-2); }

.jpg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.jpg-split__media img { width: 100%; border-radius: var(--jpg-radius-lg); box-shadow: var(--jpg-shadow-card); }
.jpg-prose p + p { margin-top: 12px; }
.jpg-prose p { color: var(--jpg-text-2); font-size: 15.5px; }
.jpg-prose h2 { font-size: 26px; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.4px; }
.jpg-prose h3 { font-size: 18px; margin: 22px 0 8px; }
.jpg-prose ul { margin: 10px 0 0 20px; color: var(--jpg-text-2); }
.jpg-prose li + li { margin-top: 6px; }
.jpg-checklist { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.jpg-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--jpg-text); }
.jpg-checklist .jpg-icon { font-size: 20px; color: var(--jpg-green); margin-top: 2px; }

.jpg-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.jpg-faq details { background: var(--jpg-white); border: 1px solid var(--jpg-border); border-radius: var(--jpg-radius); }
.jpg-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 18px; font-weight: 600; color: var(--jpg-navy);
}
.jpg-faq summary::-webkit-details-marker { display: none; }
.jpg-faq summary .jpg-icon { transition: transform var(--jpg-ease); color: var(--jpg-blue); }
.jpg-faq details[open] summary .jpg-icon { transform: rotate(180deg); }
.jpg-faq details > div { padding: 0 18px 16px; color: var(--jpg-text-2); font-size: 14.5px; }

.jpg-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; border-radius: var(--jpg-radius-lg);
  color: var(--jpg-white); background: radial-gradient(circle at 90% 10%, rgba(53, 189, 244, 0.35), transparent 50%), linear-gradient(110deg, var(--jpg-hero-dark), #0548c4);
}
.jpg-cta h2 { color: var(--jpg-white); font-size: 24px; }
.jpg-cta p { color: rgba(255, 255, 255, 0.85); margin-top: 4px; }
.jpg-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.jpg-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.jpg-info-list { display: grid; gap: 14px; list-style: none; }
.jpg-info { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--jpg-radius-lg); background: var(--jpg-white); border: 1px solid var(--jpg-border); }
.jpg-info__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--jpg-bg-blue); color: var(--jpg-blue); font-size: 22px; }
.jpg-info h3 { font-size: 15px; }
.jpg-info p, .jpg-info a { font-size: 14.5px; color: var(--jpg-text-2); }
.jpg-info a:hover { color: var(--jpg-blue); text-decoration: underline; }
.jpg-panel { padding: 24px; border-radius: var(--jpg-radius-lg); background: var(--jpg-white); border: 1px solid var(--jpg-border); box-shadow: var(--jpg-shadow-card); }
.jpg-panel__title { font-size: 20px; font-weight: 800; }
.jpg-panel__sub { margin: 4px 0 18px; font-size: 14px; color: var(--jpg-text-2); }
.jpg-map { margin-top: 14px; border-radius: var(--jpg-radius-lg); overflow: hidden; border: 1px solid var(--jpg-border); background: var(--jpg-bg-blue); }
.jpg-map iframe { display: block; width: 100%; height: 280px; border: 0; }

.jpg-result { text-align: center; padding: 8px 4px 2px; }
.jpg-result__icon { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; background: var(--jpg-bg-green); color: var(--jpg-green); font-size: 30px; }
.jpg-result h2 { margin-top: 10px; font-size: 20px; }
.jpg-result p { margin-top: 6px; color: var(--jpg-text-2); font-size: 14px; }
.jpg-result .jpg-btn { margin-top: 14px; }

/* 12. FOOTER =============================================================== */
.jpg-footer { background: #041b47; color: rgba(255, 255, 255, 0.8); font-size: 14px; }
.jpg-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 32px; }
.jpg-footer__logo { display: inline-block; padding: 8px 12px; background: var(--jpg-white); border-radius: 10px; }
.jpg-footer__logo img { display: block; height: 38px; width: auto; }
.jpg-footer__about { margin-top: 14px; max-width: 340px; }
.jpg-footer h2 { font-size: 15px; color: var(--jpg-white); margin-bottom: 14px; }
.jpg-footer ul { list-style: none; display: grid; gap: 9px; }
.jpg-footer a:hover { color: var(--jpg-white); text-decoration: underline; }
.jpg-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.jpg-footer__contact .jpg-icon { margin-top: 3px; color: var(--jpg-cyan); font-size: 16px; }
.jpg-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.jpg-footer__bottom .jpg-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 16px; padding-bottom: 18px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.jpg-footer__bottom a { color: rgba(255, 255, 255, 0.75); }
.jpg-wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--jpg-green); color: var(--jpg-white);
  font-size: 28px; box-shadow: 0 10px 24px rgba(8, 184, 107, 0.45);
}
.jpg-wa-float:hover { background: var(--jpg-green-600); }

/* 13. RESPONSIVE =========================================================== */
@media (max-width: 1499px) {
  .jpg-hcontact:nth-of-type(2) .jpg-hcontact__text { display: none; }
  .jpg-why__inner { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 1279px) {
  :root { --jpg-gutter: 20px; }
  .jpg-header__inner, .jpg-header__panel { gap: 12px; }
  .jpg-nav__link { padding: 8px 8px; font-size: 13.5px; }
  .jpg-nav__link.is-active { padding: 8px 14px; }
  .jpg-hcontact:nth-of-type(2) .jpg-hcontact__text { display: none; }
  .jpg-hero__inner { grid-template-columns: minmax(0, 430px) minmax(0, 1fr) 350px; }
  .jpg-hero__title { font-size: 44px; }
  .jpg-hero__perk-text { font-size: 12.5px; }
  .jpg-why__inner { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 1399px) {
  .jpg-hcontact:first-child .jpg-hcontact__text { display: none; }
  .jpg-header__actions > .jpg-header__sep:first-of-type { display: none; }
}
/* Hamburger menu */
@media (max-width: 1199px) {
  :root { --jpg-header-h: 66px; }
  .jpg-header__inner { flex-wrap: wrap; gap: 12px; }
  .jpg-logo { margin-right: auto; }
  .jpg-logo__img { height: 40px; }
  .jpg-nav-toggle, .jpg-header__call-mobile {
    display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0;
    border-radius: 10px; border: 1px solid var(--jpg-border); background: var(--jpg-white); color: var(--jpg-navy); font-size: 22px; cursor: pointer;
  }
  .jpg-header__call-mobile { background: var(--jpg-blue); border-color: var(--jpg-blue); color: var(--jpg-white); font-size: 19px; }
  .jpg-nav-toggle__close { display: none; }
  .jpg-header.is-open .jpg-nav-toggle__open { display: none; }
  .jpg-header.is-open .jpg-nav-toggle__close { display: inline-block; }
  .jpg-header__panel { display: none; flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 14px; padding: 6px 0 18px; border-top: 1px solid var(--jpg-border); }
  .jpg-header.is-open .jpg-header__panel { display: flex; }
  .jpg-nav { justify-content: stretch; }
  .jpg-nav__list { flex-direction: column; align-items: stretch; width: 100%; }
  .jpg-nav__link, .jpg-nav__link.is-active { padding: 12px 14px; font-size: 15px; }
  .jpg-header__actions { flex-wrap: wrap; gap: 14px; }
  .jpg-hcontact .jpg-hcontact__text, .jpg-hcontact:first-child .jpg-hcontact__text, .jpg-hcontact:nth-of-type(2) .jpg-hcontact__text { display: flex; }
  .jpg-header__sep { display: none; }

}
@media (max-width: 1023px) {
  .jpg-hero__inner { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "content form" "visual form"; gap: 20px 28px; min-height: 0; }
  .jpg-hero__content { grid-area: content; }
  .jpg-hero__visual { grid-area: visual; }
  .jpg-hero .jpg-quote { grid-area: form; align-self: center; }
  .jpg-hero__vehicles { min-height: 210px; }
  .jpg-hero__slogan { margin-left: 30%; font-size: 26px; }
  .jpg-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jpg-protect__inner { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
  .jpg-support { grid-column: 1 / -1; }

  .jpg-page-hero__inner, .jpg-page-hero--simple .jpg-page-hero__inner { grid-template-columns: 1fr; gap: 26px; }
  .jpg-page-hero .jpg-quote { max-width: 520px; width: 100%; }
  .jpg-page-hero__art { display: none; }
  .jpg-cards--4, .jpg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jpg-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jpg-contact-grid, .jpg-split { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 860px) {
  .jpg-hero__inner { grid-template-columns: 1fr; grid-template-areas: "content" "visual" "form"; }
  .jpg-hero__content { text-align: center; }
  .jpg-hero__tagline { justify-content: center; }
  .jpg-hero__perks { max-width: 560px; margin-left: auto; margin-right: auto; }
  .jpg-hero__perk { align-items: center; text-align: center; padding: 0 6px; }
  .jpg-hero__visual { max-width: 620px; width: 100%; margin: 0 auto; }
  .jpg-hero__slogan { margin-left: 0; }
  .jpg-hero .jpg-quote { width: 100%; max-width: 480px; margin: 0 auto; }
  .jpg-why__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jpg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --jpg-gutter: 16px; --jpg-field-h: 48px; }
  body.jpg-site { font-size: 14.5px; }
  .jpg-logo__img { height: 36px; }
  .jpg-section { padding: 40px 0; }
  .jpg-section__title { font-size: 24px; }
  .jpg-hero__inner { padding-top: 24px; padding-bottom: 26px; }
  .jpg-hero__title { font-size: 34px; letter-spacing: -0.5px; }
  .jpg-hero__tagline { font-size: 17px; gap: 10px; margin-top: 10px; }
  .jpg-hero__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; margin-top: 20px; }
  .jpg-hero__perk { border-right: 0; flex-direction: row; text-align: left; justify-content: flex-start; }
  .jpg-hero__perk-icon { width: 36px; height: 36px; font-size: 17px; }
  .jpg-hero__slogan { font-size: 23px; }
  .jpg-hero__vehicles { min-height: 160px; }
  .jpg-quote__form { padding: 20px 16px; }
  .jpg-field__control { font-size: 16px; } /* prevents iOS zoom on focus */
  .jpg-form-row { grid-template-columns: 1fr; }
  .jpg-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jpg-pcard { min-height: 158px; padding: 13px 12px 12px; }
  .jpg-pcard__title { font-size: 14px; }
  .jpg-pcard__visual { width: 54px; height: 54px; font-size: 28px; }
  .jpg-products__note { justify-content: flex-start; }
  .jpg-why__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; padding: 12px 6px; }
  .jpg-fact { justify-content: flex-start; }
  .jpg-fact:nth-child(2) { border-right: 0; }
  .jpg-carousel__arrow { display: none; }
  .jpg-carousel { margin-left: calc(-1 * var(--jpg-gutter)); margin-right: calc(-1 * var(--jpg-gutter)); }
  .jpg-carousel__track { padding: 2px var(--jpg-gutter); scroll-padding: 0 var(--jpg-gutter); }
  .jpg-partner { flex-basis: 140px; height: 58px; }
  .jpg-protect__inner { grid-template-columns: 1fr; }
  .jpg-protect__media { min-height: 190px; }
  .jpg-protect__content { padding: 20px 16px; text-align: center; }
  .jpg-protect__title { font-size: 21px; }
  .jpg-protect__cats { flex-wrap: wrap; row-gap: 14px; }
  .jpg-protect__cats li { flex: 0 0 33.333%; }
  .jpg-protect__cats li:nth-child(3) { border-right: 0; }
  .jpg-support__body { padding: 18px 0 18px 18px; }
  .jpg-page-hero__inner { padding-top: 26px; padding-bottom: 30px; }
  .jpg-page-hero__title { font-size: 30px; }
  .jpg-ticks { grid-template-columns: 1fr; }
  .jpg-cards, .jpg-cards--4, .jpg-steps { grid-template-columns: 1fr; }
  .jpg-cta { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .jpg-footer__top { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; }
  .jpg-panel { padding: 20px 16px; }
}
@media (max-width: 380px) {
  .jpg-hero__title { font-size: 30px; }
  .jpg-support__art { display: none; }
  .jpg-support__body { padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .jpg-site *, .jpg-site *::before, .jpg-site *::after { transition: none !important; scroll-behavior: auto !important; }
}