/* ============================================================================
   Wisepath Wealth - Services page redesign (2026-09-30 build brief, longship 5820)
   Local sheet linked from build/services.html after components.css.
   Composes the existing homepage-v2 design system (tokens.css, styles.css,
   carousel.css, components.css, home-mobile-spacing.css). Only genuinely new
   components live here: hero, trust strip, two-way cards, flat-fee strip,
   examples band, five-areas accordion touches, life carousel cards, process
   timeline, pricing band, final CTA polish.
   Palette: steel-blue #4C9FD6 (var(--ww-accent)) only. No gold, no dark-navy house token.
   ========================================================================== */

/* ---------- 1. HERO (compact) ---------- */
.wp-services-hero {
  background: var(--ww-primary);
  padding: 64px 0 36px;
}
.wp-services-hero .wp-h1 { color: #fff; }
.wp-services-hero .wp-lead { margin-bottom: 24px; font-size: 19px; }

/* "Explore Your Options" - a quiet text link, NOT a button */
.wp-hero-anchor { margin: 8px 0 0; }
.wp-hero-anchor a {
  display: inline-block;
  font-family: var(--ww-font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ww-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(76, 159, 214, .45);
  padding-bottom: 3px;
}
.wp-hero-anchor a:hover { color: var(--ww-ice); border-bottom-color: var(--ww-ice); }

/* ---------- Trust strip (additive, quiet) ---------- */
.wp-trust-strip {
  background: var(--ww-primary);
  padding: 0 0 26px;
  border-bottom: 2px solid var(--ww-accent);
}
.wp-trust-strip .wp-container { text-align: left; }
.wp-trust-strip p {
  margin: 0;
  color: rgba(255, 255, 255, .85);
  font-size: 13.5px;
  letter-spacing: .4px;
}
.wp-trust-strip a { color: var(--ww-ice); }

/* ---------- 2. Two Ways cards ---------- */
.wp-two-ways .wp-lead { margin-bottom: 34px; }
.wp-ways-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}
.wp-way-card {
  background: #fff;
  border-radius: var(--ww-radius-md);
  padding: 30px 30px 26px;
  box-shadow: var(--ww-shadow-card);
  border-top: 4px solid var(--ww-accent);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-way-card__title {
  font-family: var(--ww-font-head);
  font-size: 23px;
  font-weight: 600;
  color: var(--ww-primary);
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 14px;
}
.wp-way-card__body { font-size: 16px; line-height: 1.65; color: var(--ww-ink); margin: 0 0 18px; }
.wp-way-card__fee {
  font-family: var(--ww-font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--ww-primary);
  margin: 0 0 6px;
}
.wp-way-card__disc { font-size: 13px; line-height: 1.55; color: var(--ww-gray); margin: 12px 0 0; }
.wp-way-card .wp-qbody > .wp-way-card__disc { padding-top: 10px; border-top: 1px solid #eef0f4; }
.wp-way-card .wp-way-expander { margin-top: 2px; }
.wp-way-card .wp-q {
  font-size: 16px;
  font-weight: 600;
  color: var(--ww-primary);
  padding: 12px 4px;
}
.wp-way-card .wp-qbody { font-size: 14.5px; padding-left: 4px; padding-bottom: 14px; }
.wp-way-card .wp-qbody p { margin: 0 0 10px; }
.wp-way-card .wp-qbody p:last-child { margin-bottom: 0; }
.wp-way-card__link { margin: auto 0 0; padding-top: 16px; }
.wp-way-card__link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 6px;
  border: 2px solid var(--ww-accent);
  background: #fff;
  font-family: var(--ww-font-head);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ww-accent);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.wp-way-card__link a::after { content: " \2192"; }
.wp-way-card__link a:hover { background: var(--ww-accent); color: #fff; }
/* Accordion "plus" chevron rotates to "x" on open (affordance) */
.wp-qitem[open] .wp-qchev { transform: rotate(45deg); }
/* Accordion "+" chevron: force vertical centering on multi-line summaries (live theme computes align-items:baseline) */
.wp-qitem summary.wp-q { align-items: center; }

/* ---------- 4. Planning examples band (navy) ---------- */
.wp-examples-band { background: var(--ww-primary); }
.wp-examples-band .wp-examples-sub {
  color: rgba(255, 255, 255, .88);
  max-width: 720px;
  margin: 0 auto 10px;
  text-align: center;
}
.wp-examples-band .wp-carousel-wrap { max-width: 720px; }
/* 2026-10-06 centring fix: the shared full-bleed rule
   `.elementor-section.wp-section .wp-carousel` (design-system.css) sets
   margin-left/right: calc(-1 * var(--wp-section-pad-x)) together with
   width: calc(100% + 2 * var(--wp-section-pad-x)), but the later
   `.wp-carousel { max-width: 100% }` caps the width back to the parent, so the
   track is shifted 20px LEFT instead of bleeding symmetrically and the planning
   card hugs the left edge (measured 12px left gap vs 52px right gap at 390).
   Neutralise the bleed inside the examples band. Selector must match the
   (0,3,0) specificity of the offending rule, so `.elementor-section.wp-section`
   is repeated here. */
.elementor-section.wp-section .wp-examples-band .wp-carousel {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
}
.wp-examples-band .wp-carousel__counter { color: rgba(255, 255, 255, .7); }
.wp-examples-band .wp-carousel__dot { background: rgba(255, 255, 255, .35); }
.wp-examples-band .wp-carousel__dot--active { background: var(--ww-accent); }
.wp-examples-band .wp-carousel-caption { text-align: center; }
/* H14: no dark bars around planning graphics - white letterbox */
.wp-examples-band .wp-planning-card__graphic { background: #ffffff; border: 1px solid #e6e9ee; }
.wp-planning-card__link { margin: 12px 0 0; }
.wp-planning-card__link .wp-qmore { font-size: 16px; font-weight: 600; }
.wp-examples-disclosure {
  text-align: center;
  color: rgba(255, 255, 255, .92);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 720px;
  margin: 14px auto 0;
}

/* ---------- 5. Five planning areas ---------- */
.wp-five-areas { background: #fff; }
.wp-area-q {
  font-weight: 600;
  font-size: 16px;
  color: var(--ww-primary);
  margin: 0 0 10px;
}
.wp-area-bullets { margin: 0 0 6px; padding-left: 18px; }
.wp-area-bullets li { margin: 6px 0; }
/* ---------- 6. Life / purpose carousel ---------- */
.wp-life-band { background: var(--ww-soft); }
.wp-life-band .wp-life-sub { max-width: 680px; margin: 0 auto; text-align: center; }
.wp-life-band .wp-carousel-wrap { max-width: 560px; }
.wp-life-card { background: #fff; border-radius: var(--ww-radius-md); padding: 16px; text-align: center; box-shadow: var(--ww-shadow-card); }
.wp-life-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--ww-radius-md);
  border: 2px dashed var(--ww-accent);
  background:
    repeating-linear-gradient(45deg, #f4f8fb, #f4f8fb 12px, #eaf1f6 12px, #eaf1f6 24px);
  font-family: var(--ww-font-head);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 15px;
  color: var(--ww-steel);
}
.wp-life-card .wp-life-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ww-radius-md);
}
.wp-life-card__caption { margin: 14px 0 4px; font-size: 15px; line-height: 1.55; color: var(--ww-ink); }

/* ---------- 7. What to Expect / process timeline ---------- */
.wp-process-section { background: #fff; }
.wp-process {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  counter-reset: process;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-top: 4px solid var(--ww-accent);
  border-radius: var(--ww-radius-md);
  box-shadow: var(--ww-shadow-card);
  overflow: hidden;
}
.wp-process__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #eef0f4;
}
.wp-process__step:last-child { border-bottom: 0; }
.wp-process__num {
  font-family: var(--ww-font-head);
  font-size: 26px;
  font-weight: 300;
  color: var(--ww-accent);
  flex: 0 0 auto;
  min-width: 46px;
}
.wp-process__title {
  font-family: var(--ww-font-head);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ww-primary);
  line-height: 1.3;
  margin: 0;
}
.wp-process__step .wp-chip { margin-top: 0; margin-left: 10px; }
.wp-chip {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: var(--ww-radius-pill);
  background: rgba(76, 159, 214, .14);
  color: var(--ww-steel);
  font-family: var(--ww-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- 8. Transparent pricing band ---------- */
.wp-pricing-band { background: var(--ww-primary); }
.wp-pricing-band .wp-pricing-manifesto {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.18;
  max-width: 820px;
  margin: 0 auto 20px;
  text-align: center;
  color: #fff;
}
.wp-pricing-band .wp-pricing-sub {
  color: rgba(255, 255, 255, .88);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.wp-pricing-band .wp-qlist { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 40px; text-align: left; }
.wp-pricing-band .wp-qitem { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.wp-pricing-band .wp-q { color: #fff; }
.wp-pricing-band .wp-qbody { color: rgba(255, 255, 255, .9); }
.wp-pricing-band .wp-qbody p { margin: 0 0 10px; }
.wp-pricing-band .wp-qbody p:last-child { margin-bottom: 0; }
.wp-pricing-geo {
  text-align: center;
  color: rgba(255, 255, 255, .9);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 34px auto 0;
  max-width: 640px;
}

/* ---------- 9. Final CTA polish ---------- */
.wp-final-cta .wp-eyebrow { color: var(--ww-accent); }
.wp-final-cta .wp-body { max-width: 640px; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .wp-ways-grid { grid-template-columns: minmax(0, 1fr); }
  .wp-services-hero { padding: 48px 0 30px; }
}
@media (max-width: 560px) {
  .wp-hero-anchor a { font-size: 14px; }
  .wp-way-card { padding: 24px 20px 22px; }
  .wp-services-hero .wp-lead { font-size: 17px; }
  .wp-pricing-geo { font-size: 16.5px; }
  .wp-examples-disclosure { font-size: 15.5px; }
}

.wp-way-list { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 10px; }
.wp-way-list li { margin: 0; }

/* Carousel dot hit-area: larger tap target without changing visual size */
.wp-carousel__dot { position: relative; border-radius: var(--ww-radius-round); }

/* ============================================================================
   Visual tweaks (2026-10-01 brief): shared-class overrides.
   These classes are owned by the imported homepage-v2 styles.css; this file
   loads after it, so same-specificity rules here win by source order.
   ========================================================================== */
.wp-eyebrow { color: var(--ww-steel); font-weight: 600; }
.wp-photo-band .wp-eyebrow,
.wp-final-cta .wp-eyebrow,
.wp-midpage-cta .wp-eyebrow,
.wp-scheduler .wp-eyebrow { color: var(--ww-accent); }
.wp-h2, .wp-feetitle { letter-spacing: .5px; }
.wp-btn, .wp-cta-band__btn, .wp-sticky-cta__btn {
  transition: background .2s, color .2s, border-color .2s, transform .2s ease, box-shadow .2s ease;
}
.wp-btn:hover, .wp-btn-accent:hover, .wp-cta-band__btn:hover, .wp-sticky-cta__btn:hover {
  box-shadow: 0 6px 16px -6px rgba(31,27,84,.35);
  transform: translateY(-1px);
}
.wp-tq, .wp-muted, .wp-testimonial__attribution { color: var(--ww-gray-2); }
.wp-feecard, .wp-service-card, .wp-planning-card, .wp-life-card,
.wp-testimonial, .wp-tcard, .wp-vid-card, .wp-index-card, .wp-faq-item {
  box-shadow: var(--ww-shadow-card);
}
.wp-feecard, .wp-way-card, .wp-service-card, .wp-card--article, .wp-card--video {
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-feecard:hover, .wp-way-card:hover, .wp-service-card:hover,
.wp-card--article:hover, .wp-card--video:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(31,27,84,.06), 0 18px 36px -12px rgba(31,27,84,.24);
}