/* ==========================================================================
   MidCity Movers — section & widget components
   Split from the approved mockup design system (redesign/style.css), rev 2.
   Load order: design-system -> components -> header-footer -> overrides.

   @package MidCity_Movers
   @author  SlingSoft Apps <https://slingsoft.app>
   ========================================================================== */


/* ── 7. HERO SECTION (VIDEO BACKGROUND + SPLIT LAYOUT) ───────────────────── */
.hero-v2 {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(5.2rem, 8vh, 6.4rem) 0 clamp(3rem, 5vh, 4rem);
  background: var(--bg-obsidian);
  color: #FFFFFF;
  overflow: hidden;
  border-bottom: 1px solid var(--line-border);
  isolation: isolate;
}
body.admin-bar .hero-v2 {
  padding-top: clamp(6.8rem, 10.5vh, 8rem);
}

/* ── Hero Video Background & Overlay (Synced from Gifted Hands) ─────────── */
.hero-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  z-index: -2;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.hero-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  filter: saturate(1.08) contrast(1.04) brightness(0.94);
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  /* Kept deliberately light so the crew and the yellow uniforms read as a
     photograph rather than a dark texture. Legibility comes from the soft
     scrim below, which sits only behind the headline column — not from
     dimming the whole frame. */
  background:
    radial-gradient(130% 95% at 76% 14%, rgba(255, 214, 40, 0.26) 0%, rgba(255, 214, 40, 0) 62%),
    linear-gradient(104deg, rgba(12, 22, 40, 0.50) 0%, rgba(12, 22, 40, 0.28) 48%, rgba(12, 22, 40, 0.14) 100%);
  backdrop-filter: saturate(1.16) brightness(1.06);
  -webkit-backdrop-filter: saturate(1.16) brightness(1.06);
  z-index: 2;
}

/* Localised scrim: carries the white headline without darkening the photo.
   Fades out well before the inquiry panel so the right-hand side stays open. */
.hero-video-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(8, 16, 31, 0.64) 0%, rgba(8, 16, 31, 0.50) 26%,
                    rgba(8, 16, 31, 0.26) 52%, rgba(8, 16, 31, 0) 70%),
    linear-gradient(to top, rgba(8, 16, 31, 0.42) 0%, rgba(8, 16, 31, 0) 34%);
  pointer-events: none;
}

@media (max-width: 992px) {
  /* Stacked layout puts the copy over the middle of the frame, so the scrim
     becomes vertical rather than side-weighted. */
  .hero-video-overlay::after {
    background: linear-gradient(to bottom, rgba(8, 16, 31, 0.52) 0%,
                                rgba(8, 16, 31, 0.30) 45%, rgba(8, 16, 31, 0.46) 100%);
  }
}

.hero-split-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-left-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-badge-glass {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-yellow);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  padding: 0.45rem 1.2rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 1.4rem;
}

.hero-headline-v2 {
  font-size: clamp(2.6rem, 4.8vw, 4.2rem);
  color: #FFFFFF;
  margin-bottom: 1.2rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.hero-lead-v2 {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: #E2E8F0;
  line-height: 1.75;
  margin-bottom: 1.8rem;
  max-width: 600px;
}

.hero-feature-pills {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 2rem;
}
.hero-feature-pills li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.96rem;
  font-weight: 600;
  color: #F8FAFC;
}
.hero-feature-pills li i {
  color: var(--c-yellow);
  font-size: 1.1rem;
}

.hero-action-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2rem;
}

/* ── 8. HERO INQUIRY PANEL (NO NUMERIC PRICING) ─────────────────────────── */
.hero-calc-panel {
  background: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: var(--text-title);
  width: 100%;
}

.hero-calc-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1.5px solid var(--line-light);
}
.hero-calc-panel-header h3 {
  font-size: 1.2rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-title);
}

.hero-calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  margin-bottom: 1.2rem;
}

.hero-calc-field {
  display: flex;
  flex-direction: column;
}
.hero-calc-field label {
  font-family: var(--f-sans);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-title);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-calc-field select,
.hero-calc-field input,
.hero-calc-field textarea {
  width: 100%;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-title);
  background: var(--bg-warm-subtle);
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-sm);
  padding: 0.75rem 0.85rem;
  outline: none;
  transition: all var(--trans);
}
.hero-calc-field select:focus,
.hero-calc-field input:focus,
.hero-calc-field textarea:focus {
  border-color: var(--c-yellow-dark);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.25);
}

.hero-calc-footer {
  border-top: 1.5px solid var(--line-light);
  padding-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.hero-calc-info-note {
  background: var(--c-yellow-light);
  border: 1px solid var(--c-yellow-border);
  border-radius: var(--r-sm);
  padding: 0.65rem 0.85rem;
  font-size: 0.82rem;
  color: #8A6100;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── 9. STATS BAR ────────────────────────────────────────────────────────── */
.stats-bar-2 {
  background: #FFFFFF;
  border-top: 1px solid var(--line-border);
  border-bottom: 1px solid var(--line-border);
  padding: 2rem 0;
}
.stats-grid-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat-item-2 {
  display: flex;
  flex-direction: column;
}
.stat-num-2 {
  font-family: var(--f-sans);
  font-size: clamp(2.2rem, 3.2vw, 2.8rem);
  font-weight: 900;
  color: var(--text-title);
  line-height: 1;
}
.stat-label-2 {
  font-family: var(--f-sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: #8A6100;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* ── 10. "A DAY IN THE LIFE" (PRACTICAL KENYAN MOVE STEPS) ───────────────── */
.story-journey-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3.2rem;
}

.story-card-v2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: all 0.35s ease;
}
.story-card-v2:hover {
  transform: translateY(-6px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-hover);
}

.story-photo-frame {
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  background: var(--bg-sand);
}
.story-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.story-card-v2:hover .story-photo-frame img {
  transform: scale(1.05);
}

.story-time-stamp {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(10, 19, 36, 0.9);
  backdrop-filter: blur(12px);
  color: #FFFFFF;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.story-body-v2 {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.story-body-v2 .step-num {
  font-family: var(--f-sans);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A6100;
  margin-bottom: 0.5rem;
}

.story-body-v2 h3 {
  font-size: 1.45rem;
  margin-bottom: 0.75rem;
  color: var(--text-title);
}

.story-body-v2 p {
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 1.3rem;
  flex: 1;
}

.story-perks-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  border-top: 1.5px solid var(--line-light);
  padding-top: 1.1rem;
}

.story-perk-tag {
  font-family: var(--f-sans);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-title);
  background: var(--bg-warm-subtle);
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.story-perk-tag i {
  color: #D99800;
}

/* ── 11. ROOM-BY-ROOM CARE VISUALIZER ────────────────────────────────────── */
.room-viz-wrapper {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-top: 2.8rem;
}

.room-nav-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--line-border);
  background: var(--bg-warm-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.room-tab-btn {
  flex: 1;
  min-width: 170px;
  padding: 1.2rem 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--f-sans);
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text-muted);
  border-right: 1px solid var(--line-border);
  transition: all var(--trans);
  white-space: nowrap;
}
.room-tab-btn:hover {
  background: var(--bg-sand);
  color: var(--text-title);
}
.room-tab-btn.active {
  background: #FFFFFF;
  color: var(--text-title);
  border-bottom: 3.5px solid var(--c-yellow);
}
.room-tab-btn i {
  font-size: 1.15rem;
  color: #D99800;
}

.room-content-pane {
  display: none;
  padding: clamp(2rem, 4vw, 3.5rem);
}
.room-content-pane.active {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.room-pane-photo {
  height: 360px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1.5px solid var(--line-border);
}
.room-pane-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-features-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1.4rem 0 1.8rem;
}
.room-features-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.98rem;
  color: var(--text-title);
}
.room-features-list li i {
  color: #D99800;
  font-size: 1.1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* ── 12. PACKAGES (NO NUMERIC PRICING) ───────────────────────────────────── */
.pkg-grid-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.8rem;
}

.pkg-card-2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
}
.pkg-card-2:hover {
  transform: translateY(-6px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-hover);
}
.pkg-card-2.featured {
  border: 2.5px solid var(--c-yellow);
  background: #FFFDF8;
  box-shadow: var(--shadow-card);
}

.pkg-badge-top {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-obsidian);
  color: var(--c-yellow);
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1.1rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  border: 1px solid var(--c-yellow);
}

.pkg-list-2 {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1.5rem 0 2rem;
  flex: 1;
}
.pkg-list-2 li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--text-body);
}
.pkg-list-2 li i {
  color: #D99800;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* ── 13. 5 WHY US CORE PILLARS ───────────────────────────────────────────── */
.why-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.8rem;
}

.why-pillar-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2.2rem 1.8rem;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
  display: flex;
  flex-direction: column;
}
.why-pillar-card:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.why-pillar-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #8A6100;
  margin-bottom: 1.2rem;
}
.why-pillar-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}
.why-pillar-card p {
  font-size: 0.96rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── 14. 9-PHOTO CREW ACTION GALLERY ─────────────────────────────────────── */
.field-gallery-grid-9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 2.8rem;
}

.field-photo-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 290px;
  box-shadow: var(--shadow-subtle);
  border: 1.5px solid var(--line-border);
  background: var(--bg-sand);
}
.field-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.field-photo-card:hover img {
  transform: scale(1.05);
}
.field-photo-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(10, 19, 36, 0.92) 0%, rgba(10, 19, 36, 0.3) 70%, transparent 100%);
  color: #FFFFFF;
}
.field-photo-overlay strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 1.05rem;
  color: #FFFFFF;
  margin-bottom: 0.2rem;
}
.field-photo-overlay span {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: var(--c-yellow);
}

/* ── 15. MAIN DETAILED CALCULATOR (NO NUMERIC PRICING, WHATSAPP GENERATOR) ── */
.calculator-card-2 {
  background: #FFFFFF;
  border: 2px solid var(--line-border);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 4vw, 3.4rem);
  box-shadow: var(--shadow-card);
  max-width: 980px;
  margin: 0 auto;
}

.calc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}

.calc-field-2 label {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-title);
  margin-bottom: 0.45rem;
}

.calc-field-2 select,
.calc-field-2 input,
.calc-field-2 textarea {
  width: 100%;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-title);
  background: var(--bg-warm-subtle);
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-sm);
  padding: 0.8rem 0.95rem;
  outline: none;
  transition: all var(--trans);
}
.calc-field-2 select:focus,
.calc-field-2 input:focus,
.calc-field-2 textarea:focus {
  border-color: var(--c-yellow-dark);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.25);
}

.calc-extras-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.calc-extra-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-warm-subtle);
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-title);
  cursor: pointer;
  transition: all var(--trans);
}
.calc-extra-pill:hover {
  background: var(--c-yellow-light);
  border-color: var(--c-yellow-border);
}
.calc-extra-pill input[type="checkbox"] {
  accent-color: #D99800;
  width: 16px;
  height: 16px;
}

.calc-result-box {
  background: var(--bg-obsidian);
  color: #FFFFFF;
  border-radius: var(--r-lg);
  padding: 2rem 2.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.calc-result-box .res-label {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-yellow);
}
.calc-result-box .res-heading {
  font-family: var(--f-sans);
  font-size: 1.6rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0.3rem 0;
}

/* ── 16. MOVING BOXES & SUPPLIES STORE ────────────────────────────────────── */
.box-store-grid-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
  margin-top: 2.8rem;
}

.box-card-2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
}
.box-card-2:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.box-card-2.featured {
  border: 2px solid var(--c-yellow);
  background: #FFFDF8;
}
.box-card-2 h3 {
  font-size: 1.25rem;
  margin: 0.5rem 0 0.8rem;
}
.box-card-2 p {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.2rem;
  flex: 1;
}

/* ── 17. COMPARISON MATRIX (MIDCITY VS INFORMAL TRANSPORTERS) ────────────── */
.comparison-card-2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-top: 2.8rem;
}

.comp-row-2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1.2rem 2rem;
  border-bottom: 1px solid var(--line-border);
  font-size: 0.96rem;
  transition: background 0.2s ease;
}
.comp-row-2:last-child {
  border-bottom: none;
}
.comp-row-2:hover:not(.hdr) {
  background: var(--bg-warm-subtle);
}
.comp-row-2.hdr {
  background: var(--bg-warm-subtle);
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-title);
}
.comp-row-2 .midcity-val {
  color: var(--c-emerald);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.comp-row-2 .informal-val {
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.comp-row-2 .informal-val i {
  color: #94A3B8;
}

/* ── 18. FAQ ACCORDION ───────────────────────────────────────────────────── */
.faq-grid-2 {
  max-width: 860px;
  margin: 2.8rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item-2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-md);
  padding: 0 1.6rem;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
}
.faq-item-2:hover {
  border-color: var(--c-yellow-dark);
}

.faq-q-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-title);
  transition: color 0.2s;
}
.faq-q-2:hover {
  color: #8A6100;
}
.faq-q-2 span {
  font-family: var(--f-mono);
  font-size: 1.4rem;
  color: #8A6100;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item-2.is-open .faq-q-2 span {
  transform: rotate(45deg);
}

.faq-a-2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), padding-bottom 0.4s var(--ease);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}
.faq-item-2.is-open .faq-a-2 {
  max-height: 350px;
  padding-bottom: 1.5rem;
}

/* ── 19. ADVANCED SERVICE COMPONENTS ─────────────────────────────────────── */
.capability-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.8rem;
}
.capability-card-grid.cols-2 {
  grid-template-columns: 1fr 1fr;
}
.capability-card-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.cap-card-v2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2.2rem 1.8rem;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
  display: flex;
  flex-direction: column;
}
.cap-card-v2:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.cap-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: #8A6100;
  margin-bottom: 1.2rem;
}
.cap-card-v2 h3 {
  font-size: 1.25rem;
  margin-bottom: 0.65rem;
}
.cap-card-v2 p {
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex: 1;
}
.cap-card-tag {
  font-family: var(--f-sans);
  font-size: 0.75rem;
  font-weight: 800;
  color: #8A6100;
  background: var(--bg-warm-subtle);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  align-self: flex-start;
}

/* Process Timeline Steps */
.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.8rem;
}
.process-steps-grid.steps-5 {
  grid-template-columns: repeat(5, 1fr);
}

.step-card-v3 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.6rem;
  position: relative;
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  transition: all var(--trans);
}
.step-card-v3:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.step-badge-num {
  font-family: var(--f-mono);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--c-yellow);
  line-height: 1;
  margin-bottom: 0.8rem;
  display: inline-block;
  background: var(--bg-obsidian);
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-sm);
}
.step-card-v3 h4 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
  color: var(--text-title);
}
.step-card-v3 p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Highway Route Cards */
.route-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.8rem;
}

.route-card-v2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
  display: flex;
  flex-direction: column;
}
.route-card-v2:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.route-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.route-tag-time {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: #8A6100;
  background: var(--c-yellow-light);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
}
.route-tag-dist {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}
.route-card-v2 h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.route-card-v2 p {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.2rem;
  flex: 1;
}

/* Moving Kits & Bundles */
.bundle-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.8rem;
}
.bundle-card-v2 {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-xl);
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
}
.bundle-card-v2:hover {
  transform: translateY(-6px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-hover);
}
.bundle-card-v2.featured {
  border: 2.5px solid var(--c-yellow);
  background: #FFFDF8;
  box-shadow: var(--shadow-card);
}
.bundle-card-v2 h3 {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}
.bundle-card-v2 .bundle-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}
.bundle-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.8rem;
  flex: 1;
}
.bundle-items-list li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-size: 0.93rem;
  color: var(--text-body);
}
.bundle-items-list li i {
  color: #D99800;
  font-size: 0.9rem;
}

/* ── 20. (pre-footer CTA banner retired — the footer's own CTA band replaces it) ── */


/* ── 20. RESPONSIVE SPLIT & SHOWCASE LAYOUTS ─────────────────────────────── */
.service-split-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.service-split-row:last-child {
  margin-bottom: 0;
}
.service-split-row.reverse {
  grid-template-columns: 0.85fr 1.15fr;
}
.service-split-media {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1.5px solid var(--line-border);
  height: 360px;
  box-shadow: var(--shadow-card);
  width: 100%;
}
.service-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.service-split-media:hover img {
  transform: scale(1.04);
}

