/*
Custom CSS for website theme
Version: 1.0
Description: Used to establish the look and feel for the custom website
Author: Full Spectrum Marketing
Author URL: http://www.fsm.agency

DEVELOPER NOTES:
- #page-container selector is intentionally used throughout for scoping to override
  Divi and WordPress core styles. This ensures proper specificity and prevents
  style conflicts with parent theme and plugin styles.
- Empty button style declarations (fsm-btn-*) are framework placeholders for
  custom website implementations. Fill these in per project requirements.
- Transition syntax: Property-specific transitions (e.g., "border-color 0.2s ease")
  are preferred for performance and clarity, but "ease all" is acceptable for
  simple cases where multiple properties need the same transition.
- Copy variables from theme.css to variables.css when ready to organize per project.
*/
:root {
    --Afterglow-Spectrum: linear-gradient(92deg, var(--FSM-Orange) 1.81%, var(--FSM-Red) 42.39%, var(--FSM-Purple) 85.48%);
    --Afterglow-Angle: linear-gradient(108deg, var(--FSM-Orange) -0.57%, var(--FSM-Red) 52.56%, var(--FSM-Purple) 108.99%);
    --Afterglow-Angle-Reverse: linear-gradient(145deg, var(--FSM-Purple) 20.68%, var(--FSM-Red) 50.88%, var(--FSM-Orange) 79.32%);
    --Purple-Blue-Spectrum: linear-gradient(106deg, var(--FSM-Purple) 38.61%, var(--FSM-Blue) 99.15%);
    --Green-Yellow-Spectrum: linear-gradient(106deg, var(--FSM-Green) 38.61%, var(--FSM-Yellow) 99.15%);
    --Purple-Orange-Spectrum: linear-gradient(106deg, var(--FSM-Purple) 4.72%, var(--FSM-Orange) 96.61%);
    --Red-Orange-Spectrum: linear-gradient(106deg, var(--FSM-Red) 38.61%, var(--FSM-Orange) 99.15%);

    /* Section left accent bar */
    --section-accent-bar-width: 42px;
    --section-accent-bar-offset: -1rem;
    --section-accent-bar-gradient: var(--Afterglow-Spectrum);
    --section-accent-bar-max-height: 60%;

    --spacing-1: 1em;
    --spacing-2: 1.5em;
    --spacing-3: 2em;
    --spacing-4: 2.5em;
    --spacing-5: 3em;
    /*Brand Color Palette*/
    /* partnership */
    --FSM-Blue-Shade: #007199;
    --FSM-Blue: #19BDE6;
    --FSM-Blue-Tint: #BAEBF7;

    /* professional pride */
    --FSM-Purple-Shade: #4B3075;
    --FSM-Purple: #977CC1;
    --FSM-Purple-Tint: #E0D8EC;

    /* furiosity */
    --FSM-Red-Shade: #7D0300;
    --FSM-Red: #CA5043;
    --FSM-Red-Tint: #EFCAC7;

    /* bold & honest */
    --FSM-Orange-Shade: #B14300;
    --FSM-Orange: #FE9000;
    --FSM-Orange-Tint: #FFDEB2;

    /* clear communication */
    --FSM-Yellow-Shade: #A48300;
    --FSM-Yellow: #F1D01B;
    --FSM-Yellow-Tint: #FBF1BB;

    /*humble & confident */
    --FSM-Green-Shade: #299836;
    --FSM-Green: #76E583;
    --FSM-Green-Tint: #D6F7DA;

    --Default-White: #ffffff;
    --Dark-Gray: #282828;
    --FSM-Cream: #FEF7EC;

    /*Reusable Treatments*/
    --bg-tint-bleed-vertical: 80px;
    --bg-tint-offset-left: 40px;
    --bg-tint-inset-right: 40px;
    --border-radius: 18px;
    --box-shadow: 4px 4px 15px 4px rgba(0, 0, 0, 0.10);
    --FSM-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.25);

    --box-shadow-button: 2px 2px 2px 0px rgba(122, 122, 122, 0.25);
    /* box-shadow: 2px 2px 2px 0px rgba(122, 122, 122, 0.25); */

    /*Typography*/
    --Font-Weight-600: 600;
    --Font-Weight-700: 700;
    --Font-Weight-900: 900;
    --Corsario-Headline-Bold: 'wght' 700, 'opsz' 48;

    --Font-Serif: corsario-variable, sans-serif;
    --Font-Sans-Serif: indivisible, Helvetica, sans-serif;

    /* Heading font sizes */
    --heading-size-1: clamp(2rem, 2.0982rem + 1.7857cqi, 4rem);
    --heading-size-2: clamp(1.75rem, 1.2736rem + 1.2727cqi, 2.95rem);
    --heading-size-2-large: clamp(1.75rem, 1.75rem + 1.7857cqi, 3.75rem);
    --heading-size-3: clamp(1.25rem, 0.7581rem + 1.3103cqi, 2.25rem);
    --heading-size-4: clamp(1.25rem, 0.7652rem + 1.2903cqi, 2rem);
    --heading-size-5: clamp(1.15rem, 0.7113rem + 1.1710cqi, 1.75rem);
    --heading-size-6: clamp(1rem, 0.5145rem + 1.2903cqi, 1.25rem);

    /* Body font sizes */
    --body-base-size: 16px;
    --body-base-size-large: 18px;
    --body-base-size-small: 14px;
    --body-base-size-x-small: 12px;

    /* Padding Utilities */
    --spacing-0: 0;
    --spacing-1: 1em;
    --spacing-2: 1.5em;
    --spacing-3: 2em;
    --spacing-4: 2.5em;
    --spacing-5: 3em;

    /* Max-width utilities (rem-based for zoom/font-size scaling; names reflect ~pixel equivalent at 16px root) */
    --max-width-300: 18.75rem;
    /* 300px */
    --max-width-400: 25rem;
    /* 400px */
    --max-width-500: 31.25rem;
    /* 500px */
    --max-width-600: 37.5rem;
    /* 600px */
    --max-width-700: 43.75rem;
    /* 700px */
    --max-width-800: 50rem;
    /* 800px */
    --max-width-900: 56.25rem;
    /* 900px */
}

/* Max-width utility classes – use on containers; rem-based so they scale with root font size / browser zoom */
#page-container .max-width-300 {
    max-width: var(--max-width-300);
}

#page-container .max-width-400 {
    max-width: var(--max-width-400);
}

#page-container .max-width-500 {
    max-width: var(--max-width-500);
}

#page-container .max-width-600 {
    max-width: var(--max-width-600);
}

#page-container .max-width-700 {
    max-width: var(--max-width-700);
}

#page-container .max-width-800 {
    max-width: var(--max-width-800);
}

#page-container .max-width-900 {
    max-width: var(--max-width-900);
}

/* gradients */
.gradient-twilight {
    background: linear-gradient(106deg, var(--FSM-Purple) 38.61%, var(--FSM-Blue) 99.15%);
}

.gradient-afterglow {
    background: linear-gradient(120deg, var(--FSM-Orange) 0%, var(--FSM-Red) 50%, var(--FSM-Purple) 100%) no-repeat top left;
}

.gradient-furiosity {
    background: linear-gradient(120deg, var(--FSM-Red) 0%, var(--FSM-Orange) 100%) no-repeat top left;
}

.gradient-aspen {
    background: linear-gradient(106deg, var(--FSM-Green) 38.61%, var(--FSM-Yellow) 99.15%);
}

/*
 * Background tint layers – add to Section or Row in Divi.
 * Base: .bg-tint-layer plus one color modifier (.bg-tint-layer--purple, etc.).
 * Optional: .bg-tint-layer--overlap for layers that extend behind the adjacent column.
 * Text stays aligned with page content (no left padding); background offsets left,
 * and container has right/top/bottom padding so content sits inside the tint.
 */
#page-container .bg-tint-layer {
    position: relative;
    padding: var(--bg-tint-bleed-vertical) var(--bg-tint-inset-right) var(--bg-tint-bleed-vertical) 0;
}

#page-container .bg-tint-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(-1 * var(--bg-tint-offset-left));
    width: calc(100% + var(--bg-tint-offset-left));
    height: 100%;
    border-radius: var(--border-radius);
    pointer-events: none;
    z-index: 0;
}


#page-container .bg-tint-layer--purple::before {
    background-color: var(--FSM-Purple-Tint);
}

#page-container .bg-tint-layer--green::before {
    background-color: var(--FSM-Green-Tint);
}

#page-container .bg-tint-layer--yellow::before {
    background-color: var(--FSM-Yellow-Tint);
}

