/*
Theme Name: Jackson Moving & Storage Theme
Theme URI: https://jacksonmovingandstoragetn.com/
Description: Custom child theme of Astra for Jackson Moving & Storage (Jackson, TN). Add all customizations here so they are preserved when the parent Astra theme updates.
Author: Jackson Moving & Storage
Author URI: https://jacksonmovingandstoragetn.com/
Template: astra
Version: 1.38.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jms-moving
Tags: custom-colors, custom-menu, custom-logo, translation-ready
*/

/* ============================================================
   Jackson Moving & Storage custom mobile-first CSS
   Palette:
     navy #313b8d · red #ef2728 · yellow #fcf696
   ============================================================ */

:root {
  --jms-navy: #313b8d;
  --jms-navy-dark: #252e71;
  --jms-red: #ef2728;
  --jms-red-hover: #e31010;
  --jms-blue: #89c9ef;
  --jms-amber: #fce396;
  --jms-yellow: #fcf696;
  --jms-bg: #F3F3F3;
  --jms-border: #E2E8F0;
  --jms-text: #2B2F38;
  --jms-muted: #6B7280;
  --jms-radius: 12px;
  --jms-gold: #ffc320;
  --jms-green: #15cd59;
  --jms-shadow-sm: 0 1px 2px rgba(49, 59, 141, .08);
  --jms-shadow: 0 8px 24px rgba(49, 59, 141, .12);
  --jms-focus: 0 0 0 3px rgba(49, 59, 141, .35);
  --jms-h1-hero: clamp(2.5rem, 6vw, 3.25rem);
  --jms-h1: clamp(2.4rem, 5vw, 2.875rem);
  --jms-h2: clamp(1.75rem, 3vw, 2rem);
  --jms-h3: 1.375rem;
  --jms-h3-sm: 1.25rem;
  --jms-h4: 1.125rem;
}

/* --- Typography --- */
body,
button,
input,
select,
textarea {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--jms-text);
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 900;
  color: var(--jms-navy);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.entry-content h1 { font-size: var(--jms-h1); }
.entry-content h2 { font-size: var(--jms-h2); }
.entry-content h3 { font-size: var(--jms-h3); }
.entry-content h4 { font-size: var(--jms-h4); }

/* --- Base --- */
.entry-content a {
  color: var(--jms-navy);
  font-weight: 600;
  text-decoration: none;
}
.entry-content a:hover {
  color: var(--jms-red);
}
.jms-section {
  margin: 1.75rem 0;
}
.jms-section h2 {
  font-size: var(--jms-h2);
  color: var(--jms-navy);
  margin-top: 0;
}
.jms-section h3 {
  color: var(--jms-navy);
  font-size: var(--jms-h3);
}
.jms-section h4 {
  font-size: var(--jms-h4);
}

/* --- Buttons --- */
.jms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.4rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.jms-btn:hover,
.jms-btn:focus {
  text-decoration: none;
  opacity: .95;
  transform: translateY(-1px);
}
.jms-btn-primary {
  background: var(--jms-yellow);
  color: #000 !important;
  border-color: var(--jms-yellow);
}
.jms-btn-primary:hover {
  background: var(--jms-amber);
  border-color: var(--jms-amber);
}
.jms-btn-red {
  background: var(--jms-red);
  color: #fff !important;
  border-color: var(--jms-red);
}
.jms-btn-red:hover {
  background: var(--jms-red-hover);
  border-color: var(--jms-red-hover);
}
.jms-btn-white {
  background: #fff;
  color: var(--jms-navy) !important;
  border-color: #fff;
}
.jms-btn-white:hover {
  color: var(--jms-blue) !important;
}
.jms-btn-blue {
  background: var(--jms-navy);
  color: #fff !important;
  border-color: var(--jms-navy);
}
.jms-btn-ghost {
  background: transparent;
  color: var(--jms-navy) !important;
  border-color: var(--jms-navy);
}
.jms-btn-ghost.on-dark {
  color: #fff !important;
  border-color: #fff;
}
.jms-btn-block {
  width: 100%;
}

/* --- Breadcrumbs --- */
.jms-breadcrumbs {
  font-size: .875rem;
  color: var(--jms-muted);
  margin: 0 0 1rem;
}
.jms-breadcrumbs a {
  color: var(--jms-muted);
  text-decoration: none;
}
.jms-breadcrumbs a:hover {
  color: var(--jms-red);
}
.jms-sep {
  margin: 0 .4rem;
  color: var(--jms-muted);
}

/* --- Hero --- */
.jms-hero {
  background-color: #252e71;
  background-image: linear-gradient(rgba(37, 46, 113, .49), rgba(37, 46, 113, .54)), url('https://jacksonmovingandstoragetn.com/wp-content/uploads/2026/09/jackson-hero.webp?ver=1.38.3');
  background-size: cover;
  background-position: center;
  color: #fff;
  border-radius: 24px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .jms-hero {
    /* The hero stacks tall on phones; show the truck photo as a full-width
       banner (no horizontal crop) instead of over-zooming it with cover. */
    background-size: 100% 100%, 100% auto;
    background-repeat: no-repeat;
    background-position: 0 0, top center;
  }
}
.jms-hero-inner {
  padding: 2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.jms-hero-copy {
  text-align: center;
}
.jms-hero-kicker {
  display: inline-block;
  background: var(--jms-yellow);
  color: #000;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 8px;
  margin-bottom: .9rem;
}
.jms-hero h1 {
  color: #fff;
  font-size: var(--jms-h1-hero);
  line-height: 1.05;
  margin: 0 0 .75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.jms-hero-sub {
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 1.5rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.jms-hero-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.jms-hero-actions .jms-btn {
  width: 100%;
}

/* --- Hero bottom action bar (section anchors + CTAs) --- */
.jms-hero-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  background: var(--jms-navy);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 1rem 1.25rem 1.25rem;
}
.jms-hero-bar .jms-hero-actions {
  width: 100%;
}
.jms-hero-bar .jms-hero-toc {
  margin-top: 0;
}
@media (min-width: 900px) {
  .jms-hero-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
  }
  .jms-hero-bar .jms-hero-actions {
    width: auto;
    order: 2;
    justify-content: flex-end;
  }
  .jms-hero-bar .jms-hero-toc {
    order: 1;
    justify-content: flex-start;
  }
}

/* --- Hero quote form card (glassy, matches simplemoving.us) --- */
.jms-hero-form {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
  text-align: left;
}
.jms-hero-form h3 {
  color: #fff;
  font-size: var(--jms-h3);
  margin: 0 0 .25rem;
}
.jms-hero-form-sub {
  color: #D7DBF0;
  font-size: .95rem;
  margin: 0 0 1rem;
}
.jms-hero-form .jms-field {
  margin-bottom: .75rem;
}
.jms-hero-form .jms-field label {
  color: #fff;
}
.jms-hero-form .jms-form-note {
  color: #C7CCE6;
  margin-top: .6rem;
}

/* --- Trust strip --- */
.jms-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1rem 0 1.5rem;
}
.jms-trust-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--jms-border);
  color: var(--jms-navy);
  font-weight: 600;
  font-size: .875rem;
  padding: .5rem .85rem;
  border-radius: 999px;
}
.jms-trust-item::before {
  content: "\2713";
  color: var(--jms-red);
  font-weight: 800;
}