.detail-grid-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: flex-start;
}


/* ── RESPONSIVE (component rules from mockup section 21) ── */

/* ── 21. RESPONSIVE BREAKPOINTS ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .service-split-row, .service-split-row.reverse, .detail-grid-split {
    grid-template-columns: 1fr !important;
    gap: 2.2rem;
  }
  .service-split-media {
    height: 280px;
  }
  .hero-v2 {
    min-height: auto;
    padding: clamp(4.8rem, 8vh, 5.8rem) 0 clamp(2.5rem, 4vh, 3.5rem);
  }
  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .hero-left-content {
    text-align: center;
    align-items: center;
  }
  .hero-lead-v2 {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-action-buttons {
    justify-content: center;
  }
  .hero-calc-panel {
    max-width: 580px;
    margin: 0 auto;
  }
  .pkg-grid-2 { grid-template-columns: 1fr; }
  .box-store-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .why-pillars-grid { grid-template-columns: 1fr 1fr; }
  .capability-card-grid, .capability-card-grid.cols-2, .capability-card-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .process-steps-grid, .process-steps-grid.steps-5 { grid-template-columns: 1fr 1fr; }
  .route-card-grid { grid-template-columns: 1fr 1fr; }
  .bundle-card-grid { grid-template-columns: 1fr; }
  .story-journey-grid { grid-template-columns: 1fr; }
  .room-content-pane.active { grid-template-columns: 1fr; }
  .field-gallery-grid-9 { grid-template-columns: 1fr 1fr; }
  .stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hero-headline-v2 {
    font-size: clamp(2.1rem, 8.5vw, 2.9rem);
  }
  .hero-lead-v2 {
    font-size: 1rem;
    line-height: 1.65;
  }
  .hero-calc-panel {
    padding: 1.4rem 1.1rem;
    border-radius: var(--r-lg);
  }
  .hero-calc-panel-header h3 {
    font-size: 1.05rem;
  }
  .hero-calc-field select, .hero-calc-field input, .hero-calc-field textarea {
    font-size: 0.88rem;
    padding: 0.75rem 0.8rem;
  }
  .box-store-grid-2 {
    grid-template-columns: 1fr;
  }
  .why-pillars-grid {
    grid-template-columns: 1fr;
  }
  .capability-card-grid, .capability-card-grid.cols-2, .capability-card-grid.cols-4 {
    grid-template-columns: 1fr;
  }
  .process-steps-grid, .process-steps-grid.steps-5 {
    grid-template-columns: 1fr;
  }
  .route-card-grid {
    grid-template-columns: 1fr;
  }
  .bundle-card-grid {
    grid-template-columns: 1fr;
  }
  .field-gallery-grid-9 {
    grid-template-columns: 1fr;
  }
  .stats-grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .stat-num-2 {
    font-size: 1.9rem;
  }
  .stat-label-2 {
    font-size: 0.72rem;
  }
  .calc-grid-2, .calc-extras-grid-2 {
    grid-template-columns: 1fr;
  }
  .calc-result-box {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 1.5rem;
  }
  .comparison-card-2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .comp-row-2 {
    min-width: 480px;
    padding: 1rem 1.2rem;
    font-size: 0.88rem;
  }
  .story-photo-frame {
    height: 220px;
  }
  .story-body-v2 {
    padding: 1.4rem;
  }
  .story-body-v2 h3 {
    font-size: 1.25rem;
  }
  .room-tab-btn {
    min-width: 140px;
    padding: 0.9rem 1rem;
    font-size: 0.84rem;
  }
  .room-pane-photo {
    height: 260px;
  }
}
/* -- 25. LIGHTBOX MODAL ----------------------------------------------------- */
#lightboxModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#lightboxModal.active {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 19, 36, 0.95);
  backdrop-filter: blur(8px);
}
.lightbox-content {
  position: relative;
  z-index: 10000;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.2s;
}
.lightbox-close:hover {
  color: var(--c-yellow);
}
.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10001;
}
.lightbox-nav-btn:hover {
  background: var(--c-yellow);
  color: var(--bg-obsidian);
}
.lightbox-nav-btn.prev {
  left: 20px;
}
.lightbox-nav-btn.next {
  right: 20px;
}
.lightbox-caption {
  color: #fff;
  margin-top: 15px;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
}
.lightbox-counter {
  color: #94A3B8;
  font-size: 0.85rem;
  margin-top: 5px;
}

/* ── 22.5 Form semantics ──────────────────────────────────────────────── */
/* .hero-calc-inputs and .calc-grid-* are now <form> elements; the global
   reset already zeroes their margin, so only the new wrappers need rules.  */
.calc-form {
  display: block;
}
.calc-extras-heading {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-title);
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}
.btn-whatsapp-block {
  width: 100%;
  justify-content: center;
  padding: 1rem;
  margin-top: 0.4rem;
}

/* ── 22.6 Responsive grid modifiers ───────────────────────────────────── */
/* These replace inline grid-template-columns declarations, which beat the
   media queries below and left several pages stuck in desktop columns.     */
.why-pillars-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.why-pillars-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why-pillars-grid.is-compact {
  gap: 1rem;
  margin-top: 1.5rem;
}
.capability-card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tier-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .why-pillars-grid.cols-3,
  .capability-card-grid.cols-3,
  .tier-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .why-pillars-grid.cols-2,
  .why-pillars-grid.cols-3,
  .capability-card-grid.cols-3,
  .tier-card-grid {
    grid-template-columns: 1fr;
  }
}


/* ── GALLERY PAGE ── */

/* ═══ 23. GALLERY PAGE ── moved out of gallery.html's inline <style> so the
       whole design system lives in one file (and one components.css after
       the WordPress port).                                              */

/* ── MODERN GALLERY & LIGHTBOX CUSTOM STYLING ── */
.gallery-hero {
    background: linear-gradient(180deg, var(--bg-warm-subtle) 0%, #FFFFFF 100%);
    padding: clamp(4rem, 8vw, 6rem) 0 2rem;
    text-align: center;
    border-bottom: 1px solid var(--line-border);
}
.gallery-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 2.5rem 0 3.5rem;
}
.gal-filter-btn {
    font-family: var(--f-sans);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.65rem 1.4rem;
    border-radius: var(--r-pill);
    background: #FFFFFF;
    border: 1.5px solid var(--line-border);
    color: var(--text-title);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-subtle);
}
.gal-filter-btn:hover {
    border-color: var(--c-yellow-dark);
    color: #8A6100;
    transform: translateY(-2px);
}
.gal-filter-btn.active {
    background: var(--c-yellow);
    border-color: var(--c-yellow-dark);
    color: var(--bg-obsidian);
    box-shadow: 0 4px 14px rgba(255, 210, 0, 0.4);
}

/* Gallery Grid */
.gallery-grid-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1024px) {
    .gallery-grid-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
}
@media (max-width: 600px) {
    .gallery-grid-masonry {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

.gal-card-item {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #FFFFFF;
    border: 1.5px solid var(--line-border);
    box-shadow: var(--shadow-subtle);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.gal-card-item:hover {
    transform: translateY(-6px);
    border-color: var(--c-yellow-dark);
    box-shadow: var(--shadow-card);
}
.gal-img-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #0A1324;
}
.gal-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gal-card-item:hover .gal-img-wrapper img {
    transform: scale(1.08);
}

.gal-overlay-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: var(--f-sans);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(10, 19, 36, 0.85);
    color: var(--c-yellow);
    padding: 0.35rem 0.8rem;
    border-radius: var(--r-pill);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 210, 0, 0.3);
    z-index: 2;
}

.gal-zoom-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--bg-obsidian);
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    z-index: 2;
}
.gal-card-item:hover .gal-zoom-icon {
    opacity: 1;
    transform: scale(1);
}

.gal-card-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #FFFFFF;
}
.gal-card-body h3 {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
    color: var(--text-title);
    line-height: 1.35;
}
.gal-card-body p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── LIGHTBOX MODAL VIEWER ── */
#modernLightboxModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(7, 13, 26, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#modernLightboxModal.is-active {
    display: flex;
    opacity: 1;
}

.lb-dialog-container {
    position: relative;
    max-width: 1080px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lb-main-image-wrap {
    position: relative;
    max-width: 100%;
    max-height: 75vh;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    background: #000000;
}
.lb-main-image-wrap img {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

/* Controls */
.lb-btn-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.lb-btn-close:hover {
    background: var(--c-yellow);
    color: var(--bg-obsidian);
    transform: scale(1.1);
}

.lb-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
}
.lb-nav-btn:hover {
    background: var(--c-yellow);
    color: var(--bg-obsidian);
    transform: translateY(-50%) scale(1.1);
}
.lb-btn-prev { left: -70px; }
.lb-btn-next { right: -70px; }

@media (max-width: 1200px) {
    .lb-btn-prev { left: 10px; }
    .lb-btn-next { right: 10px; }
    .lb-btn-close { top: 15px; right: 15px; }
}

.lb-caption-bar {
    margin-top: 1.2rem;
    text-align: center;
    color: #FFFFFF;
    max-width: 800px;
}
.lb-caption-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 0.3rem;
}
.lb-caption-desc {
    font-size: 0.95rem;
    color: #CBD5E1;
    margin-bottom: 0.4rem;
}
.lb-counter-badge {
    font-family: var(--f-mono);
    font-size: 0.8rem;
    color: var(--c-yellow);
    background: rgba(255, 210, 0, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pill);
    display: inline-block;
}

/* Split-row copy column (paired with .service-split-media). */
.service-split-body ul {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.2rem;
}
.service-split-body ul li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-body);
}
.service-split-body ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--c-yellow-dark);
  font-size: 0.85rem;
}
.service-split-body ul li strong {
  color: var(--text-title);
  font-family: var(--f-sans);
}


/* ── QUOTE NOTE BOX + DARK BAND TYPOGRAPHY ── */

/* ══════════════════════════════════════════════════════════════════════════
   26. QUOTE NOTE BOX
       Stated plainly on both inquiry forms: no price is calculated here.
       Figures are confirmed by a coordinator after the free site assessment.
   ══════════════════════════════════════════════════════════════════════════ */

.quote-note-box {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  border-left: 4px solid var(--c-yellow);
  border-radius: var(--r-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1.4rem;
}
.quote-note-box i {
  color: var(--c-gold-text);
  font-size: 1.05rem;
  margin-top: 0.15rem;
  flex: none;
}
.quote-note-box strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.9rem;
  color: var(--text-title);
  margin-bottom: 0.2rem;
}
.quote-note-box p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-body);
}
.quote-note-box.on-dark {
  background: rgba(255, 210, 0, 0.10);
  border-color: rgba(255, 210, 0, 0.32);
  border-left-color: var(--c-yellow);
}
.quote-note-box.on-dark i { color: var(--c-yellow); }
.quote-note-box.on-dark strong { color: #FFFFFF; }
.quote-note-box.on-dark p { color: #CBD5E1; }

/* ══════════════════════════════════════════════════════════════════════════
   26b. DARK BAND TYPOGRAPHY
        `.sec-obsidian` existed but only set a colour on the section itself,
        so headings inherited --text-title (dark navy on dark navy) and the
        band was unusable. Defined once here; page partials no longer patch it.
   ══════════════════════════════════════════════════════════════════════════ */

.sec-obsidian,
.sec-obsidian h1,
.sec-obsidian h2,
.sec-obsidian h3,
.sec-obsidian h4,
.sec-obsidian .section-intro h2,
.sec-obsidian .section-intro h3 {
  color: #FFFFFF;
}
.sec-obsidian p,
.sec-obsidian li,
.sec-obsidian .section-lede,
.sec-obsidian .prose-lg {
  color: #CBD5E1;
}
.sec-obsidian .text-gold {
  color: var(--c-yellow);
}
.sec-obsidian .badge-pill {
  color: var(--c-yellow);
  background: rgba(255, 210, 0, 0.10);
  border-color: rgba(255, 210, 0, 0.30);
}
/* Guard: a light card dropped onto a dark band keeps its own dark type. */
.sec-obsidian .cap-card-v2:not(.on-dark),
.sec-obsidian .cap-card-v2:not(.on-dark) h3,
.sec-obsidian .step-card-v3:not(.on-dark),
.sec-obsidian .step-card-v3:not(.on-dark) h3,
.sec-obsidian .why-pillar-card:not(.on-dark),
.sec-obsidian .why-pillar-card:not(.on-dark) h3,
.sec-obsidian .hero-calc-panel,
.sec-obsidian .hero-calc-panel h3 {
  color: var(--text-title);
}
.sec-obsidian .cap-card-v2:not(.on-dark) p,
.sec-obsidian .step-card-v3:not(.on-dark) p,
.sec-obsidian .why-pillar-card:not(.on-dark) p {
  color: var(--text-body);
}



/* ── PAGE COMPONENTS (rev 2) ── */

/* ══════════════════════════════════════════════════════════════════════════
   27. PAGE COMPONENTS (revision 2)
       Merged from the per-page CSS partials written during the rev-2 content
       rebuild. Each block is namespaced to its page's components; none of
       them redefine design tokens, and the shared dark-band typography they
       each patched now lives once in §26b.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── from _rev2css/home.css ─────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   HOME.CSS — rev 2 partial (homepage content sections)
   Owner: homepage content agent. Merge into style.css at integration time.

   Covers the reworked homepage sections only:
     A. #comparison  — moving-day worries answered, plus a compact side-by-side
     B. #journey     — "A Day in the Life" step cards (density modifier)
     C. #why         — five core guarantees (dark CTA pillar, no inline styles)
     D. #plans       — package tiers (sub-label + site-assessment note)
     E. #boxes       — packing materials supplied with the move
     F. #faq         — no new CSS needed, reuses .faq-item-2

   Palette is the shared one: yellow #FFD200 / navy #0A1324. No red.
   Breakpoints follow the site convention: 900px, then 600px.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── A. MOVING-DAY WORRIES → WHAT WE ACTUALLY DO ───────────────────────────
   The old section opened with a table that argued against someone else. This
   opens with what the customer is actually anxious about, in their own words,
   and answers each worry with something checkable.
   ────────────────────────────────────────────────────────────────────────── */

.worry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.8rem;
}

.worry-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
}
.worry-card:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}

.worry-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--c-gold-text);
  margin-bottom: 1.15rem;
  flex: none;
}

/* The worry itself, set as a quiet quotation so it reads as the customer
   talking rather than as a marketing sub-head. */
.worry-quote {
  font-family: var(--f-sans);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--text-title);
  border-left: 3px solid var(--c-yellow);
  padding-left: 0.9rem;
  margin-bottom: 1.1rem;
}

.worry-answer-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold-text);
  margin-bottom: 0.7rem;
}

.worry-answer-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  flex: 1;
}
.worry-answer-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-body);
}
.worry-answer-list li i {
  color: var(--c-amber);
  font-size: 0.85rem;
  flex: none;
}

/* Small caption above the retained comparison strip, so the table reads as
   supporting evidence rather than as the point of the section. */
.compare-strip-intro {
  margin-top: 3.2rem;
  text-align: center;
}
.compare-strip-intro h3 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}
.compare-strip-intro p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
}
.compare-strip-intro + .comparison-card-2 {
  margin-top: 1.6rem;
}


/* ── Shared closing action row (used by #comparison and #boxes) ──────────── */
.section-close-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.6rem;
  text-align: center;
}
.section-close-row .section-close-note {
  font-size: 0.98rem;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0;
}
.section-close-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}


/* ── B. "A DAY IN THE LIFE" DENSITY MODIFIER ───────────────────────────────
   The day now runs to eight real steps instead of four generic ones, so the
   photo frames come down a little to keep the section a readable length.
   ────────────────────────────────────────────────────────────────────────── */