#page-container .bg-tint-layer--blue::before {
    background-color: var(--FSM-Blue-Tint);
}

#page-container .bg-tint-layer--blue-shade::before {
    background-color: var(--FSM-Blue-Shade);
}

#page-container .bg-tint-layer--red::before {
    background-color: var(--FSM-Red-Tint);
}

#page-container .bg-tint-layer--orange::before {
    background-color: var(--FSM-Orange-Tint);
}

/* Extends layer behind the next column (e.g. two-column layouts). */
#page-container .bg-tint-layer--overlap::before {
    width: 165%;
    left: -10%;
}

#page-container .white-column {
    background-color: var(--Default-White);
    box-shadow: var(--FSM-shadow);
    border-radius: var(--border-radius);
    padding: 2.5rem;
}

/* Investment & payment – line items: tighter line-height so wrapped labels read as one item (all screen sizes) */
#page-container #investment .white-column p,
#page-container #payment-schedule .white-column p {
    line-height: 1.35;
}

/* Section left accent bar – add class "section-accent-bar" to Section in Divi */
#page-container .section-accent-bar {
    position: relative;
    overflow: visible;
}

#page-container .section-accent-bar::before {
    content: '';
    position: absolute;
    left: var(--section-accent-bar-offset);
    top: 0;
    bottom: 0;
    width: var(--section-accent-bar-width);
    background: var(--section-accent-bar-gradient, var(--Afterglow-Spectrum));
    pointer-events: none;
    border-radius: var(--border-radius);
}

#page-container .section-accent-bar.section-accent-bar--capped::before {
    max-height: var(--section-accent-bar-max-height);
}

/* GLOBAL BUTTON STYLES – Divi + Gravity Forms (aligned with FSM main site) */
#page-container .et_pb_button,
#page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .et_pb_button a,
#page-container .gform_button,
#page-container .gform_next_button,
#page-container .gform_previous_button {
    background: var(--FSM-Orange);
    padding: 0.85em 1.5em 0.7em !important;
    border-radius: 50px;
    color: var(--Dark-Gray);
    text-transform: none;
    font-weight: 700;
    border: none !important;
    border-bottom: 2px solid var(--FSM-Orange);
    line-height: 1em !important;
    display: inline-block;
    box-shadow: var(--box-shadow-button);
    transition: background-color 0.2s ease, color 0.2s ease, text-decoration 0.2s ease;
}

#page-container .et_pb_button:hover,
#page-container #mega-menu-wrap-primary-menu #mega-menu-primary-menu .et_pb_button a:hover,
#page-container .gform_button:hover,
#page-container .gform_next_button:hover,
#page-container .gform_previous_button:hover {
    background: hsl(from var(--FSM-Orange) h s calc(l + 20));
    color: var(--Dark-Gray) !important;
    text-decoration: underline;
}

/* Gravity Forms Orbital theme – force FSM button style (higher specificity) */
#page-container .gform-theme--orbital .gform_button,
#page-container .gform-theme--orbital .gform_next_button,
#page-container .gform-theme--orbital .gform_previous_button,
#page-container .gform-theme--orbital input[type="submit"],
#page-container .gform-theme--orbital button[type="submit"] {
    background: var(--FSM-Orange) !important;
    padding: 0.85em 1.5em 0.7em !important;
    border-radius: 50px !important;
    color: var(--Dark-Gray) !important;
    text-transform: none !important;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: 2px solid var(--FSM-Orange) !important;
    line-height: 1em !important;
    box-shadow: var(--box-shadow-button);
    transition: background-color 0.2s ease, color 0.2s ease, text-decoration 0.2s ease;
}

#page-container .gform-theme--orbital .gform_button:hover,
#page-container .gform-theme--orbital .gform_next_button:hover,
#page-container .gform-theme--orbital .gform_previous_button:hover,
#page-container .gform-theme--orbital input[type="submit"]:hover,
#page-container .gform-theme--orbital button[type="submit"]:hover {
    background: hsl(from var(--FSM-Orange) h s calc(l + 20)) !important;
    color: var(--Dark-Gray) !important;
    text-decoration: underline;
}

/* LARGE BUTTON SIZING */
#page-container .et_pb_button.large {
    padding: 1em 2em 0.85em !important;
    font-size: var(--font-size-200, 1.125em);
}

/* SMALL BUTTON SIZING */
#page-container .et_pb_button.small {
    padding: 0.7em 1.3em 0.6em !important;
    font-size: 14px;
}

/* ACCESSIBILITY UNIVERSAL TEXT LINKS */
#main-content a:not(.et_pb_button, .icon, img, .fsm-post-list a, .card, .exclude-style, #on-page-nav a, .fsm-team-card__link) {
    border-radius: 4px;
    padding: 2px;
    transition: ease all .2s;
    display: inline;
    overflow: hidden;
    text-decoration: underline;
}

#main-content a:not(.et_pb_button, .icon, img, .fsm-post-list a, .card, #on-page-nav a, .fsm-team-card__link):hover {
    border-radius: 3px;
    background-color: rgba(21, 43, 55, .2);
    transition: ease all .2s;
}

/*
    Font Sizing
*/

body,
body div,
body p,
body li {
    font-size: clamp(0.8rem, 1.75cqi, 1rem);
    font-weight: 400;
    font-family: var(--Font-Sans-Serif);
}

body strong {
    letter-spacing: 0 !important;
}

body small {
    font-size: clamp(0.5rem, 1.25cqi, 0.8rem);
    font-family: var(--Font-Sans-Serif);
}

body {
    line-height: 1.5;
}

body h1 {
    font-family: var(--Font-Serif);
    font-variation-settings: var(--Corsario-Headline-Bold);
}

body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: var(--Font-Sans-Serif);
    font-weight: var(--Font-Weight-700);
}

body:not(.et-vb-root-ancestor) #page-container {
    h1 {
        font-size: var(--heading-size-1);
    }

    h2 {
        font-size: var(--heading-size-2);
        font-weight: 700;
        letter-spacing: -0.02em !important;
    }

    h3 {
        font-size: var(--heading-size-3);
        letter-spacing: -0.02em;
        /* -0.48px at 24px (Figma) */
    }

    h4 {
        font-size: var(--heading-size-4);
    }

    h5 {
        font-size: var(--heading-size-5);
    }

    h6 {
        font-size: var(--heading-size-6);
    }
}

body:not(.et-vb-root-ancestor) {

    p,
    li {
        font-size: clamp(0.8rem, 1.75cqi, 1rem);
    }
}

/* Global Heading Font Styles - Shared with FSM Agency */
body h1 {
    font-family: var(--Font-Serif);
    font-variation-settings: var(--Corsario-Headline-Bold);
}

body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: var(--Font-Sans-Serif);
    font-weight: var(--Font-Weight-700);
}

/* Page container h1 - gradient text with animated background (FSM Agency style) */
#page-container h1 {
    background: linear-gradient(115deg, var(--FSM-Orange), var(--FSM-Red), var(--FSM-Purple), var(--FSM-Orange)) 0 0 / 200% 100%;
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    animation: move-bg 4s infinite linear;
    text-transform: none;
    font-weight: unset !important;
}

@keyframes move-bg {
    to {
        background-position: 200% 0;
    }
}

body .small {
    font-size: .75rem;
}

/*Blog Font Sizes*/
body:not(.et-vb-root-ancestor).post-template-default {
    h1 {
        &.entry-title {
            font-size: clamp(1.75rem, round(1.125rem + 2cqi, 0.5em), 2.625rem) !important;
        }
    }

    h2 {
        font-size: clamp(1.5rem, round(0.875rem + 2cqi, 0.5em), 2.375rem) !important;
    }

    h3 {
        font-size: clamp(1.25rem, round(0.75rem + 2cqi, 0.5em), 2.125rem) !important;
    }

    h4 {
        font-size: clamp(1.125rem, round(0.625rem + 2cqi, 0.5em), 1.875rem) !important;
    }

    h5 {
        font-size: clamp(1rem, round(0.5rem + 2cqi, 0.5em), 1.625rem) !important;
    }

    h6 {
        font-size: clamp(0.875rem, round(0.375rem + 2cqi, 0.5em), 1.375rem) !important;
    }
}

/* END FONT STYLE */


/* START HEADER STYLES */
.et-l--header #main-header {
    padding: 0;
    z-index: 99999;
    padding-top: 20px;
    background: transparent;
}

#main-header #logo {
    max-width: 200px;
}

/*END HEADER*/

