/*
 * Bold site style
 *
 * Loaded only when Customizer > Site Style is "Bold", after global-modern.css
 * and service-page.css. Every rule is scoped under body.style-bold, so the
 * Classic style never sees this file. Both styles share the same markup and
 * the same theme options; this file only changes how they look.
 *
 * Colour roles come from the active palette:
 *   brand  = primary        action = secondary        ink = modern-dark
 * The on-* colours are the readable text colour for each fill, computed in
 * inc/color-palettes.php.
 *
 * !important appears where the shared stylesheets or block inline styles
 * already use it for the same property.
 *
 * @package Home_Services_LeadGen
 * @since 1.2.0
 */

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }

/* ==========================================================================
   Tokens and base type
   ========================================================================== */

body.style-bold {
    --hsl-brand: var(--wp--preset--color--primary);
    --hsl-on-brand: var(--wp--preset--color--on-primary, #fff);
    --hsl-action: var(--wp--preset--color--secondary);
    --hsl-on-action: var(--wp--preset--color--on-secondary, #fff);
    --hsl-ink: var(--wp--preset--color--modern-dark, #14202B);
    --hsl-on-ink: var(--wp--preset--color--on-dark, #fff);
    --hsl-heading: var(--wp--preset--color--heading, #1F2937);
    --hsl-text: var(--wp--preset--color--body-text, #4B5563);
    --hsl-line: var(--wp--preset--color--modern-gray-200, #E5E7EB);
    --hsl-surface: var(--wp--preset--color--modern-gray-100, #F3F4F6);
    --hsl-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --hsl-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
    --hsl-radius: 4px;

    /* Leads Manager form: selected services and the progress bar match the buttons.
       The plugin forces white text on a selected service, so a palette with light
       buttons (amber) falls back to the brand colour there; see inc/color-palettes.php. */
    --lm-form-primary: var(--wp--preset--color--selection, var(--wp--preset--color--primary));

    font-family: var(--hsl-body);
}

body.style-bold h1,
body.style-bold h2,
body.style-bold h3 {
    font-family: var(--hsl-display);
    letter-spacing: 0;
}

body.style-bold h1,
body.style-bold h2 {
    text-transform: uppercase;
}

body.style-bold .wp-block-button__link,
body.style-bold .wp-element-button {
    border-radius: var(--hsl-radius);
}

body.style-bold :focus-visible {
    outline: 3px solid var(--hsl-action);
    outline-offset: 2px;
}

/* Scroll fade-ins leave content invisible until theme.js runs; show it at once. */
body.style-bold .service-card,
body.style-bold .testimonial-card,
body.style-bold .benefit-item,
body.style-bold .stat-card,
body.style-bold .timeline-item {
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

body.style-bold .modern-header {
    position: sticky;
    top: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.style-bold.admin-bar .modern-header {
    top: 32px;
}

body.style-bold .header-container {
    background: #fff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--hsl-line) !important;
    box-shadow: none;
    min-height: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

body.style-bold .modern-header .wp-block-site-title,
body.style-bold .modern-header .wp-block-site-title a {
    color: var(--hsl-heading) !important;
    font-family: var(--hsl-display);
    font-size: 1.625rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

body.style-bold .modern-header .site-tagline {
    color: var(--hsl-brand) !important;
    opacity: 1;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Logo, menu and buttons stay on one row; a long menu wraps inside its own space. */
body.style-bold .header-container .alignwide {
    max-width: 1600px;
    flex-wrap: nowrap !important;
    gap: 32px;
}

body.style-bold .header-brand {
    flex-shrink: 0;
}

body.style-bold .header-actions {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 28px;
    min-width: 0;
}

body.style-bold .main-navigation {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

body.style-bold .header-cta {
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 10px;
}

body.style-bold .header-quote-btn .wp-block-button__link,
body.style-bold .header-phone-btn .wp-block-button__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 18px !important;
    border: 0;
    border-radius: var(--hsl-radius) !important;
    box-shadow: none;
    font-family: var(--hsl-display);
    font-size: 1.1875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.style-bold .header-quote-btn .wp-block-button__link {
    background: var(--hsl-action) !important;
    color: var(--hsl-on-action) !important;
}

body.style-bold .header-phone-btn .wp-block-button__link {
    background: var(--hsl-ink) !important;
    color: var(--hsl-on-ink) !important;
}

body.style-bold .header-quote-btn .wp-block-button__link:hover,
body.style-bold .header-phone-btn .wp-block-button__link:hover {
    transform: none;
    box-shadow: none;
    filter: brightness(0.93);
}

@media (min-width: 769px) {
    body.style-bold .main-navigation .wp-block-navigation__container,
    body.style-bold .main-navigation .wp-block-navigation__responsive-container .wp-block-navigation__container,
    body.style-bold .main-navigation .wp-block-navigation__responsive-container .wp-block-page-list {
        flex-wrap: wrap !important;
        justify-content: flex-end;
        gap: 0 24px !important;
    }

    body.style-bold .main-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item,
    body.style-bold .main-navigation .wp-block-navigation__responsive-container .wp-block-pages-list__item {
        width: auto !important;
    }

    body.style-bold .main-navigation .wp-block-navigation-item a,
    body.style-bold .main-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item a,
    body.style-bold .main-navigation .wp-block-navigation__responsive-container .wp-block-pages-list__item a {
        color: var(--hsl-heading) !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        padding: 12px 0 !important;
        background: transparent !important;
    }

    body.style-bold .main-navigation .wp-block-navigation-item a:hover,
    body.style-bold .main-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item a:hover,
    body.style-bold .main-navigation .wp-block-navigation__responsive-container .wp-block-pages-list__item a:hover {
        color: var(--hsl-brand) !important;
    }

    body.style-bold .main-navigation .wp-block-navigation-item a::after {
        background: var(--hsl-brand);
        bottom: 4px;
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* The hero fills the first screen, below a header that stays on screen. */
body.style-bold .modern-hero,
body.style-bold .hero-section {
    min-height: max(640px, calc(100vh - var(--hsl-header-offset, 0px) - var(--wp-admin--admin-bar--height, 0px)));
    background-attachment: scroll;
    background-color: var(--hsl-ink) !important;
}

/* The Background Overlay Opacity option alone sets how dark the photo is;
   the shadow keeps the text readable when that option is set low. */
body.style-bold .hero-content,
body.style-bold .hero-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.45);
}

body.style-bold .hero-content .stat-box,
body.style-bold .hero-content .btn-primary {
    text-shadow: none;
}

body.style-bold .hero-container,
body.style-bold .hero-section .container {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 56px;
    padding: 64px 40px;
}

body.style-bold .hero-content,
body.style-bold .hero-text {
    gap: 20px;
    max-width: 760px;
}

/* The front page badge is fixed text; service pages show their Hero Badge option. */
body.style-bold.home .hero-badge {
    display: none;
}

body.style-bold .hero-badge {
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    color: var(--hsl-action) !important;
    font-family: var(--hsl-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

body.style-bold .hero-headline,
body.style-bold .hero-title {
    margin: 0;
    font-family: var(--hsl-display) !important;
    font-size: clamp(2.625rem, 5vw, 4.375rem) !important;
    font-weight: 800 !important;
    line-height: 0.96 !important;
    letter-spacing: 0.005em !important;
    text-transform: uppercase;
    text-wrap: balance;
}

body.style-bold .hero-title-accent {
    display: block;
    color: var(--hsl-action);
}

body.style-bold .hero-subheadline,
body.style-bold .hero-description {
    margin: 0;
    max-width: 34em;
    color: #E6EBF0;
}

body.style-bold .hero-stats {
    gap: 10px;
    margin: 4px 0 0;
}

body.style-bold .stat-box {
    min-width: 0;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--hsl-radius);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: none;
}

body.style-bold .stat-box:hover {
    transform: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.7);
    border-color: var(--hsl-action);
}

body.style-bold .stat-box .stat-label {
    font-family: var(--hsl-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.82);
}

body.style-bold .stat-box .stat-value {
    font-size: 1rem;
    font-weight: 600;
}

body.style-bold .hero-cta {
    margin: 4px 0 0;
    text-align: left;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

body.style-bold .hero-cta-button,
body.style-bold .cta-button,
body.style-bold .btn-primary,
body.style-bold .hero-cta .btn-large {
    min-height: 56px;
    padding: 0 28px;
    border-radius: var(--hsl-radius);
    background: var(--hsl-action) !important;
    color: var(--hsl-on-action) !important;
    box-shadow: none !important;
    font-family: var(--hsl-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.style-bold .hero-cta-button:hover,
body.style-bold .cta-button:hover,
body.style-bold .btn-primary:hover {
    transform: none;
    filter: brightness(0.93);
}

body.style-bold .btn-outline {
    min-height: 56px;
    padding: 0 28px;
    border: 2px solid currentColor;
    border-radius: var(--hsl-radius);
    font-family: var(--hsl-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.style-bold .btn-outline:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: currentColor;
    color: inherit;
}

body.style-bold .btn-icon {
    font-size: 1rem;
}

/* ==========================================================================
   Quote form card
   ========================================================================== */

body.style-bold .hero-form,
body.style-bold .hero-form-card {
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff !important;
    backdrop-filter: none;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
    color: var(--hsl-text);
}

body.style-bold .form-placeholder h3 {
    font-size: 2rem;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--hsl-heading);
}

body.style-bold .contact-phone,
body.style-bold .contact-email {
    color: var(--hsl-brand);
}

/* The Leads Manager form styles itself by form id; :not(#_) lifts these rules above that. */
body.style-bold form.leads-manager-form:not(#_) .lm-form-heading {
    font-family: var(--hsl-display);
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1.02;
    text-transform: uppercase;
    color: var(--hsl-heading);
}

body.style-bold form.leads-manager-form:not(#_) .lm-step-title {
    font-family: var(--hsl-body);
    font-size: 1.1875rem;
    font-weight: 700;
    text-transform: none;
    color: var(--hsl-heading);
}

body.style-bold form.leads-manager-form:not(#_) input[type="text"],
body.style-bold form.leads-manager-form:not(#_) input[type="email"],
body.style-bold form.leads-manager-form:not(#_) input[type="tel"],
body.style-bold form.leads-manager-form:not(#_) input[type="number"],
body.style-bold form.leads-manager-form:not(#_) input[type="date"],
body.style-bold form.leads-manager-form:not(#_) textarea,
body.style-bold form.leads-manager-form:not(#_) select {
    min-height: 50px;
    border-radius: var(--hsl-radius);
    font-family: var(--hsl-body);
    font-size: 1.0625rem;
}

body.style-bold form.leads-manager-form:not(#_) .form-navigation button {
    min-height: 56px;
    border-radius: var(--hsl-radius);
}

body.style-bold form.leads-manager-form:not(#_) .form-navigation button:not(.lm-form-prev) {
    flex-grow: 1;
    width: 100%;
    background: var(--hsl-action);
    border-color: var(--hsl-action);
    color: var(--hsl-on-action);
    font-family: var(--hsl-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.style-bold form.leads-manager-form:not(#_) .form-navigation button:not(.lm-form-prev):hover {
    background: var(--hsl-action);
    border-color: var(--hsl-action);
    transform: none;
    box-shadow: none;
    filter: brightness(0.93);
}

/* ==========================================================================
   Section headers
   ========================================================================== */

body.style-bold .section-header {
    max-width: 46em;
    margin-bottom: 40px;
    text-align: left;
}

/* Front page badges are fixed text; service pages show the badges set per service. */
body.style-bold.home .section-badge {
    display: none;
}

body.style-bold .section-badge {
    margin-bottom: 8px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    color: var(--hsl-brand) !important;
    font-family: var(--hsl-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

body.style-bold .section-title {
    margin-bottom: 10px;
    font-family: var(--hsl-display);
    font-size: clamp(2.125rem, 4vw, 3.125rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--hsl-heading);
}

body.style-bold .section-subtitle,
body.style-bold .section-description {
    max-width: 40em;
    margin: 0;
    font-size: 1.1875rem;
    color: var(--hsl-text);
}

/* ==========================================================================
   Stats strip
   ========================================================================== */

body.style-bold .stats-section {
    padding: 0;
    border-bottom: 1px solid var(--hsl-line);
    background: #fff !important;
    color: var(--hsl-heading);
}

body.style-bold .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
}

body.style-bold .stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    border-left: 1px solid var(--hsl-line);
}

body.style-bold .stat-card:first-child {
    border-left: 0;
}

body.style-bold .stat-number {
    margin: 0;
    font-family: var(--hsl-display);
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--hsl-brand);
}

body.style-bold .stat-card .stat-label {
    font-family: var(--hsl-display);
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    opacity: 1;
    color: var(--hsl-heading);
}

/* ==========================================================================
   Services
   ========================================================================== */

body.style-bold .services-section,
body.style-bold .related-section {
    padding: 88px 0;
    background: var(--hsl-surface);
}

body.style-bold .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 28px;
    margin-top: 0;
}

body.style-bold .service-card {
    border: 1px solid var(--hsl-line);
    border-radius: 6px;
    box-shadow: none;
}

body.style-bold .service-card:hover {
    box-shadow: none;
    border-color: var(--hsl-brand);
}

body.style-bold .service-card:hover .service-image img {
    transform: none;
}

body.style-bold .service-overlay {
    display: none;
}

body.style-bold .service-content,
body.style-bold .service-info {
    padding: 24px;
}

body.style-bold .service-title,
body.style-bold .service-info h3 {
    margin-bottom: 10px;
    font-family: var(--hsl-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--hsl-heading);
}

body.style-bold .service-excerpt,
body.style-bold .service-info p {
    margin: 0;
    color: var(--hsl-text);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

body.style-bold .testimonials-section {
    padding: 88px 0;
    background: var(--hsl-surface) !important;
    color: var(--hsl-text);
}

body.style-bold .services-section + .testimonials-section,
body.style-bold .related-section + .testimonials-section {
    background: #fff !important;
}

body.style-bold .testimonials-section .section-title {
    color: var(--hsl-heading);
}

body.style-bold .testimonials-wrapper,
body.style-bold .testimonials-grid {
    margin-top: 0;
}

body.style-bold .testimonials-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 24px;
}

body.style-bold .testimonial-card {
    padding: 26px;
    border: 1px solid var(--hsl-line);
    border-radius: 6px;
    background: var(--hsl-surface);
    backdrop-filter: none;
}

body.style-bold .testimonial-card:hover {
    background: var(--hsl-surface);
}

body.style-bold .testimonial-rating {
    margin-bottom: 12px;
}

body.style-bold .testimonial-content {
    font-style: normal;
    color: var(--hsl-text);
}

body.style-bold .author-name {
    color: var(--hsl-heading);
}

body.style-bold .testimonials-prev,
body.style-bold .testimonials-next {
    border: 1px solid var(--hsl-line);
    border-radius: var(--hsl-radius);
    background: #fff;
    color: var(--hsl-heading);
}

body.style-bold .testimonials-prev:hover,
body.style-bold .testimonials-next:hover {
    transform: none;
    background: #fff;
    border-color: var(--hsl-brand);
}

body.style-bold .testimonial-dot {
    background: var(--wp--preset--color--modern-gray-300, #CBD5E1);
}

body.style-bold .testimonial-dot.active {
    background: var(--hsl-brand);
}

/* ==========================================================================
   Partner logos
   ========================================================================== */

body.style-bold .partners-section {
    padding: 56px 0;
    border-top: 1px solid var(--hsl-line);
    background: #fff;
}

body.style-bold .partners-section .section-header {
    max-width: none;
    margin-bottom: 28px;
    text-align: center;
}

body.style-bold .partners-section .section-title {
    font-size: 1.75rem;
}

/* ==========================================================================
   Call to action band
   ========================================================================== */

body.style-bold .cta-section,
body.style-bold .final-cta-section {
    padding: 72px 0;
    background: var(--hsl-brand) !important;
}

body.style-bold .cta-section::before {
    display: none;
}

body.style-bold .cta-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 48px;
    align-items: center;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    text-align: left;
}

body.style-bold .cta-card h2 {
    grid-column: 1;
    margin: 0;
    font-family: var(--hsl-display);
    font-size: clamp(2rem, 4vw, 3.125rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--hsl-on-brand);
}

body.style-bold .cta-card p {
    grid-column: 1;
    margin: 8px 0 0;
    font-size: 1.1875rem;
    color: var(--hsl-on-brand);
}

body.style-bold .cta-card .cta-buttons {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
}

body.style-bold .cta-section .btn-outline {
    color: var(--hsl-on-brand);
    border-color: var(--hsl-on-brand);
}

/* ==========================================================================
   Footer
   ========================================================================== */

body.style-bold .modern-footer {
    background: var(--hsl-ink) !important;
}

body.style-bold .footer-main {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.style-bold .footer-main::before {
    display: none;
}

/* One footer: the copyright row shares the footer's background, set off by a hairline. */
body.style-bold .footer-bottom {
    background: none !important;
}

body.style-bold .footer-main .wp-block-site-title,
body.style-bold .footer-main .wp-block-site-title a {
    font-family: var(--hsl-display);
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

body.style-bold .footer-main .wp-block-group.has-background {
    border-radius: 6px !important;
}

body.style-bold .modern-footer .wp-block-button__link {
    border-radius: var(--hsl-radius) !important;
    background: var(--hsl-action) !important;
    color: var(--hsl-on-action) !important;
    font-family: var(--hsl-display);
    font-size: 1.1875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ==========================================================================
   Service pages
   ========================================================================== */

body.style-bold .content-section {
    padding: 72px 0;
}

body.style-bold .content-prose {
    color: var(--hsl-text);
}

body.style-bold .benefits-section {
    padding: 88px 0;
    background: var(--hsl-surface);
}

body.style-bold .benefits-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 24px;
}

body.style-bold .benefit-item {
    padding: 28px 24px;
    border: 1px solid var(--hsl-line);
    border-radius: 6px;
    text-align: left;
}

body.style-bold .benefit-item:hover {
    box-shadow: none;
    border-color: var(--hsl-brand);
}

body.style-bold .benefit-icon {
    margin-bottom: 12px;
    font-size: 2rem;
}

body.style-bold .benefit-item h3 {
    margin-bottom: 8px;
    font-size: 1.625rem;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--hsl-heading);
}

body.style-bold .benefit-item p {
    color: var(--hsl-text);
}

body.style-bold .process-section {
    padding: 88px 0;
    background: var(--hsl-ink) !important;
    color: var(--hsl-on-ink);
}

body.style-bold .process-section::before {
    display: none;
}

body.style-bold .process-section .section-badge {
    color: var(--hsl-action) !important;
}

body.style-bold .process-section .section-title,
body.style-bold .process-section .section-subtitle {
    color: var(--hsl-on-ink);
}

body.style-bold .process-timeline {
    gap: 32px 40px;
    margin-top: 0;
}

body.style-bold .timeline-item {
    padding-top: 20px;
    border-top: 4px solid rgba(255, 255, 255, 0.28);
    text-align: left;
}

body.style-bold .timeline-marker {
    justify-content: flex-start;
    width: auto;
    height: auto;
    margin: 0 0 10px;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

body.style-bold .timeline-number {
    font-family: var(--hsl-display);
    font-size: 3.25rem;
    line-height: 0.9;
    color: var(--hsl-action);
}

body.style-bold .timeline-content h3 {
    margin-bottom: 8px;
    font-family: var(--hsl-body);
    font-size: 1.375rem;
    color: var(--hsl-on-ink);
}

body.style-bold .timeline-content p {
    color: var(--hsl-on-ink);
    opacity: 0.85;
}

/* ==========================================================================
   Phone call / quote bar
   ========================================================================== */

body.style-bold .mobile-sticky-bar a {
    border-radius: var(--hsl-radius);
    font-family: var(--hsl-display);
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body.style-bold .mobile-sticky-call {
    background: var(--hsl-ink);
    color: var(--hsl-on-ink);
}

body.style-bold .mobile-sticky-quote {
    background: var(--hsl-action);
    color: var(--hsl-on-action);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    body.style-bold .hero-container,
    body.style-bold .hero-section .container {
        gap: 40px;
        padding: 48px 32px;
    }

    body.style-bold .header-container {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    body.style-bold .cta-card {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

    body.style-bold .cta-card .cta-buttons {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
    }
}

@media (max-width: 782px) {
    body.style-bold.admin-bar .modern-header {
        top: 46px;
    }
}

@media (max-width: 768px) {
    body.style-bold .header-container {
        padding: 8px 16px !important;
    }

    body.style-bold .modern-header .wp-block-site-title,
    body.style-bold .modern-header .wp-block-site-title a {
        font-size: 1.3125rem !important;
    }

    body.style-bold .main-navigation .wp-block-navigation__responsive-container-open {
        border-color: var(--hsl-line);
        background: transparent !important;
        color: var(--hsl-heading);
    }

    body.style-bold .modern-hero,
    body.style-bold .hero-section {
        min-height: 0;
        padding-top: 0;
    }

    body.style-bold .hero-container,
    body.style-bold .hero-section .container {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 28px 16px 32px;
        justify-items: stretch;
        text-align: left;
    }

    body.style-bold .hero-content,
    body.style-bold .hero-text {
        align-items: flex-start;
        gap: 12px;
        text-align: left;
    }

    body.style-bold .hero-headline,
    body.style-bold .hero-title {
        font-size: clamp(2.25rem, 10vw, 2.875rem) !important;
    }

    body.style-bold .hero-subheadline,
    body.style-bold .hero-description {
        max-width: 100%;
        margin: 0;
        font-size: 1.0625rem;
    }

    body.style-bold .hero-form,
    body.style-bold .hero-form-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.style-bold form.leads-manager-form:not(#_) .lm-form-heading {
        font-size: 1.75rem;
    }

    body.style-bold .services-section,
    body.style-bold .related-section,
    body.style-bold .testimonials-section,
    body.style-bold .benefits-section,
    body.style-bold .process-section {
        padding: 56px 0;
    }

    body.style-bold .content-section,
    body.style-bold .cta-section,
    body.style-bold .final-cta-section {
        padding: 48px 0;
    }

    body.style-bold .section-header {
        margin-bottom: 28px;
    }

    body.style-bold .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.style-bold .stat-card {
        padding: 20px 10px;
        border-top: 1px solid var(--hsl-line);
        border-left: 0;
    }

    body.style-bold .stat-card:nth-child(even) {
        border-left: 1px solid var(--hsl-line);
    }

    body.style-bold .stat-card:nth-child(-n+2) {
        border-top: 0;
    }

    body.style-bold .stat-number {
        font-size: 2.125rem;
    }

    body.style-bold .stat-card .stat-label {
        font-size: 1.125rem;
    }

    body.style-bold .btn-primary,
    body.style-bold .btn-outline {
        width: 100%;
    }

    body.style-bold .cta-card .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================================
   Header Position option
   ========================================================================== */

/* Solid bar (stays on screen): links to the form stop below it. */
body.style-bold.header-solid {
    --hsl-header-offset: 80px;
}

/* Over the hero image: transparent, light text, scrolls away with the page. */
body.style-bold.header-overlay .modern-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

body.style-bold.header-overlay .header-container {
    border-bottom: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 62%, rgba(0, 0, 0, 0) 100%) !important;
    padding-bottom: 28px !important;
}

body.style-bold.header-overlay .modern-header .wp-block-site-title,
body.style-bold.header-overlay .modern-header .wp-block-site-title a {
    color: #fff !important;
}

body.style-bold.header-overlay .modern-header .site-tagline {
    color: rgba(255, 255, 255, 0.88) !important;
}

body.style-bold.header-overlay .header-phone-btn .wp-block-button__link {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

body.style-bold.header-overlay .hero-container,
body.style-bold.header-overlay .hero-section .container {
    padding-top: 140px;
}

@media (min-width: 769px) {
    body.style-bold.header-overlay .main-navigation .wp-block-navigation-item a,
    body.style-bold.header-overlay .main-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item a,
    body.style-bold.header-overlay .main-navigation .wp-block-navigation__responsive-container .wp-block-pages-list__item a {
        color: #fff !important;
    }

    body.style-bold.header-overlay .main-navigation .wp-block-navigation-item a:hover,
    body.style-bold.header-overlay .main-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item a:hover,
    body.style-bold.header-overlay .main-navigation .wp-block-navigation__responsive-container .wp-block-pages-list__item a:hover {
        color: var(--hsl-action) !important;
    }

    body.style-bold.header-overlay .main-navigation .wp-block-navigation-item a::after {
        background: var(--hsl-action);
    }
}

@media (max-width: 1024px) {
    body.style-bold.header-overlay .hero-container,
    body.style-bold.header-overlay .hero-section .container {
        padding-top: 124px;
    }
}

@media (max-width: 768px) {
    body.style-bold.header-solid {
        --hsl-header-offset: 62px;
    }

    body.style-bold.header-overlay .header-container {
        padding-bottom: 20px !important;
    }

    body.style-bold.header-overlay .main-navigation .wp-block-navigation__responsive-container-open {
        border-color: rgba(255, 255, 255, 0.45);
        color: #fff;
    }

    body.style-bold.header-overlay .hero-container,
    body.style-bold.header-overlay .hero-section .container {
        padding-top: 96px;
    }
}

/* ==========================================================================
   How It Works and FAQ sections
   ========================================================================== */

body.style-bold .how-section {
    padding: 88px 0;
    background: #fff;
}

body.style-bold .how-steps {
    gap: 32px 48px;
}

body.style-bold .how-step {
    padding: 20px 0 0;
    border: 0;
    border-top: 4px solid var(--hsl-heading);
    border-radius: 0;
    background: none;
}

body.style-bold .how-step-number {
    justify-content: flex-start;
    width: auto;
    height: auto;
    margin-bottom: 10px;
    border-radius: 0;
    background: none;
    color: var(--hsl-brand);
    font-family: var(--hsl-display);
    font-size: 3.75rem;
    line-height: 0.9;
}

body.style-bold .how-step h3 {
    font-family: var(--hsl-body);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--hsl-heading);
}

body.style-bold .how-step p {
    color: var(--hsl-text);
}

body.style-bold .faq-section {
    padding: 88px 0;
    border-top: 1px solid var(--hsl-line);
    background: var(--hsl-surface);
}

body.style-bold .faq-section .section-container {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
    gap: 32px 64px;
}

body.style-bold .faq-section .section-header {
    margin-bottom: 0;
}

body.style-bold .faq-list {
    max-width: none;
    margin: 0;
    border-top: 1px solid var(--hsl-line);
}

body.style-bold .faq-item {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--hsl-line);
    border-radius: 0;
    background: none;
}

body.style-bold .faq-item summary {
    padding: 20px 44px 20px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hsl-heading);
}

body.style-bold .faq-item summary::after {
    right: 8px;
}

body.style-bold .faq-answer {
    max-width: 44em;
    padding: 0 0 20px;
    color: var(--hsl-text);
}

/* Review cards read as cards on either section background. */
body.style-bold .testimonial-card,
body.style-bold .testimonial-card:hover {
    background: #fff;
}

body.style-bold .related-section + .testimonials-section .testimonial-card {
    background: var(--hsl-surface);
}

/* ==========================================================================
   Service page content and quote card
   ========================================================================== */

body.style-bold .content-title {
    font-family: var(--hsl-display);
    font-size: clamp(2.125rem, 4vw, 3.125rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    color: var(--hsl-heading);
}

body.style-bold .content-prose > p:first-child {
    color: var(--hsl-heading);
}

body.style-bold .content-prose h2,
body.style-bold .content-prose h3 {
    margin-top: 40px;
    margin-bottom: 16px;
    line-height: 1.05;
    color: var(--hsl-heading);
}

body.style-bold .content-prose ul li::before {
    border-color: var(--hsl-brand);
}

body.style-bold .content-prose img {
    border-radius: 6px;
}

body.style-bold .content-prose a,
body.style-bold .content-aside-phone {
    color: var(--hsl-brand);
}

body.style-bold .content-aside-card {
    padding: 28px;
    border: 1px solid var(--hsl-line);
    border-top: 6px solid var(--hsl-brand);
    border-radius: 6px;
    background: var(--hsl-surface);
}

body.style-bold .content-aside-card h3 {
    font-size: 1.875rem;
    line-height: 1.02;
    text-transform: uppercase;
    color: var(--hsl-heading);
}

body.style-bold .content-aside-card p,
body.style-bold .content-aside-label {
    color: var(--hsl-text);
}

body.style-bold .content-aside-list,
body.style-bold .content-aside-list li {
    border-color: var(--hsl-line);
}

body.style-bold .content-aside-list li {
    font-size: 1rem;
}

body.style-bold .content-aside-value {
    color: var(--hsl-heading);
}

@media (max-width: 960px) {
    body.style-bold .faq-section .section-container {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    body.style-bold .how-section,
    body.style-bold .faq-section {
        padding: 56px 0;
    }

    body.style-bold .how-step-number {
        font-size: 3rem;
    }

    body.style-bold .faq-item summary {
        font-size: 1.125rem;
    }
}

/* Header Background: glass. A frosted bar over the hero instead of the fade. */
body.style-bold.header-glass .header-container {
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(13, 22, 31, 0.42) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

@media (max-width: 768px) {
    body.style-bold.header-glass .header-container {
        padding-bottom: 8px !important;
    }
}

/* Where the stats strip follows the hero, the two fill the first screen
   together, so the strip sits along the bottom edge instead of being cut off
   or pushed out of view. --hsl-stats-strip is the strip's height. */
@media (min-width: 769px) {
    body.style-bold {
        --hsl-stats-strip: 136px;
    }

    body.style-bold .modern-hero:has(+ .stats-section) {
        min-height: max(560px, calc(100vh - var(--hsl-header-offset, 0px) - var(--wp-admin--admin-bar--height, 0px) - var(--hsl-stats-strip)));
    }

    body.style-bold .modern-hero + .stats-section .stats-grid {
        min-height: calc(var(--hsl-stats-strip) - 1px);
        align-items: center;
    }
}

/* ==========================================================================
   Colour below the fold
   Sections alternate between brand-tinted, dark and white bands instead of
   white and grey, and section titles carry a short bar in the button colour.
   Every colour still comes from the active palette.
   ========================================================================== */

body.style-bold {
    --hsl-tint: var(--hsl-surface);
    --hsl-tint-line: var(--hsl-line);
    --hsl-hover: var(--wp--preset--color--selection, var(--hsl-brand));
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
    body.style-bold {
        --hsl-tint: color-mix(in srgb, var(--hsl-brand) 7%, #fff);
        --hsl-tint-line: color-mix(in srgb, var(--hsl-brand) 20%, #fff);
    }
}

/* Title bar */
body.style-bold .section-title::after,
body.style-bold .content-title::after {
    content: '';
    display: block;
    width: 72px;
    height: 6px;
    margin-top: 16px;
    background: var(--hsl-action);
}

body.style-bold .partners-section .section-title::after {
    display: none;
}

/* Stats strip: a rule in the button colour ties it to the hero */
body.style-bold .stats-section {
    border-top: 5px solid var(--hsl-action);
}

@media (min-width: 769px) {
    body.style-bold .modern-hero + .stats-section .stats-grid {
        min-height: calc(var(--hsl-stats-strip) - 7px);
    }
}

/* Services: tinted band, colour on hover for every card */
body.style-bold .services-section,
body.style-bold .related-section,
body.style-bold .benefits-section {
    background: var(--hsl-tint);
}

body.style-bold .service-card,
body.style-bold .benefit-item {
    border-color: var(--hsl-tint-line);
}

body.style-bold .service-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.style-bold .service-card:hover {
    border-color: var(--hsl-hover);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

body.style-bold .service-card:hover .service-info h3 {
    color: var(--hsl-brand);
}

/* A card with a photo: the photo takes the hover colour */
body.style-bold .service-overlay {
    display: flex;
    background: var(--hsl-hover);
    transition: opacity 0.2s ease;
}

body.style-bold .service-card:hover .service-overlay {
    opacity: 0.86;
}

/* A card without a photo: a hatched panel stands in for it and takes the same hover colour */
body.style-bold .service-card a:not(:has(.service-image))::before {
    content: '';
    display: block;
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid var(--hsl-tint-line);
    background-color: var(--hsl-tint);
    background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0, 0, 0, 0.035) 14px 28px);
    transition: background-color 0.2s ease;
}

body.style-bold .service-card:hover a:not(:has(.service-image))::before {
    background-color: var(--hsl-hover);
}

/* How It Works: the dark band */
body.style-bold .how-section {
    position: relative;
    background: var(--hsl-ink);
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 24px);
    color: var(--hsl-on-ink);
}

body.style-bold .how-section .section-title,
body.style-bold .how-section .section-subtitle,
body.style-bold .how-step h3 {
    color: var(--hsl-on-ink);
}

body.style-bold .how-step {
    border-top-color: rgba(255, 255, 255, 0.3);
}

body.style-bold .how-step-number {
    color: var(--hsl-action);
}

body.style-bold .how-step p {
    color: var(--hsl-on-ink);
    opacity: 0.84;
}

/* Reviews: white band, tinted cards capped in the brand colour */
body.style-bold .testimonials-section,
body.style-bold .services-section + .testimonials-section,
body.style-bold .related-section + .testimonials-section {
    background: #fff !important;
}

body.style-bold .testimonial-card,
body.style-bold .testimonial-card:hover,
body.style-bold .related-section + .testimonials-section .testimonial-card {
    border: 1px solid var(--hsl-tint-line);
    border-top: 5px solid var(--hsl-brand);
    background: var(--hsl-tint);
    box-shadow: none;
}

/* FAQ: tinted band, each question a white card; the open one takes the brand colour */
body.style-bold .faq-section {
    border-top: 0;
    background: var(--hsl-tint);
}

body.style-bold .faq-section .section-container {
    grid-template-columns: fit-content(45%) minmax(0, 1fr);
}

body.style-bold .faq-list {
    border-top: 0;
}

body.style-bold .faq-item {
    margin-bottom: 10px;
    padding: 0 22px;
    border: 1px solid var(--hsl-tint-line);
    border-radius: 6px;
    background: #fff;
}

body.style-bold .faq-item:last-child {
    margin-bottom: 0;
}

body.style-bold .faq-item[open] {
    border-color: var(--hsl-brand);
}

body.style-bold .faq-item summary:hover,
body.style-bold .faq-item[open] summary {
    color: var(--hsl-brand);
}

/* Service pages: quote card and partner strip pick up the tint */
body.style-bold .content-aside-card {
    border-color: var(--hsl-tint-line);
    border-top-color: var(--hsl-brand);
    background: var(--hsl-tint);
}

body.style-bold .content-aside-list,
body.style-bold .content-aside-list li {
    border-color: var(--hsl-tint-line);
}

@media (max-width: 960px) {
    body.style-bold .faq-section .section-container {
        grid-template-columns: minmax(0, 1fr);
    }
}