/* ===== tokens.css ===== */
/* Wisepath Wealth — design tokens (copied from build-replica/assets/css/tokens.css) */
:root {
  --ww-primary:    #1F1B54;
  --ww-secondary:  #2B4A81;
  --ww-accent:     #4C9FD6;
  --ww-accent-2:   #1F2859;
  --ww-ice:        #84B6D5;
  --ww-sky:        #69C3FF;
  --ww-slate:      #6F96B6;
  --ww-steel:      #3471A6;
  --ww-ink:        #252525;
  --ww-soft:       #F4F5F6;
  --ww-black:      #020101;
  --ww-white:      #FFFFFF;
  --ww-gray:       #959595;
  --ww-font-head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --ww-font-body: "Calibri", "Carlito", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ww-maxw: 1200px;
  --ww-gutter: 3vw;
}

/* ===== styles.css ===== */
/* Wisepath Wealth — shared styles (mirror of wisepathgroup.com design)
   Elementor-core compatible. Components map 1:1 to Elementor html widgets. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ww-font-body);
  color: var(--ww-ink);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ww-accent); text-decoration: none; }
a:hover { color: var(--ww-steel); }

/* ---------- layout ---------- */
.wp-container { max-width: var(--ww-maxw); margin: 0 auto; padding: 0 var(--ww-gutter); }
.wp-section { padding: 88px 0; }
.wp-section--tight { padding: 56px 0; }
.wp-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.wp-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 44px; align-items: center; }
.wp-center { text-align: center; }

/* ---------- type: Oswald headings (uppercase) + Calibri body ---------- */
.wp-eyebrow {
  font-family: var(--ww-font-head);
  font-size: 14px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--ww-steel);
}
.wp-h1 {
  font-family: var(--ww-font-head);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 300;
  line-height: 1.12;
  margin: 0 0 16px;
  text-transform: none;
}
.wp-h2 {
  font-family: var(--ww-font-head);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 16px;
  color: var(--ww-primary);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.wp-h2--light { color: var(--ww-white); }
.wp-serif-line {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--ww-white);
  margin: 0 0 18px;
}
.wp-lead { font-size: 18px; line-height: 1.6; margin: 0 0 18px; }
.wp-body { font-size: 16px; line-height: 1.7; color: var(--ww-ink); margin: 0 0 16px; }
.wp-muted { color: var(--ww-gray-2); }
.wp-small { font-size: 13.5px; }