/* --- Cards / grid --- */
.jms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}
.jms-card {
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.4rem;
  box-shadow: 0 1px 2px rgba(20, 24, 82, .04);
}
.jms-card h3 {
  margin-top: 0;
  font-size: var(--jms-h3);
}
.jms-card p:last-child {
  margin-bottom: 0;
}
.jms-card a {
  color: var(--jms-red);
  font-weight: 700;
  text-decoration: none;
}
.jms-card a:hover {
  text-decoration: underline;
}

/* --- Colored icon badges --- */
.jms-badge {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
}
.jms-badge svg {
  width: 22px;
  height: 22px;
}
.jms-badge-red {
  background: var(--jms-red);
  color: #fff;
}
.jms-badge-navy {
  background: var(--jms-navy);
  color: #fff;
}
.jms-badge-blue {
  background: #FDE3CC;
  color: #9A4A0B;
}
.jms-badge-amber {
  background: #FDE3CC;
  color: #9A4A0B;
}

/* --- Process steps --- */
.jms-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.25rem 0;
}
.jms-step {
  display: flex;
  gap: .9rem;
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1rem;
}
.jms-step-icon {
  flex: 0 0 2.75rem;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 12px;
  background: rgba(8, 47, 86, 0.08);
  color: var(--jms-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.jms-step-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}
.jms-step h3 {
  margin: 0 0 .25rem;
  font-size: var(--jms-h3-sm);
}
.jms-step p {
  margin: 0;
  color: var(--jms-muted);
}

/* --- CTA block --- */
.jms-cta {
  background: linear-gradient(135deg, #313b8d 0%, #252e71 100%);
  color: #fff;
  border-radius: 24px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  margin: 1.5rem 0;
}
.jms-cta h2 {
  color: #fff;
  margin-top: 0;
  font-size: var(--jms-h2);
}
.jms-cta p {
  color: #D7DBF0;
}
.jms-cta-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1rem;
}
.jms-cta-actions .jms-btn {
  width: 100%;
}

/* --- Checklist --- */
.jms-list-check {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.jms-list-check li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
}
.jms-list-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--jms-red);
  font-weight: 800;
}

/* --- NAP block --- */
.jms-nap {
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.25rem;
  margin: 1rem 0;
}
.jms-nap p {
  margin: .4rem 0;
}
.jms-nap svg {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  color: var(--jms-navy);
  flex-shrink: 0;
}

/* --- Accordion (FAQ) --- */
.jms-accordion {
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  overflow: hidden;
  margin: 1rem 0;
  background: #fff;
}
.jms-accordion details {
  border-bottom: 1px solid var(--jms-border);
}
.jms-accordion details:last-child {
  border-bottom: 0;
}
.jms-accordion summary {
  cursor: pointer;
  padding: 1rem 2.5rem 1rem 1.1rem;
  font-weight: 700;
  color: var(--jms-navy);
  list-style: none;
  position: relative;
}
.jms-accordion summary::-webkit-details-marker {
  display: none;
}
.jms-accordion summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--jms-red);
}
.jms-accordion details[open] summary::after {
  content: "\2013";
}
.jms-acc-body {
  padding: 0 1.1rem 1.1rem;
  color: var(--jms-muted);
}

/* --- Form spoiler (optional details toggle) --- */
.jms-form-spoiler {
  border: 1px dashed var(--jms-border);
  border-radius: 12px;
  background: #F8FAFC;
  margin: 1rem 0;
}
.jms-form-spoiler summary {
  cursor: pointer;
  padding: .8rem 2.4rem .8rem 1rem;
  font-weight: 700;
  color: var(--jms-navy);
  list-style: none;
  position: relative;
  font-size: .95rem;
}
.jms-form-spoiler summary::-webkit-details-marker {
  display: none;
}
.jms-form-spoiler summary::after {
  content: "+";
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--jms-red);
}
.jms-form-spoiler[open] summary::after {
  content: "\2013";
}
.jms-form-spoiler-body {
  padding: 0 1rem 1rem;
}
.jms-hero-form .jms-form-spoiler {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .25);
}
.jms-hero-form .jms-form-spoiler summary {
  color: #fff;
}
.jms-hero-form .jms-form-spoiler summary::after {
  color: var(--jms-yellow);
}

/* --- Forms --- */
.jms-quote-form {
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.25rem;
  margin: 1.25rem 0;
}
.jms-field {
  margin-bottom: 1rem;
}
.jms-field label {
  display: block;
  font-weight: 700;
  margin-bottom: .3rem;
  color: var(--jms-navy);
}
.jms-field input,
.jms-field select,
.jms-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: .8rem;
  border: 1px solid var(--jms-border);
  border-radius: .6rem;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--jms-text);
}
.jms-field input:focus,
.jms-field select:focus,
.jms-field textarea:focus {
  outline: 2px solid var(--jms-blue);
  border-color: var(--jms-blue);
}
.jms-field input,
.jms-field select {
  height: 2.9rem;
}
.jms-field textarea {
  min-height: 90px;
}
.jms-form-step {
  display: none;
}
.jms-form-step.active {
  display: block;
}
.jms-form-nav {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
}
.jms-form-nav .jms-btn {
  min-height: 44px;
  padding: .6rem 1.1rem;
}
.jms-honeypot {
  position: absolute;
  left: -9999px;
}
.jms-form-note {
  font-size: .875rem;
  color: var(--jms-muted);
  margin-top: .75rem;
}
.jms-form-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  border-radius: var(--jms-radius);
  padding: 1rem;
  margin: 1rem 0;
  font-weight: 600;
}
.jms-form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: var(--jms-radius);
  padding: 1rem;
  margin: 1rem 0;
  font-weight: 600;
}

/* --- Pricing table --- */
.jms-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .95rem;
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 12px;
  overflow: hidden;
}
.jms-table th,
.jms-table td {
  text-align: left;
  padding: .8rem .75rem;
  border-bottom: 1px solid var(--jms-border);
  vertical-align: top;
}
.jms-table th {
  background: var(--jms-navy);
  color: #fff;
}
.jms-table tr:last-child td {
  border-bottom: 0;
}

/* --- Reviews --- */
.jms-review {
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;
}
.jms-review-stars {
  color: var(--jms-gold);
  font-size: 1.15rem;
  letter-spacing: 2px;
}
.jms-review p {
  color: var(--jms-text);
  margin: 0;
}
.jms-review-author {
  font-weight: 700;
  color: var(--jms-navy);
  margin-top: auto;
}
.jms-review-date {
  color: var(--jms-muted);
  font-size: .78rem;
  margin-top: .12rem;
}
.jms-review-type {
  align-self: flex-start;
  background: #E7F0F8;
  color: var(--jms-navy);
  font-size: .8rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 999px;
}
.jms-review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  flex-shrink: 0;
}
.jms-review-tag {
  display: inline-block;
  background: #F3F4F6;
  color: #374151;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .28rem .55rem;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
}

