/* ============================================================
   JOBSURE VA — Child Theme Global Styles
   custom.css  |  v1.0.0

   TABLE OF CONTENTS
   1.  CSS Custom Properties
   2.  Kadence Palette Override
   3.  Base & Reset
   4.  Typography
   5.  Buttons
   6.  Links
   7.  Header
   8.  Sticky Header
   9.  Navigation — Desktop
   10. Navigation — Mobile
   11. Announcement Bar
   12. Footer
   13. Section Utilities
   14. Kadence Block Overrides
   15. Scroll Reveal Animations
   16. Exit-Intent Popup
   17. Accessibility
   18. Media Queries
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */

:root {

    /* Brand Palette */
    --js-maroon:    #5C1832;
    --js-maroon-dk: #3D0F21;
    --js-rose:      #B85C7A;
    --js-rose-lt:   #D4889E;
    --js-blush:     #EDD0DB;
    --js-petal:     #F7E8EF;
    --js-cream:     #FBF5EE;
    --js-gold:      #B8852A;
    --js-gold-lt:   #EDD9A8;
    --js-text:      #2C1810;
    --js-mid:       #6B4458;
    --js-muted:     #A08090;
    --js-border:    #E2CCDA;
    --js-border-lt: #EFE0E8;
    --js-white:     #FFFFFF;

    /* Typography */
    --js-font-display: 'Cormorant Garamond', Georgia, serif;
    --js-font-body:    'Jost', system-ui, -apple-system, sans-serif;

    /* Font Sizes */
    --js-h1: clamp(52px, 7vw, 90px);
    --js-h2: clamp(38px, 5vw, 64px);
    --js-h3: clamp(26px, 3vw, 38px);
    --js-h4: clamp(20px, 2vw, 26px);
    --js-body-lg: 20px;
    --js-body:    18px;
    --js-sm:      15px;
    --js-xs:      13px;

    /* Spacing */
    --js-section:    100px;
    --js-section-sm: 60px;
    --js-container:  1200px;
    --js-gutter:     clamp(20px, 4vw, 60px);

    /* Shadows */
    --js-sh-sm: 0 2px 12px rgba(92, 24, 50, 0.07);
    --js-sh-md: 0 8px 32px rgba(92, 24, 50, 0.11);
    --js-sh-lg: 0 20px 60px rgba(92, 24, 50, 0.16);

    /* Transitions */
    --js-ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --js-t-fast:  0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --js-t-base:  0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --js-t-slow:  0.4s  cubic-bezier(0.4, 0, 0.2, 1);

    /* Border Radius */
    --js-r-sm:   6px;
    --js-r-md:   12px;
    --js-r-lg:   20px;
    --js-r-pill: 100px;

    /* Header */
    --js-header-h:        80px;
    --js-header-h-mobile: 64px;
}


/* ============================================================
   2. KADENCE PALETTE OVERRIDE
   Maps JobSure brand to Kadence's global palette system
   ============================================================ */

:root {
    --global-palette1: #5C1832;
    --global-palette2: #3D0F21;
    --global-palette3: #B85C7A;
    --global-palette4: #EDD0DB;
    --global-palette5: #FBF5EE;
    --global-palette6: #B8852A;
    --global-palette7: #2C1810;
    --global-palette8: #FFFFFF;
    --global-palette9: #6B4458;

    --global-heading-font-family: 'Cormorant Garamond', Georgia, serif;
    --global-body-font-family:    'Jost', system-ui, sans-serif;
    --global-body-font-size:      18px;
    --global-body-line-height:    1.8;
}


/* ============================================================
   3. BASE & RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--js-font-body);
    font-size:        var(--js-body);
    font-weight:      400;
    line-height:      1.8;
    color:            var(--js-text);
    background-color: var(--js-white);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

::selection {
    background-color: var(--js-blush);
    color:            var(--js-maroon);
}

/* Remove default Kadence padding on full-width pages */
.content-area,
.site-content {
    padding: 0;
}

/* Kill any border or gap between sticky header and hero sections */
.site-content,
.content-area,
.site-main,
.entry-content,
.hentry,
.page .hentry {
    border-top:    none !important;
    margin-top:    0    !important;
    padding-top:   0    !important;
}
.entry-header,
.entry-title,
.page-title {
    display: none !important;
}


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family:   var(--js-font-display);
    font-weight:   700;
    line-height:   1.1;
    color:         var(--js-maroon);
    letter-spacing: -0.01em;
    margin-bottom: 0.5em;
}