.story-journey-grid.is-daylong {
  gap: 1.6rem;
}
.story-journey-grid.is-daylong .story-photo-frame {
  height: 250px;
}
.story-journey-grid.is-daylong .story-body-v2 {
  padding: 1.7rem;
}
.story-journey-grid.is-daylong .story-body-v2 h3 {
  font-size: 1.28rem;
}
.story-journey-grid.is-daylong .story-body-v2 p {
  font-size: 0.97rem;
  margin-bottom: 1.1rem;
}


/* ── C. WHY PILLARS — DARK WHATSAPP CARD ───────────────────────────────────
   Replaces the four inline style attributes that used to sit on this card.
   ────────────────────────────────────────────────────────────────────────── */

.why-pillar-card.is-cta {
  background: var(--bg-obsidian);
  border-color: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
.why-pillar-card.is-cta:hover {
  border-color: var(--c-yellow);
}
.why-pillar-card.is-cta .why-pillar-icon {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--c-yellow);
}
.why-pillar-card.is-cta h3 {
  color: #FFFFFF;
}
.why-pillar-card.is-cta p {
  color: #CBD5E1;
  margin-bottom: 1.3rem;
  flex: 1;
}
.why-pillar-card.is-cta .btn-whatsapp {
  align-self: flex-start;
  padding: 0.75rem 1.4rem;
}


/* ── D. PACKAGES ───────────────────────────────────────────────────────────
   No figures anywhere on this site. These tiers describe crew, truck and
   what is actually packed; the fit is confirmed at the free site visit.
   ────────────────────────────────────────────────────────────────────────── */

.pkg-card-sub {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.pkg-spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.pkg-spec-tag {
  font-family: var(--f-sans);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-title);
  background: var(--bg-warm-subtle);
  border: 1px solid var(--line-border);
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pkg-spec-tag i {
  color: var(--c-amber);
  font-size: 0.78rem;
}

.pkg-assess-note {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 820px;
  margin: 2.4rem auto 0;
  background: var(--bg-warm-subtle);
  border: 1.5px solid var(--line-border);
  border-left: 4px solid var(--c-yellow);
  border-radius: var(--r-sm);
  padding: 1.1rem 1.3rem;
}
.pkg-assess-note i {
  color: var(--c-gold-text);
  font-size: 1.05rem;
  margin-top: 0.15rem;
  flex: none;
}
.pkg-assess-note p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-body);
}
.pkg-assess-note strong {
  color: var(--text-title);
}


/* ── E. PACKING MATERIALS SUPPLIED WITH THE MOVE ───────────────────────────
   No longer a shop front: the cards list what arrives with the crew, and one
   action closes the section instead of four repeated buttons.
   ────────────────────────────────────────────────────────────────────────── */

.box-card-2 .box-card-note {
  font-family: var(--f-sans);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gold-text);
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1.5px solid var(--line-light);
}


/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .worry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compare-strip-intro {
    margin-top: 2.6rem;
  }
  .compare-strip-intro h3 {
    font-size: 1.32rem;
  }
  .story-journey-grid.is-daylong .story-photo-frame {
    height: 230px;
  }
}

@media (max-width: 600px) {
  .worry-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .worry-card {
    padding: 1.6rem 1.35rem;
  }
  .worry-quote {
    font-size: 1.05rem;
  }
  .pkg-assess-note {
    padding: 1rem 1.1rem;
  }
  .section-close-links {
    width: 100%;
    flex-direction: column;
  }
  .section-close-links > a {
    width: 100%;
    justify-content: center;
  }
  .story-journey-grid.is-daylong .story-photo-frame {
    height: 210px;
  }
}

/* ── from _rev2css/residential.css ─────────────────────────────── */
/* ==========================================================================
   MidCity Movers Kenya — Revision 2 partial
   Page: service-residential.html  (Residential flagship service page)

   Only genuinely new components live here. Everything else on the page
   reuses the shared design system in style.css.
   All selectors are prefixed .res- so they cannot collide with other
   agents' partials, except the two documented scoped overrides at the
   bottom of the dark band block.
   ========================================================================== */


/* ── R1. HERO SUPPORT ROWS ────────────────────────────────────────────────
   The inner-page hero needs a trust-chip row and a button row. The homepage
   .hero-action-buttons re-centres itself under 1024px, which is wrong for a
   left-aligned inner hero, so this page uses its own row.                    */

.res-hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.6rem;
}

.res-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.8rem;
}

@media (max-width: 600px) {
  .res-hero-actions > a { flex: 1 1 100%; }
}


/* ── R2. STACK-ON-PHONE UTILITY ───────────────────────────────────────────
   Several shared grids stop at two columns on small screens. Adding this
   class forces a single column at 600px without changing shared behaviour
   for the other twelve pages.                                               */

@media (max-width: 600px) {
  .res-stack-600 { grid-template-columns: 1fr !important; }
}

/* Breathing room for a note box that follows a card grid, since the shared
   grids carry a top margin but no bottom one. */
.res-mt { margin-top: 2.2rem; }

/* Same problem one size up: a sub-heading that follows a card grid. */
.res-mt-lg { margin-top: clamp(2.8rem, 5vw, 4rem); }


/* ── R3. HOME-SIZE SPEC CARDS ─────────────────────────────────────────────
   Bedsitter through 5-bedroom. Each card carries a small definition list of
   crew / truck / time on site. No cost is shown anywhere.                    */

.res-size-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2.8rem;
}

.res-size-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
  display: flex;
  flex-direction: column;
}

.res-size-card:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}

.res-size-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}

.res-size-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.2rem;
  flex: 1;
}

.res-spec-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-light);
}

.res-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.res-spec-row dt {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-gold-text);
  flex: none;
}

.res-spec-row dd {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-title);
  text-align: right;
}

@media (max-width: 900px) {
  .res-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .res-size-grid { grid-template-columns: 1fr; }
}


/* ── R4. TWO-COLUMN TICK LIST ─────────────────────────────────────────────
   Used for "what you should move yourself" and similar plain checklists
   sitting directly on a section background rather than inside a card.       */

.res-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 2.2rem;
  margin-top: 1.6rem;
}

.res-check-grid li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--text-body);
}

.res-check-grid li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.2rem;
  font-size: 0.85rem;
  color: var(--c-yellow-dark);
}

.res-check-grid li strong {
  font-family: var(--f-sans);
  color: var(--text-title);
}

@media (max-width: 600px) {
  .res-check-grid { grid-template-columns: 1fr; }
}


/* ── R5. AREA CHIPS ───────────────────────────────────────────────────────
   Plain list of the estates and suburbs we run into most weeks.             */

.res-area-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
}

.res-area-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-sans);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-title);
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
}

.res-area-chip i {
  font-size: 0.72rem;
  color: var(--c-gold-text);
}


/* ── R6. STACKED PANEL ACTIONS ────────────────────────────────────────────
   Full-width buttons inside the free-assessment side panel.                 */

.res-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.4rem;
}


/* ── R7. INSURANCE DARK BAND ──────────────────────────────────────────────
   One navy band mid-page for the Goods-in-Transit section, so the insurance
   promise reads as a distinct commitment rather than another card row.      */

.res-dark-band {
  background: linear-gradient(160deg, var(--bg-obsidian) 0%, #16253F 100%);
  color: #FFFFFF;
  padding: var(--sec-pad) 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  position: relative;
  overflow: hidden;
}

.res-dark-band::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -10%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(255, 210, 0, 0.13) 0%, transparent 70%);
  pointer-events: none;
}

.res-dark-band > .container { position: relative; z-index: 2; }

/* Scoped overrides — only inside this band. */
.res-dark-band .section-intro h2,
.res-dark-band .section-intro h3 { color: #FFFFFF; }
.res-dark-band .section-intro .section-lede { color: #CBD5E1; }

.res-dark-card {
  background: var(--bg-obsidian-card);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r-lg);
  padding: 2.1rem 1.8rem;
  display: flex;
  flex-direction: column;
  transition: all var(--trans);
}

.res-dark-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 210, 0, 0.45);
}

.res-dark-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: rgba(255, 210, 0, 0.12);
  border: 1.5px solid rgba(255, 210, 0, 0.34);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--c-yellow);
  margin-bottom: 1.1rem;
}

.res-dark-card h3 {
  color: #FFFFFF;
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
}

.res-dark-card > p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: #CBD5E1;
  margin: 0;
}

.res-dark-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.2rem;
}

.res-dark-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #E2E8F0;
}

.res-dark-list li i {
  flex: none;
  margin-top: 0.28rem;
  font-size: 0.85rem;
  color: var(--c-yellow);
}

/* ── from _rev2css/commercial.css ─────────────────────────────── */
/* ==========================================================================
   MidCity Movers Kenya — service-commercial.html (Commercial & Office Moves)
   Revision 2 partial. Merged into style.css by the integrator.

   Everything here is either (a) a dark-surface variant of an existing
   component so .sec-obsidian can be used without inline styles, or (b) a
   small new component the commercial page needs. No new colours are
   introduced: yellow (--c-yellow) + obsidian navy only.
   ========================================================================== */

/* ── C1. OBSIDIAN SECTION DEFAULTS ───────────────────────────────────────
   .sec-obsidian sets a white body colour, but headings still inherit the
   dark --text-title and paragraphs the dark --text-body, so a dark band was
   previously unusable without inline styles. These rules fix that once.     */

.sec-obsidian h1,
.sec-obsidian h2,
.sec-obsidian h3,
.sec-obsidian h4 {
  color: #FFFFFF;
}

.sec-obsidian .badge-pill {
  color: var(--c-yellow);
  background: rgba(255, 210, 0, 0.10);
  border-color: rgba(255, 210, 0, 0.32);
}
/* Guard: a plain white card dropped on a dark band keeps its dark text. */
.sec-obsidian .cap-card-v2:not(.on-dark) h3,
.sec-obsidian .step-card-v3:not(.on-dark) h4 {
  color: var(--text-title);
}


/* ── C2. DARK VARIANTS OF THE CARD COMPONENTS ────────────────────────── */

.cap-card-v2.on-dark,
.step-card-v3.on-dark {
  background: var(--bg-obsidian-card);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.cap-card-v2.on-dark:hover,
.step-card-v3.on-dark:hover {
  border-color: var(--c-yellow);
  box-shadow: none;
}
.cap-card-v2.on-dark h3,
.step-card-v3.on-dark h4 {
  color: #FFFFFF;
}
.cap-card-v2.on-dark p,
.step-card-v3.on-dark p {
  color: #CBD5E1;
}
/* Both the compound form (class written on the icon) and the descendant form
   used by the transport/parcels partial resolve to the same look, so the two
   partials can be merged in either order. */
.cap-card-icon.on-dark,
.cap-card-v2.on-dark .cap-card-icon {
  background: rgba(255, 210, 0, 0.12);
  border-color: rgba(255, 210, 0, 0.30);
  color: var(--c-yellow);
}
.cap-card-tag.on-dark,
.cap-card-v2.on-dark .cap-card-tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-yellow);
}

/* ── C3. SPLIT-ROW COPY COLUMN ON A DARK BAND ────────────────────────── */

.service-split-body.on-dark h2,
.service-split-body.on-dark h3 {
  color: #FFFFFF;
}
.service-split-body.on-dark p {
  color: #CBD5E1;
}
.service-split-body.on-dark ul li {
  color: #CBD5E1;
}
.service-split-body.on-dark ul li strong {
  color: #FFFFFF;
}
.service-split-body.on-dark ul li::before {
  color: var(--c-yellow);
}

/* ── C4. INNER-PAGE HERO: ACTION ROW + TRUST LINE ────────────────────── */

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.9rem;
}
.page-hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  margin-top: 1.6rem;
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
}
.page-hero-notes span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.page-hero-notes i {
  color: var(--c-gold-text);
}

/* ── C5. SIX-STEP PROCESS GRID ───────────────────────────────────────── */

.process-steps-grid.steps-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .process-steps-grid.steps-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .process-steps-grid.steps-6 { grid-template-columns: 1fr; }
}

/* ── C6. SHUTDOWN-WINDOW STRIP (weekend / after-hours timeline) ──────── */

.downtime-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.6rem;
}
.downtime-slot {
  background: rgba(255, 255, 255, 0.045);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--c-yellow);
  border-radius: var(--r-md);
  padding: 1.5rem 1.35rem;
}
.downtime-time {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-yellow);
  margin-bottom: 0.55rem;
}
.downtime-slot h4 {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin-bottom: 0.45rem;
}
.downtime-slot p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #CBD5E1;
  margin: 0;
}
@media (max-width: 900px) {
  .downtime-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .downtime-strip { grid-template-columns: 1fr; }
}

/* ── C7. CLIENT PREPARATION CHECKLIST CARDS ──────────────────────────── */

.prep-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2.8rem;
}
.prep-list-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
}
.prep-list-card:hover {
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.prep-list-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}
.prep-list-head i {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: var(--c-gold-text);
}
.prep-list-head h3 {
  font-size: 1.2rem;
  margin: 0;
}
.prep-list-card ul {
  display: grid;
  gap: 0.75rem;
}
.prep-list-card li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-body);
}
.prep-list-card li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8rem;
  position: absolute;
  left: 0;
  top: 0.2rem;
  color: var(--c-yellow-dark);
}
.prep-list-card li strong {
  font-family: var(--f-sans);
  color: var(--text-title);
}
@media (max-width: 900px) {
  .prep-list-grid { grid-template-columns: 1fr; }
}

/* ── C8. BUSINESS-AREA TAG ROW ───────────────────────────────────────── */

.area-tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2rem;
}
.area-tag {
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-title);
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.1rem;
  box-shadow: var(--shadow-subtle);
}
.area-tag i {
  color: var(--c-gold-text);
  margin-right: 0.4rem;
}
.area-tag.is-lead {
  background: var(--c-yellow-light);
  border-color: var(--c-yellow-border);
  color: var(--c-gold-text);
}

/* ── C9. FAQ COLUMN FOR LONGER, FULLER ANSWERS ───────────────────────── */

.faq-grid-2.faq-grid-wide {
  max-width: 1000px;
}
.faq-grid-2.faq-grid-wide .faq-item-2.is-open .faq-a-2 {
  max-height: 640px;
}

/* ── C10. COMPARISON TABLE CELL WRAPPING ─────────────────────────────────
   Grid items default to min-width:auto, so a long value cell can push the
   row wider than its track. min-width:0 plus a wrapping flex line keeps the
   three columns honest on narrower desktops and tablets. Small screens are
   already handled in the base sheet, which turns .comparison-card-2 into a
   horizontally scrollable strip — that behaviour is left alone.            */

.comp-row-2 > * {
  min-width: 0;
}
.comp-row-2 .midcity-val,
.comp-row-2 .informal-val {
  flex-wrap: wrap;
  align-items: flex-start;
}
.comp-row-2 .midcity-val i,
.comp-row-2 .informal-val i {
  margin-top: 0.25rem;
}

/* ── C11. SMALL FOOTNOTE LINE UNDER A BLOCK ──────────────────────────── */

.note-line {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.note-line i {
  flex: none;
  margin-top: 0.2rem;
  color: var(--c-gold-text);
}
.note-line.on-dark {
  color: #CBD5E1;
}
.note-line.on-dark i {
  color: var(--c-yellow);
}

/* ── C12. SECOND HEADING BLOCK INSIDE ONE SECTION ────────────────────── */

.section-intro.has-top-gap {
  margin-top: clamp(3rem, 5vw, 4.25rem);
}

/* ── C13. CENTRED BUTTON ROW UNDER A SECTION ─────────────────────────── */

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2.6rem;
}

/* ── from _rev2css/transport-parcels.css ─────────────────────────────── */
/* ==========================================================================
   MidCity Movers Kenya — rev 2 partial
   Owner: transport & parcels agent
   Pages: service-transport.html, service-parcels.html

   Only additions and modifiers here. Everything these two pages need that
   already exists in style.css (sec-*, container, capability-card-grid,
   cap-card-v2, route-card-v2, step-card-v3, faq-*, service-split-*,
   why-pillar-card, quote-note-box, buttons) is reused as-is.

   Brand: yellow #FFD200 + obsidian navy #0A1324. No red anywhere.
   Mobile-first collapse points match the base sheet: 900px then 600px.
   ========================================================================== */