/* START FOOTER STYLES */
body #page-container .mvp-heading-footer h2 {
    font-family: var(--Font-Serif);
    font-variation-settings: var(--Corsario-Headline-Bold);
    font-size: clamp(2rem, 1.3793rem + 1.6552vw, 4.5rem);
    background: linear-gradient(90deg, var(--FSM-Orange) 0%, var(--FSM-Red) 30%, var(--FSM-Purple) 50%);
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    text-transform: none;
    font-weight: unset !important;
}

.flex-footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 40px;
}

.flex-footer .et_pb_image {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0 !important;
    align-self: center;
}

.flex-footer .et_pb_image_wrap img {
    max-height: 80px;
}

#page-container footer a:not(.icon) {
    color: var(--Dark-Gray);
    text-decoration: underline hsl(from var(--Dark-Gray) h s 70%);
    transition: background ease .3s, text-decoration-color ease .3s;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: calc(var(--border-radius) / 4);
}

#page-container footer a:not(.icon):hover {
    background-color: var(--FSM-Orange-Tint);
    text-decoration-color: transparent;
    cursor: pointer;
}

/*END FOOTER*/

/* ============================================
   PROPOSAL PAGES (site focus)
   This site is built around individual proposal pages. Styles are grouped
   by: (1) proposal navigation & content modules, (2) proposal section blocks,
   (3) building blocks reused within proposal content.
   Cross-site reusables live in core.css.
   ============================================ */


/* ---------- Page-level hero spiral (avoids clipping by header/sections) ---------- */
/* Prevent horizontal scroll from full-bleed (100vw), negative margins, or tint/accents.
   clip on html is stricter than hidden on mobile; x and y set so we only clip horizontal. */
html {
    overflow-x: clip;
    overflow-y: auto;
}

body {
    position: relative;
    overflow-x: clip;
    overflow-y: auto;
}

body:has(#proposal-hero)::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: min(543px, 85vw);
    height: auto;
    aspect-ratio: 543 / 495;
    background-image: url("/wp-content/uploads/FSM_Spiral-1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    opacity: 0.25;
    pointer-events: none;
    z-index: 10;
}

/* ---------- Proposal – Hero Section (#proposal-hero) ---------- */
#page-container #proposal-hero {
    position: relative;
    padding-top: 6rem;
}

body #page-container .subtitle h2 {
    max-width: 700px;
    font-size: var(--body-base-size-large);
}

body #page-container .prepared-date {
    display: inline-block;
    padding: 0 .75rem;
    border-radius: var(--border-radius);
    background: var(--FSM-Orange-Tint);
    width: fit-content;
}

body #page-container .prepared-date h3 {
    max-width: 700px;
    font-size: var(--body-base-size);
    margin-bottom: 0;
    line-height: 1.8;
}

/* ---------- Proposal – On-page navigation (#on-page-nav) ---------- */
#page-container #on-page-nav.et_pb_sticky {
    z-index: 99999 !important;
    transition: padding 0.3s ease;
}

#on-page-nav:not(.et_pb_sticky) {
    padding: 4rem 0;
}

#on-page-nav .nav-item {
    position: relative;
    display: inline-block;
}

#page-container #on-page-nav a {
    color: var(--Default-Black);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.8;
    text-decoration: underline 2px transparent;
    text-underline-offset: 4px;
    transition: ease all 0.3s;
}

#page-container #on-page-nav a:hover {
    color: var(--FSM-Orange-Shade);
    text-decoration-color: var(--FSM-Orange);
    text-underline-offset: 6px;
}

#page-container #on-page-nav a:active {
    text-decoration-color: var(--FSM-Orange);
}

#on-page-nav .nav-item.active,
#on-page-nav .nav-item.is-active,
#on-page-nav .nav-item.current-menu-item,
#on-page-nav .nav-item[aria-current="page"] {
    color: var(--Dark-Gray);
}

/* Active link: same text-decoration underline as hover (orange). */
#page-container #on-page-nav .nav-item.active a,
#page-container #on-page-nav .nav-item.is-active a,
#page-container #on-page-nav .nav-item.current-menu-item a,
#page-container #on-page-nav .nav-item[aria-current="page"] a {
    color: var(--Dark-Gray);
    text-decoration: underline 2px var(--FSM-Orange);
    text-underline-offset: 4px;
}

#page-container #on-page-nav .nav-item.active a:hover,
#page-container #on-page-nav .nav-item.is-active a:hover,
#page-container #on-page-nav .nav-item.current-menu-item a:hover,
#page-container #on-page-nav .nav-item[aria-current="page"] a:hover {
    color: var(--FSM-Orange-Shade);
    text-decoration: underline 2px var(--FSM-Orange);
    text-underline-offset: 6px;
}


/* Desktop: when not sticky, nav wraps; when sticky, horizontal scroll (like mobile) */
@media (min-width: 769px) {
    #page-container #on-page-nav:not(.et_pb_sticky) .et_pb_column {
        display: flex;
        flex-wrap: wrap;
    }

    #page-container #on-page-nav.et_pb_sticky .et_pb_column {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Equal vertical padding so scrollbar sits in bottom space without looking top-heavy */
        padding-top: 1rem;
        padding-bottom: 1rem;
        transition: all 0.3s ease;
    }

    #page-container #on-page-nav.et_pb_sticky .nav-item {
        flex-shrink: 0;
    }
}

/* On-page nav: minimal scrollbar so it doesn’t block link text (sticky + mobile horizontal scroll) */
#page-container #on-page-nav .et_pb_column {
    scrollbar-width: thin; /* Firefox: thin is minimum; no smaller in standard CSS */
    scrollbar-color: rgba(254, 144, 0, 0.5) transparent;
}

#page-container #on-page-nav .et_pb_column::-webkit-scrollbar {
    height: 4px;
}

#page-container #on-page-nav .et_pb_column::-webkit-scrollbar-track {
    background: transparent;
}

#page-container #on-page-nav .et_pb_column::-webkit-scrollbar-thumb {
    background: rgba(254, 144, 0, 0.5);
    border-radius: 2px;
}

#page-container #on-page-nav .et_pb_column::-webkit-scrollbar-thumb:hover {
    background: rgba(254, 144, 0, 0.75);
}

/* ---------- Proposal – Toggle module ([fsm_toggle]) ---------- */
#page-container .fsm_toggle_item .et_pb_toggle_title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

#page-container .fsm_toggle_item .fsm_toggle_title_text,
#page-container .fsm_toggle_item .fsm_toggle_credits {
    display: inline;
}

#page-container .fsm_toggle_item .fsm_toggle_credits {
    margin-left: 0.5em;
}

body #page-container .fsm_toggle_item h5 .fsm_toggle_credits {
    font-weight: 400;
    margin-left: 0;
}

#page-container .fsm_toggle_item .fsm_toggle_summary {
    display: block;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

#page-container .fsm_toggle_item.et_pb_toggle_open .fsm_toggle_summary,
#page-container .fsm_toggle_item.et_pb_toggle_close .fsm_toggle_summary {
    display: block;
}

@media (max-width: 768px) {

    /* Align title content and icon to the first line (padding reduced in later block so it wins over base) */
    #page-container .fsm_toggle_item .et_pb_toggle_title {
        align-items: flex-start;
    }

    /* Hide See More/Less label on mobile; plus/minus icon is sufficient */
    #page-container .fsm_toggle_item .et_pb_toggle_title::after {
        content: none !important;
        display: none;
    }

    /* Align icon with first line of text (override Divi’s top:50%; margin-top:-0.5em) */
    #page-container .fsm_toggle_item .et_pb_toggle_title:before {
        top: 0.25em;
        margin-top: 0;
        transform: translateY(-50%);
    }

    #page-container .fsm_toggle_item .fsm_toggle_credits {
        margin-left: 0;
    }
}

/* See More / See Less label – shared typography (Figma); color overridden per section below.
   Custom properties (rem) so padding and position scale with zoom/accessibility font size. */
#page-container .fsm_toggle_item {
    --fsm-toggle-label-size: 1.25rem;
    --fsm-toggle-icon-size: 1.5rem;
    /* 24px */
}

#page-container .fsm_toggle_item .et_pb_toggle_title {
    position: relative;
    padding-right: calc(6 * var(--fsm-toggle-label-size) + var(--fsm-toggle-icon-size));
}

@media (max-width: 768px) {
    #page-container .fsm_toggle_item .et_pb_toggle_title {
        padding-right: calc(var(--fsm-toggle-icon-size) + 0.5rem);
    }
}