h1 { font-size: var(--js-h1); }
h2 { font-size: var(--js-h2); }
h3 { font-size: var(--js-h3); }
h4 { font-size: var(--js-h4); }
h5 { font-size: 20px; font-family: var(--js-font-body); font-weight: 600; }
h6 { font-size: 18px; font-family: var(--js-font-body); font-weight: 600; }

p {
    font-family:   var(--js-font-body);
    font-size:     var(--js-body);
    font-weight:   400;
    line-height:   1.8;
    color:         var(--js-text);
    margin-bottom: 1.4em;
}

p:last-child {
    margin-bottom: 0;
}

/* Italic accents inside headings */
h1 em, h2 em, h3 em {
    font-style: italic;
    color:      var(--js-rose);
}

/* Eyebrow labels */
.js-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    font-family:    var(--js-font-body);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--js-rose);
    margin-bottom:  16px;
}

.js-eyebrow::before,
.js-eyebrow::after {
    content:    '';
    width:      28px;
    height:     1px;
    background: var(--js-rose-lt);
    flex-shrink: 0;
}

.js-eyebrow--left::before  { display: none; }
.js-eyebrow--right::after  { display: none; }


/* ============================================================
   5. BUTTONS
   ============================================================ */

/* Base button */
.js-btn,
.wp-block-button__link,
.kadence-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    font-family:    var(--js-font-body);
    font-size:       16px;
    font-weight:     600;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    text-decoration: none;
    padding:         16px 36px;
    min-height:      54px;
    border-radius:   var(--js-r-pill);
    border:          none;
    cursor:          pointer;
    transition:      all var(--js-t-base);
    white-space:     nowrap;
    line-height:     1;
}

/* Primary — solid maroon */
.js-btn,
.js-btn--primary {
    background:  var(--js-maroon);
    color:       var(--js-white);
    box-shadow:  var(--js-sh-md);
}

.js-btn:hover,
.js-btn--primary:hover {
    background:  var(--js-maroon-dk);
    color:       var(--js-white);
    transform:   translateY(-2px);
    box-shadow:  var(--js-sh-lg);
    text-decoration: none;
}

/* Secondary — outlined maroon */
.js-btn--outline {
    background:  transparent;
    color:       var(--js-maroon);
    border:      2px solid var(--js-maroon);
    box-shadow:  none;
}

.js-btn--outline:hover {
    background:  var(--js-maroon);
    color:       var(--js-white);
    box-shadow:  var(--js-sh-md);
    transform:   translateY(-2px);
}

/* Ghost — subtle */
.js-btn--ghost {
    background:  var(--js-petal);
    color:       var(--js-maroon);
    border:      1.5px solid var(--js-border);
    box-shadow:  none;
}

.js-btn--ghost:hover {
    background:  var(--js-blush);
    border-color: var(--js-rose-lt);
    transform:   translateY(-1px);
}

/* White button — used on dark backgrounds */
.js-btn--white {
    background:  var(--js-white);
    color:       var(--js-maroon);
    box-shadow:  0 2px 12px rgba(255, 255, 255, 0.2);
}

.js-btn--white:hover {
    background:  var(--js-cream);
    transform:   translateY(-2px);
}

/* Icon inside button */
.js-btn svg {
    width:      16px;
    height:     16px;
    flex-shrink: 0;
    transition: transform var(--js-t-fast);
}

.js-btn:hover svg {
    transform: translateX(3px);
}

/* Kadence button block override */
.wp-block-button .wp-block-button__link {
    background:      var(--js-maroon);
    color:           var(--js-white);
    border-radius:   var(--js-r-pill);
    font-family:     var(--js-font-body);
    font-weight:     600;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    padding:         16px 36px;
    transition:      all var(--js-t-base);
    border:          none;
}

.wp-block-button .wp-block-button__link:hover {
    background:  var(--js-maroon-dk);
    transform:   translateY(-2px);
    box-shadow:  var(--js-sh-lg);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background:  transparent;
    color:       var(--js-maroon);
    border:      2px solid var(--js-maroon);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background:  var(--js-maroon);
    color:       var(--js-white);
}


/* ============================================================
   6. LINKS
   ============================================================ */

a {
    color:           var(--js-maroon);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition:      color var(--js-t-fast);
}

a:hover {
    color: var(--js-rose);
}

/* Nav and button links reset */
.site-header a,
.site-footer a,
.js-btn {
    text-decoration: none;
}


/* ============================================================
   7. HEADER
   ============================================================ */

#masthead,
.site-header {
    position:         sticky;
    top:              0;
    z-index:          9000;
    background-color: var(--js-white);
    border-bottom:    none !important;
    box-shadow:       none !important;
    transition:       box-shadow var(--js-t-base),
                      background-color var(--js-t-base);
}