/* Reviews page: equal-height cells + overlay spoiler.
   The cell keeps a fixed slot in the grid. The card itself expands
   absolutely on hover/open so neighbors do not grow or reflow.
   Footer (Read more / Show less + type badge) stays below the text:
   the body scrolls inside the overlay, it never paints over the footer. */
.jms-reviews-grid {
  align-items: stretch;
  overflow: visible;
}
.jms-review-cell {
  position: relative;
  height: 23.5rem;
  min-width: 0;
  z-index: 1;
}
.jms-review-cell.is-clipped.is-open,
.jms-review-cell.is-clipped:focus-within {
  z-index: 20;
}
.jms-reviews-grid > .jms-review-cell > .jms-review {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.jms-reviews-grid .jms-review-head {
  flex-shrink: 0;
}
.jms-reviews-grid .jms-review-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 7.35em;
  overflow: hidden;
  position: relative;
}
.jms-reviews-grid .jms-review-body > p + p {
  margin-top: .6rem;
}
.jms-reviews-grid .jms-review-cell.is-clipped .jms-review-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.4em;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 78%);
  pointer-events: none;
}
button.jms-review-toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin: 0;
  padding: .1rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--jms-navy);
  font-family: inherit;
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.2;
  cursor: pointer;
  min-height: 1.2rem;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
button.jms-review-toggle:hover,
button.jms-review-toggle:focus,
button.jms-review-toggle:focus-visible,
button.jms-review-toggle:active {
  color: var(--jms-gold);
  background: transparent;
  background-color: transparent;
  border: 0;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
button.jms-review-toggle:focus-visible {
  box-shadow: var(--jms-focus);
}
.jms-review-toggle-less { display: none; }
.jms-review-cell:not(.is-clipped) .jms-review-toggle {
  visibility: hidden;
  pointer-events: none;
}
.jms-reviews-grid .jms-review-type {
  margin-top: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.jms-review-cell.is-clipped.is-open > .jms-review,
.jms-review-cell.is-clipped:focus-within > .jms-review {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: min(70vh, 32rem);
  overflow: hidden;
  box-shadow: var(--jms-shadow);
}
.jms-review-cell.is-clipped.is-open .jms-review-body,
.jms-review-cell.is-clipped:focus-within .jms-review-body {
  max-height: none;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.jms-review-cell.is-clipped.is-open .jms-review-body::after,
.jms-review-cell.is-clipped:focus-within .jms-review-body::after {
  display: none;
}
.jms-review-cell.is-clipped.is-open .jms-review-toggle-more,
.jms-review-cell.is-clipped:focus-within .jms-review-toggle-more {
  display: none;
}
.jms-review-cell.is-clipped.is-open .jms-review-toggle-less,
.jms-review-cell.is-clipped:focus-within .jms-review-toggle-less {
  display: inline;
}
.jms-review-cell.is-clipped.is-open .jms-review-toggle,
.jms-review-cell.is-clipped:focus-within .jms-review-toggle {
  visibility: visible;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .jms-review-cell.is-clipped:hover {
    z-index: 20;
  }
  .jms-review-cell.is-clipped:hover > .jms-review {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    max-height: min(70vh, 32rem);
    overflow: hidden;
    box-shadow: var(--jms-shadow);
  }
  .jms-review-cell.is-clipped:hover .jms-review-body {
    max-height: none;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  .jms-review-cell.is-clipped:hover .jms-review-body::after { display: none; }
  .jms-review-cell.is-clipped:hover .jms-review-toggle-more { display: none; }
  .jms-review-cell.is-clipped:hover .jms-review-toggle-less { display: inline; }
  .jms-review-cell.is-clipped:hover .jms-review-toggle {
    visibility: visible;
    pointer-events: auto;
  }
}

@media (min-width: 768px) {
  .jms-reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .jms-review-cell { height: 24rem; }
}
@media (min-width: 1024px) {
  .jms-reviews-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .jms-review-cell.is-clipped.is-open > .jms-review,
  .jms-review-cell.is-clipped:hover > .jms-review {
    transition: none;
  }
}


/* --- Review marquee (auto-scroll, same pattern as Recent Moves) --- */
.jms-review-marquee {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  margin: 1.5rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.jms-review-marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  animation: jms-marquee 46s linear infinite;
}
.jms-review-marquee:hover .jms-review-marquee-track { animation-play-state: paused; }
.jms-review-marquee-item {
  flex: 0 0 auto;
  width: clamp(280px, 80vw, 360px);
  display: flex;
}
.jms-review-marquee-item .jms-review {
  width: 100%;
}

/* --- Sticky mobile call bar --- */
.jms-sticky-call {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
}
.jms-sticky-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
}
.jms-sticky-call-phone {
  background: var(--jms-red);
  color: #fff;
}
.jms-sticky-quote {
  background: var(--jms-navy);
  color: #fff;
}

/* --- Menu CTA button (compact pill, matches the hero "Call" button) ---
   Separate the CTA from the nav links and center it vertically in the header. */
.main-header-menu > .jms-menu-cta {
  display: flex;
  align-items: center;
  margin-left: .75rem;
}
.main-header-menu .jms-menu-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Astra stretches every .menu-link to height:100% (full 80px header bar);
     the pill exposes that stretch, so reset it to content height. */
  height: auto !important;
  min-height: 0 !important;
  background: var(--jms-yellow);
  color: #000 !important;
  border: 2px solid var(--jms-yellow);
  border-radius: 12px;
  padding: .55rem 1.1rem !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1 !important;
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.main-header-menu .jms-menu-cta a:hover,
.main-header-menu .jms-menu-cta a:focus {
  background: var(--jms-amber);
  border-color: var(--jms-amber);
  color: #000 !important;
  transform: translateY(-1px);
}

/* Non-clickable dropdown parent ("Company" groups secondary pages).
   Keep the caret/arrow toggle clickable so the submenu still opens. */
.jms-menu-parent > a {
  cursor: default;
  pointer-events: none;
}
.jms-menu-parent > a .dropdown-menu-toggle {
  pointer-events: auto;
  cursor: pointer;
}

/* --- Header navigation (match reference: Satoshi, uppercase) --- */
.main-header-menu .menu-link {
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--jms-navy);
}
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
  color: var(--jms-red);
}

/* ============================================================
   Custom footer
   ============================================================ */
.site-footer {
  display: none; /* hide Astra's default footer bar */
}
.jms-footer {
  background: var(--jms-navy-dark);
  color: #fff;
  margin-top: 3rem;
}
.jms-footer a {
  color: #D7DBF0;
  text-decoration: none;
}
.jms-footer a:hover {
  color: #fff;
}
.jms-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.jms-footer h4 {
  color: #fff;
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 800;
}
.jms-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jms-footer li {
  margin-bottom: .5rem;
  font-size: .95rem;
}
.jms-footer-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .5rem;
}
.jms-footer-logo-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
}
.jms-footer-brand p {
  color: #C7CCE6;
  margin: 0 0 1.1rem;
}
.jms-footer-brand .jms-btn {
  min-height: 44px;
  font-size: .95rem;
}
.jms-footer-contact {
  color: #C7CCE6;
}
.jms-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 1.1rem 1.25rem;
  text-align: center;
  color: #C7CCE6;
  font-size: .875rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: center;
}
.jms-footer-bottom a {
  color: #C7CCE6;
}
.jms-footer-bottom a:hover {
  color: #fff;
}
.jms-footer-dot {
  margin: 0 .4rem;
  color: rgba(255, 255, 255, .4);
}