#page-container .fsm_toggle_item.et_pb_toggle_close .et_pb_toggle_title::after,
#page-container .fsm_toggle_item.et_pb_toggle_open .et_pb_toggle_title::after {
    font-family: var(--Font-Sans-Serif);
    font-size: var(--fsm-toggle-label-size);
    font-style: normal;
    font-weight: 700;
    line-height: 1.48;
    letter-spacing: -0.02em;
    /* -0.32px at 16px */
    margin-left: auto;
    position: absolute;
    left: calc(100% - 6 * var(--fsm-toggle-label-size));
}

#page-container .fsm_toggle_item.et_pb_toggle_close .et_pb_toggle_title::after {
    content: 'See More ';
}

#page-container .fsm_toggle_item.et_pb_toggle_open .et_pb_toggle_title::after {
    content: 'See Less ';
}

/* ---------- Proposal – Toggle shared styles (border color, icon/label color scoped per section below) ---------- */
#page-container .fsm_toggle_item {
    background-color: var(--Default-White);
    border: 1px solid hsl(from var(--Dark-Gray) h s 70%);
    border-radius: var(--border-radius);
}

#page-container .fsm_toggle_item .et_pb_toggle_content {
    background-color: var(--Default-White);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

#page-container .fsm_toggle_item .et_pb_toggle_title {
    color: var(--Dark-Gray);
}

#page-container .fsm_toggle_item .et_pb_toggle_title:before {
    font-size: var(--fsm-toggle-icon-size, 1.5rem);
}

#page-container .fsm_toggle_item .fa-circle-plus,
#page-container .fsm_toggle_item .fa-circle-minus {
    font-size: var(--fsm-toggle-icon-size, 1.5rem);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Fade-out / fade-in for label + icon when toggle opens/closes (JS adds these classes) */
#page-container .fsm_toggle_item.fsm_toggle_label_fade_out .et_pb_toggle_title::after,
#page-container .fsm_toggle_item.fsm_toggle_label_fade_out .et_pb_toggle_title:before,
#page-container .fsm_toggle_item.fsm_toggle_label_fade_out .et_pb_toggle_title .fa-circle-plus,
#page-container .fsm_toggle_item.fsm_toggle_label_fade_out .et_pb_toggle_title .fa-circle-minus {
    opacity: 0;
    transition: opacity 0.15s ease;
}

#page-container .fsm_toggle_item.fsm_toggle_label_fade_in .et_pb_toggle_title::after,
#page-container .fsm_toggle_item.fsm_toggle_label_fade_in .et_pb_toggle_title:before,
#page-container .fsm_toggle_item.fsm_toggle_label_fade_in .et_pb_toggle_title .fa-circle-plus,
#page-container .fsm_toggle_item.fsm_toggle_label_fade_in .et_pb_toggle_title .fa-circle-minus {
    opacity: 0;
    transition: opacity 0.15s ease;
}

#page-container .fsm_toggle_item.fsm_toggle_label_fade_in.fsm_toggle_label_fade_in_visible .et_pb_toggle_title::after,
#page-container .fsm_toggle_item.fsm_toggle_label_fade_in.fsm_toggle_label_fade_in_visible .et_pb_toggle_title:before,
#page-container .fsm_toggle_item.fsm_toggle_label_fade_in.fsm_toggle_label_fade_in_visible .et_pb_toggle_title .fa-circle-plus,
#page-container .fsm_toggle_item.fsm_toggle_label_fade_in.fsm_toggle_label_fade_in_visible .et_pb_toggle_title .fa-circle-minus {
    opacity: 1;
}

/* Section-specific: border (base), icon + See More/Less (shade) */
#one-time .fsm_toggle_item {
    border-color: var(--FSM-Purple);
}

#one-time .fsm_toggle_item .et_pb_toggle_title:before,
#one-time .fsm_toggle_item .fa-circle-plus,
#one-time .fsm_toggle_item .fa-circle-minus {
    color: var(--FSM-Purple-Shade) !important;
}

#one-time .fsm_toggle_item .et_pb_toggle_title::after {
    color: var(--FSM-Purple-Shade);
}

/* Website Strategy: Swiper slider (dot navigation only). Pagination is a sibling of the swiper so it always paints. */
#website .website-slider {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#website .website-slider .fsm-website-swiper {
    width: 100%;
    flex: 0 0 auto;
    height: auto !important;
    overflow: hidden;
}

#website .website-slider .fsm-website-swiper .swiper-wrapper {
    align-items: stretch;
}

#website .website-slider .fsm-website-swiper .swiper-slide {
    display: flex !important;
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Pagination is outside the swiper container (sibling) so it’s not affected by Swiper’s paint/overflow */
#website .website-slider .fsm-website-slider__pagination,
#website .website-slider .swiper-pagination {
    flex: 0 0 auto;
    margin-top: 24px;
    margin-bottom: 0;
    min-height: 14px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

#website .website-slider .fsm-website-slider__pagination .swiper-pagination-bullet,
#website .website-slider .swiper-pagination .swiper-pagination-bullet {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--FSM-Blue-Shade, #21718f);
    opacity: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

#website .website-slider .fsm-website-slider__pagination .swiper-pagination-bullet-active,
#website .website-slider .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--FSM-Blue-Shade, #21718f);
    border-color: var(--FSM-Blue-Shade, #21718f);
    width: 20px;
    border-radius: 20px;
}

#website .website-slide {
    border-radius: var(--border-radius);
    background: var(--FSM-Blue-Tint);
    padding: 48px;
    gap: 40px;
}

#website .website-slide .highlight {
    border-radius: var(--border-radius);
    background: var(--FSM-Blue-Shade);
    padding: 16px;
    justify-content: center;
    align-items: center;
    color: var(--Default-White);
    text-align: center;
}

/* Icon ::before uses Font Awesome 6/7 Pro or Free; color --FSM-Blue-Shade */
#website .website-slide .icon h4::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Pro", "Font Awesome 7 Pro", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    color: var(--FSM-Blue-Shade);
    margin-right: 0.4em;
}

#website .website-slide .icon.update h4::before {
    content: "\f37e";
    /* fa-browser */
}

#website .website-slide .icon.accessible h4::before {
    content: "\e60e";
    /* fa-globe-pointer */
}

#website .website-slide .icon.rank h4::before {
    content: "\e561";
    /* fa-ranking-star */
}

#page-container #website .bg-tint-layer::before {
    left: -48px;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

#ongoing .fsm_toggle_item {
    border-color: var(--FSM-Green);
}

#ongoing .fsm_toggle_item .et_pb_toggle_title:before,
#ongoing .fsm_toggle_item .fa-circle-plus,
#ongoing .fsm_toggle_item .fa-circle-minus {
    color: var(--FSM-Green-Shade) !important;
}

#ongoing .fsm_toggle_item .et_pb_toggle_title::after {
    color: var(--FSM-Green-Shade);
}

/* Divi native toggle in #ongoing (.smb-more) – match See More/Less look (no border/bg); icon right of text */
#ongoing .smb-more.et_pb_toggle {
    --fsm-toggle-label-size: 1.25rem;
    --fsm-toggle-icon-size: 1.5rem;
    background-color: transparent;
    border: none;
    padding: 0;
}

#ongoing .smb-more .et_pb_toggle_content {
    background-color: transparent;
    padding: 0;
}

#ongoing .smb-more .et_pb_toggle_title {
    display: flex;
    align-items: center;
    gap: 0.35em;
    padding: 0;
    font-family: var(--Font-Sans-Serif);
    font-size: 0;
    font-style: normal;
    font-weight: 700;
    line-height: 1.48;
    letter-spacing: -0.02em;
    color: var(--FSM-Green-Shade);
}

/* Override Divi’s absolute positioning and negative margin so icon sits inline to the right of text */
#ongoing .smb-more .et_pb_toggle_title:before {
    position: static;
    margin-top: 0;
    padding-left: 0.5em;
    order: 2;
    color: var(--FSM-Green-Shade) !important;
    font-size: var(--fsm-toggle-icon-size, 1.5rem);
}

#ongoing .smb-more.et_pb_toggle_open .et_pb_toggle_title:before {
    color: var(--FSM-Green-Shade) !important;
}

/* Dynamic label: See More (closed) / See Less (open) via ::after so icon stays to the right */
#ongoing .smb-more.et_pb_toggle_close .et_pb_toggle_title::after {
    content: 'See More';
    order: 0;
    font-family: var(--Font-Sans-Serif);
    font-size: var(--fsm-toggle-label-size, 1.25rem);
    font-weight: 700;
    line-height: 1.48;
    letter-spacing: -0.02em;
    color: var(--FSM-Green-Shade);
}