/* Kill any border on Kadence inner header rows */
#masthead *,
.site-header *,
.kadence-header-row,
.kadence-main-header-wrap,
.kadence-top-header-wrap,
.kadence-bottom-header-wrap,
.header-main-inner-wrap,
.header-main-wrap,
.header-main-container {
    border-bottom: none !important;
    border-top:    none !important;
}

/* Inner container */
.kadence-main-header-wrap,
.header-main-inner-wrap {
    max-width:  var(--js-container);
    margin:     0 auto;
    padding:    0 var(--js-gutter);
    height:     var(--js-header-h);
    display:    flex;
    align-items: center;
    justify-content: space-between;
    gap:         24px;
}

/* Logo */
.site-branding .custom-logo,
.site-header .custom-logo {
    height:    56px;
    width:     auto;
    max-width: 180px;
    object-fit: contain;
}

.site-branding a {
    display:     inline-flex;
    align-items: center;
}

/* Site title fallback (if no logo image) */
.site-title {
    font-family:    var(--js-font-display);
    font-size:      26px;
    font-weight:    700;
    color:          var(--js-maroon);
    letter-spacing: -0.01em;
    line-height:    1;
    margin:         0;
}

.site-title a {
    color:           var(--js-maroon);
    text-decoration: none;
}

/* Header CTA button */
.header-button a,
.kadence-header-btn,
.header-cta-btn {
    background:     var(--js-maroon) !important;
    color:          var(--js-white)  !important;
    font-family:    var(--js-font-body) !important;
    font-size:      14px !important;
    font-weight:    600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding:        12px 26px !important;
    border-radius:  var(--js-r-pill) !important;
    text-decoration: none !important;
    transition:     all var(--js-t-base) !important;
    border:         none !important;
    white-space:    nowrap;
}

.header-button a:hover,
.kadence-header-btn:hover,
.header-cta-btn:hover {
    background:  var(--js-maroon-dk) !important;
    transform:   translateY(-1px) !important;
    box-shadow:  var(--js-sh-md) !important;
}


/* ============================================================
   8. STICKY HEADER
   ============================================================ */

.site-header.js-scrolled,
#masthead.js-scrolled {
    box-shadow: var(--js-sh-md) !important;
}


/* ============================================================
   9. NAVIGATION — DESKTOP
   ============================================================ */

.main-navigation ul,
.header-navigation ul.nav-menu {
    display:     flex;
    align-items: center;
    gap:         4px;
    list-style:  none;
    margin:      0;
    padding:     0;
}

.main-navigation ul li a,
.header-navigation .nav-menu > li > a {
    font-family:    var(--js-font-body);
    font-size:      15px;
    font-weight:    500;
    color:          var(--js-text);
    text-decoration: none;
    padding:        8px 14px;
    border-radius:  var(--js-r-sm);
    transition:     all var(--js-t-fast);
    display:        block;
    letter-spacing: 0.01em;
}

.main-navigation ul li a:hover,
.header-navigation .nav-menu > li > a:hover,
.main-navigation ul li.current-menu-item > a {
    color:      var(--js-maroon);
    background: var(--js-petal);
}

.main-navigation ul li.current-menu-item > a {
    font-weight: 600;
}

/* Dropdown submenu */
.main-navigation ul .sub-menu,
.header-navigation .sub-menu {
    position:         absolute;
    top:              calc(100% + 8px);
    left:             0;
    background:       var(--js-white);
    border:           1px solid var(--js-border);
    border-radius:    var(--js-r-md);
    box-shadow:       var(--js-sh-md);
    min-width:        220px;
    padding:          8px;
    opacity:          0;
    visibility:       hidden;
    transform:        translateY(-8px);
    transition:       all var(--js-t-base);
    z-index:          100;
    list-style:       none;
    margin:           0;
}