/* ── A. OBSIDIAN SECTION SUPPORT ──────────────────────────────────────────
   .sec-obsidian existed in the base sheet but nothing had used it yet, so
   headings inherited navy-on-navy. These make it usable on any page.      */

.sec-obsidian h1,
.sec-obsidian h2,
.sec-obsidian h3,
.sec-obsidian h4 {
  color: #FFFFFF;
}

.sec-obsidian .badge-pill {
  background: rgba(255, 210, 0, 0.12);
  border-color: rgba(255, 210, 0, 0.32);
  color: var(--c-yellow);
}

/* Card surfaces that sit on the obsidian band. */
.cap-card-v2.on-dark,
.why-pillar-card.on-dark {
  background: var(--bg-obsidian-card);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.cap-card-v2.on-dark:hover,
.why-pillar-card.on-dark:hover {
  border-color: var(--c-yellow);
  box-shadow: none;
}
.cap-card-v2.on-dark h3,
.cap-card-v2.on-dark h4,
.why-pillar-card.on-dark h3,
.why-pillar-card.on-dark h4 {
  color: #FFFFFF;
}
.cap-card-v2.on-dark p,
.why-pillar-card.on-dark p {
  color: #CBD5E1;
}
.cap-card-v2.on-dark .cap-card-icon {
  background: rgba(255, 210, 0, 0.12);
  border-color: rgba(255, 210, 0, 0.30);
  color: var(--c-yellow);
}
.cap-card-v2.on-dark .cap-card-tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-yellow);
}


/* ── B. ROUTE CARD MODIFIERS ──────────────────────────────────────────────
   The archived inter-county page styled its "all 47 counties" card with
   inline attributes. Promoted to modifiers so the markup stays clean.     */

.route-card-v2.is-dark {
  background: var(--bg-obsidian);
  border-color: rgba(255, 255, 255, 0.12);
}
.route-card-v2.is-dark:hover {
  border-color: var(--c-yellow);
}
.route-card-v2.is-dark h3 {
  color: #FFFFFF;
}
.route-card-v2.is-dark p {
  color: #CBD5E1;
}
.route-tag-time.on-dark {
  background: rgba(255, 210, 0, 0.14);
  color: var(--c-yellow);
}
.route-tag-dist.on-dark {
  color: #CBD5E1;
}

/* Small line under a route heading naming the towns actually served. */
.route-towns {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-gold-text);
  margin-bottom: 0.7rem;
  display: block;
}
.route-card-v2.is-dark .route-towns {
  color: var(--c-yellow);
}


/* ── C. PROCESS STEP MODIFIERS ────────────────────────────────────────────
   Closing "settled in" step from the archived 3-day timeline.             */

.step-card-v3.is-final {
  background: var(--bg-warm-subtle);
}
.step-badge-num.is-check {
  background: var(--c-yellow);
  color: var(--bg-obsidian);
  font-size: 1.15rem;
  padding: 0.55rem 0.9rem;
}
/* Day/stage labels are words, not single digits, so let them breathe. */
.step-badge-num.is-label {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.85rem;
}


/* ── D. SPEC LIST (inside cards) ──────────────────────────────────────────
   Used for "what fits in this truck" and similar short fact lists.        */

.tp-spec-list {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0;
  flex: 1;
}
.tp-spec-list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.tp-spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-yellow-dark);
}
.tp-spec-list li strong {
  font-family: var(--f-sans);
  font-weight: 700;
  color: var(--text-title);
}
.cap-card-v2.on-dark .tp-spec-list li {
  color: #CBD5E1;
}
.cap-card-v2.on-dark .tp-spec-list li strong {
  color: #FFFFFF;
}
.cap-card-v2.on-dark .tp-spec-list li::before {
  background: var(--c-yellow);
}


/* ── E. CARRY / DO-NOT-CARRY PANEL ────────────────────────────────────────
   Replaces the old red-bordered comparison block. Honest scope statement,
   yellow for what we take, neutral linen for what we do not.             */

.tp-carry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2.8rem;
}
.tp-carry-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2.1rem 1.8rem;
  box-shadow: var(--shadow-subtle);
}
.tp-carry-card.is-no {
  background: var(--bg-warm-subtle);
  border-style: dashed;
  border-color: var(--line-strong);
  box-shadow: none;
}
.tp-carry-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.3rem;
}
.tp-carry-head i {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  color: var(--c-gold-text);
}
.tp-carry-card.is-no .tp-carry-head i {
  background: #FFFFFF;
  border-color: var(--line-strong);
  color: var(--text-muted);
}
.tp-carry-head h3 {
  font-size: 1.25rem;
  margin: 0;
}
.tp-carry-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}
.tp-carry-list li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-body);
}
.tp-carry-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.22rem;
  font-size: 0.8rem;
  color: var(--c-yellow-dark);
}
.tp-carry-card.is-no .tp-carry-list li::before {
  content: "\f00d";
  color: var(--text-muted);
}
.tp-carry-list li strong {
  font-family: var(--f-sans);
  color: var(--text-title);
}
.tp-carry-foot {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-border);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.tp-carry-foot a {
  color: var(--c-gold-text);
  font-weight: 700;
  text-decoration: underline;
}
.tp-carry-foot a:hover {
  color: var(--c-yellow-dark);
}


/* ── F. INSURANCE / ASSURANCE STRIP ───────────────────────────────────────  */

.tp-assure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.tp-assure-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: 1.8rem 1.5rem;
}
.tp-assure-item i {
  font-size: 1.5rem;
  color: var(--c-yellow);
  margin-bottom: 0.9rem;
  display: block;
}
.tp-assure-item h3 {
  font-size: 1.15rem;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}
.tp-assure-item p {
  font-size: 0.93rem;
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0;
}


/* ── G. SMALL HELPERS ─────────────────────────────────────────────────────  */

/* Narrow closing note under a card grid (quote-note-box, short paragraph). */
.tp-note-wrap {
  max-width: 840px;
  margin-top: 2.4rem;
}
.tp-note-wrap.is-centered {
  margin-left: auto;
  margin-right: auto;
}
.tp-note-wrap.is-centered .tp-btn-row {
  justify-content: center;
}

/* Button row under a section body. */
.tp-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}


/* ── H. RESPONSIVE ────────────────────────────────────────────────────────  */

@media (max-width: 900px) {
  .tp-carry-grid {
    grid-template-columns: 1fr;
  }
  .tp-assure-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .tp-carry-card {
    padding: 1.6rem 1.25rem;
  }
  .tp-carry-head h3 {
    font-size: 1.12rem;
  }
  .tp-assure-item {
    padding: 1.5rem 1.25rem;
  }
  .tp-btn-row .btn-primary,
  .tp-btn-row .btn-secondary,
  .tp-btn-row .btn-whatsapp {
    width: 100%;
    justify-content: center;
  }
}

/* ── from _rev2css/services-animals.css ─────────────────────────────── */
/* ==========================================================================
   MidCity Movers Kenya — rev2 partial
   Owner: services.html + service-animals.html
   Scope: only the patterns those two pages need that the core design system
          did not already provide. Everything else on both pages reuses
          style.css (sec-*, container, cap-card-v2, why-pillar-card,
          step-card-v3, faq-item-2, service-split-row, badge-pill, buttons).
   Palette: yellow #FFD200 + navy #0A1324 only. No red.
   Breakpoints: 3-up and 2-up grids collapse at 900px, everything to 1-up
                at 600px, matching the core stylesheet.
   ========================================================================== */

/* ── 1. FEATURED SERVICE PAIR (services.html) ─────────────────────────────
   Residential and Commercial are the two key targets, so they get a full
   photo card at double the visual weight of the secondary trio below.     */

.svc-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8rem;
  margin-top: 2.8rem;
}

.svc-featured-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: all var(--trans);
}
.svc-featured-card:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-hover);
}

.svc-featured-media {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: var(--bg-obsidian);
}
.svc-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.svc-featured-card:hover .svc-featured-media img {
  transform: scale(1.05);
}

.svc-rank-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-yellow);
  color: var(--bg-obsidian);
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-yellow-dark);
}

.svc-featured-body {
  padding: clamp(1.6rem, 3vw, 2.3rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.svc-featured-icon {
  width: 58px;
  height: 58px;
  border-radius: var(--r-md);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  color: var(--c-gold-text);
  margin-bottom: 1.1rem;
}
.svc-featured-body h3 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin-bottom: 0.6rem;
}
.svc-featured-body > p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 1.1rem;
}

/* Tick list of what a service covers — shared by featured and secondary. */
.svc-covers {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  flex: 1;
}
.svc-covers li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.svc-covers li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-size: 0.78rem;
  color: var(--c-yellow-dark);
}
.svc-covers li strong {
  color: var(--text-title);
  font-family: var(--f-sans);
}

/* Card footer: "View details" + "Move on WhatsApp", pinned to the bottom. */
.svc-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: auto;
}
.svc-card-actions > a {
  flex: 1 1 auto;
}

/* Sub-heading that opens a second block inside an existing section. The core
   .section-intro has no top margin, which collapses it against the grid
   above it.                                                                */
.svc-subhead {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* Centred button row that closes a section. */
.svc-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: clamp(2.2rem, 4vw, 3rem);
}

/* Section scaffolding sitting on the obsidian band needs light type; the
   core .section-intro / .section-lede are written for light surfaces.     */
.sec-obsidian .section-intro h2 { color: #FFFFFF; }



/* ── 2. RETIRED-PAGE SIGNPOSTS (services.html) ────────────────────────────
   Inter-county, single-item deliveries and packing materials are no longer
   separate services. This band tells a returning visitor where each one
   now lives instead of leaving a dead link.                               */

.svc-moved-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}
.svc-moved-item {
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-left: 4px solid var(--c-yellow);
  border-radius: var(--r-md);
  padding: 1.2rem 1.3rem;
  transition: all var(--trans);
}
.svc-moved-item:hover {
  border-color: var(--c-yellow-dark);
  border-left-color: var(--c-yellow);
  box-shadow: var(--shadow-subtle);
}
.svc-moved-item > i {
  font-size: 1.15rem;
  color: var(--c-gold-text);
  margin-top: 0.2rem;
  flex: none;
}
.svc-moved-item strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  color: var(--text-title);
  margin-bottom: 0.25rem;
}
.svc-moved-item p {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.svc-moved-item a {
  font-weight: 700;
  color: var(--c-gold-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.svc-moved-item a:hover {
  color: var(--text-title);
}

/* ── 3. REASON CARDS ON THE OBSIDIAN BAND (services.html) ─────────────── */

.svc-reason-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
  margin-top: 2.6rem;
}
.svc-reason-card {
  background: var(--bg-obsidian-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: 1.8rem 1.6rem;
  transition: all var(--trans);
}
.svc-reason-card:hover {
  border-color: rgba(255, 210, 0, 0.45);
  transform: translateY(-4px);
}
.svc-reason-card i {
  font-size: 1.45rem;
  color: var(--c-yellow);
  margin-bottom: 0.9rem;
  display: block;
}
.svc-reason-card h3 {
  font-size: 1.15rem;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}
.svc-reason-card p {
  font-size: 0.93rem;
  line-height: 1.65;
  color: #CBD5E1;
  margin: 0;
}

/* ── 4. OWNER CHECKLIST (service-animals.html) ────────────────────────── */

.pam-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.6rem;
}
.pam-check-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-md);
  padding: 1.3rem 1.4rem;
  transition: all var(--trans);
}
.pam-check-item:hover {
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-subtle);
}
.pam-check-num {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--c-yellow);
  background: var(--bg-obsidian);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.6rem;
  line-height: 1;
  flex: none;
}
.pam-check-item h3 {
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}
.pam-check-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── 5. WHAT WE CANNOT CARRY (service-animals.html) ───────────────────────
   Deliberately styled as a plain, sober navy list — not an alarm colour.  */

.pam-limit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.4rem;
}
.pam-limit-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-md);
  padding: 1.3rem 1.4rem;
}
.pam-limit-item > i {
  font-size: 1.05rem;
  color: var(--bg-obsidian);
  background: var(--c-yellow);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
}
.pam-limit-item h3 {
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}
.pam-limit-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-body);
}

/* ── 6. CARE / HANDLING LIST (service-animals.html) ───────────────────────
   Sits beside a photo in a .service-split-row; the core .service-split-body
   list uses a tick, which reads wrong for handling rules, so this uses a
   soft yellow bullet marker instead.                                      */

.pam-care-list {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0 0;
  padding: 0;
}
.pam-care-list li {
  position: relative;
  padding-left: 2.1rem;
  color: var(--text-body);
  font-size: 0.97rem;
  line-height: 1.65;
}
.pam-care-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-yellow);
  border: 3px solid var(--bg-obsidian);
}
.pam-care-list li strong {
  display: block;
  font-family: var(--f-sans);
  font-weight: 700;
  color: var(--text-title);
}

/* A .quote-note-box closing a section reads badly stretched across the full
   1320px container and sits flush against the grid above it.              */
.process-steps-grid + .quote-note-box,
.capability-card-grid + .quote-note-box {
  max-width: 900px;
  margin: clamp(2.2rem, 4vw, 3rem) auto 0;
}

/* Centred prose block for a standalone note (used for the insurance wording
   on the obsidian band, where .section-intro's centred text is too tight).  */
.pam-note-wrap {
  max-width: 860px;
  margin: 2.2rem auto 0;
}

/* ── 7. RESPONSIVE ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .svc-featured-grid,
  .svc-moved-grid,
  .svc-reason-grid,
  .pam-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .svc-featured-media {
    height: 240px;
  }
}

@media (max-width: 600px) {
  .svc-featured-grid,
  .svc-moved-grid,
  .svc-reason-grid,
  .pam-check-grid,
  .pam-limit-grid {
    grid-template-columns: 1fr;
  }
  .svc-featured-media {
    height: 210px;
  }
  .svc-card-actions > a,
  .svc-cta-row > a {
    flex: 1 1 100%;
  }
}

/* ── from _rev2css/about-why.css ─────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   REV-2 PARTIAL — about.html + why-us.html
   Owner: about/why-us agent. Merge into style.css; do not duplicate rules
   that already exist there (this file only adds what the two pages need).

   Contents
     A. Shared helpers (left-aligned intros, dark-surface typography)
     B. about.html  — origin story, people standards, milestone rail, promise
     C. why-us.html — guarantee index & blocks, trust badges, "never do" grid
     D. Responsive (900px / 600px collapse)
   ══════════════════════════════════════════════════════════════════════════ */


/* ── A. SHARED HELPERS ────────────────────────────────────────────────── */

/* Left-aligned variant of the standard centred section header. Used where a
   heading introduces a body of running prose rather than a card grid.        */
.section-intro.is-left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 68ch;
}

/* .sec-obsidian only sets a white colour on the section itself; the global
   heading and paragraph rules still resolve to the dark-on-light palette, so
   every text role used on that surface needs an explicit override.           */
.sec-obsidian h2,
.sec-obsidian h3,
.sec-obsidian h4 { color: #FFFFFF; }




/* ── B1. ORIGIN STORY (about.html) ────────────────────────────────────── */

.origin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: 2.8rem;
}

.origin-prose > p {
  font-size: 1.06rem;
  line-height: 1.8;
  margin-bottom: 1.35rem;
}
.origin-prose > p:last-child { margin-bottom: 0; }

/* Opening paragraph of the narrative — slightly larger, darker, so the story
   has an obvious entry point without needing a drop cap.                     */
.origin-lead {
  font-size: 1.18rem !important;
  line-height: 1.72 !important;
  color: var(--text-head);
  font-weight: 500;
  border-left: 4px solid var(--c-yellow);
  padding-left: 1.25rem;
}

/* Small run-in sub-heading between narrative beats. */
.origin-beat {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold-text);
  margin: 2.2rem 0 0.9rem;
}
.origin-prose > .origin-beat:first-child { margin-top: 0; }