#ongoing .smb-more.et_pb_toggle_open .et_pb_toggle_title::after {
    content: 'See Less';
    order: 0;
    font-family: var(--Font-Sans-Serif);
    font-size: var(--fsm-toggle-label-size, 1.25rem);
    font-weight: 700;
    line-height: 1.48;
    letter-spacing: -0.02em;
    color: var(--FSM-Green-Shade);
}

/* ---------- Proposal – Client logos slider (#client-slider) ----------
   Continuous ticker/marquee. Scoped to #client-slider only. */
#client-slider {
    overflow: visible;
}

#client-slider .client-logos-slider {
    overflow: visible;
}

#client-slider .fsm-client-logos-marquee-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
}

#client-slider .fsm-client-logos-marquee {
    width: 100%;
    overflow: hidden;
}

#client-slider .fsm-client-logos-marquee-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: max-content;
    animation: fsm-client-logos-ticker var(--ticker-duration, 60s) linear infinite;
}

#client-slider .fsm-client-logos-marquee-group {
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-shrink: 0;
}

#client-slider .fsm-client-logos-marquee-item {
    flex-shrink: 0;
    max-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#client-slider .fsm-client-logos-marquee-item img {
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

#client-slider .fsm-client-logos-marquee-item .tall img {
    max-height: 100px;
}

@keyframes fsm-client-logos-ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ---------- Proposal – Meet the Team slider (#meet-the-team) ----------
   Swiper + staff cards. Add Section with CSS ID "meet-the-team"; set
   Section/Row overflow to visible if shadows or arrows are clipped. */
#meet-the-team .fsm-team-slider {
    --team-card-shadow-clearance: 14px;
    --team-card-shadow-clearance-left: 10px;
    position: relative;
    overflow: visible;
    padding-bottom: 1rem;
}

#meet-the-team .fsm-team-slider .fsm-team-swiper {
    overflow: hidden;
    padding: var(--team-card-shadow-clearance) var(--team-card-shadow-clearance) var(--team-card-shadow-clearance) var(--team-card-shadow-clearance-left);
    margin: calc(-1 * var(--team-card-shadow-clearance)) calc(-1 * var(--team-card-shadow-clearance)) calc(-1 * var(--team-card-shadow-clearance)) calc(-1 * var(--team-card-shadow-clearance-left));
}

#meet-the-team .fsm-team-slider .fsm-team-card {
    position: relative;
    display: block;
    height: 100%;
}

#meet-the-team .fsm-team-slider .fsm-team-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 73 / 81;
    border-radius: var(--border-radius);
    background: lightgray 50% / cover no-repeat;
    box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

#meet-the-team .fsm-team-slider .fsm-team-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#meet-the-team .fsm-team-slider .fsm-team-card__body {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    padding: 12px 14px;
    align-items: center;
    gap: 8px;
    border-radius: calc(var(--border-radius) / 2);
    background: var(--Default-White);
    box-shadow: var(--box-shadow);
}

#meet-the-team .fsm-team-slider .fsm-team-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
}

#meet-the-team .fsm-team-slider .fsm-team-card__name {
    color: var(--Dark-Gray);
    font-family: var(--Font-Sans-Serif);
    font-size: var(--body-base-size, 16px);
    font-style: normal;
    font-weight: var(--Font-Weight-700);
    line-height: 1.48;
}

#meet-the-team .fsm-team-slider .fsm-team-card__title {
    color: var(--Dark-Gray);
    font-family: var(--Font-Sans-Serif);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.48;
}

#meet-the-team .fsm-team-slider .fsm-team-card__link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#meet-the-team .fsm-team-slider .fsm-team-card__link:hover {
    transform: translateY(-4px);
    cursor: pointer;
}

#meet-the-team .fsm-team-slider .fsm-team-card__link:hover .fsm-team-card__media {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

#meet-the-team .fsm-team-slider .fsm-team-card__body {
    transition: box-shadow 0.2s ease;
}

#meet-the-team .fsm-team-slider .fsm-team-card__link:hover .fsm-team-card__body {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

#meet-the-team .fsm-team-slider .fsm-team-card__bio-icon {
    display: flex;
    font-size: 2rem;
    color: var(--FSM-Blue-Shade);
    flex-shrink: 0;
}

#meet-the-team .fsm-team-slider .fsm-team-card__bio-icon .fa-up-right-from-square {
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
}

#meet-the-team .fsm-team-slider .fsm-team-slider__arrows {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    margin-top: 0.5rem;
    padding-right: 8px;
    min-height: 40px;
}

#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-prev,
#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-next {
    position: relative;
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    margin: 0;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    background-color: transparent;
    color: var(--FSM-Orange-Shade);
    border: none;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-prev::after,
#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-next::after {
    display: none;
}

#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-prev .fa-circle-chevron-left,
#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-next .fa-circle-chevron-right {
    font-size: 40px;
    color: inherit;
}

#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-prev:hover:not(.swiper-button-disabled),
#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-next:hover:not(.swiper-button-disabled) {
    transform: scale(1.08);
    color: var(--FSM-Orange-Shade);
}

#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-disabled {
    color: var(--Dark-Gray);
    cursor: not-allowed;
    opacity: 0.5;
}

#meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-disabled:hover {
    transform: none;
}

/* ---------- Estimated time frame section ---------- */
#timeline .et_pb_blurb.date .et_pb_blurb_content {
    max-width: unset;
}

body #page-container #timeline .et_pb_blurb.date h4.et_pb_module_header {
    font-size: var(--heading-size-6);
}

/* ---------- Proposal building blocks (reused in proposal content) ---------- */

/* Generic white blurb card */
.generic-white-blurb {
    border-radius: var(--border-radius);
    background-color: var(--Default-White);
    box-shadow: var(--FSM-shadow);
    flex-shrink: 0;
    padding: 1.5rem;
    margin-bottom: 0;
}

/* Stat-sentence blurb: stat on own line, continuation below (match fsm.agency stat style) */
.stats .generic-white-blurb .stat-lead {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--heading-size-4);
    font-weight: var(--Font-Weight-700);
    font-family: var(--Font-Sans-Serif);
}

/* Core values grid and cards */
.core-values-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.core-values-grid .et_pb_main_blurb_image img {
    height: 4rem;
    object-fit: contain;
}

#core-values-card-row-heading {
    grid-column: 1 / span 6;
}

.core-values-card {
    border-radius: var(--border-radius);
    padding: 1em;
    margin-bottom: 0 !important;
    height: 100%;
    position: relative;
}

body #page-container .core-values-card h4 {
    font-size: clamp(1rem, 1.2cqi, 1.25rem);
}

.core-values-card::after {
    position: absolute;
    content: '';
    top: 96%;
    bottom: -5px;
    left: -8px;
    right: -8px;
    border-radius: var(--border-radius);
    height: 10px;
}

#core-partnership {
    z-index: 6;
}

#core-professional-pride {
    z-index: 5;
}

#core-furiosity {
    z-index: 4;
}

#core-bold-honest {
    z-index: 3;
}

#core-clear-communication {
    z-index: 2;
}

#core-humble-confident {
    z-index: 1;
}

#core-partnership h4 {
    color: var(--FSM-Blue-Shade);
}

#core-professional-pride h4 {
    color: var(--FSM-Purple-Shade);
}

#core-furiosity h4 {
    color: var(--FSM-Red-Shade);
}

#core-bold-honest h4 {
    color: var(--FSM-Orange-Shade);
}

#core-clear-communication h4 {
    color: var(--FSM-Yellow-Shade);
}

#core-humble-confident h4 {
    color: var(--FSM-Green-Shade);
}

#core-partnership::after,
#core-professional-pride::after,
#core-furiosity::after,
#core-bold-honest::after,
#core-clear-communication::after,
#core-humble-confident::after {
    position: absolute;
    content: '';
    top: 96%;
    bottom: -5px;
    left: -8px;
    right: -8px;
    border-radius: var(--border-radius);
    height: 10px;
}

#core-partnership::after {
    background-color: var(--FSM-Blue);
}

#core-professional-pride::after {
    background-color: var(--FSM-Purple);
}

#core-furiosity::after {
    background-color: var(--FSM-Red);
}

#core-bold-honest::after {
    background-color: var(--FSM-Orange);
}

#core-clear-communication::after {
    background-color: var(--FSM-Yellow);
}

#core-humble-confident::after {
    background-color: var(--FSM-Green);
}