.main-navigation ul li:hover > .sub-menu,
.header-navigation .menu-item:hover > .sub-menu {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

.main-navigation ul .sub-menu li a,
.header-navigation .sub-menu li a,
.kadence-navigation .sub-menu li a,
.primary-menu .sub-menu li a {
    font-size:      14px !important;
    font-weight:    400 !important;
    padding:        10px 16px !important;
    border-radius:  6px !important;
    color:          var(--js-text) !important;
    display:        block !important;
    width:          100% !important;
    background:     transparent !important;
    transition:     background 0.18s ease, color 0.18s ease !important;
}

.main-navigation ul .sub-menu li a:hover,
.header-navigation .sub-menu li a:hover,
.kadence-navigation .sub-menu li a:hover,
.primary-menu .sub-menu li a:hover {
    background: var(--js-petal)  !important;
    color:      var(--js-maroon) !important;
    border-radius: 6px !important;
}

/* Remove any dark Kadence active/hover state on sub-items */
.main-navigation ul .sub-menu li.current-menu-item > a,
.kadence-navigation .sub-menu .current-menu-item > a {
    background: var(--js-petal)  !important;
    color:      var(--js-maroon) !important;
    font-weight: 600 !important;
}

/* Position parent relative for dropdown */
.main-navigation ul li,
.header-navigation .menu-item {
    position: relative;
}


/* ============================================================
   10. NAVIGATION — MOBILE
   ============================================================ */

.kadence-mobile-nav-toggle,
.mobile-nav-toggle {
    display:     none;
    background:  none;
    border:      none;
    cursor:      pointer;
    padding:     8px;
    color:       var(--js-maroon);
    transition:  color var(--js-t-fast);
}

.kadence-mobile-nav-toggle:hover {
    color: var(--js-rose);
}

/* Hamburger icon lines */
.kadence-mobile-nav-toggle span,
.mobile-nav-toggle span {
    display:    block;
    width:      22px;
    height:     2px;
    background: currentColor;
    border-radius: 2px;
    transition: all var(--js-t-base);
    margin:     5px 0;
}

/* Mobile nav panel */
.kadence-mobile-nav-wrap,
.js-mobile-nav {
    display:    none;
    position:   absolute;
    top:        100%;
    left:       0;
    right:      0;
    background: var(--js-white);
    border-top: 1px solid var(--js-border-lt);
    border-bottom: 2px solid var(--js-maroon);
    padding:    20px var(--js-gutter) 28px;
    box-shadow: var(--js-sh-md);
    z-index:    8999;
}

.kadence-mobile-nav-open .kadence-mobile-nav-wrap,
.js-mobile-nav.is-open {
    display: block;
}

.kadence-mobile-nav-wrap ul,
.js-mobile-nav ul {
    list-style: none;
    margin:     0;
    padding:    0;
}

.kadence-mobile-nav-wrap li a,
.js-mobile-nav li a {
    display:     block;
    font-family: var(--js-font-body);
    font-size:   16px;
    font-weight: 500;
    color:       var(--js-text);
    padding:     13px 0;
    border-bottom: 1px solid var(--js-border-lt);
    text-decoration: none;
    transition:  color var(--js-t-fast);
}

.kadence-mobile-nav-wrap li a:hover,
.js-mobile-nav li a:hover {
    color: var(--js-maroon);
}

/* Sub-menu items in mobile/tablet nav — force visible on dark background */
.kadence-mobile-nav-wrap .sub-menu li a,
.kadence-navigation .sub-menu li a,
.primary-navigation .sub-menu li a,
.mobile-navigation .sub-menu li a {
    color: var(--js-mid) !important;
    font-size: 14px;
    padding: 10px 0 10px 16px;
}

.kadence-mobile-nav-wrap .sub-menu li a:hover,
.kadence-navigation .sub-menu li a:hover {
    color: var(--js-maroon) !important;
}

.kadence-mobile-nav-wrap li:last-child a,
.js-mobile-nav li:last-child a {
    border-bottom: none;
}

.js-mobile-nav .js-btn {
    display:    flex;
    width:      100%;
    margin-top: 20px;
    justify-content: center;
}


/* ============================================================
   11. ANNOUNCEMENT BAR (optional top bar)
       Add class .js-announce-bar to a div above the header
   ============================================================ */

.js-announce-bar {
    background:  var(--js-maroon);
    color:       var(--js-white);
    text-align:  center;
    padding:     10px var(--js-gutter);
    font-family: var(--js-font-body);
    font-size:   13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    position:    relative;
}

.js-announce-bar a {
    color:       var(--js-gold-lt);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.js-announce-bar a:hover {
    color: var(--js-white);
}

.js-announce-close {
    position:   absolute;
    right:      16px;
    top:        50%;
    transform:  translateY(-50%);
    background: none;
    border:     none;
    color:      rgba(255,255,255,0.6);
    cursor:     pointer;
    font-size:  18px;
    line-height: 1;
    padding:    4px;
    transition: color var(--js-t-fast);
}

.js-announce-close:hover {
    color: var(--js-white);
}


/* ============================================================
   12. FOOTER
   ============================================================ */

/* Hide Kadence's built-in footer — replaced by .jsftr custom footer */
.site-footer {
    display: none !important;
}

/* ── Custom Footer Shell ── */
.jsftr {
    background-color: #3D0F21;
    color:            rgba(255, 255, 255, 0.75);
    font-family:      var(--js-font-body);
    font-size:        15px;
    line-height:      1.7;
}

/* ── Top section (3-column grid) ── */
.jsftr-top {
    padding: 64px clamp(24px, 5vw, 80px) 56px;
}

.jsftr-inner {
    max-width: 1200px;
    margin:    0 auto;
    display:   grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    gap:       64px;
    align-items: start;
}

/* ── Brand column ── */
.jsftr-logo-link {
    display:         inline-block;
    text-decoration: none;
    margin-bottom:   16px;
}

.jsftr-logo-img {
    height:        52px;
    width:         auto;
    max-width:     200px;
    display:       block;
    filter:        brightness(0) invert(1);
    opacity:       0.92;
}

.jsftr-wordmark {
    display:        block;
    font-family:    var(--js-font-display);
    font-size:      28px;
    font-weight:    700;
    color:          #ffffff;
    letter-spacing: -0.01em;
    line-height:    1.1;
}

.jsftr-desc {
    font-size:   14px;
    color:       rgba(255, 255, 255, 0.55);
    margin:      0 0 20px;
    line-height: 1.7;
}

.jsftr-nl-label {
    font-size:     14px;
    color:         rgba(255, 255, 255, 0.65);
    margin-bottom: 10px;
}

/* Newsletter form */
.jsftr-form {
    display:       flex;
    margin-bottom: 12px;
}

.jsftr-form input[type="email"] {
    flex:          1;
    min-width:     0;
    padding:       10px 14px;
    background:    rgba(255, 255, 255, 0.07);
    border:        1px solid rgba(255, 255, 255, 0.14);
    border-right:  none;
    border-radius: 4px 0 0 4px;
    color:         #ffffff;
    font-size:     14px;
    font-family:   var(--js-font-body);
    outline:       none;
    transition:    border-color 0.2s, background 0.2s;
}

.jsftr-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.30);
}

