:root {
      /* Brand palette ("Warm Hearth"), Bootstrap-style names */
      --sp-primary: #b95c3f;            /* Terracotta: buttons, progress bar */
      --sp-primary-rgb: 185, 92, 63;
      --sp-primary-emphasis: #9f4b31;   /* Dark Terracotta: button hover */
      --sp-primary-subtle: #f6dccb;     /* Pale Clay: step numbers, logo bubble */
      --sp-secondary: #5f7f5a;          /* Sage: icons, accents */
      --sp-secondary-subtle: #e8efe2;   /* Pale Sage: chips, icon tiles, eyebrows */
      --sp-accent: #e9b872;             /* Honey: highlighter, footer dot */
      --sp-accent-rgb: 233, 184, 114;
      --sp-dark: #2f3a2c;               /* Deep Moss: text, form band, footer */
      --sp-dark-rgb: 47, 58, 44;
      --sp-muted: #5d6656;              /* Moss Grey: small print, secondary text */
      --sp-light: #f8ecdf;              /* Warm Oat: alternate section bands */
      --sp-body-bg: #f7d8b5;            /* Cream: page background */
      --sp-body-bg-rgb: 252, 248, 242;
      --sp-tertiary-bg: #f6e8d8;        /* Sand: hero gradient */
      --sp-white: #ffffff;
      --sp-whatsapp: #25d366;           /* WhatsApp green */

      /* Bootstrap overrides, so utilities like .text-primary and .bg-light match */
      --bs-primary: var(--sp-primary);
      --bs-primary-rgb: var(--sp-primary-rgb);
      --bs-secondary: var(--sp-secondary);
      --bs-dark: var(--sp-dark);
      --bs-dark-rgb: var(--sp-dark-rgb);
      --bs-light: var(--sp-light);
      --bs-body-font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --bs-body-color: var(--sp-dark);
      --bs-body-bg: var(--sp-body-bg);
      --bs-secondary-color: var(--sp-muted);
      --bs-link-color-rgb: var(--sp-primary-rgb);

      /* Old names, kept so existing markup (e.g. inline styles in content.php) still works */
      --sp-ink: var(--sp-dark);
      --sp-ink-soft: var(--sp-muted);
      --sp-mint: var(--sp-primary-subtle);
      --sp-mint-mid: var(--sp-primary);
      --sp-mint-dark: var(--sp-primary-emphasis);
      --sp-mint-light: var(--sp-light);
      --sp-lilac: var(--sp-accent);
      --sp-lilac-deep: var(--sp-secondary);
      --sp-lilac-light: var(--sp-secondary-subtle);
      --sp-cream: var(--sp-body-bg);
      --sp-sand: var(--sp-tertiary-bg);
    }

    body { font-size: 1.05rem; line-height: 1.6; padding-bottom: 84px; }
    @media (min-width: 992px) { body { padding-bottom: 0; } }

    h1, h2, h3, .serif { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.01em; }
    .hl { background: linear-gradient(180deg, transparent 58%, var(--sp-accent) 58%); padding: 0 .1em; }
    h1 { font-size: clamp(2.1rem, 8vw, 3.4rem); line-height: 1.08; }
    h2 { font-size: clamp(1.7rem, 6vw, 2.5rem); line-height: 1.15; }
    h3 { font-size: 1.2rem; }

    .eyebrow {
      display: inline-block; font-weight: 800; font-size: .8rem; letter-spacing: .12em;
      text-transform: uppercase; color: var(--sp-muted);
      background: var(--sp-secondary-subtle); border-radius: 999px; padding: .35rem .85rem;
    }

    /* Header */
    .site-header { background: var(--sp-body-bg); border-bottom: 1px solid rgba(var(--sp-dark-rgb), .08); }


  /* Code-only logo */