@media only screen and (max-width:980px) {
    .core-values-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: unset;
    }

    #core-values-card-row-heading {
        grid-column: 1 / span 2;
        padding-top: 2em;
    }

    #guarantee-blurbs-row {
        margin-top: 2em;
    }

    #core-partnership::after,
    #core-professional-pride::after,
    #core-furiosity::after,
    #core-bold-honest::after,
    #core-clear-communication::after,
    #core-humble-confident::after {
        top: unset;
        bottom: 0;
        border-radius: 25px;
        height: 10px;
    }
}

/* --------------------------------------------------------------------------
   Fancy list – check-circle icon bullets (Figma: Font Awesome 7 Pro Solid)
   Scope: .fancy-list on Text module; styles nested ul/li only.
   -------------------------------------------------------------------------- */
#page-container .fancy-list ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1em;
}

#page-container .fancy-list ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    margin-bottom: 0.5em;
}

#page-container .fancy-list ul li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Pro", "Font Awesome 7 Pro", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
    color: var(--FSM-Orange, #FE9000);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding-top: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Quote and Partner Logos – Plus sign between FSM logo and client logo
   -------------------------------------------------------------------------- */
body #page-container blockquote {
    text-align: center;
    border-left: none;

    p {
        font-size: var(--heading-size-4);
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    footer {
        font-size: var(--body-base-size);
    }

    &::before {
        content: '\f10d'; /* fa-quote-left */
        font: var(--fa-font-solid);
        font-size: 6rem;
        color: var(--FSM-Blue-Tint);
        position: absolute;
        top: -.5rem;
        left: -.5rem;
        z-index: -1;
    }

    &::after {
        content: '\f10e'; /* fa-quote-right */
        font: var(--fa-font-solid);
        font-size: 6rem;
        color: var(--FSM-Blue-Tint);
        position: absolute;
        top: -.5rem;
        right: -.5rem;
        z-index: -1;
    }
}

.et_pb_row.partner-logo {
    max-width: var(--max-width-800);
    margin-inline: auto;
}

/* Single column contains three modules: image, code (icon), image */
.partner-logo .et_pb_column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
    row-gap: 4rem;
}

/* Two image modules: equal width so icon stays centered; cap height so no logo blows out the row */
.partner-logo .et_pb_column .et_pb_image {
    flex: 1 1 0;
    min-width: 0;
    max-height: 80px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Code module (icon): natural width, does not grow */
.partner-logo .et_pb_column .et_pb_code {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo i {
    font-size: 3rem;
    color: var(--FSM-Blue);
}

/* Fixed frame for both logo slots: same size = same visual weight */
.partner-logo .et_pb_image_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px !important;
    height: 80px !important;
    max-width: 240px;
    overflow: hidden;
}

/* Force img into frame; overrides Divi inline width/height and SVG intrinsic size */
.partner-logo .et_pb_image_wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    object-position: center;
}

/* --------------------------------------------------------------------------
   Signature & Agreement – form section (before #terms-and-conditions)
   Gradient background, white card, Gravity Forms input styling.
   -------------------------------------------------------------------------- */
#agreement {
    background: var(--Afterglow---angle, linear-gradient(108deg, var(--FSM-Orange) -0.57%, var(--FSM-Red) 52.56%, var(--FSM-Purple) 108.99%));
}

#agreement .et_pb_row {
    background-color: var(--Default-White);
    border-radius: var(--border-radius);
    padding: 3rem;
    max-width: var(--max-width-900);
    margin: auto;
}

#agreement .gform_button {
    margin: auto;
}

#agreement .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
#agreement .gform_wrapper textarea.textarea {
    box-shadow: 4px 4px 15px 4px rgba(0, 0, 0, 0.10);
}

#agreement-header {
    margin: auto;
    max-width: var(--max-width-900);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body #page-container #agreement-header h2 {
    font-size: var(--heading-size-2-large);
    background: linear-gradient(90deg, var(--FSM-Orange) 0.11%, var(--FSM-Red) 42.98%, var(--FSM-Purple) 98.67%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-family: var(--Font-Serif);
    font-weight: unset !important;
    font-variation-settings: var(--Corsario-Headline-Bold);
    padding-bottom: .5em;
}

/* [fsm_proposal_agreement] – waiting message (State B) */
#agreement .fsm-agreement-intro {
    margin-bottom: 1rem;
    max-width: var(--max-width-600);
    text-align: left;
}

#agreement .fsm-agreement-message.fsm-agreement-waiting {
    margin: 0;
    padding: 1rem 0;
}

/* [fsm_proposal_agreement] – signed block (State C) */
#agreement .fsm-agreement-signed-message {
    margin: 0 0 1.25rem;
}

#agreement .fsm-agreement-signed {
    margin: 0;
}

#agreement .fsm-agreement-signed-heading {
    margin: 0 0 1.25rem;
    font-size: var(--heading-size-2-large, 1.5rem);
    font-family: var(--Font-Serif);
}

#agreement .fsm-agreement-signatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    #agreement .fsm-agreement-signatures {
        grid-template-columns: 1fr;
    }
}

#agreement .fsm-agreement-party {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#agreement .fsm-agreement-party-name {
    font-weight: 600;
}

#agreement .fsm-agreement-party-company {
    font-size: 0.9rem;
    color: var(--FSM-Charcoal, #333);
}

#agreement .fsm-agreement-party-title,
#signature-and-agreement .fsm-agreement-party-title {
    display: block;
    font-size: 0.9rem;
    color: var(--FSM-Charcoal, #333);
}

#agreement .fsm-agreement-signature-img {
    display: block;
    max-width: 280px;
    height: auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius, 4px);
}

#agreement .fsm-agreement-trust {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--FSM-Charcoal, #333);
}

#agreement .fsm-agreement-print {
    margin: 1rem 0 0;
}

#agreement .fsm-agreement-reset-link {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

#agreement .fsm-agreement-reset-link a {
    color: inherit;
}

/* [fsm_proposal_agreement] – hide honeypot/validation field (GF adds it; visible when block loaded via AJAX) */
#fsm-agreement-block .gform_validation_container,
#agreement .gform_validation_container,
#signature-and-agreement .gform_validation_container {
    display: none !important;
}

/* [fsm_proposal_agreement] – AJAX placeholder (avoids layout shift while block loads) */
#agreement .fsm-agreement-placeholder,
#signature-and-agreement .fsm-agreement-placeholder {
    min-height: 120px;
}

/* [fsm_proposal_agreement] – AJAX-loaded form: contain width and fix columns on mobile */
#fsm-agreement-block,
#agreement #fsm-agreement-block,
#signature-and-agreement #fsm-agreement-block {
    box-sizing: border-box;
    max-width: 100%;
}

#fsm-agreement-block .gform_wrapper,
#agreement #fsm-agreement-block .gform_wrapper,
#signature-and-agreement #fsm-agreement-block .gform_wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    #fsm-agreement-block .gform_wrapper .gfield.gfield_left,
    #fsm-agreement-block .gform_wrapper .gfield.gfield_right,
    #agreement #fsm-agreement-block .gform_wrapper .gfield.gfield_left,
    #agreement #fsm-agreement-block .gform_wrapper .gfield.gfield_right,
    #signature-and-agreement #fsm-agreement-block .gform_wrapper .gfield.gfield_left,
    #signature-and-agreement #fsm-agreement-block .gform_wrapper .gfield.gfield_right {
        float: none;
        width: 100%;
    }

    /* AJAX block: prevent horizontal overflow; let GF grid/inputs shrink */
    #fsm-agreement-block,
    #agreement #fsm-agreement-block,
    #signature-and-agreement #fsm-agreement-block {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    #fsm-agreement-block .gform_wrapper,
    #agreement #fsm-agreement-block .gform_wrapper,
    #signature-and-agreement #fsm-agreement-block .gform_wrapper {
        min-width: 0;
    }

    /* GF theme (foundation) grid can overflow without min-width: 0 */
    #fsm-agreement-block .gform_fields,
    #agreement #fsm-agreement-block .gform_fields,
    #signature-and-agreement #fsm-agreement-block .gform_fields {
        min-width: 0;
    }

    #fsm-agreement-block .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
    #fsm-agreement-block .gform_wrapper textarea,
    #fsm-agreement-block .gform_wrapper select,
    #agreement #fsm-agreement-block .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
    #agreement #fsm-agreement-block .gform_wrapper textarea,
    #agreement #fsm-agreement-block .gform_wrapper select,
    #signature-and-agreement #fsm-agreement-block .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
    #signature-and-agreement #fsm-agreement-block .gform_wrapper textarea,
    #signature-and-agreement #fsm-agreement-block .gform_wrapper select {
        max-width: 100%;
        box-sizing: border-box;
    }
}