.jsftr-form input[type="email"]:focus {
    border-color: rgba(255, 255, 255, 0.30);
    background:   rgba(255, 255, 255, 0.11);
}

.jsftr-form button {
    padding:       10px 20px;
    background:    #5C1832;
    border:        1px solid #5C1832;
    border-radius: 0 4px 4px 0;
    color:         #ffffff;
    font-size:     14px;
    font-family:   var(--js-font-body);
    font-weight:   600;
    letter-spacing: 0.03em;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.2s, border-color 0.2s;
}

.jsftr-form button:hover {
    background:   #7A2040;
    border-color: #7A2040;
}

.jsftr-fine {
    font-size:   12px;
    color:       rgba(255, 255, 255, 0.30);
    line-height: 1.5;
    margin:      0;
}

.jsftr-fine a {
    color:           rgba(255, 255, 255, 0.50);
    text-decoration: underline;
    transition:      color 0.2s;
}

.jsftr-fine a:hover {
    color: rgba(255, 255, 255, 0.80);
}

/* ── Services / Follow Us columns ── */
.jsftr-heading {
    font-family:    var(--js-font-body) !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color:          rgba(255, 255, 255, 0.38) !important;
    margin-bottom:  20px !important;
    margin-top:     0 !important;
}

.jsftr-links {
    list-style: none;
    margin:     0;
    padding:    0;
}

.jsftr-links li {
    margin-bottom: 10px;
}

.jsftr-links a {
    color:           rgba(255, 255, 255, 0.62);
    text-decoration: none;
    font-size:       14px;
    transition:      color 0.2s;
}

.jsftr-links a:hover {
    color: #ffffff;
}

/* ── Social list ── */
.jsftr-social {
    list-style: none;
    margin:     0;
    padding:    0;
}

.jsftr-social li {
    margin-bottom: 10px;
}

.jsftr-social a {
    display:         flex;
    align-items:     center;
    gap:             10px;
    color:           rgba(255, 255, 255, 0.62);
    text-decoration: none;
    font-size:       14px;
    transition:      color 0.2s;
}

.jsftr-social a:hover {
    color: #ffffff;
}

.jsftr-social svg {
    width:      16px;
    height:     16px;
    fill:       currentColor;
    flex-shrink: 0;
    opacity:    0.70;
    transition: opacity 0.2s;
}

.jsftr-social a:hover svg {
    opacity: 1;
}

/* ── Bottom bar ── */
.jsftr-bar {
    background:  #2C1810;
    border-top:  1px solid rgba(255, 255, 255, 0.07);
    padding:     18px clamp(24px, 5vw, 80px);
}