/* Code-only logo */
.logo { display: inline-flex; align-items: center; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; color: var(--sp-dark); }
.logo-to { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em; margin: 0 .12em; }
.logo-to .bi { position: absolute; inset: 0; font-size: 1.45em; line-height: 1; color: var(--sp-primary); }
.logo-to .bi::before { display: block; }
.logo-to span { position: relative; font-size: .7em; color: #fff; transform: translateY(-.1em); }
@media (min-width: 768px) { .logo { font-size: 1.85rem; } }
footer .logo { font-size: 1.85rem; color: #fff; }



@media (min-width: 768px) { .logo { font-size: 1.85rem; } }
footer .logo { font-size: 1.85rem; color: #fff; }

    /* Buttons */
    .btn-sp {
      background: var(--sp-primary); color: var(--sp-white); font-weight: 800; border: 0;
      border-radius: 999px; padding: .95rem 1.6rem; font-size: 1.08rem;
      box-shadow: 0 6px 18px rgba(var(--sp-primary-rgb), .35);
    }
    .btn-sp:hover, .btn-sp:focus { background: var(--sp-primary-emphasis); color: var(--sp-white); }


       .btn-whatsapp {
      background: #189d4b; color: #fff; font-weight: 700;
      border: 2px solid #189d4b; border-radius: 999px; padding: .85rem 1.4rem;
      box-shadow: 0 6px 18px rgba(24,157,75,.3);
    }
    .btn-whatsapp i { color: #fff; }
    .btn-whatsapp:hover, .btn-whatsapp:focus { background: #13803d; border-color: #13803d; color: #fff; }



    /* Hero */
    .hero { background: linear-gradient(180deg, var(--sp-body-bg) 0%, var(--sp-tertiary-bg) 100%); overflow: hidden; }
    .persona-photo {
      position: relative; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; margin: 0 auto;
      border-radius: 50%; background: var(--sp-accent);
      display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
    }
    .persona-photo img { width: 100%; height: 100%; object-fit: cover; }
    .speech {
      position: absolute; background: #fff; border-radius: 18px 18px 18px 4px;
      padding: .6rem .9rem; font-weight: 700; font-size: .92rem;
      box-shadow: 0 8px 24px rgba(var(--sp-dark-rgb), .12);
    }
    .speech-1 { top: 8%; left: -4%; }
    .speech-2 { bottom: -3%; right: -4%; border-radius: 18px 18px 4px 18px; }
    @media (max-width: 400px) { .speech-1 { left: 0; } .speech-2 { right: 0; } }

    .trust-pills span {
      display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem;
      background: #fff; border-radius: 999px; padding: .4rem .8rem; margin: .2rem .15rem;
    }
    .trust-pills i { color: var(--sp-secondary); }

    .small-print { font-size: .9rem; color: var(--sp-muted); }

    /* Sections */
    section { padding: 3.5rem 0; }
    @media (min-width: 992px) { section { padding: 5rem 0; } }
    .bg-white-soft { background: #fff; }
    .bg-sage { background: var(--sp-light); }
    .bg-ink { background: var(--sp-dark); color: #fff; }

    .help-card {
      background: #fff; border-radius: 20px; padding: 1.4rem; height: 100%;
      border: 1px solid rgba(var(--sp-dark-rgb), .06);
    }
    .help-icon {
      width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center;
      justify-content: center; background: var(--sp-secondary-subtle); color: var(--sp-secondary); font-size: 1.4rem; margin-bottom: .9rem;
    }

    .step { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px dashed rgba(var(--sp-dark-rgb), .18); }
    .step:last-child { border-bottom: 0; }
    .step-num {
      flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--sp-primary-subtle); color: var(--sp-dark);
      font-family: 'Fraunces', serif; font-weight: 700; display: flex; align-items: center; justify-content: center;
    }

    .why-item { display: flex; gap: .9rem; margin-bottom: 1.3rem; }
    .why-item i { font-size: 1.5rem; color: var(--sp-secondary); flex: 0 0 auto; line-height: 1.2; }

    .review {
      background: #fff; border-radius: 20px; padding: 1.4rem; height: 100%;
      box-shadow: 0 6px 20px rgba(var(--sp-dark-rgb), .06);
    }
    .review .stars { color: #f2b84b; }
    .review blockquote { font-size: 1.02rem; margin: .7rem 0; }
    .review cite { font-style: normal; font-weight: 700; color: var(--sp-muted); font-size: .92rem; }

    /* Quick form */
    .form-card { background: #fff; border-radius: 24px; padding: 1.5rem; box-shadow: 0 12px 36px rgba(var(--sp-dark-rgb), .12); color: var(--sp-dark); }
    .progress { height: 8px; border-radius: 999px; background: var(--sp-light); }
    .progress-bar { background: var(--sp-primary); }
    .choice {
      display: block; width: 100%; text-align: left; background: var(--sp-body-bg); color: var(--sp-dark);
      border: 2px solid transparent; border-radius: 14px; padding: .9rem 1rem; font-weight: 700; margin-bottom: .6rem;
    }
    .choice:hover, .choice.active { border-color: var(--sp-secondary); background: var(--sp-secondary-subtle); }
    .form-step { display: none; }
    .form-step.active { display: block; }
    .form-control { border-radius: 12px; padding: .8rem 1rem; border-color: rgba(var(--sp-dark-rgb), .2); }
    .form-control:focus { border-color: var(--sp-primary-emphasis); box-shadow: 0 0 0 .2rem rgba(var(--sp-primary-rgb), .3); }

    /* FAQ */
    .accordion-item { border: 0; border-radius: 16px !important; margin-bottom: .7rem; overflow: hidden; }
    .accordion-button { font-weight: 800; color: var(--sp-dark); padding: 1.1rem 1.2rem; }
    .accordion-button:not(.collapsed) { background: var(--sp-accent); color: var(--sp-dark); box-shadow: none; }
    .accordion { --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); }
    .accordion-button:focus { box-shadow: none; }
    .accordion-button:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--sp-primary-rgb), .5); }
    /* IVA bands */
    .media-frame {
      width: 220px; max-width: 70%; aspect-ratio: 1/1; margin: 0 auto; border-radius: 50%;
      background: var(--sp-secondary-subtle); display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    .media-frame video { width: 80%; height: auto; }
    .placeholder-note { font-size: .78rem; color: var(--sp-muted); font-style: italic; text-align: center; margin-top: .6rem; }
    .iva-card {
      background: var(--sp-body-bg); border: 1px solid rgba(var(--sp-dark-rgb), .08); border-radius: 20px; padding: 1.4rem; height: 100%;
    }
    .iva-card h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.12rem; margin-bottom: .6rem; }
    .circle-number {
      flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--sp-primary-subtle); color: var(--sp-dark);
      font-family: 'Fraunces', serif; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
    }
    .callout-gradient {
      background: linear-gradient(135deg, var(--sp-dark) 0%, var(--sp-secondary) 100%); color: #fff; border-radius: 20px; padding: 1.3rem 1.4rem;
    }
    .iva-box { background: #fff; border-radius: 22px; box-shadow: 0 12px 36px rgba(var(--sp-dark-rgb), .12); overflow: hidden; }
    .iva-tabs { border: 0; background: var(--sp-light); padding: .4rem; gap: .4rem; flex-wrap: nowrap; }
    .iva-tabs .nav-item { flex: 1; }
    .iva-tabs .nav-link {
      width: 100%; border: 0 !important; border-radius: 14px !important; font-weight: 800; color: var(--sp-muted); padding: .8rem .5rem;
    }
    .iva-tabs .nav-link.active { background: #fff; color: var(--sp-dark); box-shadow: 0 3px 10px rgba(var(--sp-dark-rgb), .1); }
    .iva-table { margin: 0; --bs-table-striped-bg: var(--sp-light); }
    .iva-table td, .iva-table th { padding: .85rem 1.1rem; border-color: rgba(var(--sp-dark-rgb), .06); }
    .iva-table.table-striped > tbody > tr.row-head > * { --bs-table-bg-type: var(--sp-secondary-subtle); --bs-table-color-type: var(--sp-dark); }
    .iva-table.table-striped > tbody > tr.row-total > * { --bs-table-bg-type: var(--sp-dark); --bs-table-color-type: #fff; color: #fff; border: 0; }
    .iva-table.table-striped > tbody > tr.row-highlight > * { --bs-table-bg-type: var(--sp-primary-subtle); --bs-table-color-type: var(--sp-dark); font-weight: 700; }
    .tick-list li { background: var(--sp-secondary-subtle); border-radius: 999px; padding: .4rem .9rem .4rem .5rem; font-weight: 700; }
    .tick-list i { color: var(--sp-secondary); font-size: 1.3rem; line-height: 1; }
    .stat {
      background: var(--sp-light); border-radius: 18px; padding: 1rem .6rem; text-align: center; height: 100%;
    }
    .stat-icon {
      width: 44px; height: 44px; border-radius: 14px; margin: 0 auto .5rem; display: flex; align-items: center; justify-content: center;
      background: var(--sp-secondary-subtle); color: var(--sp-secondary); font-size: 1.3rem;
    }
    .stat-new .stat-icon { background: var(--sp-primary-subtle); color: var(--sp-dark); }
    .stat strong { font-family: 'Fraunces', serif; font-size: 1.35rem; display: block; line-height: 1.1; }
    .stat span { font-size: .85rem; color: var(--sp-muted); }
    .journey-photo { border-radius: 24px; overflow: hidden; height: 100%; min-height: 280px; background: var(--sp-secondary-subtle); }
    .journey-photo img { width: 100%; height: 100%; object-fit: cover; }

    /* Wavy band edges: added in PHP (sp_band) wherever a band's colour changes */
    .wave-top { position: relative; }
    .wave-top::before {
      content: ""; position: absolute; left: 0; right: 0; top: -25px; height: 26px; background: inherit; pointer-events: none;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C160 2 320 0 470 16 C620 32 780 38 930 22 C1060 8 1150 6 1200 12 V40 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C160 2 320 0 470 16 C620 32 780 38 930 22 C1060 8 1150 6 1200 12 V40 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }
    @media (min-width: 992px) { .wave-top::before { height: 40px; top: -39px; } }

    /* Components adapt to whichever band they land on */
    .bg-sage .eyebrow { background: #fff; }
    .step-box { background: var(--sp-light); }
    .bg-sage .step-box, .bg-sage .stat, .bg-sage .iva-card, .bg-sage .tick-list li { background: #fff; }
    .bg-white-soft .help-card, .bg-white-soft .review { background: var(--sp-body-bg); border: 1px solid rgba(var(--sp-dark-rgb), .06); }
    .bg-white-soft .accordion-item { background: var(--sp-body-bg); }

    /* Footer */
    footer { background: var(--sp-dark); color: rgba(255,255,255,.82); font-size: .88rem; padding: 3rem 0 2rem; }
    footer a { color: #fff; }
    footer .logo { color: #fff; }
    footer .logo .dot { color: var(--sp-accent); }

    /* Sticky mobile CTA */
        .sticky-cta {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: rgba(var(--sp-body-bg-rgb), .97);
      backdrop-filter: blur(6px); border-top: 1px solid rgba(var(--sp-dark-rgb), .1);
      padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
      display: flex; gap: .6rem; align-items: center;
    }
    .sticky-cta .btn { flex: 1; height: 56px; padding: 0 1rem; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
    .sticky-cta .btn-whatsapp { flex: 0 0 56px; width: 56px; height: 56px; padding: 0; border-radius: 50%; }



    @media (min-width: 992px) { .sticky-cta { display: none; } }

/* WordPress extras */
.admin-bar .site-header.sticky-top { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header.sticky-top { top: 46px; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.sp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: #b42318; font-weight: 700; font-size: .92rem; }
.logo img { max-height: 40px; width: auto; }
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content h1 { margin-bottom: 1.5rem; }
.entry-content a { color: var(--sp-secondary); }

@media (min-width: 576px) { .btn-sp, .btn-whatsapp { white-space: nowrap; } }



/* Lead form validation feedback */
.form-card .form-control.is-valid { border-color: var(--sp-secondary); background-image: none; padding-right: 1rem; box-shadow: 0 0 0 .15rem rgba(95,127,90,.18); }
.form-card .form-control.is-valid,
.form-card .form-control.is-valid:focus {
  border-color: #2e8b57;
  box-shadow: inset 0 0 0 2px #2e8b57;  /* looks like a thick border without moving anything */
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232e8b57'/%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 1.4rem 1.4rem;
}
.form-card .form-control.is-invalid { border-color: #b42318; background-image: none; padding-right: 1rem; }
.form-card .form-control.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(180,35,24,.18); }
/* Messages always take up their space, so the form never jumps under the person's finger */
.form-card .invalid-feedback { display: block; visibility: hidden; min-height: 1.25rem; margin-top: .2rem; font-size: .82rem; line-height: 1.25rem; color: #b42318; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-card .is-invalid ~ .invalid-feedback { visibility: visible; }
.form-card .form-check-input.is-invalid { border-color: #b42318; }
.form-card .form-check-input:checked { background-color: var(--sp-primary); border-color: var(--sp-primary); }
.form-card .form-check-input:focus { border-color: var(--sp-primary); box-shadow: 0 0 0 .2rem rgba(var(--sp-primary-rgb), .25); }

/* "What debts" checkbox tiles */
.check-tile {
  display: flex; align-items: center; gap: .75rem; height: 100%; margin: 0; cursor: pointer;
  background: var(--sp-body-bg); border: 2px solid rgba(var(--sp-dark-rgb), .12); border-radius: 14px;
  padding: .85rem 1rem; font-weight: 600; line-height: 1.3; transition: border-color .15s, background-color .15s;
}
.check-tile:hover { border-color: rgba(var(--sp-primary-rgb), .5); }
.check-tile input {
  appearance: none; -webkit-appearance: none; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; margin: 0;
  border: 2px solid rgba(var(--sp-dark-rgb), .3); border-radius: 6px; background: #fff; cursor: pointer;
}
.check-tile input:checked {
  border-color: var(--sp-primary);
  background: var(--sp-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
}
.check-tile input:focus-visible { outline: 3px solid rgba(var(--sp-primary-rgb), .35); outline-offset: 2px; }
.check-tile.checked { border-color: var(--sp-primary); background: var(--sp-primary-subtle); }

/* Wave at the bottom of the hero, in the colour of the white strip below it */
.hero { position: relative; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--sp-white); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C160 2 320 0 470 16 C620 32 780 38 930 22 C1060 8 1150 6 1200 12 V40 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C160 2 320 0 470 16 C620 32 780 38 930 22 C1060 8 1150 6 1200 12 V40 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
@media (min-width: 992px) { .hero::after { height: 40px; } }


/* "Why people talk to Debbie": cards with large icon tiles */
.why-item {
  display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1rem;
  background: var(--sp-body-bg); border: 1px solid rgba(var(--sp-dark-rgb), .06); border-radius: 20px;
  padding: 1.15rem 1.25rem; transition: transform .2s ease, box-shadow .2s ease;
}
.bg-sage .why-item { background: #fff; }
.why-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(var(--sp-dark-rgb), .08); }
.why-item > i {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  font-size: 1.9rem; color: var(--sp-primary); background: var(--sp-tertiary-bg);
}
.why-item:nth-child(3n+2) > i { color: var(--sp-secondary); }
.why-item:nth-child(3n+3) > i { color: #9a6a1f; }
.why-item h3 { font-size: 1.15rem; margin-bottom: .2rem !important; }
.why-item p { color: var(--sp-muted); line-height: 1.5; }
@media (min-width: 768px) { .why-item { margin-bottom: 1.25rem; } }


/* Header phone button: number on desktop, icon on mobile */
.header-call { padding: .6rem 1.2rem; font-size: 1rem; }
.header-call i { font-size: .95rem; }
.header-call-icon {
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}

/* Mobile call panel (Bootstrap offcanvas, slides down from the top) */
.call-panel.offcanvas-top {
  height: auto; bottom: auto; max-height: 90vh; border: 0; border-radius: 0 0 24px 24px;
  background: var(--sp-white); color: var(--sp-dark);
}
.call-panel .offcanvas-body { position: relative; padding: calc(2rem + env(safe-area-inset-top)) 1.5rem 1.25rem; text-align: center; }
.call-panel-close { position: absolute; top: calc(1rem + env(safe-area-inset-top)); right: 1rem; }

.call-panel-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sp-primary-subtle); color: var(--sp-primary); font-size: 1.6rem;
}
.call-panel p { color: var(--sp-muted); }
.call-panel-call { padding: 1rem 1.2rem; font-size: 1.15rem; }
.call-panel-later { color: var(--sp-muted); text-decoration: none; font-weight: 600; }

.hero .eyebrow { background: var(--sp-light); }


/* Right sidebar page template */
.page-hero { background: var(--sp-light); padding: 2.25rem 0 2rem; }
.page-breadcrumb { font-size: .85rem; margin-bottom: .75rem; }
.page-breadcrumb a { color: var(--sp-primary); text-decoration: none; }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-hero h1 { font-size: clamp(2rem, 7vw, 3rem); margin-bottom: .5rem; }
.page-lead { font-size: 1.1rem; color: var(--sp-muted); max-width: 46rem; margin: 0; }
.page-body { background: #fff; padding: 2.5rem 0 3.5rem; }
.page-content { line-height: 1.75; }
.page-content h2 { font-size: 1.5rem; margin: 2.5rem 0 .75rem; scroll-margin-top: 100px; }
.page-content > h2:first-child, .page-content > p:first-child { margin-top: 0; }
.page-content h3 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; scroll-margin-top: 100px; }
.page-content a { color: var(--sp-primary); }
.page-content ul, .page-content ol { padding-left: 1.4rem; }
.page-content li { margin-bottom: .35rem; }
.page-content img { max-width: 100%; height: auto; border-radius: 12px; }
.page-content .wp-block-table { overflow-x: auto; margin: 1.5rem 0; }
.page-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; line-height: 1.5; }
.page-content .wp-block-table table { margin: 0; }
.page-content th, .page-content td { border: 1px solid rgba(var(--sp-dark-rgb), .14); padding: .7rem .85rem; text-align: left; vertical-align: top; }
.page-content th, .page-content thead td { background: var(--sp-light); font-weight: 700; }
.page-updated { margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(var(--sp-dark-rgb), .12); font-size: .9rem; color: var(--sp-muted); }
.page-toc, .sidebar-widget { background: var(--sp-light); border-radius: 18px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.page-toc-title, .sidebar-widget-title { font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-muted); margin-bottom: .75rem; }
.page-toc ol { margin: 0; padding-left: 1.4rem; }
.page-toc li { margin-bottom: .4rem; }
.page-toc li::marker { color: var(--sp-primary); font-weight: 700; }
.page-toc a { color: var(--sp-dark); font-weight: 600; text-decoration: none; }
.page-toc a:hover { color: var(--sp-primary); text-decoration: underline; }
.page-toc.d-lg-none { margin-bottom: 2rem; }
.sidebar-widget ul { list-style: none; padding: 0; margin: 0; }
.sidebar-widget li { margin-bottom: .4rem; }
.sidebar-widget a { color: var(--sp-dark); font-weight: 600; }
.sidebar-widget p:last-child { margin-bottom: 0; }
@media (min-width: 992px) { .page-sidebar { position: sticky; top: 100px; } }



.pp-intro p { font-size: 1.1rem; }
.pp-glance { background: var(--sp-light); border-radius: 20px; padding: 1.5rem; margin: 1.75rem 0 2.5rem; }
.pp-glance-title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--sp-muted); margin-bottom: 1rem; }
.pp-glance-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .pp-glance-grid { grid-template-columns: 1fr 1fr; } }
.pp-glance-item { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border-radius: 14px; padding: 1rem; line-height: 1.5; }
.pp-glance-item p { margin: 0; }
.pp-glance-item .bi, .pp-callout > .bi { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-primary); color: #fff; font-size: 1.1rem; }
.pp-facts { list-style: none; padding: 0 !important; border: 1px solid rgba(var(--sp-dark-rgb), .12); border-radius: 14px; overflow: hidden; }
.pp-facts li { display: grid; gap: .15rem; padding: .75rem 1rem; margin: 0 !important; line-height: 1.5; }
.pp-facts li + li { border-top: 1px solid rgba(var(--sp-dark-rgb), .12); }
.pp-facts span { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-muted); }
@media (min-width: 768px) { .pp-facts li { grid-template-columns: 11rem 1fr; gap: 1rem; } }
.pp-callout { display: flex; gap: 1rem; align-items: flex-start; background: var(--sp-light); border-left: 4px solid var(--sp-primary); border-radius: 14px; padding: 1.25rem; margin: 1.5rem 0; }
.pp-callout p:last-child { margin-bottom: 0; }
.pp-rights { display: grid; gap: .75rem; margin: 1.25rem 0 1.5rem; }
@media (min-width: 576px) { .pp-rights { grid-template-columns: 1fr 1fr; } }
.pp-right { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid rgba(var(--sp-dark-rgb), .12); border-radius: 14px; padding: .9rem 1rem; line-height: 1.45; }
.pp-right p { margin: 0; font-size: .95rem; }
.pp-right strong, .pp-step strong, .pp-contact strong { display: block; color: var(--sp-dark); margin-bottom: .15rem; }
.pp-right .bi { color: var(--sp-primary); font-size: 1.25rem; line-height: 1.2; }
.pp-steps { display: grid; gap: .75rem; margin: 1.25rem 0; }
.pp-step { display: flex; gap: 1rem; align-items: flex-start; background: var(--sp-light); border-radius: 14px; padding: 1rem 1.25rem; }
.pp-step p { margin: 0; }
.pp-step-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--sp-dark); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pp-contact { display: grid; gap: .75rem; margin: 1.25rem 0; }
@media (min-width: 768px) { .pp-contact { grid-template-columns: repeat(3, 1fr); } }
.pp-contact > div { background: var(--sp-dark); color: rgba(255,255,255,.85); border-radius: 16px; padding: 1.25rem; line-height: 1.5; }
.pp-contact .bi { font-size: 1.4rem; color: var(--sp-accent); display: block; margin-bottom: .5rem; }
.pp-contact p { margin: 0; font-size: .95rem; }
.pp-contact strong { color: #fff; }
.pp-contact a { color: #fff; word-break: break-word; }
.page-content code { background: var(--sp-light); color: var(--sp-dark); padding: .1em .35em; border-radius: 4px; font-size: .88em; }



/* Solutions page blocks (used inside page content) */
.sol-cards { display: grid; gap: .75rem; margin: 1.75rem 0 2.5rem; }
@media (min-width: 576px) { .sol-cards { grid-template-columns: 1fr 1fr; } }
.page-content .sol-card { display: flex; gap: .85rem; align-items: flex-start; background: var(--sp-light); border-radius: 16px; padding: 1rem 1.1rem; color: var(--sp-muted); text-decoration: none; line-height: 1.45; font-size: .95rem; border: 2px solid transparent; transition: border-color .15s ease, transform .15s ease; }
.page-content .sol-card:hover { border-color: var(--sp-primary); transform: translateY(-2px); }
.sol-card .bi { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-primary); color: #fff; font-size: 1.15rem; }
.sol-card strong { display: block; color: var(--sp-dark); font-size: 1.05rem; margin-bottom: .1rem; }
.sol-accordion { --bs-accordion-border-color: rgba(var(--sp-dark-rgb), .12); --bs-accordion-border-radius: 16px; --bs-accordion-inner-border-radius: 15px; --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--sp-primary-rgb), .25); --bs-accordion-active-bg: var(--sp-light); --bs-accordion-active-color: var(--sp-dark); margin: 1.25rem 0 1rem; }
.page-content .sol-accordion .accordion-header { margin: 0; font-size: 1rem; }
.sol-accordion .accordion-button { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 1rem; color: var(--sp-dark); padding: 1rem 1.25rem; }
.sol-accordion .accordion-button::after { filter: none; }
.sol-accordion .accordion-body { padding: .25rem 1.25rem 1.1rem; background: var(--sp-light); }
.sol-accordion .accordion-body ul { margin-bottom: 0; }
.sol-accordion .accordion-body p:last-child { margin-bottom: 0; }
.sol-small { font-size: .85rem; color: var(--sp-muted); margin-top: 1.5rem; }
.sol-accordion .accordion-button:not(.collapsed) { background: var(--sp-light); color: var(--sp-dark); box-shadow: none; }
.sol-accordion .accordion-item { background: #fff; border: 1px solid rgba(var(--sp-dark-rgb), .12); }


/* Tighter contact step */
.form-card .form-label { margin-bottom: .3rem; }
.form-card .form-control { padding: .65rem .9rem; }
.form-card .invalid-feedback { display: none; min-height: 0; margin-top: .25rem; }
.form-card .is-invalid ~ .invalid-feedback { display: block; }
.form-card .form-step[data-step="4"] .mb-3,
.form-card .form-step[data-step="4"] .mb-2 { margin-bottom: .75rem !important; }
.form-card .form-step[data-step="4"] .row { --bs-gutter-y: 0; }


/* Sticky CTA hides while the form is on screen */
/* Sticky CTA hides while the form is on screen */
.sticky-cta { transition: transform .25s ease, opacity .25s ease; }
.sticky-cta.is-hidden { transform: translateY(110%) !important; opacity: 0 !important; pointer-events: none; }

/* Hero layout: heading first on mobile, photo beside the text on desktop */
.hero-grid { display: grid; gap: 1.25rem; grid-template-areas: "head" "img" "body"; }
.hero-head { grid-area: head; }
.hero-img { grid-area: img; }
.hero-body { grid-area: body; }
.hero-figure { max-width: 250px; }
@media (min-width: 992px) {
  .hero-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "head img" "body img"; column-gap: 3rem; row-gap: 1.25rem; align-items: center; }
  .hero-head { align-self: end; }
  .hero-body { align-self: start; }
  .hero-figure { max-width: 340px; }
}