#agreement .fsm-agreement-placeholder-loading,
#signature-and-agreement .fsm-agreement-placeholder-loading {
    margin: 0;
    color: var(--Dark-Gray, #333);
    opacity: 0.8;
}

#agreement .fsm-agreement-placeholder-error,
#signature-and-agreement .fsm-agreement-placeholder-error {
    margin: 0;
    color: var(--Dark-Gray, #333);
}

/* Print button – matches global FSM button style */
#agreement .fsm-agreement-print-btn {
    background: var(--FSM-Orange);
    padding: 0.85em 1.5em 0.7em;
    border-radius: 50px;
    color: var(--Dark-Gray);
    text-transform: none;
    font-weight: 700;
    border: none;
    border-bottom: 2px solid var(--FSM-Orange);
    line-height: 1em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    box-shadow: var(--box-shadow-button);
    transition: background-color 0.2s ease, color 0.2s ease, text-decoration 0.2s ease;
    cursor: pointer;
}

#agreement .fsm-agreement-print-btn .fa-print {
    font-size: 1em;
}

#agreement .fsm-agreement-print-btn:hover {
    background: hsl(from var(--FSM-Orange) h s calc(l + 20));
    color: var(--Dark-Gray);
    text-decoration: underline;
}

/* ---------- Portfolio slider (shortcode [fsm_portfolio_slider]) ---------- */
/* Allow row/column to show overflow so __row can extend into section/row padding (arrows in whitespace). */
#page-container .et_pb_row:has(.fsm-portfolio-slider),
#page-container .et_pb_column:has(.fsm-portfolio-slider) {
    overflow: visible;
}

.fsm-portfolio-slider {
    margin: 1.5rem 0;
}

/* Row extends into margin; padding keeps slide area full width so arrows sit in whitespace only */
/* Negative margin extends row into section/row padding; gap + arrows sit there, swiper keeps full width */
.fsm-portfolio-slider__row {
    --fsm-portfolio-nav-space: calc(36px + 1rem);
    display: flex;
    align-items: center;
    margin-left: calc(-1 * var(--fsm-portfolio-nav-space));
    margin-right: calc(-1 * var(--fsm-portfolio-nav-space));
    gap: 1rem;
}

.fsm-portfolio-slider__swiper {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
}

.fsm-portfolio-slider__swiper .swiper-slide {
    height: auto;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
}

.fsm-portfolio-slider__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
}

/* Nav arrows outside swiper, in margin (no overlap with slide content) */
.fsm-portfolio-slider__row .fsm-portfolio-slider__nav,
.fsm-portfolio-slider__row .swiper-button-prev,
.fsm-portfolio-slider__row .swiper-button-next {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    position: static;
    top: auto;
    transform: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    transition: background 0.2s ease;
}

.fsm-portfolio-slider__row .fsm-portfolio-slider__nav:hover,
.fsm-portfolio-slider__row .swiper-button-prev:hover,
.fsm-portfolio-slider__row .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.6);
}

.fsm-portfolio-slider__row .fsm-portfolio-slider__nav::after,
.fsm-portfolio-slider__row .swiper-button-prev::after,
.fsm-portfolio-slider__row .swiper-button-next::after {
    font-size: 16px;
}

/* Portfolio lightbox */
.fsm-portfolio-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.fsm-portfolio-lightbox.fsm-portfolio-lightbox--open {
    opacity: 1;
    visibility: visible;
}

.fsm-portfolio-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.fsm-portfolio-lightbox__close svg {
    width: 22px;
    height: 22px;
    display: block;
}

.fsm-portfolio-lightbox__close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.fsm-portfolio-lightbox__inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.fsm-portfolio-lightbox__slide-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    min-height: 0;
}

.fsm-portfolio-lightbox__swiper {
    flex: 1 1 auto;
    min-width: 0;
    aspect-ratio: 16 / 9;
    max-height: 80vh;
    overflow: hidden;
}

.fsm-portfolio-lightbox__swiper .swiper-slide {
    height: auto;
}

.fsm-portfolio-lightbox__swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

/* Override Swiper’s absolute positioning so arrows stay outside the image as flex items */
.fsm-portfolio-lightbox__nav {
    position: static !important;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}

.fsm-portfolio-lightbox__nav::before {
    display: none !important;
    content: none !important;
}

.fsm-portfolio-lightbox__nav:hover {
    background: none;
}

.fsm-portfolio-lightbox__nav::after {
    font-size: 18px;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.fsm-portfolio-lightbox__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.fsm-portfolio-lightbox__caption {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.fsm-portfolio-lightbox__link-wrap {
    flex-shrink: 0;
    text-align: right;
}

.fsm-portfolio-lightbox__link {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--FSM-Orange-Shade, #e87d4a);
    text-decoration: none;
    transition: color 0.2s ease;
}

.fsm-portfolio-lightbox__link:hover {
    color: #fff;
}

/* ==========================================================================
   MOBILE & TABLET OVERRIDES – Proposal site (master template)
   Scoped to #page-container and section IDs. Breakpoints: 980, 768, 640, 480.
   ========================================================================== */

/* ---------- max-width: 768px – Hero, nav, accent bar, section headings, footer, client slider, team ---------- */
@media (max-width: 768px) {

    /* Hero spiral: smaller on mobile so it overlaps headline text less; still anchored top right */
    body:has(#proposal-hero)::before {
        width: min(220px, 55vw);
    }

    /* Hero: reduce top padding */
    #page-container #proposal-hero {
        padding-top: 3.5rem;
    }

    /* On-page nav: thin horizontal scroll bar; use .et_pb_column as flex container */
    #page-container #on-page-nav:not(.et_pb_sticky) {
        padding: 0.75rem 0;
    }

    #page-container #on-page-nav .et_pb_column {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.75rem;
        /* Equal vertical padding so scrollbar sits in bottom space without looking top-heavy */
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #page-container #on-page-nav .nav-item {
        flex-shrink: 0;
    }

    #page-container #on-page-nav a {
        padding: 0.5rem 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Section accent bar: hide on mobile to avoid horizontal scroll */
    #page-container .section-accent-bar::before {
        display: none;
    }

    /* Section headings: slightly smaller on mobile for hierarchy */
    body:has(#proposal-hero) #page-container #about-fsm h2,
    body:has(#proposal-hero) #page-container #about-fsm h3,
    body:has(#proposal-hero) #page-container #meet-the-team h2,
    body:has(#proposal-hero) #page-container #timeline h2,
    body:has(#proposal-hero) #page-container #investment h2,
    body:has(#proposal-hero) #page-container #payment-schedule h2,
    body:has(#proposal-hero) #page-container #agreement-header h2 {
        font-size: var(--heading-size-3);
    }

    /* Footer: reduce gap and allow wrap */
    #page-container .flex-footer {
        gap: 1.25rem;
        flex-wrap: wrap;
    }

    /* Client logos: reduce marquee gap */
    #page-container #client-slider .fsm-client-logos-marquee-track,
    #page-container #client-slider .fsm-client-logos-marquee-group {
        gap: 2rem;
    }

    /* Meet the team: ensure slider arrows meet 44px touch target */
    #page-container #meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-prev,
    #page-container #meet-the-team .fsm-team-slider .fsm-team-slider__arrows .swiper-button-next {
        min-width: 44px;
        min-height: 44px;
    }

    /* Portfolio slider: 44px touch targets for prev/next; slightly smaller nav space so arrows fit on narrow viewports */
    #page-container .fsm-portfolio-slider__row {
        --fsm-portfolio-nav-space: calc(44px + 0.5rem);
    }

    #page-container .fsm-portfolio-slider__row .fsm-portfolio-slider__nav,
    #page-container .fsm-portfolio-slider__row .swiper-button-prev,
    #page-container .fsm-portfolio-slider__row .swiper-button-next {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }

    /* Website section slider: reduce slide padding and gap for mobile; larger tap area for pagination bullets */
    #page-container #website .website-slide {
        padding: 1.5rem;
        gap: 1.25rem;
    }

    /* Website slider: tint ::before touches left edge of slide and extends to right edge of content */
    #page-container #website .website-slider .bg-tint-layer::before {
        left: -1.5rem;
        width: calc(100% + 1.5rem);
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        transform: none;
    }

    /* #page-container #website .website-slider .fsm-website-slider__pagination,
    #page-container #website .website-slider .swiper-pagination {
        margin-top: 1rem;
        min-height: 44px;
        padding: 0.5rem 0;
    } */

    #page-container #website .website-slider .fsm-website-slider__pagination .swiper-pagination-bullet,
    #page-container #website .website-slider .swiper-pagination .swiper-pagination-bullet {
        width: 14px;
        height: 14px;
        border-width: 2px;
    }

    #page-container #website .website-slider .fsm-website-slider__pagination .swiper-pagination-bullet-active,
    #page-container #website .website-slider .swiper-pagination .swiper-pagination-bullet-active {
        width: 22px;
        border-radius: 22px;
    }

    /* Investment & payment: allow horizontal scroll for wide content (e.g. tables) */
    #page-container #investment .white-column,
    #page-container #payment-schedule .white-column {
        overflow-x: auto;
    }
}