.jsftr-bar-inner {
    max-width:       1200px;
    margin:          0 auto;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    flex-wrap:       wrap;
}

.jsftr-bar p {
    font-size: 12px;
    color:     rgba(255, 255, 255, 0.35);
    margin:    0;
}

.jsftr-bar-links {
    display:     flex;
    align-items: center;
    gap:         20px;
}

.jsftr-bar-links a {
    font-size:       12px;
    color:           rgba(255, 255, 255, 0.40);
    text-decoration: none;
    transition:      color 0.2s;
}

.jsftr-bar-links a:hover {
    color: rgba(255, 255, 255, 0.75);
}


/* ============================================================
   13. SECTION UTILITIES
   ============================================================ */

/* Section spacing */
.js-section {
    padding: var(--js-section) 0;
}

.js-section--sm {
    padding: var(--js-section-sm) 0;
}

.js-section--top {
    padding-top:    var(--js-section);
    padding-bottom: 0;
}

/* Containers */
.js-container {
    max-width: var(--js-container);
    margin:    0 auto;
    padding:   0 var(--js-gutter);
}

.js-container--narrow {
    max-width: 780px;
    margin:    0 auto;
    padding:   0 var(--js-gutter);
}

/* Background variants */
.js-bg-cream  { background-color: var(--js-cream);  }
.js-bg-petal  { background-color: var(--js-petal);  }
.js-bg-blush  { background-color: var(--js-blush);  }
.js-bg-maroon { background-color: var(--js-maroon); }
.js-bg-maroon-dk { background-color: var(--js-maroon-dk); }
.js-bg-white  { background-color: var(--js-white);  }

/* Text on dark backgrounds */
.js-bg-maroon h1, .js-bg-maroon h2, .js-bg-maroon h3,
.js-bg-maroon-dk h1, .js-bg-maroon-dk h2, .js-bg-maroon-dk h3 {
    color: var(--js-white);
}

.js-bg-maroon p, .js-bg-maroon-dk p {
    color: rgba(255,255,255,0.8);
}

/* Text alignment */
.js-text-center { text-align: center; }
.js-text-left   { text-align: left; }
.js-text-right  { text-align: right; }

/* Section header block */
.js-sec-head {
    margin-bottom: 56px;
}

.js-sec-head--center {
    text-align: center;
    max-width:  640px;
    margin:     0 auto 56px;
}

/* Divider line */
.js-divider {
    width:      60px;
    height:     2px;
    background: var(--js-rose);
    border:     none;
    margin:     24px 0;
}

.js-divider--center {
    margin: 24px auto;
}

/* Trust pill badges (reused across pages) */
.js-pills {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         8px;
    flex-wrap:   wrap;
    margin-top:  32px;
}

.js-pill {
    display:    inline-flex;
    align-items: center;
    gap:         6px;
    background:  var(--js-white);
    border:      1px solid var(--js-border);
    border-radius: var(--js-r-pill);
    padding:     7px 14px 7px 10px;
    font-family: var(--js-font-body);
    font-size:   12px;
    font-weight: 500;
    color:       var(--js-mid);
    white-space: nowrap;
    box-shadow:  var(--js-sh-sm);
}

.js-pill svg {
    width:  13px;
    height: 13px;
    color:  var(--js-rose);
    fill:   none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Logo strip (client logos) */
.js-logo-strip {
    padding:  40px 0;
    overflow: hidden;
}

.js-logo-strip-label {
    text-align:     center;
    font-family:    var(--js-font-body);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--js-muted);
    margin-bottom:  28px;
}

.js-logo-strip-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             clamp(24px, 4vw, 56px);
    flex-wrap:       wrap;
}

.js-logo-strip-row img {
    height:     40px;
    width:      auto;
    max-width:  140px;
    object-fit: contain;
    filter:     grayscale(100%);
    opacity:    0.5;
    transition: all var(--js-t-base);
}

.js-logo-strip-row img:hover {
    filter:  grayscale(0%);
    opacity: 1;
}

/* Testimonial cards */
.js-testimonials {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:                   24px;
}

.js-testimonial-card {
    background:    var(--js-white);
    border:        1px solid var(--js-border);
    border-radius: var(--js-r-lg);
    padding:       32px 28px;
    box-shadow:    var(--js-sh-sm);
    transition:    all var(--js-t-base);
    position:      relative;
}

.js-testimonial-card:hover {
    box-shadow:  var(--js-sh-md);
    transform:   translateY(-3px);
    border-color: var(--js-rose-lt);
}

.js-testimonial-card::before {
    content:        open-quote;
    font-family:    var(--js-font-display);
    font-size:      80px;
    font-weight:    700;
    color:          var(--js-blush);
    line-height:    1;
    position:       absolute;
    top:            16px;
    left:           24px;
    opacity:        0.7;
}