/* --- Direction route tabs --- */
.jms-tabs {
  margin: 1rem 0;
}
.jms-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.jms-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.jms-routes-label {
  font-weight: 700;
  color: var(--jms-navy);
}
.jms-tabs-nav label {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1rem;
  border: 1px solid var(--jms-border);
  border-radius: 999px;
  background: #fff;
  color: var(--jms-navy);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.jms-tabs-nav label:hover {
  border-color: var(--jms-navy);
}
.jms-tab-panel {
  display: none;
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.4rem;
}
.jms-tab-panel h3 {
  margin-top: 0;
  font-size: var(--jms-h3);
}
.jms-tab-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .6rem;
}
.jms-tab-meta span {
  background: #FDE3CC;
  color: #9A4A0B;
  font-size: .8rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: 999px;
}
.jms-tab-panel p:last-child {
  margin-bottom: 0;
}

#jms-route-littlerock:checked ~ .jms-tabs-nav label[for="jms-route-littlerock"],
#jms-route-benton:checked ~ .jms-tabs-nav label[for="jms-route-benton"],
#jms-route-village:checked ~ .jms-tabs-nav label[for="jms-route-village"],
#jms-route-malvern:checked ~ .jms-tabs-nav label[for="jms-route-malvern"],
#jms-route-arkadelphia:checked ~ .jms-tabs-nav label[for="jms-route-arkadelphia"],
#jms-route-conway:checked ~ .jms-tabs-nav label[for="jms-route-conway"] {
  background: var(--jms-navy);
  color: #fff;
  border-color: var(--jms-navy);
}
#jms-route-littlerock:checked ~ .jms-tabs-panels #panel-route-littlerock,
#jms-route-benton:checked ~ .jms-tabs-panels #panel-route-benton,
#jms-route-village:checked ~ .jms-tabs-panels #panel-route-village,
#jms-route-malvern:checked ~ .jms-tabs-panels #panel-route-malvern,
#jms-route-arkadelphia:checked ~ .jms-tabs-panels #panel-route-arkadelphia,
#jms-route-conway:checked ~ .jms-tabs-panels #panel-route-conway {
  display: block;
}

/* ============================================================
   Micro-UI components (topbar, stats, rating, chips, tags,
   segmented control, pricing cards, tooltips, dots, avatars,
   photo placeholders, progress, icons)
   ============================================================ */

/* --- Topbar --- */
.jms-topbar {
  background: var(--jms-navy-dark);
  color: #C7CCE6;
  font-size: .875rem;
}
.jms-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .5rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  align-items: center;
  justify-content: center;
}
.jms-topbar a {
  color: #fff;
  text-decoration: none;
}
.jms-topbar a:hover {
  color: var(--jms-yellow);
}
.jms-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.jms-topbar svg {
  width: 1em;
  height: 1em;
  flex: none;
  color: var(--jms-yellow);
}
.jms-topbar-stars {
  color: var(--jms-gold);
  letter-spacing: 1px;
}
.jms-topbar-divider {
  color: rgba(255, 255, 255, .35);
}

/* --- Stats counters --- */
.jms-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
.jms-stat {
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.25rem 1rem;
  text-align: center;
}
.jms-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--jms-navy);
  line-height: 1;
}
.jms-stat-num .accent {
  color: var(--jms-blue);
}
.jms-stat-label {
  color: var(--jms-muted);
  font-size: .9rem;
  margin-top: .4rem;
}

/* --- Rating summary --- */
.jms-rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
}
.jms-rating-big {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--jms-navy);
  line-height: 1;
}
.jms-rating-stars {
  color: var(--jms-gold);
  font-size: 1.25rem;
  letter-spacing: 2px;
}
.jms-rating-meta {
  color: var(--jms-muted);
  font-size: .9rem;
}

/* --- Inline rating strip (home page social proof) --- */
.jms-rating-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .75rem;
  margin: 1.25rem 0;
  font-size: .92rem;
}
.jms-rating-inline .jms-rating-stars {
  color: var(--jms-gold);
  font-size: 1.15rem;
  letter-spacing: 2px;
  line-height: 1;
}
.jms-rating-inline .jms-rating-line {
  color: var(--jms-muted);
}

/* --- Filter chips --- */
.jms-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}
.jms-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  border: 1px solid var(--jms-border);
  border-radius: 999px;
  background: #fff;
  color: var(--jms-navy);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.jms-chip:hover {
  border-color: var(--jms-navy);
}
.jms-chip.active,
.jms-chip[aria-current="true"] {
  background: var(--jms-navy);
  color: #fff;
  border-color: var(--jms-navy);
}

/* --- Tags / badges --- */
.jms-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
}
.jms-tag-red { background: #FDE5E5; color: #e31010; }
.jms-tag-navy { background: #E7F0F8; color: var(--jms-navy); }
.jms-tag-orange { background: #FDE3CC; color: #9A4A0B; }
.jms-tag-gold { background: #FEF3CD; color: #92600A; }
.jms-tag-green { background: #DCFCE7; color: #166534; }
.jms-tag-outline { background: transparent; border: 1px solid var(--jms-border); color: var(--jms-muted); }

/* --- Segmented control (pricing switch) --- */
.jms-segmented { margin: 1rem 0; }
.jms-seg-input { position: absolute; opacity: 0; pointer-events: none; }
.jms-seg-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  background: #E9EDF3;
  padding: .3rem;
  border-radius: 999px;
}
.jms-seg-nav label {
  padding: .5rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--jms-navy);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.jms-seg-nav label:hover { background: #DDE4EE; }
#jms-pkg-hourly:checked ~ .jms-seg-nav label[for="jms-pkg-hourly"],
#jms-pkg-flat:checked ~ .jms-seg-nav label[for="jms-pkg-flat"],
#jms-pkg-commercial:checked ~ .jms-seg-nav label[for="jms-pkg-commercial"] {
  background: var(--jms-navy);
  color: #fff;
}
.jms-price-panels { margin-top: 1rem; }
.jms-price-panel.jms-price-cards { display: none; }
#jms-pkg-hourly:checked ~ .jms-price-panels #panel-pkg-hourly,
#jms-pkg-flat:checked ~ .jms-price-panels #panel-pkg-flat,
#jms-pkg-commercial:checked ~ .jms-price-panels #panel-pkg-commercial {
  display: grid;
}

/* --- Pricing cards --- */
.jms-price-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1rem 0;
  align-items: stretch;
}
.jms-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.5rem;
}
.jms-price-card.popular {
  border-color: var(--jms-blue);
  box-shadow: var(--jms-shadow);
}
.jms-price-flag {
  position: absolute;
  top: -12px;
  left: 1.25rem;
  background: var(--jms-blue);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  padding: .25rem .7rem;
  border-radius: 999px;
}
.jms-price-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--jms-navy);
  margin: 0 0 .25rem;
}
.jms-price-desc {
  color: var(--jms-muted);
  font-size: .9rem;
  margin: 0 0 1rem;
}
.jms-price-amount {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: .25rem;
}
.jms-price-amount strong {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--jms-navy);
  line-height: 1;
}
.jms-price-amount span {
  color: var(--jms-muted);
  font-size: .9rem;
}
.jms-price-notes {
  font-size: .85rem;
  color: var(--jms-muted);
  margin: 0 0 1rem;
}
.jms-price-card ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  flex: 1;
}
.jms-price-card li {
  padding: .35rem 0 .35rem 1.6rem;
  position: relative;
  font-size: .95rem;
}
.jms-price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--jms-blue);
  font-weight: 800;
}
.jms-price-card .jms-btn { margin-top: auto; }
.jms-price-panel.jms-price-cards {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Tooltip --- */
.jms-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: help;
  color: var(--jms-navy);
  font-weight: 700;
  border-bottom: 1px dashed var(--jms-muted);
}
.jms-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--jms-navy);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: .45rem .65rem;
  border-radius: 8px;
  width: max-content;
  max-width: 260px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 10;
}
.jms-tip:hover::after,
.jms-tip:focus::after {
  opacity: 1;
}