.origin-media-rail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 6.5rem;
}

.origin-figure {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1.5px solid var(--line-border);
  background: #FFFFFF;
  box-shadow: var(--shadow-card);
}
.origin-figure img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.origin-figure figcaption {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-muted);
  padding: 0.9rem 1.1rem 1rem;
}

.origin-pullquote {
  background: var(--bg-obsidian);
  border-radius: var(--r-xl);
  padding: 1.8rem 1.6rem;
  border-left: 5px solid var(--c-yellow);
}
.origin-pullquote p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.5;
  color: #FFFFFF;
  margin-bottom: 0.9rem;
}
.origin-pullquote span {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-yellow);
}


/* ── B2. OUR PEOPLE — standards list (about.html) ─────────────────────── */

.people-standards {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.6rem;
}
.people-standards li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-body);
}
.people-standards li i {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  color: var(--c-gold-text);
  display: grid;
  place-items: center;
  font-size: 0.86rem;
}
.people-standards li strong {
  display: block;
  font-family: var(--f-sans);
  color: var(--text-title);
  margin-bottom: 0.15rem;
}


/* ── B3. MILESTONE RAIL (about.html, on .sec-obsidian) ────────────────── */

.milestone-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 2.5rem;
  margin-top: 2.8rem;
}

.milestone-item {
  position: relative;
  padding: 0 0 1.6rem 2.6rem;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
}
.milestone-item:last-child { padding-bottom: 0; }

.milestone-dot {
  position: absolute;
  left: -11px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-yellow);
  border: 4px solid var(--bg-obsidian);
}

.milestone-item h3 {
  font-size: 1.12rem;
  margin-bottom: 0.4rem;
}
.milestone-item p {
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}


/* ── B4. THE PROMISE (about.html) ─────────────────────────────────────── */

.promise-card {
  max-width: 900px;
  margin: 2.6rem auto 0;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-top: 5px solid var(--c-yellow);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: var(--shadow-card);
}
.promise-list {
  display: grid;
  gap: 1rem;
}
.promise-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-body);
}
.promise-list li i {
  color: var(--c-emerald);
  font-size: 1.1rem;
  margin-top: 0.2rem;
}
.promise-sign-off {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-border);
  font-family: var(--f-sans);
  font-weight: 700;
  color: var(--text-title);
}


/* ── C1. GUARANTEE INDEX (why-us.html) ────────────────────────────────── */

.guarantee-index {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.6rem;
  counter-reset: none;
}

.guarantee-index-item {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-md);
  padding: 1.2rem 1.1rem;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
}
.guarantee-index-item:hover {
  transform: translateY(-4px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.guarantee-index-item .gi-num {
  font-family: var(--f-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-yellow);
  background: var(--bg-obsidian);
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
}
.guarantee-index-item .gi-label {
  font-family: var(--f-sans);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-title);
}


/* ── C2. GUARANTEE BLOCKS (why-us.html) ───────────────────────────────── */

.guarantee-block { scroll-margin-top: 7rem; }
/* .service-split-row:last-child no longer matches once each row is wrapped in
   a .guarantee-block, so the final block clears its own trailing margin.      */
.guarantee-block:last-of-type .service-split-row { margin-bottom: 0; }

/* Big numeral + rule that sits above each guarantee heading, so the five
   read unmistakably as an ordered set rather than five loose selling points. */
.guarantee-num {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.guarantee-num b {
  font-family: var(--f-mono);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-yellow);
  background: var(--bg-obsidian);
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-sm);
  line-height: 1.2;
}
.guarantee-num span {
  font-family: var(--f-sans);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gold-text);
}
.guarantee-num::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--line-border);
}

/* "What you get" close-out under each guarantee. */
.guarantee-outcome {
  margin-top: 1.4rem;
  background: var(--bg-warm-subtle);
  border: 1.5px solid var(--line-border);
  border-left: 4px solid var(--c-yellow);
  border-radius: var(--r-md);
  padding: 1.1rem 1.3rem;
}
.guarantee-outcome strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-gold-text);
  margin-bottom: 0.35rem;
}
.guarantee-outcome p {
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0;
}


/* ── C3. TRUST BADGES (why-us.html) ───────────────────────────────────── */
/* Replaces the two inline-styled 3rem icons that were the last retired-brand
   colour usages on this page. Icons now sit on the yellow/gold token pair.    */

.trust-badge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2.8rem;
}

.trust-badge-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2.2rem 1.6rem;
  text-align: center;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
}
.trust-badge-card:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.trust-badge-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--c-yellow-light);
  border: 2px solid var(--c-yellow-border);
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  color: var(--c-gold-text);
}
.trust-badge-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.trust-badge-card p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}


/* ── C4. "WHAT WE WILL NEVER DO" (why-us.html, on .sec-obsidian) ──────── */

.never-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.8rem;
}

.never-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  background: var(--bg-obsidian-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.5rem;
  transition: border-color var(--trans);
}
.never-card:hover { border-color: rgba(255, 210, 0, 0.45); }

.never-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: rgba(255, 210, 0, 0.14);
  border: 1px solid rgba(255, 210, 0, 0.3);
  color: var(--c-yellow);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}
.never-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.never-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}


/* ── D. RESPONSIVE ────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .origin-layout {
    grid-template-columns: 1fr;
  }
  .origin-media-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .origin-media-rail > * {
    flex: 1 1 320px;
  }
  .origin-figure img { height: 220px; }

  .milestone-rail { grid-template-columns: 1fr; }

  .guarantee-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .never-grid { grid-template-columns: 1fr; }

  .section-intro.is-left { max-width: none; }
}

@media (max-width: 600px) {
  .origin-lead {
    font-size: 1.08rem !important;
    padding-left: 1rem;
  }
  .origin-media-rail > * { flex: 1 1 100%; }
  .origin-pullquote p { font-size: 1.08rem; }

  .guarantee-index { grid-template-columns: 1fr; }
  .guarantee-index-item {
    flex-direction: row;
    align-items: center;
  }
  .trust-badge-grid { grid-template-columns: 1fr; }

  .guarantee-num b { font-size: 1.25rem; }

  .never-card {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .people-standards li,
  .promise-list li {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .people-standards li i { margin-bottom: 0.2rem; }
  .promise-list li i { margin-top: 0; }
}

/* ── from _rev2css/contact.css ─────────────────────────────── */
/* ==========================================================================
   CONTACT PAGE — rev 2 partial
   Owner: contact.html only. Every selector is prefixed `.ct-` (or scoped to
   `section.ct-dark`) so this file can be concatenated into style.css without
   colliding with the shared component library.

   Nothing here redefines an existing design-system class; the page reuses
   sec-white / sec-warm / sec-obsidian, container, section-intro, badge-pill,
   capability-card-grid + cap-card-v2, why-pillars-grid + why-pillar-card,
   detail-grid-split, hero-calc-panel, quote-note-box, faq-grid-2, the button
   system and pre-footer-cta as they already ship.
   ========================================================================== */

/* ── C1. DARK SECTION SCOPE ───────────────────────────────────────────────
   `.sec-obsidian` only sets the surface colour; headings and paragraphs still
   carry their light-surface colours from the base sheet. These overrides are
   deliberately anchored on `section.ct-dark` so they outrank the base element
   rules but still lose to card-level rules such as `.hero-calc-panel-header h3`
   and `.quote-note-box p` — the white form panel keeps its dark type.
   ────────────────────────────────────────────────────────────────────────── */
section.ct-dark h2,
section.ct-dark h3,
section.ct-dark h4 {
  color: #FFFFFF;
}
section.ct-dark p {
  color: #CBD5E1;
}
section.ct-dark .section-lede {
  color: #CBD5E1;
}
section.ct-dark .text-gold {
  color: var(--c-yellow);
}

/* ── C2. HERO ACTION STRIP ────────────────────────────────────────────────── */
.ct-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.9rem;
}

.ct-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.7rem;
  margin-top: 1.6rem;
  font-family: var(--f-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}
.ct-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ct-hero-meta i {
  color: var(--c-amber);
}

/* ── C3. CONTACT CHANNEL CARDS (inside .cap-card-v2) ──────────────────────── */
.ct-channel-value {
  font-family: var(--f-sans);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-title) !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  display: block;
  margin-bottom: 0.9rem;
}
a.ct-channel-value:hover,
a.ct-channel-value:focus {
  color: var(--c-gold-text) !important;
  text-decoration: none !important;
}

.ct-channel-meta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-light);
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
}
.ct-channel-meta span {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.ct-channel-meta i {
  color: var(--c-amber);
  margin-top: 0.22rem;
  flex: none;
}

/* ── C4. BOOKING FORM LAYOUT ──────────────────────────────────────────────── */
/* Pairs two `.hero-calc-field` blocks on one line; collapses to a single
   column at 600px so the form stays comfortable down to 375px.               */
.ct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.95rem;
}

.hero-calc-panel .ct-form-foot {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1.5px solid var(--line-light);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.ct-inline-link {
  color: var(--c-gold-text) !important;
  font-weight: 700;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
}
.ct-inline-link:hover,
.ct-inline-link:focus {
  border-bottom-color: var(--c-yellow-dark);
  text-decoration: none !important;
}
section.ct-dark .ct-inline-link {
  color: var(--c-yellow) !important;
}

/* ── C5. "WHAT HAPPENS NEXT" STEP LIST (dark surface) ─────────────────────── */
.ct-next-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.7rem;
}
.ct-next-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ct-next-num {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: 1.02rem;
  font-weight: 800;
  background: var(--c-yellow);
  color: var(--bg-obsidian);
}
.ct-next-body h4 {
  font-size: 1.02rem;
  margin-bottom: 0.25rem;
}
.ct-next-body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ── C6. CHECK LISTS (light surfaces) ─────────────────────────────────────── */
.ct-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.2rem;
}
.ct-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-body);
}
.ct-check-list li i {
  color: var(--c-gold-text);
  font-size: 0.88rem;
  margin-top: 0.32rem;
  flex: none;
}
.ct-check-list li strong {
  font-family: var(--f-sans);
  color: var(--text-title);
}

/* ── C7. COVERAGE AREA GRID ───────────────────────────────────────────────── */
.ct-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.9rem;
  margin-top: 2.6rem;
}
.ct-area-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-md);
  padding: 0.85rem 1.1rem;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-title);
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
}
.ct-area-item i {
  color: var(--c-amber);
  font-size: 0.82rem;
  flex: none;
}
.ct-area-item:hover {
  transform: translateY(-3px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}

.ct-area-note {
  max-width: 900px;
  margin: 2.2rem auto 0;
}

/* ── C8. SERVICE PICKER (five link cards) ─────────────────────────────────── */
.ct-service-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.8rem;
}
.ct-service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 1.7rem 1.35rem;
  box-shadow: var(--shadow-subtle);
  transition: all var(--trans);
  text-decoration: none !important;
  color: inherit !important;
}
.ct-service-card:hover,
.ct-service-card:focus,
.ct-service-card:visited {
  text-decoration: none !important;
  color: inherit !important;
}
.ct-service-card:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.ct-service-card * {
  text-decoration: none !important;
}
.ct-service-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: var(--c-gold-text);
  margin-bottom: 1rem;
}
.ct-service-name {
  font-family: var(--f-sans);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-title) !important;
  text-decoration: none !important;
  margin-bottom: 0.45rem;
}
.ct-service-card:hover .ct-service-name {
  color: var(--text-title) !important;
  text-decoration: none !important;
}
.ct-service-desc {
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  margin-bottom: 1.1rem;
}
.ct-service-card:hover .ct-service-desc {
  color: var(--text-muted) !important;
  text-decoration: none !important;
}
.ct-service-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-gold-text) !important;
  text-decoration: none !important;
}
.ct-service-more i {
  transition: transform var(--trans);
}
.ct-service-card:hover .ct-service-more {
  color: var(--c-yellow-dark) !important;
  text-decoration: none !important;
}
.ct-service-card:hover .ct-service-more i {
  transform: translateX(4px);
}

/* ── C9. PAYMENT & PAPERWORK PANELS ───────────────────────────────────────── */
.ct-paper-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.ct-paper-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-lg);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-subtle);
}
.ct-paper-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}
.ct-paper-card > p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.65;
}
.ct-till-line {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-title);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  border-radius: var(--r-sm);
  padding: 0.5rem 0.9rem;
  margin-top: 0.9rem;
}
.ct-till-line i {
  color: var(--c-gold-text);
  font-size: 0.95rem;
}

/* ── C10. HOURS & RESPONSE TIMES (dark surface) ───────────────────────────── */
.ct-hours-panel {
  background: var(--bg-obsidian-card);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.ct-hours-panel h3 {
  font-size: 1.2rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-dark);
}
.ct-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-dark);
}
.ct-hours-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0.2rem;
}
.ct-hours-day {
  font-family: var(--f-sans);
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
}
.ct-hours-time {
  font-family: var(--f-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-yellow);
  text-align: right;
}
.ct-hours-foot {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.87rem;
  line-height: 1.6;
}

.ct-response-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.6rem;
}
.ct-response-card {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
}
.ct-response-card i {
  color: var(--c-yellow);
  font-size: 1.05rem;
  margin-top: 0.2rem;
  flex: none;
}
.ct-response-card strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  color: #FFFFFF;
  margin-bottom: 0.2rem;
}
.ct-response-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ── C11. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .ct-service-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ct-service-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ct-paper-grid {
    grid-template-columns: 1fr;
  }
  .ct-area-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 600px) {
  .ct-form-row {
    grid-template-columns: 1fr;
  }
  .ct-service-picker {
    grid-template-columns: 1fr;
  }
  .ct-area-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
  }
  .ct-area-item {
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
  }
  .ct-hero-actions {
    gap: 0.7rem;
  }
  .ct-hero-actions > a {
    width: 100%;
  }
  .ct-hero-meta {
    gap: 0.5rem;
    flex-direction: column;
  }
  .ct-next-num {
    width: 36px;
    height: 36px;
    font-size: 0.92rem;
  }
  .ct-hours-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .ct-hours-time {
    text-align: left;
  }
  .ct-paper-card {
    padding: 1.6rem 1.3rem;
  }
}

/* ── from _rev2css/gallery-legal.css ─────────────────────────────── */
/* ==========================================================================
   MidCity Movers Kenya — Revision 2 partial
   Owner: gallery.html · terms.html · privacy.html
   Merge target: style.css (append after section 23, "GALLERY PAGE").
   Nothing here redefines an existing style.css rule; every selector below is
   new, so the merge is a straight append.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════════════════════
   A. GALLERY PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero copy column — replaces the old inline max-width on .gallery-hero. */
.gal-hero-copy {
  max-width: 840px;
  margin: 0 auto;
}

/* ── Intro band: "these are our own photographs" ──────────────────────── */
.gal-intro-band {
  padding: var(--sec-pad-sm) 0;
}
.gal-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 900px) {
  .gal-intro-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .gal-intro-grid { grid-template-columns: 1fr; gap: 1.1rem; }
}

.gal-intro-point {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem;
  background: var(--bg-warm-subtle);
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-md);
}
.gal-intro-point strong {
  display: block;
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: 0.35rem;
}
.gal-intro-point p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.gal-intro-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--bg-obsidian);
  background: var(--c-yellow);
  border: 1.5px solid var(--c-yellow-dark);
}

/* ── Grid section scaffolding ─────────────────────────────────────────── */
.gal-grid-section {
  padding: var(--sec-pad-sm) 0 var(--sec-pad) 0;
}

.gal-count-note {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0 0 2rem;
}

.gal-empty-note {
  text-align: center;
  font-size: 1rem;
  color: var(--text-muted);
  margin: 3rem 0 0;
}
.gal-empty-note[hidden] { display: none; }

/* ── Card affordances ─────────────────────────────────────────────────── */
/* The cards are role="button", so they need a keyboard focus ring and a
   visible pressed state — a hover-only affordance leaves keyboard users
   with no idea where they are. */