.js-testimonial-card p {
    font-size:    16px;
    line-height:  1.75;
    color:        var(--js-mid);
    font-style:   italic;
    position:     relative;
    z-index:      1;
    padding-top:  24px;
}

.js-testimonial-author {
    margin-top:   20px;
    padding-top:  16px;
    border-top:   1px solid var(--js-border-lt);
    display:      flex;
    align-items:  center;
    gap:          12px;
}

.js-testimonial-author-dot {
    width:        36px;
    height:       36px;
    border-radius: 50%;
    background:   var(--js-petal);
    flex-shrink:  0;
    display:      flex;
    align-items:  center;
    justify-content: center;
    font-family:  var(--js-font-display);
    font-size:    16px;
    font-weight:  700;
    color:        var(--js-maroon);
}

.js-testimonial-name {
    font-family: var(--js-font-body);
    font-size:   14px;
    font-weight: 600;
    color:       var(--js-text);
    margin:      0;
    line-height: 1.3;
}

.js-testimonial-role {
    font-family: var(--js-font-body);
    font-size:   12px;
    color:       var(--js-muted);
    margin:      2px 0 0;
}

/* Service cards (used on services hub page) */
.js-service-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   20px;
}

.js-service-card {
    background:    var(--js-white);
    border:        1px solid var(--js-border);
    border-radius: var(--js-r-lg);
    padding:       36px 28px;
    text-decoration: none;
    transition:    all var(--js-t-base);
    display:       flex;
    flex-direction: column;
    gap:           14px;
    position:      relative;
    overflow:      hidden;
}

.js-service-card::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     3px;
    background: linear-gradient(90deg, var(--js-maroon), var(--js-rose));
    transform:  scaleX(0);
    transform-origin: left;
    transition: transform var(--js-t-base);
}

.js-service-card:hover {
    box-shadow:  var(--js-sh-md);
    transform:   translateY(-4px);
    border-color: var(--js-rose-lt);
    text-decoration: none;
}

.js-service-card:hover::after {
    transform: scaleX(1);
}

.js-service-card-icon {
    width:         48px;
    height:        48px;
    border-radius: var(--js-r-md);
    background:    var(--js-petal);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}

.js-service-card-icon svg {
    width:  22px;
    height: 22px;
    stroke: var(--js-maroon);
    fill:   none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.js-service-card h3 {
    font-size:     clamp(18px, 2vw, 22px);
    color:         var(--js-maroon);
    margin-bottom: 0;
}

.js-service-card p {
    font-size:  15px;
    color:      var(--js-mid);
    margin:     0;
    line-height: 1.65;
    flex:       1;
}

.js-service-card-link {
    font-family:    var(--js-font-body);
    font-size:      13px;
    font-weight:    600;
    color:          var(--js-maroon);
    display:        flex;
    align-items:    center;
    gap:            6px;
    margin-top:     auto;
    padding-top:    16px;
    border-top:     1px solid var(--js-border-lt);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ============================================================
   14. KADENCE BLOCK OVERRIDES
   ============================================================ */

/* Kadence Heading block */
.wp-block-kadence-advancedheading {
    font-family: var(--js-font-display) !important;
}

/* Kadence Column / Row */
.wp-block-kadence-rowlayout {
    max-width: var(--js-container);
    margin-left: auto;
    margin-right: auto;
}

/* Kadence Icon List */
.kt-svg-icon-list-item-wrap .kt-svg-icon-list-single {
    color: var(--js-maroon) !important;
}

/* Remove default Kadence entry header padding on custom pages */
.page-template-default .entry-header,
.page-template-default .entry-title {
    display: none;
}

/* Kadence form field overrides */
.kb-form input[type="text"],
.kb-form input[type="email"],
.kb-form input[type="tel"],
.kb-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    font-family:   var(--js-font-body) !important;
    font-size:     16px !important;
    border:        1.5px solid var(--js-border) !important;
    border-radius: var(--js-r-md) !important;
    padding:       14px 18px !important;
    color:         var(--js-text) !important;
    background:    var(--js-white) !important;
    transition:    border-color var(--js-t-fast) !important;
}

.kb-form input:focus,
.kb-form textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: var(--js-maroon) !important;
    outline:      none !important;
    box-shadow:   0 0 0 3px rgba(92,24,50,0.08) !important;
}


/* ============================================================
   15. SCROLL REVEAL ANIMATIONS
   ============================================================ */