/* ---------- max-width: 980px – Tint + white-column rows: center tint, extend behind (all such sections) ---------- */
@media (max-width: 980px) {

    :root {
        --bg-tint-bleed-vertical: 60px;
        --bg-tint-offset-left: 10px;
        --bg-tint-inset-right: 10px;
    }

    /* Row: allow tint to bleed (overflow visible) */
    #page-container .et_pb_row:has(.bg-tint-layer--overlap) {
        overflow: visible;
    }

    /* Tint column: keep behind white column in stacking order */
    #page-container .et_pb_row .bg-tint-layer--overlap {
        overflow: visible;
        position: relative;
        z-index: 0;
    }

    #page-container .et_pb_row .bg-tint-layer::before {
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        z-index: -1;
    }

    /* Tint ::before: full row width so tint is wider than the white column; centered, extend down behind content below */
    #page-container .et_pb_row .bg-tint-layer--overlap::before {
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: calc(100% + var(--bg-tint-bleed-vertical));
        z-index: -1;
    }

    /* White column: overlap tint from above; sit on top so tint falls behind */
    #page-container .et_pb_row:has(.bg-tint-layer--overlap) .white-column {
        position: relative;
        z-index: 1;
        margin-top: -3rem;
        background-color: var(--Default-White);
    }
}

/* ---------- max-width: 640px – Agreement card padding, portfolio slider in-flow ---------- */
@media (max-width: 640px) {
    #page-container #agreement .et_pb_row {
        padding: 1.75rem 1rem;
    }

    /* Portfolio slider: remove negative margin on narrow screens to avoid horizontal scroll; arrows stay in-flow; add side padding so arrows aren’t flush to viewport */
    #page-container .fsm-portfolio-slider__row {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ---------- max-width: 480px – Header logo, website slider tighter ---------- */
@media (max-width: 480px) {
    #page-container #main-header #logo {
        max-width: 160px;
    }

    /* Agreement: tighter horizontal padding so form fits without overflow */
    #page-container #agreement .et_pb_row {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Website section slider: tighter padding on very small screens so slide content fits */
    #page-container #website .website-slide {
        padding: 1rem;
        gap: 1rem;
    }

    #page-container #website .website-slide .highlight {
        padding: 12px;
    }
}

/* Safe areas: notch / home indicator (sticky elements) */
@media (max-width: 768px) {
    #page-container #main-header.et-l--header {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    #page-container #on-page-nav.et_pb_sticky {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Reduced motion: pause hero gradient animation and client logo marquee */
@media (prefers-reduced-motion: reduce) {
    #page-container #proposal-hero h1 {
        animation: none;
    }

    #page-container #client-slider .fsm-client-logos-marquee-track {
        animation: none;
    }
}

/* Print: proposal pages – hide chrome, preserve branding, control page breaks */
@media print {

    /* Global print defaults – small page margin so content uses more of the sheet */
    @page {
        size: auto;
        margin: 0.75cm;
    }

    body {
        color: #222;
        background: #fff;
    }

    /* H1: solid color when printing (gradient background-clip often fails or is disabled) */
    body:has(#proposal-hero) #page-container h1 {
        background: none !important;
        color: #222 !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-fill-color: #222 !important;
    }

    /* Reduce content-area padding on proposal pages so layout isn’t overly narrow when printing */
    body:has(#proposal-hero) #page-container,
    body:has(#proposal-hero) #page-container .container,
    body:has(#proposal-hero) #page-container .et_pb_section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none !important;
    }

    /* Divi section vertical gap: reduce spacing between rows when printing */
    body:has(#proposal-hero) #page-container,
    body:has(#proposal-hero) #page-container .et_pb_section {
        --vertical-gap: 0.5rem !important;
    }

    /* Reduce padding and gap throughout proposal pages when printing */
    body:has(#proposal-hero) .et_pb_section {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    body:has(#proposal-hero) .et_pb_row {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        column-gap: 0.5rem !important;
        row-gap: 0.5rem !important;
    }

    body:has(#proposal-hero) .et_pb_column {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body:has(#proposal-hero) #page-container .bg-tint-layer {
        padding: 0.25rem 0 !important;
    }

    /* Proposal pages only: hide non-content UI (header stays for FSM logo) */
    body:has(#proposal-hero) #on-page-nav,
    body:has(#proposal-hero) #client-slider,
    body:has(#proposal-hero) .et_pb_scroll_top,
    body:has(#proposal-hero) #about-fsm,
    body:has(#proposal-hero) #meet-the-team,
    body:has(#proposal-hero) .fsm-portfolio-slider,
    body:has(#proposal-hero) #agreement .fsm-agreement-print,
    body:has(#proposal-hero) #page-container footer,
    body:has(#proposal-hero) .flex-footer {
        display: none !important;
    }

    body:has(#proposal-hero) .section-accent-bar::before,
    body:has(#proposal-hero) #page-container .bg-tint-layer::before {
        display: none !important;
    }

    body:has(#proposal-hero) .white-column {
        box-shadow: none !important;
    }

    /* Sticky Divi sections: keep content, but render in native document position (no repeat on each page) */
    body:has(#proposal-hero) .et_pb_sticky {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    body:has(#proposal-hero)::before {
        display: none !important;
    }

    /* Agreement section: thin gradient border when printing */
    #agreement {
        padding: 0.75rem !important;
    }

    #agreement .et_pb_row,
    #agreement-header {
        max-width: none !important;
    }

    body #agreement .et_pb_row {
        padding: 1rem !important;
        max-width: none !important;
    }

    /* Agreement section: full width for signed block and signature images */
    #agreement .fsm-agreement-signed,
    #agreement .fsm-agreement-signature-img {
        max-width: 100%;
    }

    #agreement .fsm-agreement-signature-img {
        height: auto;
    }

    /* Force backgrounds and gradient text to print (agreement + branding) */
    body:has(#proposal-hero) #agreement,
    body:has(#proposal-hero) #agreement .et_pb_row,
    body:has(#proposal-hero) #agreement-header h2 {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Page break control: keep signature block and toggles intact */
    body:has(#proposal-hero) #agreement .fsm-agreement-signed,
    body:has(#proposal-hero) #agreement .fsm-agreement-signatures,
    body:has(#proposal-hero) .fsm_toggle_item {
        page-break-inside: avoid;
        margin-bottom: 0.75rem !important;
    }

    /* Stack row columns vertically when printing (heading left + content right → heading above content) */
    body:has(#proposal-hero) #what-we-heard .et_pb_row,
    body:has(#proposal-hero) #one-time .et_pb_row,
    body:has(#proposal-hero) #ongoing .et_pb_row,
    body:has(#proposal-hero) #timeline .et_pb_row,
    body:has(#proposal-hero) #investment .et_pb_row,
    body:has(#proposal-hero) #payment-schedule .et_pb_row {
        flex-direction: column !important;
    }

    body:has(#proposal-hero) #what-we-heard .et_pb_row .et_pb_column,
    body:has(#proposal-hero) #one-time .et_pb_row .et_pb_column,
    body:has(#proposal-hero) #ongoing .et_pb_row .et_pb_column,
    body:has(#proposal-hero) #timeline .et_pb_row .et_pb_column,
    body:has(#proposal-hero) #investment .et_pb_row .et_pb_column,
    body:has(#proposal-hero) #payment-schedule .et_pb_row .et_pb_column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Start these sections on a new page when printing (add/remove IDs as needed) */
    body:has(#proposal-hero) #timeline,
    body:has(#proposal-hero) #investment,
    body:has(#proposal-hero) #agreement,
    body:has(#proposal-hero) #terms-and-conditions {
        page-break-before: always;
        break-before: page;
    }
}