/* --- Carousel dots --- */
.jms-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 1rem 0;
}
.jms-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #D5DBE3;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.jms-dot.active {
  background: var(--jms-blue);
  width: 26px;
}

/* --- Avatar (photo) --- */
.jms-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--jms-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  flex: none;
  object-fit: cover;
  object-position: center;
}
.jms-avatar.orange { background: var(--jms-blue); }
.jms-review-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.jms-review-head .jms-review-author { margin-top: 0; }

/* --- Photo placeholder --- */
.jms-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #EDF1F7;
  border: 2px dashed #C7D2E2;
  border-radius: 16px;
  color: var(--jms-muted);
  font-size: .85rem;
  text-align: center;
  padding: 1rem;
  overflow: hidden;
}
.jms-photo svg { width: 32px; height: 32px; color: #9FB0C6; }
.jms-photo.ratio-square { aspect-ratio: 1 / 1; }
.jms-photo.ratio-wide { aspect-ratio: 21 / 9; }
.jms-photo-label { font-weight: 700; color: #5B6B81; }

/* --- Progress / stepper --- */
.jms-progress {
  display: flex;
  gap: .75rem;
  margin: 1rem 0;
}
.jms-progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--jms-muted);
}
.jms-progress-bar {
  height: 6px;
  width: 100%;
  background: #E9EDF3;
  border-radius: 999px;
  overflow: hidden;
}
.jms-progress-bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--jms-blue);
  border-radius: 999px;
}
.jms-progress-step.done { color: var(--jms-navy); }
.jms-progress-step.done .jms-progress-bar > span { background: var(--jms-navy); width: 100%; }
.jms-progress-step.current { color: var(--jms-navy); }
.jms-progress-step.current .jms-progress-bar > span { width: 60%; }

/* --- Button focus + icon --- */
.jms-btn:focus-visible {
  outline: none;
  box-shadow: var(--jms-focus);
}
.jms-btn svg { width: 1.05em; height: 1.05em; flex: none; }
.jms-btn .jms-btn-arrow { transition: transform .15s ease; }
.jms-btn:hover .jms-btn-arrow { transform: translateX(3px); }

/* --- Trust strip stars --- */
.jms-trust-item { display: inline-flex; align-items: center; gap: .4rem; }
.jms-trust-item .jms-trust-stars { color: var(--jms-gold); letter-spacing: 1px; }

/* --- Icon grid (UI kit) --- */
.jms-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .75rem;
}
.jms-icon-cell {
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 12px;
  padding: 1rem .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  color: var(--jms-muted);
  text-align: center;
}
.jms-icon-cell svg { width: 26px; height: 26px; color: var(--jms-navy); }

/* ============================================================
   Responsive: tablet and desktop
   ============================================================ */
@media (max-width: 767px) {
  body {
    padding-bottom: 54px;
  }
}

@media (min-width: 768px) {
  .jms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .jms-stats {
    grid-template-columns: repeat(4, 1fr);
  }
  .jms-price-cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .jms-hero-actions,
  .jms-cta-actions {
    flex-direction: row;
    justify-content: center;
  }
  .jms-hero-actions .jms-btn,
  .jms-cta-actions .jms-btn {
    width: auto;
  }
  .jms-sticky-call {
    display: none;
  }
  .jms-footer-inner {
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  }
  .jms-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 900px) {
  .jms-hero-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
    padding: 3rem 2rem 2rem;
  }
  .jms-hero-copy {
    flex: 1.15;
    text-align: left;
  }
  .jms-hero-form {
    flex: 1;
    max-width: 380px;
  }
  .jms-hero-actions {
    justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .jms-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .jms-steps {
    flex-direction: row;
  }
  .jms-step {
    flex: 1;
    flex-direction: column;
  }
}





/* ============================================================
   Iteration 2: homepage blocks
   Gray #f3f3f3 · rounded section cards · kicker uppercase, titles sentence case
   ============================================================ */

/* --- Section heading typography --- */
.jms-section h2 {
  font-size: var(--jms-h2);
  text-transform: none;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.jms-kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--jms-red);
  margin: 0 0 .7rem;
}
.jms-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--jms-red);
}

/* --- Section bands (rounded colored cards) --- */
.jms-section--white,
.jms-section--gray,
.jms-section--navy {
  border-radius: 24px;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  margin: 2rem 0;
}
.jms-section--gray { background: #f3f3f3; }
.jms-section--white { background: #fff; border: 1px solid var(--jms-border); }
.jms-section--navy {
  background: linear-gradient(135deg, #313b8d 0%, #252e71 100%);
  color: #fff;
}
.jms-section--navy h2 { color: #fff; }
.jms-section--navy .jms-kicker { color: var(--jms-yellow); }
.jms-section--navy .jms-kicker::before { background: var(--jms-yellow); }

.jms-section-lede {
  font-size: 1.06rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 1.75rem;
}
.jms-section--navy .jms-section-lede { color: #D7DBF0; }
/* Text links on navy: yellow, never navy-on-navy or visited-blue.
   Buttons and white area-cards keep their own colors. */
.jms-section--navy a:not(.jms-btn):not(.jms-area-card) {
  color: var(--jms-yellow);
}
.jms-section--navy a:not(.jms-btn):not(.jms-area-card):visited {
  color: var(--jms-yellow);
}
.jms-section--navy a:not(.jms-btn):not(.jms-area-card):hover,
.jms-section--navy a:not(.jms-btn):not(.jms-area-card):focus {
  color: #fff;
}
.jms-section--navy .jms-area-card,
.jms-section--navy .jms-area-card:visited {
  color: var(--jms-navy);
}
.jms-section--navy .jms-area-card:hover,
.jms-section--navy .jms-area-card:focus {
  color: var(--jms-red);
}
.jms-section--navy .jms-breadcrumbs a,
.jms-section--navy .jms-breadcrumbs a:visited {
  color: #B9C0E6;
}
.jms-section--navy .jms-breadcrumbs a:hover,
.jms-section--navy .jms-breadcrumbs a:focus {
  color: var(--jms-yellow);
}
.jms-section-more { margin: 1.75rem 0 0; }
.jms-section-more .jms-btn { min-width: 200px; }

/* --- Marquee (scrolling trust strip) --- */
.jms-marquee {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  margin: 1.5rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.jms-marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  animation: jms-marquee 32s linear infinite;
}
.jms-marquee:hover .jms-marquee-track { animation-play-state: paused; }
.jms-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--jms-border);
  color: var(--jms-navy);
  font-weight: 700;
  font-size: .9rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
}
.jms-marquee-item::before {
  content: "\2713";
  color: var(--jms-red);
  font-weight: 800;
}
@keyframes jms-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 1rem)); }
}