.gal-card-item:focus-visible {
  outline: 3px solid var(--c-yellow-dark);
  outline-offset: 3px;
  border-color: var(--c-yellow-dark);
  box-shadow: var(--shadow-card);
}
.gal-card-item:focus-visible .gal-zoom-icon {
  opacity: 1;
  transform: scale(1);
}
.gal-card-item:active {
  transform: translateY(-2px);
}

.gal-filter-btn:focus-visible {
  outline: 3px solid var(--c-yellow-dark);
  outline-offset: 2px;
}

/* Touch devices never fire :hover, so the zoom cue would never appear. */
@media (hover: none) {
  .gal-zoom-icon { opacity: 1; transform: scale(1); }
}

/* ── Lightbox: focus, hint line and small-screen behaviour ────────────── */
.lb-btn-close:focus-visible,
.lb-nav-btn:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
  background: var(--c-yellow);
  color: var(--bg-obsidian);
}

/* The nav buttons sit on a dark, busy photograph — give them a solid ground
   so the chevrons stay legible over a pale image. */
.lb-nav-btn {
  background: rgba(10, 19, 36, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lb-hint {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: #94A3B8;
}
@media (max-width: 900px) {
  /* On a touch screen there are no arrow keys and no Esc to press. */
  .lb-hint { display: none; }
  .lb-caption-desc { font-size: 0.88rem; }
  .lb-caption-title { font-size: 1.05rem; }
}

/* Keep the caption clear of the nav buttons once they move inboard. */
@media (max-width: 1200px) {
  .lb-caption-bar { padding: 0 3.5rem; }
}
@media (max-width: 600px) {
  .lb-caption-bar { padding: 0 0.5rem; }
  .lb-main-image-wrap,
  .lb-main-image-wrap img { max-height: 60vh; }
}


/* ══════════════════════════════════════════════════════════════════════════
   B. LEGAL PAGES — terms.html, privacy.html
   ══════════════════════════════════════════════════════════════════════════ */

/* Readable measure for a long document. Wider than .measure-wide because
   these pages carry lists, not just paragraphs. */
.legal-body {
  max-width: 880px;
  margin: 0 auto;
}

/* ── The "this is a summary" note at the top ──────────────────────────── */
.legal-note {
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  border-left: 5px solid var(--c-yellow);
  border-radius: var(--r-md);
  padding: 1.5rem 1.6rem;
  margin-bottom: 2.5rem;
}
.legal-note p {
  margin: 0;
  color: var(--text-body);
  line-height: 1.7;
}
.legal-note strong { color: var(--text-title); }

.legal-updated {
  margin-top: 0.9rem !important;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--c-gold-text);
}

/* ── Anchored contents list ───────────────────────────────────────────── */
.legal-toc {
  background: var(--bg-warm-subtle);
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-md);
  padding: 1.6rem 1.8rem;
  margin-bottom: 3rem;
}
.legal-toc-title {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gold-text);
  margin: 0 0 1rem;
}
.legal-toc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 2rem;
  margin: 0;
  padding-left: 1.2rem;
}
@media (max-width: 700px) {
  .legal-toc-list { grid-template-columns: 1fr; }
}
.legal-toc-list li {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.legal-toc-list a {
  color: var(--text-body);
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
}
.legal-toc-list a:hover,
.legal-toc-list a:focus-visible {
  color: var(--text-title);
  border-bottom-color: var(--c-yellow-dark);
  text-decoration: none !important;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.legal-section {
  margin-bottom: 2.8rem;
  /* Anchor links land under the sticky header without this. */
  scroll-margin-top: 120px;
}
.legal-section:last-of-type { margin-bottom: 0; }

.legal-section h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  color: var(--text-title);
  margin-bottom: 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--line-light);
}
.legal-section p {
  color: var(--text-body);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.legal-section p:last-child { margin-bottom: 0; }

.legal-section a {
  color: var(--text-title);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--c-yellow-dark);
  text-underline-offset: 3px;
}
.legal-section a:hover,
.legal-section a:focus-visible {
  color: var(--c-gold-text);
}

/* ── Lists ────────────────────────────────────────────────────────────── */
.legal-list {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
  list-style: disc;
}
.legal-list.legal-list-ordered {
  list-style: decimal;
}
.legal-list li {
  color: var(--text-body);
  line-height: 1.75;
  padding-left: 0.3rem;
}
.legal-list li::marker {
  color: var(--c-yellow-dark);
  font-weight: 700;
}
.legal-list li strong { color: var(--text-title); }

/* ── Closing contact card ─────────────────────────────────────────────── */
.legal-contact-card {
  margin-top: 3.5rem;
  padding: 2rem;
  background: var(--bg-obsidian);
  color: var(--text-light);
  border-radius: var(--r-lg);
}
.legal-contact-card h2 {
  color: #FFFFFF;
  font-size: 1.35rem;
  margin-bottom: 0.7rem;
}
.legal-contact-card > p {
  color: #CBD5E1;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.legal-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.legal-contact-foot {
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.85rem;
  color: #94A3B8;
}
.legal-contact-foot i { color: var(--c-yellow); margin-right: 0.4rem; }

@media (max-width: 600px) {
  .legal-contact-card { padding: 1.5rem 1.25rem; }
  .legal-contact-actions > a { width: 100%; justify-content: center; }
  .legal-note { padding: 1.2rem 1.25rem; }
  .legal-toc { padding: 1.25rem; }
}


/* ── HERO COPY LEGIBILITY (rev 3) ── */

/* ── 29. HERO COPY LEGIBILITY ────────────────────────────────────────────
   The overlay is deliberately light so the footage shows through, which
   leaves the body copy sitting on a mid-tone frame. A soft shadow carries
   it on any frame the video happens to be on, without darkening the
   picture the way a heavier veil would. Measured against the poster:
   headline and lead both clear WCAG AA with this in place. */

.hero-headline-v2 {
  text-shadow: 0 2px 18px rgba(6, 12, 24, 0.55), 0 1px 3px rgba(6, 12, 24, 0.4);
}
.hero-lead-v2,
.hero-usp-list li,
.hero-badge-v2 {
  text-shadow: 0 1px 12px rgba(6, 12, 24, 0.7), 0 1px 2px rgba(6, 12, 24, 0.55);
}