.js-reveal {
    opacity:    0;
    transform:  translateY(28px);
    transition: opacity 0.65s var(--js-ease),
                transform 0.65s var(--js-ease);
}

.js-reveal.is-visible {
    opacity:   1;
    transform: translateY(0);
}

.js-reveal-delay-1 { transition-delay: 0.08s; }
.js-reveal-delay-2 { transition-delay: 0.16s; }
.js-reveal-delay-3 { transition-delay: 0.24s; }
.js-reveal-delay-4 { transition-delay: 0.32s; }
.js-reveal-delay-5 { transition-delay: 0.40s; }

/* Fade only (no translate) */
.js-reveal-fade {
    opacity:    0;
    transition: opacity 0.65s var(--js-ease);
}

.js-reveal-fade.is-visible {
    opacity: 1;
}

/* Slide in from left */
.js-reveal-left {
    opacity:    0;
    transform:  translateX(-32px);
    transition: opacity 0.65s var(--js-ease),
                transform 0.65s var(--js-ease);
}

.js-reveal-left.is-visible {
    opacity:   1;
    transform: translateX(0);
}


/* ============================================================
   16. EXIT-INTENT POPUP
   Popup CSS is fully managed by functions.php (wp_footer, priority 5).
   All rules have been moved there to prevent class/specificity conflicts.
   ============================================================ */


/* ============================================================
   17. ACCESSIBILITY
   ============================================================ */

/* Skip link */
.skip-link {
    position:   absolute;
    top:        -100px;
    left:       16px;
    background: var(--js-maroon);
    color:      var(--js-white);
    padding:    12px 20px;
    border-radius: 0 0 var(--js-r-sm) var(--js-r-sm);
    font-family: var(--js-font-body);
    font-size:  14px;
    font-weight: 600;
    z-index:    99999;
    text-decoration: none;
    transition: top var(--js-t-fast);
}

.skip-link:focus {
    top: 0;
}

/* Focus ring */
*:focus-visible {
    outline:        3px solid var(--js-maroon);
    outline-offset: 3px;
    border-radius:  2px;
}

button:focus-visible,
a:focus-visible {
    outline:        3px solid var(--js-maroon);
    outline-offset: 3px;
}

/* Screen reader only */
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}


/* ============================================================
   18. MEDIA QUERIES
   ============================================================ */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {

    :root {
        --js-section:    72px;
        --js-section-sm: 48px;
    }

    .jsftr-inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* Mobile nav breakpoint */
@media (max-width: 900px) {

    .main-navigation,
    .header-navigation,
    .header-button {
        display: none;
    }

    .kadence-mobile-nav-toggle,
    .mobile-nav-toggle {
        display: block;
    }

    .kadence-main-header-wrap,
    .header-main-inner-wrap {
        height: var(--js-header-h-mobile);
        padding: 0 20px;
    }

    /* No border-bottom on mobile header — hero sections provide their own visual boundary */
}

/* Mobile: up to 768px */
@media (max-width: 768px) {

    :root {
        --js-section:    56px;
        --js-section-sm: 36px;
    }

    h1 { font-size: clamp(42px, 10vw, 64px); }
    h2 { font-size: clamp(32px, 8vw, 48px); }

    .jsftr-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .jsftr-top {
        padding: 48px clamp(20px, 5vw, 40px) 40px;
    }

    .jsftr-bar-inner {
        flex-direction: column;
        align-items:    flex-start;
        gap:            8px;
    }

    .jsftr-bar-links {
        gap: 16px;
    }

    .js-pills {
        justify-content: flex-start;
    }

    .js-logo-strip-row {
        gap: 20px;
    }

    .js-logo-strip-row img {
        height: 32px;
    }

    .js-testimonials {
        grid-template-columns: 1fr;
    }

    .js-popup {
        padding: 60px 52px 36px 24px;
        width: calc(100% - 32px);
    }

    .js-popup-eyebrow {
        letter-spacing: 0.12em;
    }
}

/* Small mobile: up to 480px */
@media (max-width: 480px) {

    :root {
        --js-gutter: 20px;
    }

    .js-btn {
        padding:   14px 24px;
        font-size: 14px;
    }

    .site-branding .custom-logo {
        height:    44px;
        max-width: 140px;
    }

    /* Footer: stack newsletter form vertically on small screens */
    .jsftr-form {
        flex-direction: column;
    }

    .jsftr-form input[type="email"] {
        border-right:        1px solid rgba(255, 255, 255, 0.14);
        border-bottom:       none;
        border-radius:       4px 4px 0 0;
    }

    .jsftr-form button {
        border-radius: 0 0 4px 4px;
        text-align:    center;
    }
}