/* --- Stats counters --- */
.jms-stats { margin: 2rem 0 0; }
.jms-stat {
  border-radius: 16px;
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: var(--jms-shadow-sm);
}
.jms-stat-num {
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 900;
  color: var(--jms-navy);
  line-height: 1;
}
.jms-stat-num .accent { color: var(--jms-red); }
.jms-stat-num .accent.gold { color: var(--jms-gold); }
.jms-stat-label {
  color: var(--jms-muted);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .5rem;
}

/* --- Service cards (on navy) --- */
.jms-section--navy .jms-card--glass {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
  height: 100%;
}
.jms-section--navy .jms-card--glass h3 { color: #fff; }
.jms-section--navy .jms-card--glass p { color: #D7DBF0; }
.jms-section--navy .jms-card--glass a { color: var(--jms-yellow); }
.jms-section--navy .jms-card--glass a:hover { color: #fff; }
.jms-section--navy .jms-badge {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

/* --- Gray cards (advantages on white) --- */
.jms-card--gray {
  background: #f3f3f3;
  border-color: transparent;
  box-shadow: none;
}

/* --- Numbered steps --- */
.jms-steps--numbered .jms-step {
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem;
}
.jms-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--jms-yellow);
  color: #000;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
}

/* --- Service area cards --- */
.jms-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.jms-area-card {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.05rem 1.2rem;
  color: var(--jms-navy);
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.jms-area-card:hover {
  border-color: var(--jms-red);
  color: var(--jms-red);
  transform: translateY(-2px);
  box-shadow: var(--jms-shadow-sm);
}
.jms-area-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  background: var(--jms-navy);
  color: #fff;
}
.jms-area-icon svg { width: 20px; height: 20px; }

/* --- FAQ cards --- */
.jms-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.jms-faq-card {
  background: #f3f3f3;
  border-radius: 16px;
  padding: 1.4rem;
}
.jms-faq-card h3 { margin: 0 0 .5rem; font-size: var(--jms-h3-sm); }
.jms-faq-card p { margin: 0; color: var(--jms-muted); line-height: 1.6; }

/* --- Reviews section --- */
.jms-section--gray .jms-review { border-color: transparent; box-shadow: var(--jms-shadow-sm); }

/* --- Scroll reveal (progressive enhancement) ---
   Content is visible by default; the hidden/animated state is applied
   only when JS has added the `js` class to <html>, so no-JS users and
   crawlers always see the full content. */
html.js .jms-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
html.js .jms-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Popular routes (stacked, all visible for SEO / no-JS) --- */
.jms-routes {
  display: grid;
  gap: 1rem;
}
.jms-route {
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 16px;
  padding: 1.4rem;
}
.jms-route h3 { margin-top: 0; }
.jms-route p:last-child { margin-bottom: 0; }

/* --- Responsive --- */
@media (min-width: 768px) {
  .jms-faq-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .jms-area-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .jms-area-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .jms-grid--advantages { grid-template-columns: repeat(4, 1fr); }
  .jms-grid--services { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .jms-reveal { opacity: 1; transform: none; transition: none; }
  .jms-marquee-track,
  .jms-review-marquee-track { animation: none; }
}


/* ============================================================
   Iteration 3: homepage components
   (hero form icon inputs, rates band, text+image split)
   ============================================================ */

/* --- Hero form: icon-prefixed inputs + custom select --- */
.jms-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.jms-input-wrap {
  position: relative;
}
.jms-input-icon {
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jms-muted);
  pointer-events: none;
  display: flex;
  z-index: 1;
}
.jms-input-icon svg {
  width: 18px;
  height: 18px;
}
.jms-input-wrap input {
  padding-left: 2.6rem;
}
.jms-input-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-left: 2.6rem;
  padding-right: 2.3rem;
}
.jms-input-arrow {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--jms-muted);
  pointer-events: none;
  font-size: .7rem;
  line-height: 1;
}
@media (max-width: 480px) {
  .jms-field-row { grid-template-columns: 1fr; }
}