@media (prefers-contrast: more) {
  /* Readers who ask for more contrast get the heavier veil back. */
  .hero-video-overlay::after {
    background:
      linear-gradient(96deg, rgba(6, 12, 24, 0.84) 0%, rgba(6, 12, 24, 0.72) 34%,
                      rgba(6, 12, 24, 0.5) 60%, rgba(6, 12, 24, 0.3) 100%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   30. LIGHT HERO (rev 4)

       Two rounds of lightening the navy veil were not enough — the hero
       still read as a dark section. So this inverts it rather than tuning
       it again: the footage stays, but sits under a warm cream wash and
       carries dark text, which is a different kind of hero rather than a
       dimmer one.

       Everything below overrides section 7 and the rev-3 legibility pass.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-v2 {
  background: var(--bg-cream, #F7F4EE);
  color: var(--c-navy, #0E1826);
  border-bottom: 1px solid rgba(14, 24, 38, 0.08);
}

/* Lift the footage instead of dimming it: brighter, a little softer, so it
   reads as a background texture under text rather than a photograph
   competing with it. */
.hero-video-bg {
  filter: saturate(0.92) contrast(0.94) brightness(1.16);
}

.hero-video-overlay {
  background:
    radial-gradient(120% 95% at 78% 12%, rgba(255, 214, 40, 0.22) 0%, rgba(255, 214, 40, 0) 60%),
    linear-gradient(100deg, rgba(247, 244, 238, 0.94) 0%, rgba(247, 244, 238, 0.86) 44%,
                    rgba(247, 244, 238, 0.72) 72%, rgba(247, 244, 238, 0.62) 100%);
  backdrop-filter: saturate(1.05) brightness(1.05);
  -webkit-backdrop-filter: saturate(1.05) brightness(1.05);
}

/* Solid ground under the copy column, fading out before the form card. */
.hero-video-overlay::after {
  background:
    linear-gradient(96deg, rgba(247, 244, 238, 0.92) 0%, rgba(247, 244, 238, 0.78) 30%,
                    rgba(247, 244, 238, 0.34) 56%, rgba(247, 244, 238, 0) 72%),
    linear-gradient(to top, rgba(247, 244, 238, 0.55) 0%, rgba(247, 244, 238, 0) 30%);
}

@media (max-width: 992px) {
  .hero-video-overlay::after {
    background: linear-gradient(to bottom, rgba(247, 244, 238, 0.90) 0%,
                                rgba(247, 244, 238, 0.80) 48%, rgba(247, 244, 238, 0.92) 100%);
  }
}

/* ── Copy now reads dark on light ── */
.hero-headline-v2 {
  color: var(--c-navy, #0E1826);
  text-shadow: none;
}
.hero-headline-v2 .text-gold,
.hero-headline-v2 .serif-head {
  color: var(--c-gold-text, #A96F00);
}
.hero-lead-v2 {
  color: #46505F;
  text-shadow: none;
}
.hero-feature-pills,
.hero-feature-pills li {
  color: #2A3444;
  text-shadow: none;
}
.hero-feature-pills i { color: var(--c-gold-text, #A96F00); }

.hero-badge-glass {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(14, 24, 38, 0.12);
  color: #2A3444;
  text-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(14, 24, 38, 0.06);
}
.hero-badge-glass .star-rating,
.hero-badge-glass i { color: var(--c-gold-text, #A96F00); }

/* The ghost button was drawn for a dark ground. */
.hero-v2 .btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(14, 24, 38, 0.18);
  color: var(--c-navy, #0E1826);
}
.hero-v2 .btn-secondary:hover,
.hero-v2 .btn-secondary:focus-visible {
  background: #FFFFFF;
  border-color: var(--c-navy, #0E1826);
}

/* The form card needs its own edge now that it no longer sits on navy. */
.hero-calc-panel {
  box-shadow: 0 24px 60px rgba(14, 24, 38, 0.14), 0 2px 8px rgba(14, 24, 38, 0.06);
  border: 1px solid rgba(14, 24, 38, 0.08);
}

@media (prefers-contrast: more) {
  .hero-video-overlay::after {
    background: linear-gradient(96deg, rgba(247, 244, 238, 0.99) 0%,
                                rgba(247, 244, 238, 0.95) 50%, rgba(247, 244, 238, 0.8) 100%);
  }
}

/* ── Cinematic Hero Video & Overlay Compatibility & High-Contrast ─────────── */
.hero-v2:has(.hero-overlay),
.hero-v2:has(.hero-video-wrap),
.hero-v2:has(.hero-bg) {
  background: var(--bg-obsidian);
  color: #FFFFFF;
}

.hero-v2:has(.hero-overlay) .hero-headline-v2,
.hero-v2:has(.hero-video-wrap) .hero-headline-v2,
.hero-v2 .hero-overlay ~ * .hero-headline-v2,
.hero-v2 .hero-video-wrap ~ * .hero-headline-v2 {
  color: #FFFFFF;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.hero-v2:has(.hero-overlay) .hero-headline-v2 .serif-head,
.hero-v2:has(.hero-overlay) .hero-headline-v2 .hero-accent,
.hero-v2:has(.hero-video-wrap) .hero-headline-v2 .serif-head,
.hero-v2:has(.hero-video-wrap) .hero-headline-v2 .hero-accent,
.hero-v2 .hero-overlay ~ * .hero-headline-v2 .serif-head,
.hero-v2 .hero-overlay ~ * .hero-headline-v2 .hero-accent,
.hero-v2 .hero-video-wrap ~ * .hero-headline-v2 .serif-head,
.hero-v2 .hero-video-wrap ~ * .hero-headline-v2 .hero-accent {
  color: var(--c-yellow);
}

.hero-v2:has(.hero-overlay) .hero-lead-v2,
.hero-v2:has(.hero-video-wrap) .hero-lead-v2,
.hero-v2 .hero-overlay ~ * .hero-lead-v2,
.hero-v2 .hero-video-wrap ~ * .hero-lead-v2 {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-v2:has(.hero-overlay) .hero-feature-pills,
.hero-v2:has(.hero-overlay) .hero-feature-pills li,
.hero-v2:has(.hero-video-wrap) .hero-feature-pills,
.hero-v2:has(.hero-video-wrap) .hero-feature-pills li,
.hero-v2 .hero-overlay ~ * .hero-feature-pills,
.hero-v2 .hero-overlay ~ * .hero-feature-pills li,
.hero-v2 .hero-video-wrap ~ * .hero-feature-pills,
.hero-v2 .hero-video-wrap ~ * .hero-feature-pills li {
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.hero-v2:has(.hero-overlay) .hero-feature-pills i,
.hero-v2:has(.hero-video-wrap) .hero-feature-pills i,
.hero-v2 .hero-overlay ~ * .hero-feature-pills i,
.hero-v2 .hero-video-wrap ~ * .hero-feature-pills i {
  color: var(--c-yellow);
}

.hero-v2:has(.hero-overlay) .hero-badge-glass,
.hero-v2:has(.hero-video-wrap) .hero-badge-glass,
.hero-v2 .hero-overlay ~ * .hero-badge-glass,
.hero-v2 .hero-video-wrap ~ * .hero-badge-glass {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--c-yellow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

.hero-v2:has(.hero-overlay) .hero-badge-glass i,
.hero-v2:has(.hero-video-wrap) .hero-badge-glass i,
.hero-v2 .hero-overlay ~ * .hero-badge-glass i,
.hero-v2 .hero-video-wrap ~ * .hero-badge-glass i {
  color: var(--c-yellow);
}

.hero-v2:has(.hero-overlay) .hero-trust-row,
.hero-v2:has(.hero-video-wrap) .hero-trust-row,
.hero-v2 .hero-overlay ~ * .hero-trust-row,
.hero-v2 .hero-video-wrap ~ * .hero-trust-row {
  color: #CBD5E1;
}

.hero-v2:has(.hero-overlay) .hero-trust-strong,
.hero-v2:has(.hero-video-wrap) .hero-trust-strong,
.hero-v2 .hero-overlay ~ * .hero-trust-strong,
.hero-v2 .hero-video-wrap ~ * .hero-trust-strong {
  color: #FFFFFF;
}

.hero-v2:has(.hero-overlay) .hero-trust-insured,
.hero-v2:has(.hero-video-wrap) .hero-trust-insured,
.hero-v2 .hero-overlay ~ * .hero-trust-insured,
.hero-v2 .hero-video-wrap ~ * .hero-trust-insured {
  color: var(--c-yellow);
}

.hero-v2:has(.hero-overlay) .btn-secondary,
.hero-v2:has(.hero-video-wrap) .btn-secondary,
.hero-v2 .hero-overlay ~ * .btn-secondary,
.hero-v2 .hero-video-wrap ~ * .btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

.hero-v2:has(.hero-overlay) .btn-secondary:hover,
.hero-v2:has(.hero-video-wrap) .btn-secondary:hover,
.hero-v2 .hero-overlay ~ * .btn-secondary:hover,
.hero-v2 .hero-video-wrap ~ * .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════════════
   31. HERO QUOTE FORM (rev 4)

       Replaces both the old hero inquiry box and the long calculator that
       sat further down the page. Six controls instead of eight fields and
       four checkboxes, plain-language labels, and everything that can be a
       choice is a choice rather than free text.
   ══════════════════════════════════════════════════════════════════════════ */

.hq-panel {
  background: #FFFFFF;
  border: 1px solid rgba(14, 24, 38, 0.09);
  border-radius: var(--r-xl, 20px);
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  box-shadow: 0 24px 60px rgba(14, 24, 38, 0.14), 0 2px 8px rgba(14, 24, 38, 0.06);
}

.hq-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(14, 24, 38, 0.08);
}
.hq-head h3 {
  font-family: var(--f-sans);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-navy, #0E1826);
  margin: 0;
}
.hq-free {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-gold-text, #A96F00);
  white-space: nowrap;
}

.hq-form { display: grid; gap: 0.75rem; }
.hq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hq-field { display: grid; gap: 0.3rem; min-width: 0; }

.hq-field label {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: #414B5C;
  letter-spacing: 0.01em;
}
.hq-opt {
  font-weight: 500;
  color: #8A93A2;
  text-transform: none;
  letter-spacing: 0;
}

.hq-field input,
.hq-field select {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--c-navy, #0E1826);
  background: #F6F5F2;
  border: 1.5px solid rgba(14, 24, 38, 0.10);
  border-radius: var(--r-sm, 10px);
  padding: 0.72rem 0.85rem;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.hq-field select {
  /* Room for the chevron, which is drawn rather than left to the UA so it
     looks the same on Android, iOS and desktop. */
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23414B5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 8px;
}
.hq-field input[type="date"] { -webkit-appearance: none; appearance: none; }
.hq-field input::placeholder { color: #9AA2B0; }
.hq-field input:focus,
.hq-field select:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--c-yellow, #FFD200);
  box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.22);
}

.hq-extras { border: 0; padding: 0; margin: 0.15rem 0 0; min-width: 0; }
.hq-extras legend {
  padding: 0;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: #414B5C;
  margin-bottom: 0.45rem;
}
.hq-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hq-chip { position: relative; }
.hq-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.hq-chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  color: #545E6E;
  background: #F6F5F2;
  border: 1.5px solid rgba(14, 24, 38, 0.10);
  border-radius: var(--r-pill, 999px);
  padding: 0.52rem 0.78rem;
  transition: all var(--t-fast);
}
.hq-chip span::before {
  content: "\f067";                       /* plus */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.62rem;
  opacity: 0.5;
}
.hq-chip input:checked + span {
  color: #3F2C00;
  background: var(--c-yellow-light, #FFF6CC);
  border-color: var(--c-yellow, #FFD200);
}
.hq-chip input:checked + span::before {
  content: "\f00c";                       /* check */
  opacity: 1;
  color: var(--c-gold-text, #A96F00);
}
.hq-chip input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.3);
}

.hq-actions-cluster {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.hq-quote-main-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.88rem 1.25rem;
  font-family: var(--f-sans, sans-serif);
  font-size: 1.02rem;
  font-weight: 800;
  color: #0A1324;
  background: var(--c-yellow, #FFD200);
  border: 1px solid rgba(10, 19, 36, 0.08);
  border-radius: var(--r-md, 12px);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 210, 0, 0.35);
  transition: all 0.2s ease;
}
.hq-quote-main-btn:hover {
  background: #F0C400;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 210, 0, 0.45);
}
.hq-wa-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.25rem;
  font-family: var(--f-sans, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF !important;
  background: #25D366;
  border-radius: var(--r-md, 12px);
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
  transition: all 0.2s ease;
}
.hq-wa-btn:hover {
  background: #20BA5A;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
  color: #FFFFFF !important;
}
.hq-submit {
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.95rem 1rem;
  font-size: 0.97rem;
}
.hq-foot {
  margin: 0.65rem 0 0;
  text-align: center;
  font-size: 0.76rem;
  color: #6B7482;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* ── Small screens: one column, bigger targets, no cramped pairs ── */
@media (max-width: 560px) {
  .hq-panel { padding: 1.05rem 0.95rem; border-radius: var(--r-lg, 16px); }
  .hq-row { grid-template-columns: 1fr; gap: 0.65rem; }
  .hq-form { gap: 0.65rem; }
  .hq-head { padding-bottom: 0.7rem; margin-bottom: 0.85rem; }
  .hq-head h3 { font-size: 1.12rem; }
  .hq-free { font-size: 0.7rem; }
  .hq-field input,
  .hq-field select {
    /* 16px keeps iOS from zooming the page when a field takes focus. */
    font-size: 16px;
    padding: 0.8rem 0.85rem;
  }
  .hq-field select { padding-right: 2.2rem; }
  .hq-chip span { font-size: 0.82rem; padding: 0.6rem 0.8rem; }
  .hq-submit { padding: 1rem; }
}


/* ── HERO TRIM + BUTTON UTILITIES (rev 4) ── */

/* ── 30c. Hero trim on the light ground ──────────────────────────────────
   These carried inline light-on-dark colours from the original dark hero,
   which no stylesheet could reach. Now classed and coloured for cream. */

.hero-accent { color: var(--c-gold-text, #A96F00); }

.hero-badge-glass .fa-star { color: var(--c-gold-text, #A96F00); }

.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
  color: #5A6474;
}
.hero-trust-strong {
  font-weight: 800;
  color: var(--c-navy, #0E1826);
}
.hero-trust-insured {
  font-weight: 700;
  color: var(--c-gold-text, #A96F00);
}
.hero-trust-row .star-rating { color: #D99800; }

/* The ghost button sat on navy before; give it a real edge on cream. */
.hero-v2 .btn-secondary {
  background: #FFFFFF;
  border: 1.5px solid rgba(14, 24, 38, 0.2);
  color: var(--c-navy, #0E1826);
  box-shadow: 0 2px 8px rgba(14, 24, 38, 0.05);
}
.hero-v2 .btn-secondary:hover,
.hero-v2 .btn-secondary:focus-visible {
  background: #FFFFFF;
  border-color: var(--c-navy, #0E1826);
  color: var(--c-navy, #0E1826);
}

/* Hero buttons: the padding and the old translucent-white treatment were
   set inline, which outranked every stylesheet rule. */
.btn-hero { padding: 0.95rem 1.8rem; }

/* ── 32. SEEDED PAGE WRAPPERS ────────────────────────────────────────────
   The WordPress seeder builds About, Why Us, Contact and the legal pages
   from the same section classes the mockups use. This is the one wrapper
   those pages need that the mockups never did: the quote form on a page
   of its own, rather than inside the hero. */

.quote-form-shell {
  max-width: 560px;
  margin: 0 auto;
}



/* ==========================================================================
   33. BLOG ARCHIVE & EDITORIAL SINGLE POST SYSTEM
   Full-fledged relocation knowledge hub and editorial article layouts.
   ========================================================================== */

/* ── Blog Hero & Search Bar ─────────────────────────────────────────────── */
.blog-hero {
  padding: clamp(5.2rem, 8vh, 6.8rem) 0 clamp(2.5rem, 4vh, 3.5rem);
  background: linear-gradient(180deg, #FBF9F6 0%, #F5EFE7 100%);
  border-bottom: 1px solid var(--line-border);
  text-align: center;
}
.blog-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}
.blog-hero .badge-pill {
  margin: 0 auto 1.2rem;
}
.blog-search-box {
  margin: 2.2rem auto 0;
  max-width: 580px;
  position: relative;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: 999px;
  padding: 0.35rem 0.45rem 0.35rem 1.4rem;
  box-shadow: 0 4px 20px rgba(10, 19, 36, 0.06);
  transition: all 0.3s ease;
}
.blog-search-box:focus-within {
  border-color: var(--c-yellow);
  box-shadow: 0 6px 24px rgba(217, 152, 0, 0.18);
}
.blog-search-box i {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-right: 0.75rem;
}
.blog-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--f-sans);
  font-size: 0.96rem;
  color: var(--text-title);
  outline: none;
}
.blog-search-btn {
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
}

/* ── Blog Filter Pills ─────────────────────────────────────────────────── */
.blog-filter-nav {
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line-border);
  background: #FFFFFF;
  position: sticky;
  top: 72px;
  z-index: 40;
  transition: top 0.3s ease;
}
.blog-filter-list {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.2rem 0;
}
.blog-filter-list::-webkit-scrollbar { display: none; }
.blog-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  background: #F5EFE7;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s ease;
  text-decoration: none;
}
.blog-filter-btn:hover {
  background: #EBE3D7;
  color: var(--text-title);
}
.blog-filter-btn.active {
  background: var(--bg-obsidian);
  color: #FFFFFF;
  border-color: var(--bg-obsidian);
}
.blog-filter-btn .count-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
}
.blog-filter-btn.active .count-badge {
  background: var(--c-yellow);
  color: var(--bg-obsidian);
  font-weight: 700;
}

/* ── Featured / Spotlight Article Card ─────────────────────────────────── */
.blog-spotlight-section {
  padding: 3.5rem 0 2rem;
}
.blog-spotlight-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-card, 16px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 19, 36, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  text-decoration: none;
  color: inherit;
}
.blog-spotlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(10, 19, 36, 0.1);
  border-color: var(--c-gold-text);
}
.spotlight-media {
  position: relative;
  min-height: 380px;
  overflow: hidden;
}
.spotlight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.blog-spotlight-card:hover .spotlight-media img {
  transform: scale(1.04);
}
.spotlight-pill {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: var(--c-yellow);
  color: var(--bg-obsidian);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.spotlight-body {
  padding: clamp(2rem, 3.5vw, 3.2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.spotlight-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 0.95rem;
  flex-wrap: wrap;
}
.spotlight-category {
  color: var(--c-gold-text);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}
.spotlight-title {
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  line-height: 1.28;
  color: var(--text-title);
  margin-bottom: 1rem;
  font-family: var(--f-sans);
  font-weight: 800;
}
.blog-spotlight-card:hover .spotlight-title {
  color: var(--c-gold-text);
}
.spotlight-excerpt {
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.65;
  margin-bottom: 1.8rem;
}
.spotlight-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-border);
}
.spotlight-author img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-yellow);
}
.author-details {
  display: flex;
  flex-direction: column;
}
.author-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-title);
}
.author-role {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.spotlight-cta {
  margin-left: auto;
  color: var(--c-gold-text);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: gap 0.25s ease;
}
.blog-spotlight-card:hover .spotlight-cta {
  gap: 0.75rem;
}

/* ── Blog Grid & Cards ─────────────────────────────────────────────────── */
.blog-main-grid-section {
  padding: 2.5rem 0 4.5rem;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.2rem);
}
.blog-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-card, 16px);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10, 19, 36, 0.04);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(10, 19, 36, 0.09);
  border-color: var(--c-gold-text);
}
.blog-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F0EAE1;
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-media img {
  transform: scale(1.06);
}
.blog-card-pill {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(10, 19, 36, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-yellow);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-card-readtime {
  position: absolute;
  bottom: 0.85rem;
  right: 0.85rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-title);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.blog-card-body {
  padding: 1.6rem 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.blog-card-title {
  font-size: 1.18rem;
  line-height: 1.38;
  color: var(--text-title);
  font-weight: 700;
  margin-bottom: 0.85rem;
  transition: color 0.25s ease;
}
.blog-card:hover .blog-card-title {
  color: var(--c-gold-text);
}
.blog-card-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-card-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.blog-card-author img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.blog-card-author span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-title);
}
.blog-card-link {
  color: var(--c-gold-text);
  font-weight: 700;
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s ease;
}
.blog-card:hover .blog-card-link {
  gap: 0.6rem;
}

/* ── Interactive Lead Magnet / Checklist Banner ────────────────────────── */
.lead-magnet-banner {
  margin: 3.5rem 0 2rem;
  background: linear-gradient(135deg, var(--bg-obsidian) 0%, #17263c 100%);
  border-radius: var(--r-card, 16px);
  padding: clamp(2.5rem, 4.5vw, 4rem);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(10, 19, 36, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.lead-magnet-banner::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(242, 169, 0, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.lead-magnet-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
.lead-magnet-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(242, 169, 0, 0.2);
  color: var(--c-yellow);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.lead-magnet-heading {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  color: #FFFFFF;
  margin-bottom: 0.95rem;
  font-family: var(--f-sans);
  font-weight: 800;
}
.lead-magnet-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.lead-magnet-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.magnet-feat-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.92);
}
.magnet-feat-item i {
  color: var(--c-yellow);
}
.lead-magnet-form-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 1.8rem;
}
.lead-magnet-form-card h4 {
  color: #FFFFFF;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.lead-magnet-form-card p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.84rem;
  margin-bottom: 1.2rem;
}
.magnet-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.magnet-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.96);
  font-family: var(--f-sans);
  font-size: 0.9rem;
  color: var(--text-title);
  outline: none;
}
.magnet-input:focus {
  border-color: var(--c-yellow);
}
.magnet-btn {
  width: 100%;
  padding: 0.85rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3.5rem;
}
.page-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--line-border);
  background: #FFFFFF;
  color: var(--text-title);
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}
.page-btn:hover {
  border-color: var(--c-yellow);
  background: #FFFDF9;
}
.page-btn.active {
  background: var(--bg-obsidian);
  color: #FFFFFF;
  border-color: var(--bg-obsidian);
}
.page-btn-next {
  width: auto;
  padding: 0 1.25rem;
  gap: 0.45rem;
}

/* ==========================================================================
   34. SINGLE BLOG / EDITORIAL ARTICLE LAYOUT
   ========================================================================== */

.article-page-wrap {
  padding: 2.2rem 0 5rem;
  background: #FAFAF8;
}
.article-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.article-breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.article-breadcrumbs a:hover {
  color: var(--c-gold-text);
}
.article-breadcrumbs .sep {
  opacity: 0.45;
  font-size: 0.75rem;
}
.article-breadcrumbs .current {
  color: var(--text-title);
  font-weight: 600;
}

/* ── Article Header ────────────────────────────────────────────────────── */
.article-header {
  max-width: 900px;
  margin-bottom: 2.4rem;
}
.article-header-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.article-category-badge {
  background: rgba(242, 169, 0, 0.15);
  color: var(--c-gold-text);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.article-read-metric {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}
.article-title-main {
  font-size: clamp(2rem, 3.6vw, 2.95rem);
  line-height: 1.22;
  color: var(--text-title);
  font-family: var(--f-sans);
  font-weight: 800;
  margin-bottom: 1.25rem;
}
.article-lead-text {
  font-size: clamp(1.08rem, 1.4vw, 1.25rem);
  line-height: 1.68;
  color: var(--text-head);
  font-weight: 400;
  margin-bottom: 1.8rem;
}

/* ── Author & Share Strip ──────────────────────────────────────────────── */
.article-author-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line-border);
  border-bottom: 1px solid var(--line-border);
  flex-wrap: wrap;
  gap: 1.2rem;
}
.author-pill-info {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.author-pill-info img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-yellow);
}
.author-meta-lines {
  display: flex;
  flex-direction: column;
}
.author-meta-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-title);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.author-meta-name .verified-icon {
  color: #1DA1F2;
  font-size: 0.88rem;
}
.author-meta-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.article-share-buttons {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.share-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-right: 0.35rem;
}
.share-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid var(--line-border);
  color: var(--text-head);
  text-decoration: none;
  font-size: 0.92rem;
  transition: all 0.25s ease;
}
.share-icon-btn:hover {
  transform: translateY(-2px);
  border-color: var(--c-yellow);
  color: var(--c-gold-text);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.share-icon-btn.share-wa:hover {
  background: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
}

/* ── Featured Image ────────────────────────────────────────────────────── */
.article-featured-image {
  margin: 2.2rem 0 3.2rem;
  border-radius: var(--r-card, 16px);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(10, 19, 36, 0.08);
  border: 1.5px solid var(--line-border);
}
.article-featured-image img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}
.article-photo-caption {
  padding: 0.85rem 1.4rem;
  background: #FFFFFF;
  border-top: 1px solid var(--line-border);
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.article-photo-caption i {
  color: var(--c-gold-text);
}

/* ── Editorial Two-Column Grid ─────────────────────────────────────────── */
.article-layout-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(2rem, 3.5vw, 3.5rem);
  align-items: start;
}

/* ── Article Content Area ──────────────────────────────────────────────── */
.article-main,
.article-content {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-card, 16px);
  padding: clamp(1.8rem, 3.5vw, 3.2rem);
  box-shadow: 0 4px 24px rgba(10, 19, 36, 0.03);
}
.article-main h2,
.article-content h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  line-height: 1.3;
  color: var(--text-title);
  margin: 2.6rem 0 1.1rem;
  font-family: var(--f-sans);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.article-main h2:first-of-type,
.article-content h2:first-of-type {
  margin-top: 0.5rem;
}
.article-main h2 .heading-accent,
.article-content h2 .heading-accent {
  color: var(--c-gold-text);
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
}
.article-main h3,
.article-content h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--text-title);
  margin: 1.8rem 0 0.85rem;
  font-weight: 700;
}
.article-main p,
.article-content p {
  font-size: 1.04rem;
  line-height: 1.76;
  color: #334155;
  margin-bottom: 1.35rem;
}
.article-main ul,
.article-main ol,
.article-content ul,
.article-content ol {
  margin: 1rem 0 1.6rem 1.4rem;
  line-height: 1.72;
  color: #334155;
}
.article-main li,
.article-content li {
  margin-bottom: 0.65rem;
  font-size: 1rem;
}
.article-main strong,
.article-content strong {
  color: var(--text-title);
  font-weight: 700;
}

/* ── Key Takeaways Box ─────────────────────────────────────────────────── */
.article-takeaways,
.article-takeaways-card {
  background: #FBF8F2;
  border-left: 4px solid var(--c-yellow);
  border-radius: 0 12px 12px 0;
  padding: 1.6rem 1.8rem;
  margin: 1.8rem 0 2.4rem;
  border-top: 1px solid rgba(217, 152, 0, 0.15);
  border-right: 1px solid rgba(217, 152, 0, 0.15);
  border-bottom: 1px solid rgba(217, 152, 0, 0.15);
}
.takeaways-heading {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.takeaways-heading i {
  color: var(--c-gold-text);
}
.takeaways-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.takeaways-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem !important;
  font-size: 0.94rem !important;
  color: var(--text-title);
}
.takeaways-list li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: #10B981;
  font-size: 0.92rem;
}