/* ---------- buttons: pill, sky-blue accent (Let's Talk) ---------- */
.wp-btn {
  display: inline-block;
  font-family: var(--ww-font-head);
  font-size: 15px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 14px 34px;
  border-radius: var(--ww-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background .2s, color .2s, border-color .2s, transform .2s ease, box-shadow .2s ease;
}
.wp-btn-accent { background: var(--ww-accent); color: var(--ww-white); }
.wp-btn-accent:hover { background: var(--ww-primary); color: var(--ww-accent); border-color: var(--ww-primary); }
.wp-btn-outline-light { background: transparent; color: var(--ww-white); border-color: var(--ww-white); }
.wp-btn-outline-light:hover { background: var(--ww-accent); color: var(--ww-white); border-color: var(--ww-accent); }
.wp-btn-solid { background: var(--ww-primary); color: var(--ww-white); }
.wp-btn-solid:hover { background: var(--ww-accent); color: var(--ww-white); border-color: var(--ww-accent); }
.wp-btn-sm { padding: 10px 24px; font-size: 13px; }

/* ---------- top bar ---------- */
.wp-topbar { background: var(--ww-accent-2); color: #fff; padding: 8px 0; font-size: 13.5px; }
.wp-topbar .wp-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wp-topbar a { color: #fff; }
.wp-topbar .wp-social { display: flex; gap: 10px; }
.wp-topbar .wp-social a { font-size: 14px; color: var(--ww-white); }

/* ---------- header ---------- */
.wp-header { background: #fff; border-bottom: 1px solid #eef0f2; }
.wp-header .wp-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.wp-brand img { height: 64px; width: auto; }
.wp-nav { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.wp-nav a { color: var(--ww-primary); font-family: var(--ww-font-head); font-size: 15px; letter-spacing: .6px; text-transform: uppercase; font-weight: 500; }
.wp-nav a:hover { color: var(--ww-accent); }
.wp-nav .wp-btn { margin-left: 6px; }
.wp-header--over-hero { position: absolute; width: 100%; background: transparent; border-bottom: none; z-index: 100; }
.wp-header--over-hero .wp-nav a { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.wp-header--over-hero .wp-brand img { filter: brightness(0) invert(1); }

/* ---------- hero ---------- */
.wp-hero {
  background-size: cover; background-position: center;
  position: relative;
  display: flex; align-items: center;
  text-align: center;
  padding: 220px 0 150px;
}
.wp-hero::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
}
.wp-hero .wp-container { position: relative; max-width: 880px; }
.wp-hero .wp-h1 { color: #fff; }
.wp-hero .wp-body { color: rgba(255,255,255,.92); font-size: 17px; }
.wp-hero .wp-hero-sub { font-weight: 600; color: #fff; margin-bottom: 6px; }
.wp-hero .wp-hero-third { opacity: .88; font-size: 16px; margin-top: 0; }
.wp-hero .wp-hero-third + .wp-hero-cta { margin-top: 22px; }
.wp-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.wp-hero-eyebrow { font-family: var(--ww-font-head); color: rgba(255,255,255,.9); letter-spacing: 3px; text-transform: uppercase; font-size: 14px; margin-bottom: 12px; }

/* ---------- service cards (elementskit-style) ---------- */
.wp-service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 40px; }
.wp-service-card {
  background: var(--ww-white);
  border-radius: var(--ww-radius-md);
  overflow: hidden;
  box-shadow: var(--ww-shadow-card);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-service-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .3s; }
.wp-service-card:hover img { transform: scale(1.06); }
.wp-service-body { padding: 26px 28px 30px; background: var(--ww-white); flex: 1; display: flex; flex-direction: column; }
.wp-service-body h3 { font-family: var(--ww-font-head); font-size: 22px; font-weight: 600; color: var(--ww-primary); margin: 0 0 12px; text-transform: uppercase; }
.wp-service-body p { font-size: 15px; color: var(--ww-ink); flex: 1; margin: 0 0 18px; }
.wp-service-body a { font-family: var(--ww-font-head); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--ww-primary); font-weight: 600; }
.wp-service-body a:hover { color: var(--ww-accent); }

/* ---------- about/summary split ---------- */
.wp-about-split .wp-body { margin-bottom: 0; }
.wp-about-split .wp-btn { margin-top: 22px; margin-right: 12px; }
.wp-img-row { display: flex; gap: 18px; }
.wp-img-row img { border-radius: var(--ww-radius-md); width: 100%; object-fit: cover; }
.wp-img-row img.wp-tall { aspect-ratio: 4/5; }

/* ---------- dark-photo band (testimonial / guests) ---------- */
.wp-photo-band {
  position: relative; text-align: center;
  background-size: cover; background-position: center;
  padding: 130px 0;
}
.wp-photo-band::before { content:""; position:absolute; inset:0; background: rgba(31,27,84,.74); }
.wp-photo-band .wp-container { position: relative; max-width: 860px; }
.wp-photo-band .wp-h2 { color: #fff; }

/* ---------- quote / testimonial ---------- */
.wp-quote { font-family: Georgia, serif; font-style: italic; font-size: clamp(20px,2.6vw,32px); color: #fff; margin: 0 0 20px; }
.wp-quote-author { color: rgba(255,255,255,.8); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- article / video index cards ---------- */
.wp-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wp-index-card { background: var(--ww-white); border-radius: var(--ww-radius-md); overflow: hidden; box-shadow: var(--ww-shadow-card); display:flex; flex-direction:column; }
.wp-index-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.wp-index-body { padding: 20px 22px; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.wp-index-body h3 { font-family: var(--ww-font-head); font-size: 19px; font-weight: 600; color: var(--ww-primary); margin: 0 0 10px; text-transform: uppercase; line-height:1.3; }
.wp-index-body a { font-family: var(--ww-font-head); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--ww-primary); font-weight: 600; }
.wp-index-body a:hover { color: var(--ww-accent); }
@media (max-width: 1000px) {
  .wp-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wp-index-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- form / subscribe ---------- */
.wp-form { max-width: 560px; margin: 30px auto 0; text-align: left; }
.wp-field { width: 100%; padding: 14px 18px; border: 1px solid #d8dde3; border-radius: var(--ww-radius-sm); font-family: var(--ww-font-body); font-size: 15px; margin-bottom: 12px; }

/* ---------- footer ---------- */
.wp-footer { background: var(--ww-black); color: rgba(255,255,255,.8); padding: 70px 0 0; }
.wp-footer .wp-grid-4 { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.wp-footer h4 { font-family: var(--ww-font-head); text-transform: uppercase; letter-spacing: 1px; color: #fff; font-size: 16px; margin: 0 0 14px; }
.wp-footer ul { list-style: none; margin: 0; padding: 0; }
.wp-footer li { margin: 8px 0; }
.wp-footer a { color: rgba(255,255,255,.75); font-size: 15px; }
.wp-footer a:hover { color: var(--ww-accent); }
.wp-footer-legal {
  margin-top: 48px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.7;
}
.wp-footer-social { display: flex; gap: 12px; margin-top: 16px; }
.wp-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--ww-radius-round); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .wp-grid-3, .wp-service-grid { grid-template-columns: repeat(2,1fr); }
  .wp-grid-4 { grid-template-columns: 1fr 1fr; }
  .wp-grid-2 { grid-template-columns: 1fr; }
  .wp-nav { display: none; }
}
@media (max-width: 700px) {
  .wp-grid-3, .wp-service-grid, .wp-grid-4 { grid-template-columns: 1fr; }
  .wp-hero { padding: 170px 0 100px; }
}


/* ============================================================
   ELEMENTOR PORT BAND-STRUCTURE FIX (2026-09-17)
   The html-widget port wraps every static <section> in Elementor's
   outer section + an .elementor-element div, and BOTH carry the band
   class (wp-hero / wp-photo-band / wp-section). The stylesheet's
   padding + ::before overlay therefore stack 3x. This override strips
   the band styling from the OUTER WRAPPER LAYERS only; the innermost
   real <section> keeps its padding, background and overlay, so each
   full-bleed band renders exactly once as designed.
------------------------------------------------------------ */
.elementor-section.wp-hero,
.elementor-section.wp-photo-band,
.elementor-section.wp-section,
.elementor-section.wp-about-split,
.elementor-section.wp-cta,
.elementor-section.wp-center {
  padding: 0 !important;
}
.elementor-section.wp-hero::before,
.elementor-section.wp-photo-band::before,
.elementor-section.wp-section::before,
.elementor-section.wp-about-split::before,
.elementor-section.wp-cta::before,
.elementor-section.wp-center::before {
  content: none !important;
}
.elementor-element.wp-hero,
.elementor-element.wp-photo-band,
.elementor-element.wp-section,
.elementor-element.wp-about-split,
.elementor-element.wp-cta,
.elementor-element.wp-center {
  padding: 0 !important;
}
.elementor-element.wp-hero::before,
.elementor-element.wp-photo-band::before,
.elementor-element.wp-section::before,
.elementor-element.wp-about-split::before,
.elementor-element.wp-cta::before,
.elementor-element.wp-center::before {
  content: none !important;
}
/* Ensure the real inner section (keeps class + inline bg after the port)
   still renders full-width and centered as intended. */
.elementor-section.wp-section .wp-container,
.elementor-section.wp-hero .wp-container,
.elementor-section.wp-photo-band .wp-container {
  margin-left: auto;
  margin-right: auto;
}

/* --- CTA contrast fix (9/17): nav link color (0,1,1) was overriding button white text (0,1,0) --- */
.wp-nav .wp-btn-accent,
.hero-cta .wp-btn-accent,
.wp-hero .wp-btn-accent {
  color: var(--ww-white) !important;
}
.wp-hero .wp-btn-accent:hover { color: var(--ww-white) !important; }

/* --- Video library grid (9/17) --- */
.wp-vid-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:2rem; }
.wp-vid-card { border:1px solid rgba(31,27,84,.12); border-radius: var(--ww-radius-md); overflow:hidden; background:#fff; display:flex; flex-direction:column; box-shadow: var(--ww-shadow-card); }
.wp-vid-frame { position:relative; width:100%; aspect-ratio:16/9; background:#0a0a12; }
.wp-vid-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.wp-vid-body { padding:1rem 1.25rem 1.4rem; }
.wp-vid-body h3 { margin:0 0 .25rem; font-family:var(--ww-font-head); font-size:1.05rem; line-height:1.3; color:var(--ww-primary); }
@media (max-width:720px){ .wp-vid-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FULL-BLEED BAND FIX (2026-09-18)
   The html-widget port nests the real band <section> (which carries
   the inline background image) inside Elementor's boxed container,
   so the hero/photo/CTA backgrounds only span ~880px instead of the
   full viewport. Stretching the inner band to the viewport and
   recentering it keeps the outer section height intact and lets the
   contained .wp-container stay centered at its design width.
------------------------------------------------------------ */
.elementor-section.wp-hero > .elementor-container .elementor-column,
.elementor-section.wp-photo-band > .elementor-container .elementor-column,
.elementor-section.wp-cta > .elementor-container .elementor-column {
  width: 100%;
}
.elementor-section.wp-hero > .elementor-container .elementor-widget-wrap,
.elementor-section.wp-photo-band > .elementor-container .elementor-widget-wrap,
.elementor-section.wp-cta > .elementor-container .elementor-widget-wrap {
  padding: 0 !important;
}
.elementor-element.wp-hero section.wp-hero,
.elementor-element.wp-photo-band section.wp-photo-band,
.elementor-element.wp-cta section.wp-cta {
  width: 100%;
}

/* --- Services bottom CTA (9/22): the wp-center CTA carries an inline
   max-width:760px, so on tablet/desktop its box wanders off the cards'
   rail. Force it to the standard container width so its gutters align
   with the service cards' grid at every viewport (text stays centered). --- */
.wp-section.wp-center .wp-container {
  max-width: var(--ww-maxw) !important;
}

/* --- wp-img-row overflow fix (9/18): stop the aspect-ratio tall
   images from blowing the page width (right edge was ~1644px on a
   1200px viewport) --- */
.wp-img-row {
  flex-wrap: nowrap;
}
.wp-img-row img {
  flex: 1 1 45%;
  min-width: 0;
}

/* --- full-bleed band: let Elementor container span full viewport so the
   hero/photo/CTA background sections actually reach the page edges --- */
.elementor-section.wp-hero > .elementor-container,
.elementor-section.wp-photo-band > .elementor-container,
.elementor-section.wp-cta > .elementor-container {
  max-width: 100% !important;
}

/* container must GROW inside the flex section, not shrink to content */
.elementor-section.wp-hero > .elementor-container,
.elementor-section.wp-photo-band > .elementor-container,
.elementor-section.wp-cta > .elementor-container {
  width: 100%;
  flex: 1 0 auto;
}

/* --- footer grid collapse fix (9/18): .wp-footer .wp-grid-4 (specificity
   0,2,0) was beating the generic mobile 1fr rule (0,1,0), so the footer
   stayed 4 columns on phones and overflowed the viewport --- */
@media (max-width: 1000px) {
  .wp-footer .wp-grid-4 { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .wp-footer .wp-grid-4 { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   MOBILE NAV DRAWER + HEADER LOGO FIX (2026-09-18)
   P1: mobile nav dropdown (hamburger toggle) + P2: real horizontal
   logo lockups (cropped from the 2000x2000 canvases) — over-hero uses
   the white lockup, inner pages use the navy lockup.
------------------------------------------------------------ */

/* --- P2: header logo — true horizontal lockups, never squashed --- */
.wp-brand img {
  height: 64px;
  width: auto;
  object-fit: contain;          /* square source can never stretch */
  display: block;
}
.wp-header--over-hero .wp-brand img {
  filter: none;                 /* white lockup asset is used directly */
}

/* --- P1: hamburger toggle (hidden on desktop) --- */
.wp-nav-toggle {
  display: none;
  flex-direction: column;   /* stack the 3 bars vertically into a real hamburger */
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 4px;
  align-items: center;
  justify-content: center;
}
.wp-nav-toggle-line {
  display: block;
  width: 24px;
  height: 3px;
  margin: 3px 0;
  background: var(--ww-primary);
  border-radius: var(--ww-radius-sm);
  transition: background .2s, transform .2s, opacity .2s;
}
.wp-header--over-hero .wp-nav-toggle-line { background: #fff; }

@media (max-width: 1000px) {
  .wp-header { position: relative; }
  .wp-header--over-hero { position: absolute; top: 0; left: 0; right: 0; }

  .wp-nav-toggle { display: flex; }

  /* slide-down drawer */
  .wp-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--ww-white);           /* solid: readable over hero AND on white pages */
    border-top: 1px solid #eef0f2;
    box-shadow: 0 22px 34px -26px rgba(31,27,84,.6);
    padding: 14px 0 22px;
    z-index: 300;
  }
  .wp-header.wp-nav-open .wp-nav { display: flex; }

  .wp-nav a:not(.wp-btn) {
    padding: 12px 20px;
    width: 100%;
    text-align: center;
    color: var(--ww-primary) !important;   /* always navy inside the white drawer */
    text-shadow: none !important;
    font-size: 15px;
  }
  .wp-nav a:not(.wp-btn):hover { color: var(--ww-accent) !important; }
  .wp-nav .wp-btn { margin: 10px auto 0; }

  /* keep brand + toggle on one line */
  .wp-brand img { height: 44px; width: auto; }
  /* hamburger -> X when open (bars cross at the toggle center) */
  .wp-header.wp-nav-open .wp-nav-toggle-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .wp-header.wp-nav-open .wp-nav-toggle-line:nth-child(2) { opacity: 0; }
  .wp-header.wp-nav-open .wp-nav-toggle-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* scrim: dim the page behind the open drawer (below the header, full
     remaining viewport). Tapping the dimmed area does nothing — the page
     underneath is no longer tappable. */
  .wp-header.wp-nav-open::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - 100%);
    background: rgba(15, 18, 40, 0.45);
    z-index: 251;
    pointer-events: auto;
  }
}
/* ============================================================
   HOMEPAGE RESTRUCTURE 9-SECTION FLOW (2026-09-20)
   New components: S2 questions accordion, S3 income-lab placeholder
   slot + mobile carousel, S4 five-area numbered list, S5 flat-fee
   comparison, S6 emotion carousel, S7 testimonial shell.
   Mobile-first: carousels + expandable, no tall stacked cards.
------------------------------------------------------------ */

/* ---- generic mobile scroll-snap carousel ---- */
.wp-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 6px 2px 18px;
  margin-top: 40px;
}
.wp-carousel::-webkit-scrollbar { height: 6px; }
.wp-carousel::-webkit-scrollbar-thumb { background: var(--ww-ice); border-radius: var(--ww-radius-sm); }
.wp-carousel > * { scroll-snap-align: center; flex: 0 0 auto; }

/* ---- S2 questions accordion ---- */
.wp-qwrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 52px; align-items: start; }
.wp-qcol h2 { margin-bottom: 26px; }
.wp-qlist { border-top: 1px solid #e6e9ee; }
.wp-qitem { border-bottom: 1px solid #e6e9ee; }
.wp-q {
  list-style: none;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  font-family: var(--ww-font-head);
  font-size: 19px; font-weight: 500;
  color: var(--ww-primary);
  line-height: 1.35;
}
.wp-q::-webkit-details-marker { display: none; }
.wp-q::after {
  content: "+";
  margin-left: auto;
  color: var(--ww-accent);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  transition: transform .2s;
}
.wp-qitem[open] .wp-q::after { transform: rotate(45deg); }
.wp-qn {
  font-family: var(--ww-font-head);
  color: var(--ww-accent);
  font-size: 14px; letter-spacing: 1px;
  flex: none;
}
.wp-qbody {
  padding: 0 4px 18px 34px;
  color: var(--ww-ink);
  font-size: 15.5px;
  max-width: 520px;
}
.wp-qimg img { border-radius: var(--ww-radius-md); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; box-shadow: 0 24px 50px -40px rgba(31,27,84,.65); }

/* ---- S3 income-lab placeholder slot (no fake charts/numbers) ---- */
.wp-il-slot { margin-top: 44px; }
.wp-ilslide {
  width: min(320px, 82vw);
  background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.38);
  border-radius: var(--ww-radius-md);
  padding: 34px 26px;
  text-align: left;
  scroll-snap-align: center;
  min-height: 180px;
  display: flex; flex-direction: column; justify-content: center;
}
.wp-illabel {
  font-family: var(--ww-font-head); text-transform: uppercase; letter-spacing: 2px;
  color: var(--ww-ice); font-size: 12px; margin: 0 0 10px;
}
.wp-ilnote { color: #fff; font-size: 17px; font-weight: 600; margin: 0 0 14px; line-height: 1.4; }
.wp-ilsoon { color: rgba(255,255,255,.62); font-size: 13.5px; margin: 0; }

/* ---- S4 five-area numbered list (sophisticated, not stacked cards) ---- */
.wp-five { max-width: 820px; margin: 44px auto 0; text-align: left; }
.wp-five-list { list-style: none; margin: 0; padding: 0; }
.wp-five-list li {
  display: flex; align-items: baseline; gap: 22px;
  padding: 20px 8px;
  border-bottom: 1px solid #e6e9ee;
  font-family: var(--ww-font-head);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 400;
  color: var(--ww-primary);
  line-height: 1.35;
}
.wp-five-list li:first-child { border-top: 1px solid #e6e9ee; }
.wp-fn {
  font-family: var(--ww-font-head);
  color: var(--ww-accent);
  font-weight: 600;
  font-size: 15px; letter-spacing: 1px;
  flex: none;
}

/* ---- S5 flat-fee comparison ---- */
.wp-fee-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 48px auto 0; max-width: 860px; }
.wp-feecard {
  background: var(--ww-white);
  border: 1px solid #e6e9ee;
  border-top: 4px solid var(--ww-accent);
  border-radius: var(--ww-radius-md);
  padding: 30px 28px;
  box-shadow: var(--ww-shadow-card);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-feetag {
  font-family: var(--ww-font-head); text-transform: uppercase; letter-spacing: 2px;
  color: var(--ww-accent); font-size: 12.5px; margin: 0 0 10px;
}
.wp-feetitle { margin: 0; color: var(--ww-primary); font-size: 20px; font-weight: 600; line-height: 1.4; font-family: var(--ww-font-head); letter-spacing: .5px; }
.wp-feevis {
  max-width: 560px; margin: 34px auto 0;
  display: grid; gap: 12px;
  border: 1px solid #e6e9ee; border-radius: var(--ww-radius-md);
  background: var(--ww-white); padding: 22px 22px 24px;
}
.wp-feev-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; font-family: var(--ww-font-head); font-size: 13.5px; color: var(--ww-primary); }
.wp-feev-name { text-align: right; line-height: 1.3; }
.wp-feev-bar { display: block; height: 16px; border-radius: var(--ww-radius-md); }
.wp-feev-up {
  background: linear-gradient(90deg, var(--ww-ice), var(--ww-accent) 70%, var(--ww-steel));
  width: 100%;
}
.wp-feev-flat { background: var(--ww-primary); width: 42%; }
/* conceptual caption — no invented numbers */
.wp-feev-row + small { grid-column: 1 / -1; text-align: center; color: var(--ww-gray); }

/* ---- S6 emotion carousel ---- */
.wp-emocar { margin-top: 48px; }
.wp-emslide {
  position: relative;
  width: min(380px, 78vw);
  aspect-ratio: 4/3;
  border-radius: var(--ww-radius-md);
  overflow: hidden;
  scroll-snap-align: center;
}
.wp-emslide img { width: 100%; height: 100%; object-fit: cover; }
.wp-emslide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 42px 20px 16px;
  background: linear-gradient(transparent, rgba(31,27,84,.78));
  color: #fff;
  font-family: var(--ww-font-head);
  letter-spacing: 1.5px; text-transform: uppercase;
  font-size: 14px;
  text-align: center;
}

/* ---- S7 testimonial shell (neutral placeholder) ---- */
.wp-tcar { margin-top: 40px; }
.wp-tcard {
  background: var(--ww-soft);
  border: 1px dashed #c9d4de;
  border-radius: var(--ww-radius-md);
  padding: 48px 28px;
  max-width: 640px;
  margin: 0 auto;
}
.wp-tnote { font-family: var(--ww-font-head); font-size: 22px; color: var(--ww-primary); margin: 0 0 12px; }
.wp-tsub { color: var(--ww-gray); font-size: 15.5px; margin: 0; }

/* ---- S7b testimonial grid (client-approved real testimonials) ---- */
.wp-testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 40px; }
.wp-testi-grid .wp-tcard { max-width: none; margin: 0; border: 1px solid #e2e8f0; border-radius: var(--ww-radius-md); padding: 30px 26px; background: var(--ww-white); box-shadow: var(--ww-shadow-card); display: flex; flex-direction: column; }
.wp-tq { font-family: var(--ww-font-body); font-size: 15.5px; line-height: 1.65; color: var(--ww-gray-2); margin: 0 0 18px; }
.wp-ta { font-family: var(--ww-font-head); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ww-primary); margin: 20px 0 0; }
@media (max-width: 1000px) {
  .wp-testi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .wp-testi-grid { grid-template-columns: minmax(0,1fr); }
}

/* ---- responsive (mobile-first) ---- */
@media (max-width: 1000px) {
  .wp-qwrap, .wp-about-split .wp-qwrap { grid-template-columns: 1fr; gap: 38px; }
  .wp-qimg img { aspect-ratio: 16/10; }
  .wp-fee-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .wp-five-list li { flex-wrap: wrap; gap: 10px; }
  .wp-feev-row { grid-template-columns: 1fr; text-align: left; }
  .wp-feev-name { text-align: left; }
}

/* ---- S6 emotion blocks: show all without scroll (David 2026-09-21) ---- */
.wp-emocar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wp-emocar .wp-emslide { width: 100%; }
@media (max-width: 1000px) {
  .wp-emocar { grid-template-columns: repeat(2, 1fr); }
}

/* ---- services: center CTA buttons in cards (David 2026-09-21) ---- */
.wp-service-body p.wp-btn-row { text-align: center; }
.wp-service-body p.wp-btn-row a.wp-btn { display: inline-block; margin: 0 auto; }

/* ===== Design-audit fixes 2026-09-21 ===== */

/* 1. Services "Planning Options": pin CTAs to card bottom so all 3 align */
.wp-service-card .wp-service-body { display: flex; flex-direction: column; align-items: stretch; }
.wp-service-card .wp-service-body > p { flex: 0 1 auto; }
.wp-service-card .wp-service-body .wp-btn-row { margin-top: auto; text-align: center; padding-top: 18px; }
.wp-service-card .wp-btn-row a.wp-btn { display: inline-block; min-width: 210px; }

/* 2. Home "See How Your Choices": static 3-col grid, no carousel */
.wp-il-slot .wp-carousel { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; overflow: visible; }
.wp-il-slot .wp-carousel > * { min-width: 0; }
@media (max-width: 700px) {
  .wp-il-slot .wp-carousel { grid-template-columns: 1fr; gap: 18px; }
}
.wp-il-slot .wp-carousel > * { width: 100% !important; }
.wp-ilslide { width: auto !important; min-height: 200px; }

/* 3. Emotion/lifestyle cards: strip dead scroller CSS */
.wp-emocar { overflow: visible !important; }

/* 5. Services mobile overflow: collapse 2-col bullet cards to 1 col under 480px */
@media (max-width: 480px) {
  .wp-grid-2 { grid-template-columns: 1fr !important; }
  .wp-grid-2 > * { min-width: 0; }
  .wp-service-body ul { overflow-wrap: anywhere; }
}

/* 6. About team: equal card content — allow body to space out titles evenly */
.wp-service-body h3 { margin-bottom: 8px; }

/* 8. Buttons: standardize card CTAs + strategy pills to the site's 57px/15px primary */
.wp-service-body .wp-btn, .wp-hero .wp-btn, .wp-cta .wp-btn { font-size: 15px; padding: 16px 34px; }

/* 11. Videos grid 2 -> 3 columns on wide screens */
.wp-vid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .wp-vid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .wp-vid-grid { grid-template-columns: 1fr; } }
.wp-vid-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 9/10. Header sticky + active nav state */
/* NOTE: top:0 on .wp-header is the STICKY offset for inner pages. The over-hero
   home header is absolute, and inheriting top:0 dragged it to the page top, so it
   rendered ON TOP of the .wp-topbar (nav/logo colliding with the email + socials).
   top:auto restores its static position = directly below the topbar, over the hero. */
.wp-header { position: sticky; top: 0; z-index: 200; box-shadow: 0 1px 0 rgba(31,27,84,.06); }
.wp-header--over-hero { position: absolute; top: auto; box-shadow: none; }
.wp-nav a[aria-current="page"], .wp-nav a.active { color: var(--ww-accent); font-weight: 700; }
.wp-nav a.is-active { color: var(--ww-accent); }

/* Footer: better hierarchy + legal collapse support */
.wp-footer h4 { font-size: 13px; letter-spacing: 1.2px; color: rgba(255,255,255,.6); }
.wp-footer a { font-size: 15px; }
.wp-footer-legal { margin-top: 24px; padding: 22px 0 40px; }
.wp-footer-legal summary { cursor: pointer; color: rgba(255,255,255,.7); font-size: 12.5px; margin-bottom: 12px; }
.wp-footer-legal p { margin: 0 0 12px; }
@media (min-width: 701px) {
  .wp-footer .wp-grid-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
}

/* FAQ: collapse long walls into accordion items */
.wp-faq-item { background: #fff; border: 1px solid #eef0f2; border-radius: var(--ww-radius-md); padding: 4px 22px; margin: 0 0 12px; text-align: left; box-shadow: var(--ww-shadow-card); }
.wp-faq-item summary { cursor: pointer; font-family: var(--ww-font-head); font-size: 19px; font-weight: 600; color: var(--ww-primary); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; text-align: left; }
.wp-faq-item p { padding: 0 0 16px; margin: 0; text-align: left; }
.wp-faq-item summary::-webkit-details-marker { display: none; }
.wp-faq-item summary::after { content: "+"; font-size: 22px; color: var(--ww-accent); font-weight: 400; transition: transform .2s; }
.wp-faq-item[open] summary::after { content: "\2013"; }
.wp-faq-item p { padding: 0 0 16px; margin: 0; }

/* Contact: reduce submit gap, full-width button */
.wp-contact-form .wp-form, .wp-form { margin-top: 18px; }
.wp-form .wp-btn { width: 100%; }

/* About team portrait placeholder frames */
.wp-team-ph { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: linear-gradient(135deg, #eef0f4, #e2e6ec); display: flex; align-items: center; justify-content: center; color: var(--ww-primary); font-family: var(--ww-font-head); font-size: 34px; font-weight: 700; letter-spacing: 2px; }

/* ---- S3 income-lab FINAL 6-image gallery (2026-09-23): 2x3 desktop / 1-col mobile ---- */
.wp-il-slot.wp-il-all .wp-carousel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 700px) {
  .wp-il-slot.wp-il-all .wp-carousel { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
.wp-ilslide--img {
  background: var(--ww-white);
  border: 0;
  border-radius: var(--ww-radius-md);
  overflow: hidden;
  padding: 0;
  box-shadow: 0 14px 34px -26px rgba(0,0,0,.6);
  min-height: 0;
  justify-content: stretch;
}
.wp-ilslide--img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; border-radius: 0; }
.wp-ilslide--img .wp-ilnote {
  color: var(--ww-primary);
  font-size: 15.5px;
  font-weight: 600;
  margin: 0;
  padding: 16px 18px 18px;
  line-height: 1.45;
}

/* ============================================================
   MOMENT AFTER band (homepage closing) + CLIENT STORIES (About)
   2026-09-23 — client-approved testimonial redesign
   ============================================================ */
/* ---- Client Stories (About, light band, content-sized cards) ---- */
.ww-stories { background: var(--ww-soft); }
.ww-stories .wp-eyebrow { text-align: left; }
.ww-stories .wp-h2 { max-width: 720px; }
.ww-quote-grid {
  column-count: 2;
  column-gap: 24px;
  margin-top: 40px;
}
.ww-quote-card {
  background: var(--ww-white);
  border: 1px solid #e2e8f0;
  border-radius: var(--ww-radius-md);
  padding: 24px;
  break-inside: avoid;
  margin-bottom: 24px;
}
.ww-quote-q {
  font-family: var(--ww-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ww-ink);
  margin: 0 0 18px;
}
.ww-quote-a {
  font-family: 'Inter', var(--ww-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ww-primary);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(31,27,84,.14);
  text-transform: none;
  letter-spacing: 0;
}
.ww-quote-disc {
  font-family: var(--ww-font-body);
  font-size: 12px;
  color: var(--ww-gray);
  margin: 32px 0 0;
  text-align: center;
}
@media (max-width: 700px) {
  .ww-quote-grid { column-count: 1; }
}

/* ===== carousel.css ===== */
*  {  box-sizing: border-box;  }
img  {  max-width: 100%; height: auto; display: block;  }
a  {  color: var(--ww-accent); text-decoration: none;  }
a:hover  {  color: var(--ww-steel);  }
.wp-container  {  max-width: var(--ww-maxw); margin: 0 auto; padding: 0 var(--ww-gutter);  }
.wp-section  {  padding: 88px 0;  }
.wp-section--tight  {  padding: 56px 0;  }
.wp-grid-4  {  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;  }
.wp-center  {  text-align: center;  }
.wp-stack  {  display: grid; grid-template-columns: 1fr; gap: 16px;  }
.wp-eyebrow  { 
  font-family: var(--ww-font-head);
  font-size: 14px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--ww-steel);
 }
.wp-h1  { 
  font-family: var(--ww-font-head);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 300; line-height: 1.12;
  margin: 0 0 16px; text-transform: none;
 }
.wp-h2  { 
  font-family: var(--ww-font-head);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700; line-height: 1.18;
  margin: 0 0 16px;
  color: var(--ww-primary); text-transform: uppercase;
  letter-spacing: .5px;
 }
.wp-h2--light  {  color: var(--ww-white);  }
.wp-lead  {  font-size: 18px; line-height: 1.6; margin: 0 0 18px;  }
.wp-body  {  font-size: 16px; line-height: 1.7; color: var(--ww-ink); margin: 0 0 16px;  }
.wp-small  {  font-size: 13.5px;  }
.wp-muted  {  color: var(--ww-gray-2);  }
.wp-btn  { 
  display: inline-block;
  font-family: var(--ww-font-head);
  font-size: 15px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 14px 34px;
  border-radius: var(--ww-radius-pill);
  border: 2px solid transparent;
  cursor: pointer; text-align: center;
  transition: background .2s, color .2s, border-color .2s, transform .2s ease, box-shadow .2s ease;
 }
.wp-btn-accent  {  background: var(--ww-accent); color: var(--ww-white) !important;  }
.wp-btn-accent:hover  {  background: var(--ww-primary); border-color: var(--ww-primary);  }
.wp-btn-sm  {  padding: 10px 24px; font-size: 13px;  }
.wp-hero  { 
  position: relative;
  display: flex; align-items: center; text-align: center;
  padding: 200px 0 120px;
  background-size: cover; background-position: center;
 }
.wp-hero::before  {  content: ""; position: absolute; inset: 0; background: rgba(15,19,46,.72);  }
.wp-hero .wp-container  {  position: relative; max-width: 880px;  }
.wp-hero .wp-h1  {  color: #fff;  }
.wp-hero .wp-body  {  color: rgba(255,255,255,.92); font-size: 17px;  }
.wp-hero .wp-hero-sub { font-weight: 600; color: #fff; margin-bottom: 6px; }
.wp-hero .wp-hero-third { opacity: .88; font-size: 16px; margin-top: 0; }
.wp-hero .wp-hero-third + .wp-hero-cta { margin-top: 22px; }
.wp-hero-cta  {  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px;  }
.wp-brand  {  font-family: var(--ww-font-head); letter-spacing: 1px; font-size: 19px; text-transform: uppercase; font-weight: 500; color: #fff;  }
.wp-hero-onload  {  min-height: 88px;  }
.wp-questions  {  background: #fff;  }
.wp-qwrap  {  display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start;  }
.wp-qlist  {  margin-top: 12px;  }
.wp-qitem  {  border-bottom: 1px solid #e3e6ea;  }
.wp-qitem:first-child  {  border-top: 1px solid #e3e6ea;  }
.wp-q  {  display: flex; gap: 14px; align-items: baseline; cursor: pointer;
  list-style: none; padding: 18px 4px; min-height: 48px;
  font-family: var(--ww-font-head); font-weight: 500; font-size: 17px; color: var(--ww-primary);  }
.wp-q::-webkit-details-marker  {  display: none;  }
.wp-q:focus-visible  {  outline: 2px solid var(--ww-accent); outline-offset: 2px;  }
.wp-qn  {  color: var(--ww-accent); font-weight: 600;  }
.wp-q .wp-qchev  {  margin-left: auto; color: var(--ww-accent); transition: transform .2s; font-size: 14px;  }
details[open] .wp-q .wp-qchev  {  transform: rotate(45deg);  }
.wp-qbody  {  padding: 0 4px 20px 40px; color: var(--ww-ink); font-size: 16px; line-height: 1.55;  }
.wp-qmore  {  display: inline-block; margin-top: 10px; font-weight: 600; color: var(--ww-accent); font-size: 16px;  }
.wp-qimg  {  border-radius: var(--ww-radius-md); overflow: hidden;  }
.wp-qimg img  {  width: 100%; object-fit: cover; aspect-ratio: 4/3; object-position: 70% 50%;  }
.wp-photo-band  { 
  position: relative; text-align: center;
  background-size: cover; background-position: center;
  padding: 110px 0 96px;
 }
.wp-photo-band::before  {  content:""; position:absolute; inset:0; background: rgba(31,27,84,.82);  }
.wp-photo-band .wp-container  {  position: relative; max-width: 960px;  }
.wp-photo-band .wp-h2  {  color: #fff;  }
.wp-carousel-wrap  {  max-width: 500px; margin: 36px auto 0; text-align: left;  }
.wp-carousel-caption  {  margin: 14px 0 0; color: rgba(255,255,255,.75); font-size: 13px;  }
.wp-five  {  max-width: 720px; margin: 0 auto;  }
.wp-five-list  {  list-style: none; margin: 0; padding: 0; counter-reset: five;  }
.wp-five-list li  { 
  display: flex; align-items: center; gap: 16px;
  font-family: var(--ww-font-head); font-size: 19px; font-weight: 500;
  color: var(--ww-primary); padding: 14px 4px; min-height: 48px;
  border-bottom: 1px solid #e3e6ea;
 }
.wp-five-list li:first-child  {  border-top: 1px solid #e3e6ea;  }
.wp-fn  {  color: var(--ww-accent); font-weight: 600;  }
a.wp-five-link  { 
  display: flex; align-items: center; gap: 16px;
  color: inherit; text-decoration: none; flex: 1; min-width: 0;
 }
a.wp-five-link:visited  {  color: inherit;  }
a.wp-five-link:hover .wp-five-chev, a.wp-five-link:focus-visible .wp-five-chev  {  color: var(--ww-accent); transform: translateX(2px);  }
.wp-five-chev  { 
  color: #a9b2bf; margin-left: auto; font-family: var(--ww-font-body);
  font-size: 15px; transition: color .15s ease, transform .15s ease;
 }
.wp-flatfee  {  background: var(--ww-soft);  }
.wp-fee-grid  {  display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp-card-gap, 16px); margin-top: 36px; max-width: 880px; margin-left: auto; margin-right: auto;  }
.wp-feecard  {  background: #fff; border-radius: var(--ww-radius-md); padding: 26px 24px; box-shadow: var(--ww-shadow-card);  }
.wp-feetag  {  font-family: var(--ww-font-head); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; color: var(--ww-accent); margin: 0 0 8px;  }
.wp-feetitle  {  font-family: var(--ww-font-head); font-size: 20px; color: var(--ww-primary); margin: 0 0 10px; line-height: 1.3; letter-spacing: .5px;  }
.wp-feedesc  {  margin: 0; font-size: 15px; color: var(--ww-ink);  }
.wp-feelist  {  max-width: 880px; margin: 36px auto 0; border-top: 1px solid #e3e6ea;  }
.wp-feelist .wp-qitem  {  padding: 0;  }
.wp-feelist .wp-q  {  padding: 16px 4px;  }
.wp-feelink  {  display: block; padding: 16px 4px; font-family: var(--ww-font-head); font-weight: 500; color: var(--ww-primary); font-size: 16px;  }
.wp-feelink:hover  {  color: var(--ww-accent);  }
.wp-life  {  background: #fff; text-align: center;  }
.wp-life .wp-body  {  margin: 20px auto 0; color: var(--ww-ink);  }
.wp-chips  {  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; padding: 0; list-style: none;  }
.wp-chips li  { 
  border: 1px solid var(--ww-accent); color: var(--ww-primary);
  border-radius: var(--ww-radius-pill); padding: 8px 18px;
  font-family: var(--ww-font-head); font-size: 14px; letter-spacing: .5px;
 }
.wp-testi  {  background: #fff; text-align: left;  }
.wp-testi-disclaimer  {  margin: 16px 0 0; font-size: 12.5px; color: #4B5563;  }
.wp-testi-note  {  font-size: 12.5px; color: var(--ww-gray); margin: 8px 0 0;  }
.wp-ht  {  background: var(--ww-soft);  }
.wp-ht-copy  {  max-width: 760px; margin: 0 auto; text-align: center;  }
.wp-ht-slot {
  position: relative;
  max-width: 760px; margin: 32px auto 0;
  aspect-ratio: 16/7; border-radius: var(--ww-radius-md); overflow: hidden;
  background: linear-gradient(120deg, #dfe3ea, #ccd4e0);
}
.wp-ht-slot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.wp-final-cta  {  background: var(--ww-primary); color: #fff; text-align: center;  }
.wp-final-cta .wp-body  {  color: rgba(255,255,255,.88); max-width: 680px; margin: 0 auto;  }
.wp-copyright  {  margin: 12px 0 0;  }
.wp-entity-line  {  margin: 10px 0 0; color: rgba(255,255,255,.55);  }
.hero-placeholder  {  background-image: linear-gradient(140deg, var(--ww-primary) 0%, var(--ww-secondary) 55%, var(--ww-accent) 100%);  }
@media (max-width: 900px) {
  .wp-qwrap { grid-template-columns: 1fr; }
  .wp-qimg { margin-top: 24px; } /* real photo stacks under accordion on mobile */
}
:root  { 
  --wp-navy: #1F1B54;
  --wp-navy-deep: #141824;
  --wp-accent: #4C9FD6;
  --wp-card-gap: 16px;
  --wp-section-pad-x: 20px;
  --wp-section-pad-y: 28px;
  --wp-headline-to-body: 20px;
 }
.wp-carousel  { 
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;             /* clips the off-screen slides */
  touch-action: pan-y;          /* allow vertical page scroll, we own horizontal */
  -webkit-user-select: none;
  user-select: none;
 }
.wp-carousel__track  { 
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 0.3s ease;
  cursor: grab;
  margin: 0;
  padding: 0;
  list-style: none;
  touch-action: pan-y;          /* track is the pointer target; pan-y hands horizontal swipes to us */
 }
.wp-carousel__track, .wp-carousel__track *  {  touch-action: pan-y;  } /* all carousel nodes: real touch target */

.wp-carousel__track:active  {  cursor: grabbing;  }
.wp-carousel__slide  { 
  flex: 0 0 100%;
  min-width: 100%;              /* prevent flex shrinking below one slide */
  max-width: 100%;
  box-sizing: border-box;
  outline: none;
 }
.wp-carousel__slide:focus-visible  { 
  outline: 2px solid var(--wp-accent);
  outline-offset: 2px;
 }
.wp-carousel__controls  { 
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--wp-card-gap) / 2);
  margin-top: var(--wp-headline-to-body);
 }
.wp-carousel__counter  { 
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #9CA3AF;               /* --wp-muted */
 }
.wp-carousel__dots  { 
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
 }
.wp-carousel__dot  { 
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: var(--ww-radius-round);
  background: rgba(156, 163, 175, 0.45);  /* muted at 45% */
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
 }
.wp-carousel__dot--active  { 
  background: var(--wp-accent);  /* ACCENT ONLY: control state, never text */
  transform: scale(1.15);
 }
.wp-carousel__dot:focus-visible  { 
  outline: 2px solid var(--wp-accent);
  outline-offset: 2px;
 }
.wp-planning-card  { 
  background: #FFFFFF;
  border-radius: var(--ww-radius-md);
  padding: var(--wp-section-pad-y) var(--wp-section-pad-x);
  box-shadow: var(--ww-shadow-card);
 }
.wp-planning-card__graphic  { 
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--wp-navy-deep);
  border-radius: var(--ww-radius-md);
  overflow: hidden;
 }
.wp-planning-card__graphic img  { 
  width: 100%;
  height: 100%;
  object-fit: contain;          /* never crop dense graphics */
  display: block;
 }
.wp-planning-card__graphic--placeholder  { 
  background:
    repeating-linear-gradient(
      45deg,
      var(--wp-navy-deep),
      var(--wp-navy-deep) 12px,
      #1d2433 12px,
      #1d2433 24px
    );
 }
.wp-planning-card__result  { 
  margin: var(--wp-headline-to-body) 0 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--wp-navy);
  font-weight: 600;
 }
.wp-planning-card__impact  { 
  margin: 8px 0 0 0;           /* half card-gap rhythm */
  font-size: 15px;
  line-height: 1.55;
  color: #4B5563;
 }
.wp-planning-card__title  { 
  position: absolute;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  /* visually-hidden card title (Card 1..4 labels are internal, not shipped copy) */
 }
.wp-testimonial  { 
  background: #FFFFFF;
  border-radius: var(--ww-radius-md);
  padding: var(--wp-section-pad-y) var(--wp-section-pad-x);
  margin: 0;                    /* reset blockquote UA margins: kill 147px squeeze */
  box-shadow: var(--ww-shadow-card);
 }
.wp-testimonial__quote  { 
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--wp-navy);
 }
.wp-testimonial__attribution  { 
  margin: 12px 0 0 0;
  font-size: 15px;              /* 15px minimum per spec */
  color: var(--ww-gray-2);
 }
@media (max-width: 360px) {
  .wp-carousel__controls { flex-wrap: wrap; }
  .wp-planning-card__result { font-size: 16px; }
  .wp-testimonial__quote { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-carousel__track { transition: none; }
}
.elementor-section.wp-section .wp-carousel  { 
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
 }
/* 2026-10-06 centring fix: the rule above previously set negative margins plus
   width:calc(100% + 2 * var(--wp-section-pad-x)) to bleed the carousel to the section
   edges, but .wp-carousel{max-width:100%} (later in this sheet) caps that width back to
   the parent, so the negative margins only SHIFTED the track 20px left and it never bled
   right - the planning card, life band, People & Life and both testimonial carousels all
   hugged the left edge (measured 12px left gap vs 52px right gap at 390 on home/services/
   about). Neutralised here so every band carousel sits centred in its container. The
   homepage planning carousel (.wp-photo-band) never had the .elementor-section.wp-section
   ancestor, so it is unaffected - do not add that overlay rule back. */

.ffp-badge-wrap  { 
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 120px;
  margin: 24px auto 8px;
 }
.ffp-badge-wrap img  {  width: 130px; height: auto; max-width: none;  }
.ffp-badge-sr  { 
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
 }
@media (min-width: 768px) {
  .ffp-badge-wrap img { width: 150px; }
  .ffp-badge-wrap { min-height: 140px; }
}
.wp-midpage-cta  {  background: var(--ww-primary); padding: 32px 20px;  }
.wp-cta-band__inner  { 
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
 }
.wp-cta-band__text  { 
  margin: 0; color: #ffffff;
  font-family: var(--ww-font-head);
  font-size: 22px; font-weight: 600; line-height: 1.3;
 }
.wp-cta-band__btn  { 
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px; border-radius: var(--ww-radius-pill);
  background: var(--ww-accent); color: var(--ww-white);
  font-family: var(--ww-font-head);
  font-size: 17px; font-weight: 600; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s, transform .2s ease, box-shadow .2s ease;
 }
.wp-cta-band__btn:active  {  background: var(--ww-primary);  }
@media (min-width: 768px) {
  .wp-midpage-cta { padding: 44px 32px; }
  .wp-cta-band__text { font-size: 26px; }
  .wp-cta-band__inner { flex-direction: row; justify-content: center; gap: 32px; }
}
.wp-sticky-cta  { 
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  background: var(--ww-primary);
  padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(110%);
  transition: transform 0.25s ease-out;
 }
.wp-sticky-cta.is-visible  {  transform: translateY(0);  }
.wp-sticky-cta[hidden]  {  display: none;  }
.wp-sticky-cta__btn  { 
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; border-radius: var(--ww-radius-pill);
  background: var(--ww-accent); color: var(--ww-white);
  font-family: var(--ww-font-head);
  font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s, transform .2s ease, box-shadow .2s ease;
 }
.wp-sticky-cta__btn:active  {  background: var(--ww-primary);  }
@media (min-width: 768px) {
  .wp-sticky-cta { display: none !important; }
}
.wp-planning-card  { 
  background: #FFFFFF; border-radius: var(--ww-radius-md);
  padding: var(--wp-section-pad-y, 28px) var(--wp-section-pad-x, 20px);
 }
@media (max-width: 767px) {

  :root {
    --wp-section-gap: 56px;      /* vertical space between homepage sections */
    --wp-headline-to-body: 20px; /* H2/H3 → first body paragraph */
    --wp-card-gap: 16px;         /* card-to-card / grid gutter */
    --wp-section-pad-x: 20px;   /* horizontal section padding */

    /* Composite helpers derived from the tokens (do not fork new values) */
    --wp-section-pad-y: calc(var(--wp-section-gap) / 2); /* 28px inner top/bottom */
    --wp-body-to-cta: var(--wp-headline-to-body);        /* headline rhythm reused */
  }

  /* ------------------------------------------------------------------------
     2. SECTION RHYTHM (homepage-wide)
     Every homepage band is a `.wp-…` section or an Elementor section carrying
     the `wp-section` Utility class. Uniform vertical cadence; horizontal
     padding via the side-padding token.
     ------------------------------------------------------------------------ */
  .wp-section,
  .elementor-section.wp-section {
    padding-top: var(--wp-section-pad-y);
    padding-bottom: var(--wp-section-pad-y);
    padding-left: var(--wp-section-pad-x);
    padding-right: var(--wp-section-pad-x);
  }

  /* Gap BETWEEN adjacent sections (top of section blocks after the hero) */
  .wp-section + .wp-section,
  .elementor-section.wp-section + .elementor-section.wp-section {
    margin-top: calc(var(--wp-section-gap) - 2 * var(--wp-section-pad-y));
  }

  /* First section flush to the header; last section flush to the footer */
  .wp-section:first-of-type {
    margin-top: 0;
  }
  .wp-section:last-of-type {
    margin-bottom: 0;
  }

  /* Full-width section wrappers that frame inner content */
  .wp-section__inner,
  .wp-section > .elementor-container {
    padding-left: var(--wp-section-pad-x);
    padding-right: var(--wp-section-pad-x);
  }

  /* ------------------------------------------------------------------------
     3. HEADLINE SCALE NORMALIZATION (mobile)
     H2 ~26–28px, H3 ~20–22px, line-height ~1.3. Body stays per tokens.css
     (Inter). Steel-blue is never applied to text here — headings stay navy/white
     per the existing type system.
     ------------------------------------------------------------------------ */
  .wp-section h2,
  .wp-section .elementor-heading-title h2,
  .wp-section h2.elementor-heading-title,
  .wp-section h1 {
    font-size: 27px;          /* midpoint of 26–28px */
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .wp-section h3,
  .wp-section .elementor-heading-title h3,
  .wp-section h3.elementor-heading-title {
    font-size: 21px;          /* midpoint of 20–22px */
    line-height: 1.3;
  }

  /* Headline → body separation: consistent 20px before first paragraph */
  .wp-section h2 + p,
  .wp-section h2 + .wp-body,
  .wp-section h2 + .elementor-widget-text-editor,
  .wp-section h3 + p,
  .wp-section h3 + .wp-body {
    margin-top: var(--wp-headline-to-body);
  }

  /* Body copy rhythm (does not resize; only vertical cadence) */
  .wp-section p + p,
  .wp-section .wp-body + .wp-body {
    margin-top: 12px; /* half of headline-to-body, keeps paragraphs tighter */
  }

  /* Hero H1 follows the plan's larger 30–34px clamp, not the H2 scale;
     bound it to the same rhythm so it never exceeds the plan range. */
  .wp-hero h1,
  .wp-section.wp-hero .elementor-heading-title {
    font-size: clamp(30px, 8vw, 34px);
    line-height: 1.15;
  }

  /* ------------------------------------------------------------------------
     4. CARD VERTICAL RHYTHM
     All card grids (services grid, planning/swiper slides, insights) share
     one gutter token so card whitespace reads as a system.
     ------------------------------------------------------------------------ */
  .wp-grid,
  .wp-cards,
  .wp-service-grid,
  .wp-insights-grid {
    gap: var(--wp-card-gap);
  }

  /* Stacked (single-column) cards keep the same vertical gutter */
  .wp-grid > *,
  .wp-cards > *,
  .wp-service-card + .wp-service-card,
  .wp-insight-card + .wp-insight-card {
    margin-top: var(--wp-card-gap);
  }

  /* Inner card breathing room: half the card gap */
  .wp-card,
  .wp-service-card,
  .wp-insight-card,
  .wp-planning-card {
    padding: calc(var(--wp-card-gap) + 4px); /* 20px interior */
    padding-left: var(--wp-section-pad-x);    /* align text to section edge */
    padding-right: var(--wp-section-pad-x);
  }

  /* Fallback gutter for plain Elementor multi-column card columns */
  .elementor-section.wp-section .elementor-column-gap-default {
    column-gap: var(--wp-card-gap);
  }

  /* ------------------------------------------------------------------------
     5. ACCORDION + CTA rhythm (P12 consistency with P2/P11 tokens)
     Accordion items and CTA bands reuse the same tokens — never new values.
     ------------------------------------------------------------------------ */
  .wp-accordion .elementor-toggle-item + .elementor-toggle-item,
  .wp-accordion .wp-toggle-item + .wp-toggle-item {
    margin-top: calc(var(--wp-card-gap) - 4px); /* 12px stacked list rhythm */
  }

  .wp-cta-band {
    padding-top: var(--wp-section-pad-y);
    padding-bottom: var(--wp-section-pad-y);
  }
  .wp-cta-band .wp-button,
  .wp-cta-band .elementor-button {
    margin-top: var(--wp-body-to-cta); /* CTA uses --ww-accent; spacing token only here */
  }

}
body.wp-has-sticky-cta { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

/* ==================================================================
   CONFLICT NEUTRALIZATION (applied 2026-09-24, verified live)
   The theme's base styles.css ships a GENERIC scroll-snap carousel:
     .wp-carousel { display:flex; gap:18px; overflow-x:auto; ... }
     .wp-carousel > * { flex: 0 0 auto; }
   This homepage overlay reuses the .wp-carousel name for the planning
   swipe carousel. Without these resets, live flexes the track+controls
   side-by-side and the controls render clipped off-viewport (x=394 on
   a 390px phone -> invisible dots/counter) and can widen the document.
   Also restores the .wp-fee-grid mobile collapse (1fr) that the 1fr 1fr
   desktop grid needs at <=700px (the collapse lived in a media block
   that also contained primary-nav chrome and was stripped from the overlay).
   ================================================================== */
.wp-carousel {
  display: block;              /* defeat old theme display:flex */
  margin-top: 0;               /* defeat old theme margin-top:40px */
  padding: 0;                  /* defeat old theme 6px 2px 18px */
  gap: normal;                 /* defeat old theme gap:18px */
}
.wp-carousel > * {
  flex: none;                  /* defeat old theme > * { flex:0 0 auto } */
  scroll-snap-align: none;     /* defeat old theme scroll-snap */
}
@media (max-width: 700px) {
  .wp-fee-grid { grid-template-columns: 1fr; }   /* mobile collapse */
}

/* v1.0.3 — neutralize old-theme .wp-q::after "+" pseudo (theme styles.css fires it on our
   .wp-q summaries ON TOP of our .wp-qchev span — caused duplicate plus in accordions) */
.wp-q::after, .wp-q[open]::after { content: none !important; }

/* ---- full photo restore (v1.0.3) ----
   Questions column, Life photos, Human+Tech photo: real team imagery
   back in as current content (P1/P4/P8/P10 holds remain for swap-in). */
.wp-life-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 28px auto 0;
  max-width: 900px;
}
.wp-life-photo { margin: 0; }
.wp-life-photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--ww-radius-md);
  display: block;
}
.wp-life-photo figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--wp-navy);
}
@media (max-width: 640px) {
  .wp-life-photos { grid-template-columns: repeat(2, 1fr); }
}

/* ---- v1.0.5 audit fixes (2026-09-25, post-audit) ----
   Five Areas rows: full-row stretch links so single-line rows are >=56px tap targets (was 26px). */
.wp-five-list li { padding: 0; }
.wp-five-link { min-height: 56px; }
/* ---- Testimonials: collapse the dead white void between quote card and disclosure
        (~103px attribution->disclaimer; David P12: no 2-3 finger blank voids). ---- */
.wp-testimonial { padding: 20px 20px; }
.wp-carousel__controls { margin-top: 12px; }
.wp-testi-disclaimer { margin-top: 12px; }
/* /** ---- H4/H5 (2026-10-05): planning card Learn More link + planning disclosure ---- */
.wp-planning-card__more {
  display: inline-block;
  margin-top: 14px;
  font-weight: 600;
  color: var(--ww-accent);
  font-size: 15px;
  text-decoration: none;
}
.wp-planning-card__more:hover { color: var(--ww-primary); }
.wp-planning-disclosure {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}

===== components.css ===== */
/* WS-4 component styles integrated by WS-6 (badge wrapper, sticky CTA, mid-page band) */

/* [P7] Flat Fee Planners badge layout wrapper (anchor/img untouched, byte-identical) */
.ffp-badge-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 120px;
  margin: 24px auto 8px;
}
.ffp-badge-wrap img { width: 130px; height: auto; max-width: none; }
.ffp-badge-sr {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
@media (min-width: 768px) {
  .ffp-badge-wrap img { width: 150px; }
  .ffp-badge-wrap { min-height: 140px; }
}

/* [P11] Mid-page CTA band */
.wp-midpage-cta { background: var(--ww-primary); padding: 32px 20px; }
.wp-cta-band__inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.wp-cta-band__text {
  margin: 0; color: #ffffff;
  font-family: var(--ww-font-head);
  font-size: 22px; font-weight: 600; line-height: 1.3;
}
.wp-cta-band__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px; border-radius: var(--ww-radius-pill);
  background: var(--ww-accent); color: var(--ww-white);
  font-family: var(--ww-font-head);
  font-size: 17px; font-weight: 600; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wp-cta-band__btn:active { background: var(--ww-primary); }
@media (min-width: 768px) {
  .wp-midpage-cta { padding: 44px 32px; }
  .wp-cta-band__text { font-size: 26px; }
  .wp-cta-band__inner { flex-direction: row; justify-content: center; gap: 32px; }
}

/* [P11] Mobile-only sticky bottom CTA bar */
.wp-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  background: var(--ww-primary);
  padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  transform: translateY(110%);
  transition: transform 0.25s ease-out;
}
.wp-sticky-cta.is-visible { transform: translateY(0); }
.wp-sticky-cta[hidden] { display: none; }
.wp-sticky-cta__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; border-radius: var(--ww-radius-pill);
  background: var(--ww-accent); color: var(--ww-white);
  font-family: var(--ww-font-head);
  font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wp-sticky-cta__btn:active { background: var(--ww-primary); }
@media (min-width: 768px) {
  .wp-sticky-cta { display: none !important; }
}
/* Body padding-bottom compensation applied by sticky-cta.js */
body.wp-has-sticky-cta { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

/* Planning card interior token rhythm (bridge to WS-2 tokens on light bg) */
.wp-planning-card {
  background: #FFFFFF; border-radius: var(--ww-radius-md);
  padding: var(--wp-section-pad-y, 28px) var(--wp-section-pad-x, 20px);
}

/* ===== home-mobile-spacing.css ===== */
/* ==========================================================================
   Wisepath Wealth — Homepage mobile spacing + type system
   WS-2 artifact for plan item [P12] (homepage-optimization-plan-2026-09-24)
   --------------------------------------------------------------------------
   Scope: MOBILE ONLY. Every rule is inside `@media (max-width: 767px)`.
   Desktop is never touched by this stylesheet.
   Depends on brand tokens defined in assets/css/tokens.css:
     --wp-primary #1F1B54 | --ww-accent #4C9FD6
     (steel-blue = structure/CTAs ONLY, never a "results/proven" signal — RIA rule)
     --wp-text #fff | --wp-muted #9CA3AF | body font: Inter
   Application to Elementor post-17 sections happens later via the
   Integrator pass (WS-6); this file provides the token + class system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — mobile spacing system (client guideposts midpoints)
     --wp-section-gap     : 56px (guidepost 48–64px)
     --wp-headline-to-body: 20px (guidepost 16–24px)
     --wp-card-gap        : 16px (guidepost 12–16px)
     --wp-section-pad-x   : 20px (side padding at ≤767px)
   Declared on :root INSIDE the media query so they are genuinely
   mobile-scoped and never leak into desktop custom-property cascades.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  :root {
    --wp-section-gap: 56px;      /* vertical space between homepage sections */
    --wp-headline-to-body: 20px; /* H2/H3 → first body paragraph */
    --wp-card-gap: 16px;         /* card-to-card / grid gutter */
    --wp-section-pad-x: 20px;   /* horizontal section padding */

    /* Composite helpers derived from the tokens (do not fork new values) */
    --wp-section-pad-y: calc(var(--wp-section-gap) / 2); /* 28px inner top/bottom */
    --wp-body-to-cta: var(--wp-headline-to-body);        /* headline rhythm reused */
  }

  /* ------------------------------------------------------------------------
     2. SECTION RHYTHM (homepage-wide)
     Every homepage band is a `.wp-…` section or an Elementor section carrying
     the `wp-section` Utility class. Uniform vertical cadence; horizontal
     padding via the side-padding token.
     ------------------------------------------------------------------------ */
  .wp-section,
  .elementor-section.wp-section {
    padding-top: var(--wp-section-pad-y);
    padding-bottom: var(--wp-section-pad-y);
    padding-left: var(--wp-section-pad-x);
    padding-right: var(--wp-section-pad-x);
  }

  /* Gap BETWEEN adjacent sections (top of section blocks after the hero) */
  .wp-section + .wp-section,
  .elementor-section.wp-section + .elementor-section.wp-section {
    margin-top: calc(var(--wp-section-gap) - 2 * var(--wp-section-pad-y));
  }

  /* First section flush to the header; last section flush to the footer */
  .wp-section:first-of-type {
    margin-top: 0;
  }
  .wp-section:last-of-type {
    margin-bottom: 0;
  }

  /* Full-width section wrappers that frame inner content */
  .wp-section__inner,
  .wp-section > .elementor-container {
    padding-left: var(--wp-section-pad-x);
    padding-right: var(--wp-section-pad-x);
  }

  /* ------------------------------------------------------------------------
     3. HEADLINE SCALE NORMALIZATION (mobile)
     H2 ~26–28px, H3 ~20–22px, line-height ~1.3. Body stays per tokens.css
     (Inter). Gold is never applied to text here — headings stay navy/white
     per the existing type system.
     ------------------------------------------------------------------------ */
  .wp-section h2,
  .wp-section .elementor-heading-title h2,
  .wp-section h2.elementor-heading-title,
  .wp-section h1 {
    font-size: 27px;          /* midpoint of 26–28px */
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .wp-section h3,
  .wp-section .elementor-heading-title h3,
  .wp-section h3.elementor-heading-title {
    font-size: 21px;          /* midpoint of 20–22px */
    line-height: 1.3;
  }

  /* Headline → body separation: consistent 20px before first paragraph */
  .wp-section h2 + p,
  .wp-section h2 + .wp-body,
  .wp-section h2 + .elementor-widget-text-editor,
  .wp-section h3 + p,
  .wp-section h3 + .wp-body {
    margin-top: var(--wp-headline-to-body);
  }

  /* Body copy rhythm (does not resize; only vertical cadence) */
  .wp-section p + p,
  .wp-section .wp-body + .wp-body {
    margin-top: 12px; /* half of headline-to-body, keeps paragraphs tighter */
  }

  /* Hero H1 follows the plan's larger 30–34px clamp, not the H2 scale;
     bound it to the same rhythm so it never exceeds the plan range. */
  .wp-hero h1,
  .wp-section.wp-hero .elementor-heading-title {
    font-size: clamp(30px, 8vw, 34px);
    line-height: 1.15;
  }

  /* ------------------------------------------------------------------------
     4. CARD VERTICAL RHYTHM
     All card grids (services grid, planning/swiper slides, insights) share
     one gutter token so card whitespace reads as a system.
     ------------------------------------------------------------------------ */
  .wp-grid,
  .wp-cards,
  .wp-service-grid,
  .wp-insights-grid {
    gap: var(--wp-card-gap);
  }

  /* Stacked (single-column) cards keep the same vertical gutter */
  .wp-grid > *,
  .wp-cards > *,
  .wp-service-card + .wp-service-card,
  .wp-insight-card + .wp-insight-card {
    margin-top: var(--wp-card-gap);
  }

  /* Inner card breathing room: half the card gap */
  .wp-card,
  .wp-service-card,
  .wp-insight-card,
  .wp-planning-card {
    padding: calc(var(--wp-card-gap) + 4px); /* 20px interior */
    padding-left: var(--wp-section-pad-x);    /* align text to section edge */
    padding-right: var(--wp-section-pad-x);
  }

  /* Fallback gutter for plain Elementor multi-column card columns */
  .elementor-section.wp-section .elementor-column-gap-default {
    column-gap: var(--wp-card-gap);
  }

  /* ------------------------------------------------------------------------
     5. ACCORDION + CTA rhythm (P12 consistency with P2/P11 tokens)
     Accordion items and CTA bands reuse the same tokens — never new values.
     ------------------------------------------------------------------------ */
  .wp-accordion .elementor-toggle-item + .elementor-toggle-item,
  .wp-accordion .wp-toggle-item + .wp-toggle-item {
    margin-top: calc(var(--wp-card-gap) - 4px); /* 12px stacked list rhythm */
  }

  .wp-cta-band {
    padding-top: var(--wp-section-pad-y);
    padding-bottom: var(--wp-section-pad-y);
  }
  .wp-cta-band .wp-button,
  .wp-cta-band .elementor-button {
    margin-top: var(--wp-body-to-cta); /* CTA uses --ww-accent; spacing token only here */
  }



  /* ------------------------------------------------------------------------
     H1 (2026-10-05): hero simplified - tighter mobile padding, no empty band
     below the Schedule CTA (removed third hero line; bottom gap 120px -> 56px).
     ------------------------------------------------------------------------ */
  .wp-hero {
    padding: 170px 0 56px;
  }
  .wp-hero-cta {
    margin-top: 16px;
  }

  /* ------------------------------------------------------------------------
     H6 (2026-10-05): planning photo-band - tighten navy space around the
     carousel on mobile (into 'See Your Choices Side by Side' and beneath the
     disclosure) while preserving section separation.
     ------------------------------------------------------------------------ */
  .wp-photo-band {
    padding: 44px 0 52px;
  }
  .wp-carousel-wrap {
    margin-top: 20px;
  }


  /* ------------------------------------------------------------------------
     H10 (2026-10-05): compact sticky mobile CTA - reduce bar/button height so
     it covers less content; body compensation matches the 44px bar.
     ------------------------------------------------------------------------ */
  .wp-sticky-cta {
    padding: 4px 16px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .wp-sticky-cta__btn {
    min-height: 36px;
    font-size: 14px;
  }
  body.wp-has-sticky-cta {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }

} /* end @media (max-width: 767px) — nothing outside this block affects desktop */



/* ============================================================
   SITEWIDE CHROME POLISH (2026-09-30)
   Post-visual-QA round. CSS-only, no markup changes.
   - Footer social icons: 34px -> 44px circular tap targets (WCAG 2.5.5)
   - Mobile footer stack: tighten 1-col rhythm, less dead void
   - Drawer scrim: 45% -> 60% so the page reads clearly dimmed behind
     the open mobile menu
------------------------------------------------------------- */
.wp-footer-social a { width: 44px; height: 44px; }
.wp-footer-social svg { width: 18px; height: auto; }
@media (max-width: 700px) {
  .wp-footer { padding-top: 48px; }
  .wp-footer .wp-grid-4 { gap: 22px; }
}
@media (max-width: 1000px) {
  .wp-header.wp-nav-open::after { background: rgba(15, 18, 40, 0.6); }
}

/* ---- visual tweaks 2026-10-01: navy-context eyebrow + hover lifts ---- */
.wp-photo-band .wp-eyebrow, .wp-final-cta .wp-eyebrow, .wp-midpage-cta .wp-eyebrow, .wp-scheduler .wp-eyebrow { color: var(--ww-accent); }
.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-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); }

/* >>> CONTAINER-STANDARD BEGIN (2026-10-07) <<< */
/* ==========================================================================
   Wisepath Wealth — inner-page container standard   (2026-10-07)
   --------------------------------------------------------------------------
   Problem: every inner page is a single boxed Elementor section. Elementor
   caps its .elementor-container (1140px desktop / 767px + 20px padding on
   mobile) and .elementor-widget-wrap adds 10px, so the .wp-section bands
   INSIDE the widget are inset and never reach the viewport edge. Measured
   gutters on staging: 30px at <=767, 10px at 768-1024, 80px at >=1160.
   The homepage is built as 10 separate top-level sections, so its bands ARE
   the sections and paint full-bleed — which is why it looked fine.

   Fix: let the single section's container span the viewport so the bands
   inside reach the edges. Text is unaffected — .wp-container keeps its own
   max-width (1200px) and padding (3vw), giving the same content column as
   the homepage.

   Scoped by body.page-id-* so the homepage (post 17, 10 sections) cannot be
   touched by these rules. Same pattern as the homepage override in
   homepage-v2/assets/css/styles.css:327-337.
   ========================================================================== */
body.page-id-7 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-7 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-7 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-9 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-9 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-9 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-15 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-15 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-15 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-248 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-248 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-248 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-13 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-13 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-13 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-95 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-95 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-95 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-247 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-247 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-247 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-246 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-246 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-246 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-245 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-245 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-245 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-19 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-19 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-19 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-11 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-11 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-11 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
body.page-id-249 .elementor > .elementor-section > .elementor-container {
  max-width: 100% !important;
  width: 100%;
  flex: 1 0 auto;
}
body.page-id-249 .elementor > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 767px) {
  body.page-id-249 .elementor > .elementor-section > .elementor-container {
    padding-left: 0;
    padding-right: 0;
  }
}
/* >>> CONTAINER-STANDARD END <<< */

/* >>> ARTICLES: single post featured image START <<< */
/* The child theme overrides hello-elementor's singular template to output the post's
   featured image as .wp-single-media. hello-elementor's theme.css already styles
   .post .wp-post-image as full-width / object-fit:cover / max-height:500px, so this only
   adds the vertical rhythm and the same 8px radius the article cards use. */
.wp-single-media {
  margin: 40px 0 0;
  border-radius: var(--ww-radius-md);
  overflow: hidden;
}
.wp-single-media .wp-post-image {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
}
@media (min-width: 992px) {
  /* Slightly shorter than hello-elementor's 500px default so the headline stays in the
     first viewport on a laptop. Scoped to desktop so the parent's 400px / 300px
     responsive caps still apply on tablet and mobile.
     NOTE: hello-elementor's theme.css is enqueued AFTER design-system.css, so an
     equal-specificity rule loses to its `.post .wp-post-image` - hence the extra
     qualifying class here rather than a plain two-class selector. */
  body.single-post .wp-single-media .wp-post-image {
    max-height: 440px;
  }
}
@media (max-width: 575px) {
  .wp-single-media {
    margin-top: 16px;
    border-radius: var(--ww-radius-sm);
  }
}
/* >>> ARTICLES: single post featured image END <<< */