/* --- Rates band (all-inclusive, 3 cards) --- */
.jms-rate-includes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.25rem;
}
.jms-rate-includes span {
  background: #fff;
  border: 1px solid var(--jms-border);
  color: var(--jms-navy);
  font-size: .8rem;
  font-weight: 700;
  padding: .35rem .7rem;
  border-radius: 999px;
}
.jms-rate-includes span::before {
  content: "\2713";
  color: var(--jms-red);
  font-weight: 800;
  margin-right: .3rem;
}
.jms-rate-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1rem 0;
  align-items: stretch;
}
.jms-rate-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 1.5rem;
}
.jms-rate-card h3 {
  margin: 0 0 .25rem;
  font-size: var(--jms-h3);
}
.jms-rate-card .jms-rate-desc {
  margin: 0 0 1.25rem;
  font-size: .9rem;
}
.jms-rate-amount {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin-bottom: .25rem;
}
.jms-rate-amount strong {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}
.jms-rate-amount span {
  font-size: .9rem;
}
.jms-rate-notes {
  font-size: .85rem;
  margin: 0 0 1.25rem;
}
.jms-rate-card .jms-btn {
  margin-top: auto;
}
.jms-rate-card--navy {
  background: var(--jms-navy);
  color: #fff;
}
.jms-rate-card--navy h3 { color: #fff; }
.jms-rate-card--navy .jms-rate-desc,
.jms-rate-card--navy .jms-rate-notes { color: #D7DBF0; }
.jms-rate-card--navy .jms-rate-amount strong { color: var(--jms-yellow); }
.jms-rate-card--navy .jms-rate-amount span { color: #D7DBF0; }
.jms-rate-card--yellow {
  background: var(--jms-yellow);
  color: #000;
}
.jms-rate-card--yellow h3 { color: #000; }
.jms-rate-card--yellow .jms-rate-amount strong { color: var(--jms-navy); }
.jms-rate-card--yellow .jms-rate-desc,
.jms-rate-card--yellow .jms-rate-notes { color: rgba(0, 0, 0, .7); }
.jms-rate-card--blue {
  background: #eaf3fb;
  color: var(--jms-text);
  border: 1px solid #d8e7f4;
}
.jms-rate-card--blue .jms-rate-amount strong { color: var(--jms-navy); }
@media (min-width: 768px) {
  .jms-rate-cards { grid-template-columns: repeat(3, 1fr); }
}

/* --- Text + image split --- */
.jms-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
.jms-split-media { order: -1; }
.jms-split-body .jms-list-check { margin-bottom: 1.25rem; }
@media (min-width: 900px) {
  .jms-split { grid-template-columns: 1.05fr 1fr; }
  .jms-split-media { order: 0; }
}

/* --- Services page (donor-adapted): navy hero, service cards, link cards --- */
.jms-breadcrumbs--light { color: #B9C0E6; }
.jms-breadcrumbs--light a { color: #B9C0E6; }
.jms-breadcrumbs--light a:hover { color: var(--jms-yellow); }
.jms-breadcrumbs--light .jms-sep { color: #6A72A8; }

.jms-section--navy h1 { color: #fff; }
.jms-section--navy h1 a { color: #fff; }
.jms-page-hero { padding-top: clamp(2rem, 4.5vw, 3.5rem); padding-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.jms-page-hero h1 {
  margin: 0 0 1rem;
  font-size: var(--jms-h1);
}
@media (min-width: 640px) {
  .jms-page-hero .jms-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .jms-page-hero .jms-hero-actions .jms-btn {
    width: auto;
  }
}

.jms-services-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.jms-service-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  align-items: stretch;
  background: #f3f3f3;
  border-radius: 20px;
  overflow: hidden;
  padding: .85rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.jms-service-row:hover {
  transform: translateY(-3px);
  box-shadow: var(--jms-shadow-sm);
}
.jms-service-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--jms-navy);
  margin: 0;
}
.jms-service-media .jms-service-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jms-service-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .15rem .35rem .45rem;
}
.jms-section .jms-service-body h2 {
  margin: 0 0 .45rem;
  font-size: var(--jms-h2);
  color: var(--jms-navy);
}
.jms-section .jms-service-body h2 a {
  color: inherit;
  text-decoration: none;
}
.jms-section .jms-service-body h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.jms-service-row p {
  margin: 0;
  color: var(--jms-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.jms-service-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .5rem;
  margin-top: 1rem;
  padding: .65rem 1.1rem;
  border-radius: 12px;
  background: var(--jms-yellow);
  color: #000;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  transition: background .2s ease, gap .2s ease;
}
.jms-service-row:hover .jms-service-link {
  background: var(--jms-amber);
  gap: .75rem;
}
@media (min-width: 768px) {
  .jms-services-list { gap: 1.5rem; }
  .jms-service-row {
    grid-template-columns: minmax(240px, 0.92fr) minmax(0, 1.08fr);
    gap: 1.75rem;
    padding: .9rem;
    min-height: 240px;
  }
  .jms-service-media {
    aspect-ratio: auto;
    min-height: 220px;
    height: 100%;
  }
  .jms-service-body {
    padding: 1rem 1.35rem 1rem .25rem;
  }
}

/* Link cards (Ready to Move / About) */
.jms-link-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .jms-link-cards { grid-template-columns: repeat(2, 1fr); }
}
.jms-link-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  padding: 2rem;
  background: #f3f3f3;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.jms-link-card:hover { transform: translateY(-3px); box-shadow: var(--jms-shadow-sm); }
.jms-link-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.jms-link-card h2 { margin: 0; font-size: var(--jms-h2); }
.jms-link-card p { margin: 0; color: var(--jms-muted); line-height: 1.6; }
.jms-link-card-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--jms-navy);
  color: #fff;
  transition: background .2s ease;
}
.jms-link-card:hover .jms-link-card-arrow { background: var(--jms-red); }
.jms-link-card-arrow svg { width: 22px; height: 22px; }

/* ============================================================
   Iteration 4: hero photo, card photos, photo blocks,
   review slider, "Our Work" gallery, scroll-to-top fix
   ============================================================ */

/* --- Card media (photos inside glass service cards) --- */
.jms-card-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.jms-section--navy .jms-card--glass .jms-card-img {
  border: 1px solid rgba(255, 255, 255, .18);
}

/* --- Photo blocks with real images --- */
.jms-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jms-photo:has(.jms-photo-img) {
  border: 0;
  background: var(--jms-navy);
  padding: 0;
  justify-content: flex-end;
  align-items: stretch;
}
.jms-photo:has(.jms-photo-img) .jms-photo-label {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 2.25rem .9rem .75rem;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 100%);
}

/* --- Review slider --- */
.jms-slider { position: relative; }
.jms-slider-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: .25rem .25rem 1rem;
}
.jms-slider-track::-webkit-scrollbar { display: none; }
.jms-slide {
  scroll-snap-align: start;
  flex: 0 0 86%;
}
@media (min-width: 640px) { .jms-slide { flex: 0 0 60%; } }
@media (min-width: 900px) { .jms-slide { flex: 0 0 32%; } }
.jms-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .5rem;
}
.jms-slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--jms-navy);
  background: #fff;
  color: var(--jms-navy);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.jms-slider-btn:hover {
  background: var(--jms-navy);
  color: #fff;
  border-color: var(--jms-navy);
}
.jms-slider-btn svg { width: 24px; height: 24px; }
.jms-section--navy .jms-slider-btn { background: #fff; border-color: #fff; color: var(--jms-navy); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.jms-section--navy .jms-slider-btn:hover { background: var(--jms-yellow); color: #000; border-color: var(--jms-yellow); }

/* Homepage reviews: 1-up on mobile (swipe), 3-up on desktop. Full quote
   stays in the HTML; CSS line-clamp only hides the overflow visually.
   Dots under the track page the cards; autoplay + keyboard arrows. */
.jms-reviews-slider .jms-slider-track {
  align-items: stretch;
  outline: none;
}
.jms-reviews-slider .jms-slider-track:focus-visible {
  box-shadow: var(--jms-focus);
  border-radius: 12px;
}
.jms-reviews-slider .jms-dots {
  margin: .25rem 0 0;
}
.jms-reviews-slider .jms-dots:empty {
  display: none;
}
.jms-reviews-slider .jms-slide {
  display: flex;
  min-width: 0;
  flex: 0 0 100%;
}
.jms-reviews-slider .jms-review { width: 100%; }
.jms-reviews-slider .jms-review-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
@media (min-width: 900px) {
  .jms-reviews-slider .jms-slide { flex: 0 0 calc((100% - 2rem) / 3); }
}

/* --- "Our Work" photo carousel --- */
.jms-work-slide {
  flex: 0 0 78%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  margin: 0;
}
.jms-work-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 640px) { .jms-work-slide { flex: 0 0 46%; } }
@media (min-width: 900px) { .jms-work-slide { flex: 0 0 31%; } }

/* --- Equal-height area cards --- */
.jms-area-card { height: 100%; }

/* --- Scroll-to-top (restyled to match brand) --- */
#ast-scroll-top {
  bottom: 72px !important;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--jms-navy) !important;
  border: 1px solid var(--jms-navy) !important;
  box-shadow: 0 8px 20px rgba(19, 42, 69, 0.30);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#ast-scroll-top:hover,
#ast-scroll-top:focus {
  background: var(--jms-red) !important;
  border-color: var(--jms-red) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(215, 22, 23, 0.38);
}
#ast-scroll-top .ast-icon.icon-arrow svg {
  fill: #ffffff;
}
@media (min-width: 768px) {
  #ast-scroll-top {
    bottom: 30px !important;
  }
}