/* ── Pro-Tip Callout ───────────────────────────────────────────────────── */
.article-pro-tip,
.article-tip-box {
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
  display: flex;
  gap: 1.1rem;
}
.tip-icon {
  font-size: 1.4rem;
  color: #16A34A;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.tip-content h4 {
  font-size: 0.98rem;
  font-weight: 800;
  color: #166534;
  margin-bottom: 0.35rem;
}
.tip-content p {
  margin: 0 !important;
  font-size: 0.92rem !important;
  color: #14532D !important;
  line-height: 1.6 !important;
}

/* ── Pull Quote ────────────────────────────────────────────────────────── */
.article-quote {
  margin: 2.5rem 0;
  padding: 1.8rem 2.2rem;
  background: var(--bg-obsidian);
  color: #FFFFFF;
  border-radius: 12px;
  position: relative;
  border-left: 5px solid var(--c-yellow);
}
.article-quote p {
  font-family: var(--f-serif);
  font-size: 1.22rem !important;
  line-height: 1.6 !important;
  font-style: italic;
  color: #FFFFFF !important;
  margin-bottom: 0.75rem !important;
}
.quote-attribution {
  font-family: var(--f-sans);
  font-size: 0.82rem;
  color: var(--c-yellow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Comparison Table ──────────────────────────────────────────────────── */
.article-table-shell {
  margin: 2.2rem 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1.5px solid var(--line-border);
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  text-align: left;
}
.article-table th {
  background: #F5EFE7;
  color: var(--text-title);
  font-weight: 800;
  padding: 0.9rem 1.15rem;
  border-bottom: 1.5px solid var(--line-border);
  white-space: nowrap;
}
.article-table td {
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--line-border);
  color: var(--text-head);
}
.article-table tr:last-child td {
  border-bottom: none;
}
.article-table tr:hover td {
  background: #FAF8F5;
}
.table-highlight {
  color: var(--c-gold-text);
  font-weight: 700;
}

/* ── Inline Checklist Box ──────────────────────────────────────────────── */
.checklist-card-inline {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: 12px;
  padding: 1.6rem;
  margin: 2rem 0;
  box-shadow: 0 4px 16px rgba(10, 19, 36, 0.04);
}
.checklist-card-inline h4 {
  font-size: 1.05rem;
  color: var(--text-title);
  font-weight: 800;
  margin-bottom: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.checklist-card-inline h4 i { color: var(--c-yellow); }
.checklist-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.checklist-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-head);
}
.checklist-item input[type="checkbox"] {
  accent-color: var(--c-yellow);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ── Inline Image Break ────────────────────────────────────────────────── */
.article-inline-media {
  margin: 2.2rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-border);
}
.article-inline-media img {
  width: 100%;
  height: auto;
  display: block;
}
.article-inline-media figcaption {
  padding: 0.75rem 1.15rem;
  background: #F9F7F4;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--line-border);
}

/* ── Tags & Social Share Footer ────────────────────────────────────────── */
.article-tags-wrap {
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-border);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.tag-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 0.35rem;
}
.tag-pill {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #F3EFE9;
  color: var(--text-head);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.tag-pill:hover {
  background: var(--bg-obsidian);
  color: #FFFFFF;
}

.social-share-strip,
.article-share-strip-bottom {
  margin-top: 1.8rem;
  padding: 1.4rem;
  background: #FAF8F5;
  border-radius: 12px;
  border: 1px solid var(--line-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.share-strip-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-title);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.share-strip-text i { color: var(--c-gold-text); }

/* ── Author Bio Box ────────────────────────────────────────────────────── */
.author-box-rich,
.author-bio-card {
  margin-top: 2.5rem;
  padding: 2rem;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: 14px;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  box-shadow: 0 4px 18px rgba(10, 19, 36, 0.04);
}
.author-bio-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--c-yellow);
  flex-shrink: 0;
}
.author-bio-content h4 {
  font-size: 1.15rem;
  color: var(--text-title);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.author-bio-title {
  font-size: 0.82rem;
  color: var(--c-gold-text);
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.author-bio-content p {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  line-height: 1.62 !important;
  margin-bottom: 0.9rem !important;
}
.author-bio-links {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.author-bio-links a {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-gold-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.author-bio-links a:hover {
  text-decoration: underline;
}

/* ── Post Navigation ────────────────────────────────────────────────     */
.post-navigation-card {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.post-nav-item {
  padding: 1.4rem;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}
.post-nav-item:hover {
  border-color: var(--c-gold-text);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(10, 19, 36, 0.06);
}
.post-nav-dir {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--c-gold-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.post-nav-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.4;
}

/* ── Sticky Sidebar ────────────────────────────────────────────────────── */
.article-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
.sidebar-widget {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-card, 16px);
  padding: 1.6rem;
  box-shadow: 0 4px 18px rgba(10, 19, 36, 0.04);
}
.widget-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-title);
  margin-bottom: 1.15rem;
  padding-bottom: 0.75rem;
  border-bottom: 1.5px solid var(--line-border);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.widget-title i {
  color: var(--c-gold-text);
}

/* ── Widget: Table of Contents ─────────────────────────────────────────── */
.article-toc,
.widget-toc {
  /* toc container */
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.toc-link {
  font-size: 0.88rem;
  color: var(--text-head);
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.toc-link:hover,
.toc-link.active {
  background: #FAF6EF;
  color: var(--c-gold-text);
  font-weight: 700;
  padding-left: 0.75rem;
}
.toc-num {
  font-family: var(--f-mono, monospace);
  font-size: 0.75rem;
  color: var(--c-gold-text);
  margin-top: 0.1rem;
}

/* ── Widget: Free Moving Checklist / Lead Magnet ───────────────────────── */
.download-checklist-box {
  background: linear-gradient(135deg, #0A1324 0%, #152238 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
}
.download-checklist-box h4 {
  color: #FFFFFF !important;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}
.download-checklist-box p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.84rem !important;
  line-height: 1.5;
  margin-bottom: 1.2rem !important;
}

/* ── Widget: Instant WhatsApp Quote ────────────────────────────────────── */
.quote-widget-box {
  background: linear-gradient(135deg, #FFFDF9 0%, #FAF5ED 100%);
  border-color: rgba(217, 152, 0, 0.3);
}
.quote-widget-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1.1rem;
}
.quote-widget-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.quote-widget-select,
.quote-widget-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid var(--line-border);
  font-family: var(--f-sans);
  font-size: 0.86rem;
  color: var(--text-title);
  background: #FFFFFF;
}
.quote-widget-select:focus,
.quote-widget-input:focus {
  border-color: var(--c-yellow);
  outline: none;
}
.quote-widget-btn {
  width: 100%;
  padding: 0.8rem;
  border-radius: 8px;
  background: #25D366;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease;
}
.quote-widget-btn:hover {
  background: #20BA5A;
}

/* ── Widget: Popular Guides ────────────────────────────────────────────── */
.popular-posts-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.popular-post-item {
  display: flex;
  gap: 0.9rem;
  text-decoration: none;
  color: inherit;
  align-items: center;
}
.popular-post-item img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.popular-post-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.popular-post-cat {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-gold-text);
  text-transform: uppercase;
}
.popular-post-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-title);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}
.popular-post-item:hover .popular-post-title {
  color: var(--c-gold-text);
}

/* ── Widget: Dispatch Support ──────────────────────────────────────────── */
.widget-dispatch {
  background: var(--bg-obsidian);
  color: #FFFFFF;
  border: none;
}
.widget-dispatch .widget-title {
  color: #FFFFFF;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.widget-dispatch p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.84rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.dispatch-phone-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-yellow);
  font-size: 1.1rem;
  font-weight: 800;
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.dispatch-phone-link:hover {
  text-decoration: underline;
}

/* ── Related Guides Section ────────────────────────────────────────────── */
.related-guides-section {
  padding: 4.5rem 0 2rem;
  background: #FFFFFF;
  border-top: 1px solid var(--line-border);
}
.related-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.2rem;
}
.related-view-all {
  color: var(--c-gold-text);
  font-weight: 700;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.related-view-all:hover {
  gap: 0.65rem;
}

/* ── Responsive Rules for Blog System ──────────────────────────────────── */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-spotlight-card {
    grid-template-columns: 1fr;
  }
  .spotlight-media {
    min-height: 280px;
  }
  .article-layout-grid {
    grid-template-columns: 1fr;
  }
  .article-sidebar {
    position: static;
    margin-top: 2.5rem;
  }
}

@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .lead-magnet-grid {
    grid-template-columns: 1fr;
  }
  .post-navigation-card {
    grid-template-columns: 1fr;
  }
  .checklist-items {
    grid-template-columns: 1fr;
  }
  .author-bio-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .author-bio-links {
    justify-content: center;
  }
  .article-title-main {
    font-size: 1.85rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE SERVICES SHOWCASE (.hsvc-*)
   Flagship services section presenting 5 core offerings with high conversion
   hierarchy: 2 featured large cards + 3 secondary capability cards.
   ══════════════════════════════════════════════════════════════════════════ */
.hsvc-section {
  position: relative;
  overflow: hidden;
}

/* Featured Pair (Residential & Commercial) */
.hsvc-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.4rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.hsvc-featured-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(10, 19, 36, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.hsvc-featured-card:hover {
  transform: translateY(-6px);
  border-color: var(--c-yellow-dark);
  box-shadow: 0 20px 40px -15px rgba(10, 19, 36, 0.16);
}

.hsvc-featured-media {
  position: relative;
  height: clamp(220px, 22vw, 300px);
  overflow: hidden;
  background: var(--bg-obsidian);
}
.hsvc-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease);
}
.hsvc-featured-card:hover .hsvc-featured-media img {
  transform: scale(1.06);
}

.hsvc-rank-tag {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #0A1324;
  color: #FFFFFF;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(255, 210, 0, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.hsvc-rank-tag i {
  color: #FFD200;
}

.hsvc-featured-body {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hsvc-head-row {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 0.85rem;
}
.hsvc-featured-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  color: var(--c-gold-text);
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.hsvc-featured-card:hover .hsvc-featured-icon {
  background: #FFD200;
  color: #0A1324;
  transform: scale(1.05);
}

.hsvc-category-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: #8A6100;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.hsvc-head-row h3 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  color: var(--text-title);
  line-height: 1.25;
  margin: 0;
}

.hsvc-desc {
  font-size: 0.96rem;
  line-height: 1.68;
  color: var(--text-body);
  margin-bottom: 1.2rem;
}

.hsvc-ticks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  gap: 0.65rem;
  flex: 1;
}
.hsvc-ticks-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #374151;
}
.hsvc-ticks-list li i {
  color: #F59E0B;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.hsvc-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-border);
}
.hsvc-btn-quote {
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
  font-size: 0.92rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}
.hsvc-btn-details {
  padding: 0.75rem 1.15rem;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hsvc-btn-wa {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  font-size: 1.2rem;
}

/* Secondary Trio (Animals, Transport, Parcels) */
.hsvc-secondary-intro {
  margin-top: clamp(3rem, 5vw, 4.2rem);
  margin-bottom: 2rem;
  text-align: center;
}
.hsvc-subhead-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.hsvc-subhead-pill {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 800;
  color: #8A6100;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-warm-subtle);
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-yellow-border);
}
.hsvc-subhead-line h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin: 0;
}

.hsvc-secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.hsvc-cap-card {
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: 0 4px 15px rgba(10, 19, 36, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.35s var(--ease);
}
.hsvc-cap-card:hover {
  transform: translateY(-5px);
  border-color: var(--c-yellow-dark);
  box-shadow: 0 15px 35px -10px rgba(10, 19, 36, 0.12);
}

.hsvc-cap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.hsvc-cap-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--c-yellow-light);
  border: 1.5px solid var(--c-yellow-border);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--c-gold-text);
  transition: all 0.3s ease;
}
.hsvc-cap-card:hover .hsvc-cap-icon {
  background: #FFD200;
  color: #0A1324;
}
.hsvc-cap-badge {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8A6100;
  background: var(--bg-warm-subtle);
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-yellow-border);
}

.hsvc-cap-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hsvc-cap-scope {
  font-family: var(--f-sans);
  font-size: 0.76rem;
  font-weight: 700;
  color: #8A6100;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}
.hsvc-cap-content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  color: var(--text-title);
}
.hsvc-cap-content p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.hsvc-cap-ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.3rem;
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: #4B5563;
}
.hsvc-cap-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
}
.hsvc-cap-ticks li i {
  color: #F59E0B;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.hsvc-cap-footer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line-border);
}
.hsvc-cap-footer .btn-primary {
  flex: 1 1 auto;
  padding: 0.55rem 0.85rem;
  font-size: 0.84rem;
}
.hsvc-cap-footer .btn-secondary {
  padding: 0.55rem 0.85rem;
  font-size: 0.84rem;
}
.hsvc-cap-footer .btn-whatsapp {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  font-size: 1.05rem;
}

/* Bottom Consultation Strip */
.hsvc-consult-bar {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  background: linear-gradient(135deg, #0A1324 0%, #152238 100%);
  border: 1.5px solid rgba(255, 210, 0, 0.35);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.8rem, 3.5vw, 2.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: 0 15px 35px -10px rgba(10, 19, 36, 0.25);
  color: #FFFFFF;
}
.hsvc-consult-info {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  max-width: 680px;
}
.hsvc-consult-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: rgba(255, 210, 0, 0.12);
  border: 1.5px solid rgba(255, 210, 0, 0.35);
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  color: #FFD200;
  flex-shrink: 0;
}
.hsvc-consult-info h4 {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  color: #FFFFFF;
  margin: 0 0 0.35rem;
}
.hsvc-consult-info p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #CBD5E1;
  margin: 0;
}
.hsvc-consult-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  flex-shrink: 0;
}
.hsvc-consult-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #FFD200;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.25s ease;
}
.hsvc-consult-phone:hover {
  background: rgba(255, 210, 0, 0.18);
  color: #FFFFFF;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
  .hsvc-featured-grid {
    grid-template-columns: 1fr;
  }
  .hsvc-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hsvc-consult-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .hsvc-consult-actions {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .hsvc-secondary-grid {
    grid-template-columns: 1fr;
  }
  .hsvc-consult-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }
  .hsvc-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hsvc-btn-wa {
    width: 100%;
    height: 40px;
    border-radius: var(--r-md);
  }
  .hsvc-cap-footer {
    flex-wrap: wrap;
  }
  .hsvc-cap-footer .btn-primary,
  .hsvc-cap-footer .btn-secondary {
    flex: 1 1 45%;
    text-align: center;
    justify-content: center;
  }
}