/* --- Contact map --- */
.jms-map {
  margin: 1rem 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--jms-border);
  background: #fff;
}
.jms-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
.jms-map-placeholder {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--jms-muted);
  background: #F8FAFC;
  border: 2px dashed var(--jms-border);
}
.jms-map-placeholder code {
  background: #fff;
  border: 1px solid var(--jms-border);
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: .8rem;
  word-break: break-all;
  max-width: 100%;
}
.jms-map-img {
  display: block;
  width: 100%;
  height: auto;
}
.jms-map-caption {
  margin: 0;
  padding: .75rem 1rem;
  font-size: .9rem;
  color: var(--jms-muted);
  text-align: center;
  background: #fff;
}

/* --- Contact page: two-column (contacts + map) --- */
.jms-contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin: 1rem 0;
}
.jms-contact-layout .jms-nap { margin: 0; }
.jms-contact-map {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.jms-contact-map .jms-map {
  margin: 0;
  flex: 1;
}
.jms-contact-map .jms-map iframe {
  height: 100%;
  min-height: 340px;
}
@media (min-width: 900px) {
  .jms-contact-layout {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  }
}

/* --- Service area map (full-width) --- */
.jms-service-map {
  width: 100%;
}

/* ============================================================
   Homepage hero TOC, services spoiler, area grid 4-col,
   slider nav dots, quote-form placeholder & select states.
   ============================================================ */

/* --- Hero in-page TOC --- */
.jms-hero-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: 1.25rem;
}
.jms-hero-toc a {
  font-size: .82rem;
  font-weight: 700;
  color: var(--jms-yellow);
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: underline;
  transition: color .15s ease;
}
.jms-hero-toc a:hover,
.jms-hero-toc a:focus {
  color: var(--jms-amber);
}
@media (min-width: 900px) {
  .jms-hero-toc { justify-content: flex-start; }
}

/* --- Services spoiler (on navy) --- */
.jms-services-spoiler {
  margin-top: 1.5rem;
  border: 1px dashed rgba(255, 255, 255, .35);
  border-radius: 16px;
}
.jms-services-spoiler summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: .9rem 2.6rem .9rem 1.2rem;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}
.jms-services-spoiler summary::-webkit-details-marker { display: none; }
.jms-services-spoiler summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--jms-yellow);
}
.jms-services-spoiler[open] summary::after { content: "\2013"; }
.jms-services-spoiler-body {
  padding: 0 1.2rem 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .jms-services-spoiler-body { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .jms-services-spoiler-body { grid-template-columns: repeat(4, 1fr); }
}

/* --- Area grid: 4 columns (service-areas page) --- */
.jms-area-grid--4col { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .jms-area-grid--4col { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .jms-area-grid--4col { grid-template-columns: 1fr; }
}

/* --- Slider nav: keep dots vertically centered with buttons --- */
.jms-slider-nav .jms-dots { margin: 0; }

/* --- Quote form: placeholder + select empty/value state --- */
.jms-field input::placeholder,
.jms-field textarea::placeholder {
  color: var(--jms-muted);
  opacity: 1;
}
.jms-field select {
  color: var(--jms-muted);
}
.jms-field select.has-value {
  color: var(--jms-text);
}

/* --- Service Area band (navy, two-column) --- */
.jms-service-area-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.jms-service-area-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.jms-area-photo {
  margin: 1.75rem 0 0;
  width: 100%;
}
.jms-area-photo img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
}
.jms-service-area-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 900px) {
  .jms-service-area-layout {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }
}
@media (max-width: 640px) {
  .jms-service-area-right { grid-template-columns: 1fr; }
}

/* --- Photo marquee (auto-scrolling work gallery) --- */
.jms-photo-marquee {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  margin: 1.5rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.jms-photo-marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  animation: jms-marquee 44s linear infinite;
}
.jms-photo-marquee:hover .jms-photo-marquee-track { animation-play-state: paused; }
.jms-photo-marquee-item {
  flex: 0 0 auto;
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.jms-photo-marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
   Header logo (monogram)
   ============================================================ */
.site-branding img.custom-logo {
  width: 64px;
  height: 64px;
  object-fit: cover;
}
@media (max-width: 921px) {
  .site-branding img.custom-logo {
    width: 52px;
    height: 52px;
  }
}

/* The longer site title ("Jackson Moving and Storage" vs the shorter
   reference title) pushes the "Get a Free Quote" CTA onto a second line
   on mid widths. Shrink the title slightly between the Astra desktop
   breakpoint (922px) and 1100px so the header matches the reference. */
@media (min-width: 922px) and (max-width: 1100px) {
  .site-branding .site-title {
    font-size: 20px;
    font-size: 1.25rem;
  }
}

/* ============================================================
   OpenStreetMap locations map (Our Locations).
   ============================================================ */
.jms-locations {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem;
  margin: 1.4rem 0 1rem;
  align-items: stretch;
}
.jms-locations-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.jms-locations-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jms-locations-cols a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--jms-navy);
  font-weight: 700;
  text-decoration: none;
  padding: .35rem 0;
}
.jms-locations-cols a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jms-navy);
  flex: 0 0 auto;
}
.jms-locations-cols a:hover,
.jms-locations-cols a:focus {
  color: var(--jms-red);
}
.jms-locations-map {
  height: 420px;
  min-height: 420px;
  width: 100%;
  border-radius: var(--jms-radius);
  overflow: hidden;
  border: 1px solid var(--jms-border);
  background: #e8eaee;
  position: relative;
  z-index: 1;
}
.jms-locations-map .leaflet-container {
  width: 100% !important;
  height: 420px !important;
  min-height: 420px;
}
.jms-pin span {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--jms-navy);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
}
.jms-pin.is-hub span {
  background: var(--jms-gold);
}
.leaflet-popup-content-wrapper {
  border-radius: 10px;
}
.leaflet-popup-content a {
  color: var(--jms-navy);
  font-weight: 700;
}
.jms-contact-map .jms-locations-map {
  height: 340px;
  min-height: 340px;
}
.jms-contact-map .jms-locations-map .leaflet-container {
  height: 340px !important;
  min-height: 340px;
}
@media (max-width: 900px) {
  .jms-locations {
    grid-template-columns: 1fr;
  }
  .jms-locations-map,
  .jms-locations-map .leaflet-container {
    height: 320px;
    min-height: 320px;
  }
  .jms-locations-map .leaflet-container {
    height: 320px !important;
  }
}

/* Form AJAX success + mobile tap highlight */
html {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
.jms-hero-form.is-sent > form,
.jms-quote-form.is-sent > form {
  display: none;
}
.jms-hero-form.is-sent > h3,
.jms-hero-form.is-sent > .jms-hero-form-sub {
  display: none;
}
.jms-form-success[hidden] {
  display: none !important;
}
/* formfix-20260929: visible form errors */
.jms-form-error{background:#fdecec;border:1px solid #e5a3a3;color:#8f1d1d;border-radius:10px;padding:10px 14px;margin-top:12px;font-size:14px;line-height:1.45}
.jms-form-error[hidden]{display:none}
button.is-loading{opacity:.65;pointer-events:none}

/* formfix-again-20260929 */
.jms-form-again{display:inline-block;margin-top:.75rem;padding:.55rem 1.1rem;border:1.5px solid currentColor;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none}
.jms-form-again:hover{text-decoration:underline}