/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 14.0
*/

:root {
    --icon-uploadcloud-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='m8 17 4-4 4 4'/%3E%3Cpath d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/%3E%3C/svg%3E");
    --icon-mail-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
    --primary-color-dark: #B8962E;
    --primary-color-muted: #f7f0df;
    --secondary-color: #2D6A4F;
    --secondary-color-dark: #1B4332;
    --muted-color: #698274;
    --muted-color-light: #ACB8AF;
    --cream: #FAF7F2;
    --sage: #E8EFEA;
    --border: #DCE5DD;
    
    --primary-font: Playfair Display, serif;


    --icon-accounting-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E");
    --icon-healthcare-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2v2'/%3E%3Cpath d='M5 2v2'/%3E%3Cpath d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1'/%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E");
    --icon-ecommerce-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    --icon-construction-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5'/%3E%3Cpath d='M14 6a6 6 0 0 1 6 6v3'/%3E%3Cpath d='M4 15v-3a6 6 0 0 1 6-6'/%3E%3Crect x='2' y='15' width='20' height='4' rx='1'/%3E%3C/svg%3E");
    --icon-professional-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
    --icon-realestate-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
    
    --icon-arrow-right-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    --icon-quote-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 0-1 1 1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 0-1 1 1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
    --icon-plus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
    --icon-arrow-up-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
    --icon-linkedin-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect width='4' height='12' x='2' y='9'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E");
    --icon-facebook-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E");
    --icon-instagram-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='20' x='2' y='2' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' x2='17.51' y1='6.5' y2='6.5'/%3E%3C/svg%3E");

    --icon-shield-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.5 9a1 1 0 0 1-.9 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --icon-lock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    --icon-filecheck-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='m3 15 2 2 4-4'/%3E%3C/svg%3E");
    --icon-usercheck-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpolyline points='16 11 18 13 22 9'/%3E%3C/svg%3E");
    --icon-eye-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --icon-server-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2' ry='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2' ry='2'/%3E%3Ccircle cx='6' cy='6' r='1'/%3E%3Ccircle cx='6' cy='18' r='1'/%3E%3C/svg%3E");

    --icon-clock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    --icon-trenddown-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 17 13.5 8.5 8.5 13.5 2 7'/%3E%3Cpolyline points='16 17 22 17 22 11'/%3E%3C/svg%3E");
    --icon-dollarsign-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='2' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
    --icon-globe-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
    --icon-award-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
    --icon-graduationcap-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
    --icon-network-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/%3E%3Cpath d='M12 12V8'/%3E%3C/svg%3E");
    --icon-chevrondown-select-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4332' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icon-chevrondown-select-light-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ACB8AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icon-users-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --icon-barchart-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
    --icon-checkcircle-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --icon-x-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    --icon-check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    --icon-briefcase-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    --icon-book-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E");
    --icon-trendup-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
    --icon-target-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
    --icon-handshake-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
}

/* Global background utilities — use these classes on [section]/[col] instead
   of setting bg_color manually, so the palette can be changed in one place. */



.header-button-1 a {
    color: var(--secondary-color-dark) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 5px 12px;
}


ul.sub-menu.nav-dropdown {
    border-radius: 10px !important;
}

.hero-gap {
    padding-top: 110px !important;
}

.bg-secondary-dark {
    background-color: var(--secondary-color-dark) !important;
}

.col-bg-secondary-dark > .col-inner {
    background-color: var(--secondary-color-dark) !important;
}

.col-bg-secondary > .col-inner {
    background-color: var(--secondary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-cream {
    background-color: var(--cream) !important;
}

.bg-sage {
    background-color: var(--sage) !important;
}

a#top-link {
    color: var(--primary-color);
    border-color: var(--primary-color);
    position: relative;
}

a#top-link:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--secondary-color-dark) !important;
}

a#top-link .icon-angle-up {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

a#top-link .icon-angle-up::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--icon-arrow-up-svg) center / contain no-repeat;
    mask: var(--icon-arrow-up-svg) center / contain no-repeat;
}

/* ADD ICON */

.icon-arrow-right span::after {
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 5px;
    display: inline-block;
    background-color: currentColor;

    -webkit-mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    mask: var(--icon-arrow-right-svg) center / contain no-repeat;

    transition:
        transform 0.3s ease;
}



/* =========================================================
   COMMON ICON STYLE
   ========================================================= */
.icon-accounting > a.plain::before,
.icon-healthcare > a.plain::before,
.icon-ecommerce > a.plain::before,
.icon-construction > a.plain::before,
.icon-professional > a.plain::before,
.icon-realestate > a.plain::before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: currentColor;
  -webkit-mask: var(--icon-accounting-svg) center / contain no-repeat;
  mask: var(--icon-accounting-svg) center / contain no-repeat;
}



/* =========================================================
   INDIVIDUAL MASKS
   ========================================================= */
.icon-accounting > a.plain::before {
    -webkit-mask: var(--icon-accounting-svg) center / contain no-repeat;
    mask: var(--icon-accounting-svg) center / contain no-repeat;
}

.icon-healthcare > a.plain::before {
    -webkit-mask: var(--icon-healthcare-svg) center / contain no-repeat;
    mask: var(--icon-healthcare-svg) center / contain no-repeat;
}

.icon-ecommerce > a.plain::before {
    -webkit-mask: var(--icon-ecommerce-svg) center / contain no-repeat;
    mask: var(--icon-ecommerce-svg) center / contain no-repeat;
}

.icon-construction > a.plain::before {
    -webkit-mask: var(--icon-construction-svg) center / contain no-repeat;
    mask: var(--icon-construction-svg) center / contain no-repeat;
}

.icon-professional > a.plain::before {
    -webkit-mask: var(--icon-professional-svg) center / contain no-repeat;
    mask: var(--icon-professional-svg) center / contain no-repeat;
}

.icon-realestate > a.plain::before {
    -webkit-mask: var(--icon-realestate-svg) center / contain no-repeat;
    mask: var(--icon-realestate-svg) center / contain no-repeat;
}


/*************** ADD CUSTOM CSS HERE.   ***************/




/* =========================================================
   INDUSTRY ICONS
   Only applies inside .row-industries
   ========================================================= */

.row-industries .nv-icon > a.plain {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sage);
  border-radius: 10px;

  transition: background-color 0.3s ease, color 0.3s ease;
}


/* ========================================
   INDUSTRY CARD
======================================== */

.row-industries .icon-box-text {
    margin-top: 10px;
}

.row-industries .card-glow .col-inner {
    padding: 30px;
    box-shadow:
        0 4px 40px #1b433212,
        0 1px 4px #1b43320d;
    border-radius: 15px;
    border: 1px solid var(--border);

    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease;
}


/* Card hover / glow */

.row-industries .card-glow .col-inner:hover {
    box-shadow:
        0 12px 60px #1b43321f,
        0 2px 8px #1b433212;

    border-color: var(--primary-color);

    transform: translateY(-3px);
}


/* ========================================
   ICON
======================================== */

/*.row-industries .icon svg {
    background-color: var(--sage);
    padding: 15px;
    border-radius: 15px;

    color: var(--forest);

    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}*/


/* Icon changes when anywhere in card is hovered */

.row-industries .card-glow .col-inner:hover .icon svg {
    color: var(--primary-color);
}


/* ========================================
   TITLE
======================================== */

.row-industries .card-glow .col-inner h3 {
    transition: color 0.3s ease;
}

.row-industries .card-glow .col-inner:hover h3 {
    color: var(--primary-color);
}


/* ========================================
   DESCRIPTION
======================================== */

.row-industries .col-description {
    margin-bottom: 15px;
}


/* ========================================
   LEARN MORE BUTTON
======================================== */

/* Normal state */

.row-industries .col-inner .col-btn {
    color: var(--muted) !important;

    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}


/* Hover anywhere inside the card */

.row-industries .card-glow .col-inner:hover .col-btn {
    color: var(--primary-color) !important;
}


/* Make the text inside the button follow the color */

.row-industries .card-glow .col-inner:hover .col-btn span {
    color: var(--primary-color) !important;
}


/* ========================================
   ARROW
======================================== */

.row-industries .icon-arrow-right span {
    display: inline-flex;
    align-items: center;
}


/* Arrow moves with card hover */

.row-industries .card-glow .col-inner:hover .nv-icon > a.plain {
  color: var(--primary-color);
  background-color: var(--primary-color-muted);
}


.col-hs-text-tick .col-inner {
    border-left: 1px solid var(--primary-color-dark);
    padding-left: 14px;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mt-0 *{
    margin-top: 0px !important;
}

.w-100 *{
    width: 100% !important;
}

.text-primary *{
    color: var(--primary-color) !important;
}

.text-primary-dark *{
    color: var(--primary-color-dark) !important;
}

.text-secondary *{
    color: var(--secondary-color) !important;
}

.text-secondary-dark *{
    color: var(--secondary-color-dark) !important;
}

.text-muted-light *{
    color: var(--muted-color-light) !important;
}

.text-muted *{
    color: var(--muted-color) !important;
}

a.button.secondary:hover {
    color: var(--primary-color-dark);
}

.btn-primary span {
    color: var(--secondary-color-dark);
}

.btn-padding {
    padding: 11px 15px;
}

.head-text-primary h1,
.head-text-primary h2 {
    line-height: 1;
}

.head-text-primary em {
    color: var(--primary-color) !important;
}

.head-text-secondary em {
    color: var(--secondary-color) !important;
}

.nvntrlnk-gradient .overlay {
    background: linear-gradient(90deg, rgb(27 67 50 / 85%) 0%, rgb(0 0 0 / 25%) 100%) !important;
}

.text-normal *{
    font-weight: normal!important;
}

.text-primary-font *{
    font-family: var(--primary-font) !important;
}

.text-shadow *{
    text-shadow: 1px 2px 3px rgb(0 0 0 / 50%);
}


a.button {
    border-radius: 10px !important;
}

a.button.primary.footer-book-btn {
    border-radius: 10px !important;
}

.btn-animate {
    animation: subtleZoom 3s ease-in-out infinite;
}

@keyframes subtleZoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}


/* ========================================
   TRUST & SECURITY SECTION
======================================== */


.row-trust .nv-icon .text-muted-light p {
    margin: 0 !important;
}

.row-trust .col-inner {
    height: 100%;
    padding: 20px 18px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.row-trust .col-inner:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
}

.row-trust .icon-box {
    text-align: center;
}

.row-trust h3 {
    font-size: 15px;
    line-height: 1.3;
    margin: 0 0 6px;
}

.row-trust .text-muted-light {
    color: var(--muted-color-light);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.row-trust .icon-box-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.row-trust .trust-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(184, 150, 46, 0.15);
    border-radius: 10px;
}

.row-trust .trust-icon::before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: var(--primary-color-dark);
}

.row-trust .trust-icon.icon-shield::before {
    -webkit-mask: var(--icon-shield-svg) center / contain no-repeat;
    mask: var(--icon-shield-svg) center / contain no-repeat;
}

.row-trust .trust-icon.icon-lockbox::before {
    -webkit-mask: var(--icon-lock-svg) center / contain no-repeat;
    mask: var(--icon-lock-svg) center / contain no-repeat;
}

.row-trust .trust-icon.icon-filecheck::before {
    -webkit-mask: var(--icon-filecheck-svg) center / contain no-repeat;
    mask: var(--icon-filecheck-svg) center / contain no-repeat;
}

.row-trust .trust-icon.icon-usercheck::before {
    -webkit-mask: var(--icon-usercheck-svg) center / contain no-repeat;
    mask: var(--icon-usercheck-svg) center / contain no-repeat;
}

.row-trust .trust-icon.icon-eye::before {
    -webkit-mask: var(--icon-eye-svg) center / contain no-repeat;
    mask: var(--icon-eye-svg) center / contain no-repeat;
}

.row-trust .trust-icon.icon-server::before {
    -webkit-mask: var(--icon-server-svg) center / contain no-repeat;
    mask: var(--icon-server-svg) center / contain no-repeat;
}


/* ========================================
   OUR VETTING PROCESS SECTION
======================================== */

.row-vetting {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 20px;
    align-items: start;
    position: relative;
}

.row-vetting::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 100px;
    right: 25px;
    height: 1px;
    background-color: rgba(184, 150, 46, 0.35);
    z-index: 0;
}

/* For a set of parallel facts/advantages rather than sequential steps —
   same grid alignment as .row-vetting, minus the connecting line. */
.row-vetting.no-connector::before {
    display: none;
}

/* Column-count modifiers for icon strips that don't have exactly 5 items —
   .row-vetting defaults to a fixed 5-column grid for the homepage's
   sequential steps, so a 4-item strip needs its own column count or it
   only fills 4 of 5 tracks and bunches to the left. */
.row-vetting.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.row-vetting.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.row-vetting .col-inner {
    text-align: center;
}

.row-vetting .vetting-step-number,
.row-vetting .icon-circle-badge {
    margin-left: auto;
    margin-right: auto;
}

.row-vetting .col {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
}

.row-vetting .col-inner {
    position: relative;
    transition: transform 0.35s ease-in-out;
    will-change: transform;
}

.row-vetting .col-inner:hover {
    transform: scale(1.05);
}

.vetting-step-number {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-color);
    font-family: var(--primary-font);
    font-size: 0.85rem;
    background-color: var(--secondary-color-dark);
    transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
}

.row-vetting .col-inner:hover .vetting-step-number {
    background-color: var(--primary-color);
    color: var(--secondary-color-dark);
}

/* Generic gold-ring icon badge — same look as .vetting-step-number but
   under its own name and hover scope, so components outside the
   homepage's row-vetting sequence (e.g. a plain featured_box icon
   strip) aren't coupled to that page's class. */
.icon-circle-badge {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-color);
    font-family: var(--primary-font);
    font-size: 0.85rem;
    background-color: var(--secondary-color-dark);
    transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
}

.icon-box:hover .icon-circle-badge {
    background-color: var(--primary-color);
    color: var(--secondary-color-dark);
}

/* Puts an icon-circle-badge beside a heading instead of stacked above it
   — used for numbered section headings like the offshore-team article's
   strategy badges. */
.badge-heading-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.badge-heading-row .icon-circle-badge {
    margin-bottom: 0;
    flex-shrink: 0;
    background-color: transparent;
    width: 45px;
    height: 45px;
    font-size: 2.3rem;
    padding-bottom: 10px;
    margin-top: 5px;
}

.icon-box:hover .icon-circle-badge .philippines-icon-inner {
    background-color: var(--secondary-color-dark);
}

/* Icon-based steps (a .philippines-icon-inner mask instead of a plain
   digit) keep their own gold background regardless of the parent's
   hover swap above — without this, hovering turns the circle gold and
   leaves a gold icon invisible against it. */
.row-vetting .col-inner:hover .vetting-step-number .philippines-icon-inner {
    background-color: var(--secondary-color-dark);
}

/* Same hover swap as .vetting-step-number above, for icon-circle-badge
   when it's used inside a genuine row-vetting grid (e.g. a 5-item strip
   that Flatsome's 12-column grid can't divide evenly on its own). */
.row-vetting .col-inner:hover .icon-circle-badge {
    background-color: var(--primary-color);
    color: var(--secondary-color-dark);
}

.row-vetting .col-inner:hover .icon-circle-badge .philippines-icon-inner {
    background-color: var(--secondary-color-dark);
}

.row-vetting h3 {
    font-size: 0.8rem;
    line-height: 1.3;
    margin: 0 0 10px;
}

.row-vetting .text-muted-light {
    color: var(--muted-color-light);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
}

/* ========================================
   ICON STRIP - 5 COLUMN GRID
   Independent of .row-vetting (the homepage's step sequence). Same
   underlying need — Flatsome's 12-column grid can't split 5 ways on
   its own — but its own name, so reusing it elsewhere (e.g. the True
   Cost article's cost-component icons) isn't coupled to that page.
======================================== */

.icon-strip-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 20px;
    align-items: start;
    position: relative;
}

.icon-strip-5 .col {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
}

.icon-strip-5 .col-inner {
    position: relative;
    text-align: center;
    transition: transform 0.35s ease-in-out;
    will-change: transform;
}

.icon-strip-5 .col-inner:hover {
    transform: scale(1.05);
}

.icon-strip-5 .icon-circle-badge {
    margin-left: auto;
    margin-right: auto;
}

.icon-strip-5 .col-inner:hover .icon-circle-badge {
    background-color: var(--primary-color);
    color: var(--secondary-color-dark);
}

.icon-strip-5 .col-inner:hover .icon-circle-badge .philippines-icon-inner {
    background-color: var(--secondary-color-dark);
}

.icon-strip-5 h3 {
    font-size: 0.8rem;
    line-height: 1.3;
    margin: 0 0 10px;
}

.icon-strip-5 .text-muted-light {
    color: var(--muted-color-light);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
}


/* ========================================
   THE PROCESS SECTION
======================================== */

.process-stat-box {
    background-color: var(--sage);
    border-radius: 15px;
    padding: 25px 30px;
}

.process-stat-box h3 {
    margin: 0 0 8px;
    font-size: 1.6rem;
    color: var(--secondary-color-dark);
}

.process-stat-box p {
    margin: 0;
    color: var(--muted-color);
    font-size: 0.9rem;
}

.process-steps {
    position: relative;
}

.process-steps::before {
    content: "";
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 25px;
    width: 1px;
    background-color: rgba(184, 150, 46, 0.35);
    z-index: 0;
}

.process-step {
    position: relative;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.process-step + .process-step {
    margin-top: 40px;
}

.process-step-number {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-color);
    font-family: var(--primary-font);
    font-size: 0.85rem;
    background-color: var(--cream);
}

.process-step-content h3 {
    margin: 0 0 8px;
    font-size: 1.3rem;
    color: var(--secondary-color-dark);
}

.process-step-content p {
    margin: 0;
    color: var(--muted-color);
}


/* ========================================
   WORKS WITH YOUR STACK SECTION
======================================== */

.stack-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.stack-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    color: #fff;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.stack-pill:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
}

.stack-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-color);
    flex-shrink: 0;
}

.stack-pill-label {
    color: var(--muted-color-light);
    font-size: 0.85rem;
}


/* ========================================
   OUR PEOPLE SECTION
======================================== */

.people-card .col-inner {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.people-card .col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.people-card .icon-box-text {
    display: flex;
    flex-direction: column;
}

.people-card-title h3 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 20px;
}

.people-card-tools {
    margin-top: 10px;
    transition: opacity 0.2s ease;
}

.people-card:hover .people-card-tools {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.people-card-tools p {
    margin: 0;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    font-weight: 600;
}

.people-card-details {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.people-card:hover .people-card-details {
    max-height: 300px;
    opacity: 1;
    margin-top: 20px;
}

.people-card-details p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 14px;
}

.people-card-details ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.people-card-details li {
    position: relative;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    padding-left: 16px;
    margin-bottom: 8px;
    margin-left: 0 !important;
}

.people-card-details li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.people-footer .col-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.people-footer .button {
    margin: 0;
}

.people-footer-divider {
    color: var(--border);
    margin-right: 6px;
}

.people-footer p {
    margin: 0;
    color: var(--muted-color);
}

.people-footer-link {
    color: var(--secondary-color-dark);
    text-decoration: underline;
}

.people-footer-link:hover {
    color: var(--primary-color-dark);
}


/* ========================================
   PRICING SECTION
======================================== */

.pricing-compare .col-inner {
    height: 100%;
    width: calc(100% - 20px);
    padding: 40px;
    margin-right: 20px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    box-sizing: border-box;
}

.pricing-row + .pricing-row {
    margin-top: 36px;
}

.pricing-row-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.pricing-row-header h3 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0;
}

.pricing-savings {
    color: var(--primary-color) !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0;
    white-space: nowrap;
}

.pricing-bar-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pricing-bar-group + .pricing-bar-group {
    margin-top: 14px;
}

.pricing-bar-label {
    flex: 0 0 90px;
    color: var(--muted-color-light);
    font-size: 0.85rem;
}

.pricing-bar {
    position: relative;
    flex: 1;
    height: 40px;
}

.pricing-bar-fill {
    height: 100%;
    width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
    border-radius: 50px;
    box-sizing: border-box;
}

.pricing-bar-fill.is-local {
    background-color: rgba(255, 255, 255, 0.15);
}

.pricing-bar-fill.is-noventralink {
    background-color: var(--primary-color);
}

.pricing-bar-fill.is-local .pricing-count {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.pricing-bar-fill.is-noventralink .pricing-count {
    color: var(--secondary-color-dark);
    font-size: 0.85rem;
    font-weight: 700;
}

.pricing-footer-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pricing-footer-note p {
    margin: 0;
    color: var(--muted-color-light);
    font-size: 0.8rem;
}

a.button.pricing-footer-link {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
}

.pricing-included .col-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: calc(100% - 20px);
    margin-left: 20px;
    padding: 40px;
    background-color: var(--primary-color);
    border-radius: 15px;
    box-sizing: border-box;
}

.pricing-included .button {
    margin-top: auto;
}

.pricing-included-label {
    color: var(--secondary-color-dark) !important;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 16px;
}

.pricing-included h3 {
    color: var(--secondary-color-dark);
    font-size: 1.6rem;
    margin: 0 0 24px;
}

.pricing-included-list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}

.pricing-included-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--secondary-color-dark);
    font-size: 1rem;
    margin-left: 0px !important;
}

.pricing-included-list li + li {
    margin-top: 16px;
}

.pricing-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--secondary-color-dark);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.pricing-cta {
    background-color: var(--secondary-color-dark) !important;
    color: #fff !important;
}

/* ========================================
   CLIENT STORIES SECTION
======================================== */

.testimonial-card .col-inner {
    background-color: var(--sage);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.testimonial-card .col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(27, 67, 50, 0.12);
    border-color: var(--primary-color);
}

.testimonial-icon {
    width: 34px;
    height: 26px;
    margin-bottom: 20px;
    background-color: var(--primary-color);
    -webkit-mask: var(--icon-quote-svg) center / contain no-repeat;
    mask: var(--icon-quote-svg) center / contain no-repeat;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.testimonial-card .col-inner:hover .testimonial-icon {
    transform: scale(1.15);
    background-color: var(--secondary-color-dark);
}

.testimonial-quote {
    margin: 0 0 24px;
    color: var(--muted-color);
    font-size: 1rem;
    line-height: 1.6;
}

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.testimonial-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--secondary-color-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.testimonial-person h4 {
    margin: 0;
    color: var(--secondary-color-dark);
    font-size: 0.95rem;
}

.testimonial-person p {
    margin: 0;
    color: var(--muted-color);
    font-size: 0.8rem;
}

/* ========================================
   FAQ SECTION
======================================== */

.faq-body .col-inner {
    display: block;
}

.faq-body .col-inner::after {
    content: "";
    display: table;
    clear: both;
}

.faq-body .tabbed-content {
    display: contents;
}

.faq-body .tabbed-content > .nav {
    float: left;
    width: 300px !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-body .nav > li {
    list-style: none;
    margin: 0 !important;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.faq-body .nav > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: var(--muted-color);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    transition: color 0.3s ease;
}

.faq-body .nav > li > a::before {
    display: none !important;
}

.faq-body .nav > li:hover {
    border-color: var(--primary-color);
    background-color: rgba(184, 150, 46, 0.08);
}

.faq-body .nav > li:hover:not(.active) > a {
    color: var(--primary-color-dark);
}

.faq-body .nav > li.active {
    background-color: var(--secondary-color-dark);
    border-color: var(--secondary-color-dark);
}

.faq-body .nav > li.active > a {
    color: #fff;
}

.faq-tab-count {
    color: var(--muted-color-light);
    font-weight: 400;
    font-size: 0.85rem;
}

.faq-body .nav > li.active .faq-tab-count {
    color: var(--primary-color);
}

.faq-cta-box {
    float: left;
    clear: left;
    width: 300px;
    margin-top: 24px;
    background-color: var(--sage);
    border-radius: 12px;
    padding: 24px;
}

.faq-cta-box p {
    margin: 0 0 16px;
    color: var(--muted-color);
}

.faq-body .tabbed-content > .tab-panels {
    float: right;
    width: calc(100% - 350px) !important;
    border-left: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.faq-body .accordion_title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 20px;
    color: var(--secondary-color-dark);
    font-size: 1.6rem;
    font-family: Playfair Display, serif !important;
    text-transform: none !important;
    font-variant: normal !important;
    font-weight: normal !important;
}

.faq-count-badge {
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: DM Sans, sans-serif;
}

.faq-body .accordion-item {
    border-top: none !important;
}

.faq-body .accordion-item + .accordion-item {
    border-top: 1px solid var(--border) !important;
}

.faq-body .accordion-title {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0 !important;
    border: none !important;
    color: var(--secondary-color-dark);
    font-size: 1.05rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.faq-body .accordion-title span {
    order: 1;
    flex: 1;
    text-align: left;
}

.faq-body .accordion-title:hover {
    color: var(--primary-color);
    background-color: transparent !important;
}

.faq-body .accordion-title.active {
    background-color: transparent !important;
    border: none !important;
    color: var(--secondary-color-dark);
    font-weight: 500;
}

.faq-body .accordion-inner {
    padding: 0 0 20px !important;
    color: var(--muted-color);
}

.faq-body .toggle {
    order: 2;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    opacity: 1;
}

.faq-body .toggle i.icon-angle-down {
    display: none;
}

.faq-body .toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--muted-color-light);
    -webkit-mask: var(--icon-plus-svg) center / contain no-repeat;
    mask: var(--icon-plus-svg) center / contain no-repeat;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.faq-body .accordion-title:hover .toggle::before {
    background-color: var(--primary-color);
}

.faq-body .accordion-title.active .toggle::before {
    background-color: var(--primary-color);
    transform: rotate(45deg);
}

/* ========================================
   FOOTER SECTION
======================================== */

.footer-step-list {
    margin: 30px 0;
}

.footer-step {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-step + .footer-step {
    margin-top: 20px;
}

.footer-step-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--primary-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.footer-step p {
    margin: 0;
    color: var(--muted-color-light);
}

.footer-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 10px 0 20px;
}

.footer-email-note p {
    margin: 0 0 4px;
    color: var(--muted-color-light);
    font-size: 0.85rem;
}

a.button.footer-email-btn {
    color: var(--primary-color);
    font-weight: 700;
}

.footer-form-card {
    height: 100%;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    box-sizing: border-box;
}

.nvn-footer-form .cf7-row {
    margin-bottom: 16px;
}

.nvn-footer-form .cf7-row:last-child {
    margin-bottom: 0;
}

.footer-form-card .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.footer-form-card .cf7-row-half {
    grid-column: span 1;
}

.footer-form-card .cf7-row:not(.cf7-row-half) {
    grid-column: 1 / -1;
}

.nvn-footer-form label {
    display: block;
    color: var(--muted-color-light);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.nvn-footer-form .wpcf7-select option {
    background-color: var(--secondary-color-dark);
}

.nvn-footer-form .wpcf7-form-control {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 9px 14px;
    color: #fff !important;
    font-size: 0.9rem;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    height: 50px;
}

.nvn-footer-form .wpcf7-form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.nvn-footer-form .wpcf7-form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.09);
}

.nvn-footer-form .wpcf7-form-control:-webkit-autofill,
.nvn-footer-form .wpcf7-form-control:-webkit-autofill:hover,
.nvn-footer-form .wpcf7-form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.06) inset;
    box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.06) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.nvn-footer-form .wpcf7-form-control:autofill {
    box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.06) inset;
    color: #fff !important;
}

.nvn-footer-form textarea.wpcf7-form-control {
    min-height: 100px;
    resize: vertical;
}

.nvn-footer-form select.wpcf7-form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ACB8AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

.nvn-footer-form .wpcf7-submit {
    width: 100%;
    color: var(--secondary-color-dark) !important;
    border: none;
    padding: 16px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.nvn-footer-form .wpcf7-submit:hover {
    background-color: var(--primary-color-dark);
}

.nvn-footer-form .cf7-privacy-note {
    margin: 12px 0 0;
    text-align: center;
    color: var(--muted-color-light);
    font-size: 0.75rem;
}

.nvn-footer-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
}

.nvn-footer-form .wpcf7-response-output {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    margin: 16px 0 0 !important;
    border-radius: 8px;
    padding: 12px 16px !important;
    font-size: 0.85rem;
    color: var(--muted-color-light);
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-tagline {
    color: var(--muted-color-light);
    margin: 0 0 24px;
}

.footer-address-block {
    margin-bottom: 16px;
}

.footer-address-label {
    color: var(--muted-color-light);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 4px;
}

.footer-address-block p:not(.footer-address-label) {
    margin: 0;
    color: var(--muted-color-light);
    font-size: 0.9rem;
}

.footer-book-btn {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color-dark) !important;
    margin-top: 10px;
}

.footer-newsletter-heading {
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.footer-newsletter-text {
    color: var(--muted-color-light);
    margin: 0 0 20px;
}

.footer-links-row {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 60px;
    padding-top: 50px;
}

.footer-col-heading {
    color: #fff;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 20px;
}

.footer-menu.ux-menu {
    --stack-gap: 14px;
}

.footer-menu .ux-menu-link__link {
    border-bottom: none;
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
    color: var(--muted-color-light);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-menu .ux-menu-link__link:hover {
    color: var(--primary-color);
}

.footer-menu .ux-menu-link__text {
    padding-left: 0;
}

.footer-menu .sm-linkedin .ux-menu-link__link::before,
.footer-menu .sm-facebook .ux-menu-link__link::before,
.footer-menu .sm-instagram .ux-menu-link__link::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 8px;
    background-color: currentColor;
}

.footer-menu .sm-linkedin .ux-menu-link__link::before {
    -webkit-mask: var(--icon-linkedin-svg) center / contain no-repeat;
    mask: var(--icon-linkedin-svg) center / contain no-repeat;
}

.footer-menu .sm-facebook .ux-menu-link__link::before {
    -webkit-mask: var(--icon-facebook-svg) center / contain no-repeat;
    mask: var(--icon-facebook-svg) center / contain no-repeat;
}

.footer-menu .sm-instagram .ux-menu-link__link::before {
    -webkit-mask: var(--icon-instagram-svg) center / contain no-repeat;
    mask: var(--icon-instagram-svg) center / contain no-repeat;
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

.pricing-bar-label {
    flex-basis: 70px;
    font-size: 0.75rem;
}

.pricing-compare .col-inner,
.pricing-included .col-inner {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.pricing-included .col-inner {
    margin-top: 24px;
}

.row-vetting {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
}

.row-vetting::before {
    display: none;
}

/* .cols-4/.cols-3 have higher specificity than the plain .row-vetting
   rule above, so they need their own mobile override here or they
   keep forcing 4/3 columns at every width regardless of screen size. */
.icon-strip-5 {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
}

.row-vetting.cols-4,
.row-vetting.cols-3 {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
}

.process-step {
    gap: 16px;
}

.process-step + .process-step {
    margin-top: 30px;
}

.stack-pill {
    padding: 10px 16px;
    font-size: 0.85rem;
}

.faq-body .tabbed-content > .nav {
    float: none;
    width: 100% !important;
}

.faq-cta-box {
    float: none;
    width: 100%;
    margin-top: 24px;
}

.faq-body .tabbed-content > .tab-panels {
    float: none;
    width: 100% !important;
    margin-top: 24px !important;
}

.footer-form-card .wpcf7-form {
    grid-template-columns: 1fr;
}

.footer-form-card .cf7-row-half {
    grid-column: 1 / -1;
}

}

/* ========================================
   HOW IT WORKS - HERO SECTION
======================================== */

.process-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.process-hero-stat {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.02);
}

.process-hero-stat-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 16px;
    background-color: var(--primary-color);
}

.process-hero-stat-icon.icon-clock {
    -webkit-mask: var(--icon-clock-svg) center / contain no-repeat;
    mask: var(--icon-clock-svg) center / contain no-repeat;
}

.process-hero-stat-icon.icon-users {
    -webkit-mask: var(--icon-users-svg) center / contain no-repeat;
    mask: var(--icon-users-svg) center / contain no-repeat;
}

.process-hero-stat-icon.icon-shield {
    -webkit-mask: var(--icon-shield-svg) center / contain no-repeat;
    mask: var(--icon-shield-svg) center / contain no-repeat;
}

.process-hero-stat-icon.icon-barchart {
    -webkit-mask: var(--icon-barchart-svg) center / contain no-repeat;
    mask: var(--icon-barchart-svg) center / contain no-repeat;
}

.process-hero-stat-value {
    color: #fff;
    font-size: 1.4rem;
    margin: 0 0 6px;
}

.process-hero-stat-label {
    color: var(--muted-color-light);
    font-size: 0.8rem;
    margin: 0;
}

@media (max-width: 549px) {
    .process-hero-stats {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   HOW IT WORKS - THE FULL PROCESS SECTION
======================================== */

.process-detail-step {
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
}

.process-detail-step:first-of-type {
    padding-top: 0;
}

.process-detail-step:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.process-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.process-detail-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--primary-color);
    color: var(--secondary-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primary-font);
    font-style: normal;
    font-size: 0.85rem;
}

.process-detail-title {
    color: var(--secondary-color-dark);
    font-size: 1.3rem;
    margin: 0;
}

.process-detail-time {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted-color);
    font-size: 0.75rem;
    margin: 4px 0 0;
}

.process-detail-time-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-color: var(--muted-color);
    -webkit-mask: var(--icon-clock-svg) center / contain no-repeat;
    mask: var(--icon-clock-svg) center / contain no-repeat;
}

.process-detail-desc {
    color: var(--secondary-color);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.process-detail-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.process-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--secondary-color);
    font-size: 0.95rem;
    line-height: 1.5;
}

.process-detail-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: var(--primary-color);
    -webkit-mask: var(--icon-checkcircle-svg) center / contain no-repeat;
    mask: var(--icon-checkcircle-svg) center / contain no-repeat;
}

.process-detail-callout {
    background-color: var(--sage);
    border-radius: 10px;
    padding: 18px 24px;
    margin-top: 20px;
}

.process-detail-callout p {
    color: var(--muted-color);
    font-style: italic;
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 849px) {
    .process-detail-head {
        margin-bottom: 20px;
    }
}

/* ========================================
   HOW IT WORKS - WHAT'S INCLUDED SECTION
======================================== */

.fee-included-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.fee-included-card {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
}

.fee-included-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color);
    margin-bottom: 16px;
}

.fee-included-card h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 10px;
}

.fee-included-card p {
    color: var(--muted-color-light);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 849px) {
    .fee-included-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   HOW IT WORKS - PROCESS FAQ SECTION
======================================== */

.faq-simple-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}

.faq-simple-item:first-of-type {
    padding-top: 0;
}

.faq-simple-item:last-of-type {
    border-bottom: none;
}

.faq-simple-item h3 {
    color: var(--secondary-color-dark);
    font-size: 1.3rem;
    margin: 0 0 10px;
}

.faq-simple-item p {
    color: var(--secondary-color);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.faq-simple-footer > .col-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.faq-simple-divider {
    color: var(--muted-color);
}

a.button.faq-simple-link {
    color: var(--secondary-color-dark);
    font-weight: 700;
}

a.button.faq-simple-link:hover {
    color: var(--primary-color);
}

/* ========================================
   ROLES PAGE - HERO SECTION
======================================== */

.roles-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.roles-hero-stat {
    flex: 1;
    min-width: 200px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
}

.roles-hero-stat-value {
    color: #fff;
    font-size: 1.4rem;
    margin: 0 0 6px;
}

.roles-hero-stat-label {
    color: var(--muted-color-light);
    font-size: 0.8rem;
    margin: 0;
}

/* ========================================
   ROLES PAGE - TALENT DIRECTORY SECTION
======================================== */

.roles-filter-bar {
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0 30px;
}

.roles-filter-pill {
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    padding: 6px 15px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background-color: var(--cream);
    color: var(--secondary-color-dark);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.roles-filter-pill:hover {
    border-color: var(--secondary-color-dark);
    color: var(--secondary-color-dark);
}

.roles-filter-pill.is-active {
    background-color: var(--secondary-color-dark);
    border-color: var(--secondary-color-dark);
    color: #fff;
}

.roles-category {
    margin-bottom: 60px;
}

.roles-category:last-child {
    margin-bottom: 0;
}

.roles-category-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
    margin-bottom: 24px;
}

.roles-category-header h3 {
    width: auto;
    color: var(--secondary-color-dark);
    font-size: 1.8rem;
    margin: 0;
    white-space: nowrap;
}

.roles-category-header .roles-category-line {
    flex: 1;
    height: 1px;
    background-color: var(--border);
}

.roles-category-header p {
    display: contents;
    margin: 0;
}

.roles-category-header .roles-category-count {
    flex-shrink: 0;
    align-self: center;
    color: var(--muted-color);
    font-size: 0.75rem;
    line-height: 1;
    margin: 0;
}

.roles-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.roles-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background-color: var(--cream);
    border: 1px solid var(--border);
    border-radius: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.roles-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.roles-card h4 {
    color: var(--secondary-color-dark);
    font-size: 1.2rem;
    margin: 0 0 8px;
}

.roles-card p {
    color: var(--muted-color);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 0 16px;
    flex: 1;
}

.roles-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.roles-card-tags span {
    padding: 4px 10px;
    background-color: var(--sage);
    border: 1px solid var(--border);
    border-radius: 50px;
    font-size: 0.7rem;
    color: var(--muted-color);
}

@media (max-width: 1199px) {
    .roles-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 849px) {
    .roles-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .roles-category-header {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .roles-category-header h3 {
        white-space: normal;
        flex: 1 1 100%;
    }

    .roles-category-header .roles-category-line {
        display: none;
    }
}

@media (max-width: 549px) {
    .roles-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   CALCULATOR PAGE - COST CALCULATOR TOOL
======================================== */

.calc-inputs {
    background-color: var(--cream);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
}

.calc-field {
    margin-bottom: 28px;
}

.calc-label {
    display: block;
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.calc-select {
    display: block;
    width: 100%;
    height: auto;
    line-height: 1.4;
    padding: 14px 40px 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: #fff;
    background-image: var(--icon-chevrondown-select-svg);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    color: var(--secondary-color-dark) !important;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.calc-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(184, 150, 46, 0.2);
}

.calc-hint {
    color: var(--muted-color);
    font-size: 0.8rem;
    margin: 8px 0 0;
}

.calc-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.calc-staff-count {
    color: var(--secondary-color-dark);
    font-weight: 700;
    font-size: 1.1rem;
}

.calc-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.calc-slider-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: #fff;
    color: var(--secondary-color-dark);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calc-slider-btn:hover {
    border-color: var(--secondary-color-dark);
}

.calc-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background-color: var(--border);
    outline: none;
}

.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--secondary-color-dark);
    cursor: pointer;
}

.calc-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background-color: var(--secondary-color-dark);
    cursor: pointer;
}

.calc-slider-labels {
    display: flex;
    justify-content: space-between;
    color: var(--muted-color);
    font-size: 0.75rem;
    margin-top: 8px;
}

.calc-divider {
    height: 1px;
    background-color: var(--border);
    margin: 28px 0;
}

.calc-cost-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.calc-cost-label {
    color: var(--muted-color);
}

.calc-cost-value {
    color: var(--secondary-color-dark);
    font-weight: 700;
}

.calc-cost-value-gold {
    color: var(--primary-color-dark);
}

.calc-bar {
    height: 28px;
    background-color: var(--sage);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.calc-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

.calc-bar-local {
    background-color: var(--secondary-color-dark);
}

.calc-bar-fee {
    background-color: var(--primary-color);
}

.calc-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.calc-savings-box {
    background-color: var(--secondary-color-dark);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
}

.calc-savings-label {
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.calc-savings-value {
    color: var(--primary-color);
    font-size: 3rem;
    margin: 0 0 12px;
}

.calc-savings-sub {
    color: var(--muted-color-light);
    font-size: 0.9rem;
    margin: 0;
}

.calc-savings-sub strong {
    color: #fff;
}

.calc-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.calc-stat {
    background-color: var(--cream);
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 24px;
    text-align: center;
}

.calc-stat-icon {
    width: 26px;
    height: 26px;
    margin: 0 auto 12px;
    background-color: var(--primary-color);
}

.calc-stat-icon.icon-trenddown {
    -webkit-mask: var(--icon-trenddown-svg) center / contain no-repeat;
    mask: var(--icon-trenddown-svg) center / contain no-repeat;
}

.calc-stat-icon.icon-dollarsign {
    -webkit-mask: var(--icon-dollarsign-svg) center / contain no-repeat;
    mask: var(--icon-dollarsign-svg) center / contain no-repeat;
}

.calc-stat-icon.icon-clock {
    -webkit-mask: var(--icon-clock-svg) center / contain no-repeat;
    mask: var(--icon-clock-svg) center / contain no-repeat;
}

.calc-stat-value {
    color: var(--secondary-color-dark);
    font-size: 1.5rem;
    margin: 0 0 4px;
}

.calc-stat-label {
    color: var(--muted-color);
    font-size: 0.8rem;
    margin: 0;
}

.calc-cta-box {
    background-color: var(--sage);
    border-radius: 20px;
    padding: 30px;
}

.calc-disclaimer {
    color: var(--muted-color);
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0 0 20px;
}

a.button.calc-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    background-color: var(--primary-color);
    border-radius: 50px;
    color: var(--secondary-color-dark);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}

a.button.calc-cta-button:hover {
    background-color: var(--primary-color-dark);
}

a.button.calc-cta-button::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: var(--secondary-color-dark);
    -webkit-mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    mask: var(--icon-arrow-right-svg) center / contain no-repeat;
}

@media (max-width: 549px) {
    .calc-inputs,
    .calc-savings-box {
        padding: 28px;
    }

    .calc-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   SITE-WIDE - SINGLE-COLUMN HERO CENTERING
   Standard pattern for any hero section that uses one column
   (span="12") instead of a two-column layout: add class
   "hero-center-col" to that [col] and its content will be
   centered/constrained via CSS rather than spacer columns.
======================================== */

.hero-center-col > .col-inner {
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

/* ========================================
   SITE-WIDE - GOLD PILL BUTTON
   Reusable CTA style: gold fill, dark green text, uppercase, pill
   shape. Add class "btn-gold-pill" to any [button].
======================================== */

a.button.btn-gold-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 14px 32px;
    background-color: var(--primary-color);
    border-radius: 50px;
    color: var(--secondary-color-dark);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

a.button.btn-gold-pill:hover {
    background-color: var(--primary-color-dark);
}

/* ux_menu_link version of the gold CTA button above — same
   ux-menu-link reset as .view-all-roles-link, plus flex+justify-center
   on the outer element (a stack-col child stretches full width by
   default) so it still centers like the old inline a.button did, and
   an explicit hover color to beat the theme's
   ".dark .ux-menu-link:hover .ux-menu-link__link" rule. */
.ux-menu-link.btn-primary.btn-cta {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.btn-primary.btn-cta .ux-menu-link__link {
    flex: none;
    min-height: 0;
    padding: 14px 32px;
    border-bottom: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    border-radius: 10px;
    color: var(--secondary-color-dark);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ux-menu-link.btn-primary.btn-cta:hover {
    background-color: transparent;
}

.ux-menu-link.btn-primary.btn-cta:hover .ux-menu-link__link,
.dark .ux-menu-link.btn-primary.btn-cta:hover .ux-menu-link__link {
    background-color: var(--primary-color-dark);
    color: var(--secondary-color-dark);
}

/* Plain text link + arrow — same ux_menu_link workaround as
   .btn-primary.btn-cta above, styled to match .why-cta-link's look
   (no box/border, muted text, arrow that nudges right on hover). */
.btn-bmg .ux-menu-link__link {
    flex: none;
    min-height: 0;
    padding: 0;
    border-bottom: none;
    display: inline-flex;
    align-items: center;
    background: none;
    color: var(--muted-color-light);
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 16px;
}

.btn-bmg .ux-menu-link__link::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
    background-color: var(--muted-color-light);
    -webkit-mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.ux-menu-link.btn-bmg:hover .ux-menu-link__link,
.dark .ux-menu-link.btn-bmg:hover .ux-menu-link__link {
    background-color: transparent;
    color: #fff;
}

.ux-menu-link.btn-bmg:hover .ux-menu-link__link::after {
    background-color: #fff;
    transform: translateX(4px);
}

/* Pairs two ux_menu_link buttons side by side, vertically centered —
   [ux_menu] always renders "stack-col" (flex-direction: column) with
   no built-in row option, so a two-button pair needs this override to
   sit inline instead of stacking with a large column gap between them. */
.ux-menu.btn-pair {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;
}

/* .btn-bmg's inner link carries margin-top: 16px for when it sits
   stacked below other content — inside a btn-pair row that extra
   height throws off vertical centering against the pill button. */
.btn-pair .btn-bmg .ux-menu-link__link {
    margin-top: 0;
}

/* ========================================
   ABOUT PAGE - OUR STORY SECTION
======================================== */

.about-story-image-col > .col-inner {
    position: relative;
}

.about-story-image-col img {
    border-radius: 20px;
}

.about-story-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.about-story-caption-title {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 4px;
}

.about-story-caption-sub {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    margin: 0;
}

.about-story-block {
    margin-bottom: 40px;
}

.about-story-block h3 {
    color: var(--secondary-color-dark);
    font-size: 1.5rem;
    margin: 0 0 16px;
}

.about-story-block p {
    color: var(--muted-color);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 16px;
}

.about-story-block p:last-child {
    margin-bottom: 0;
}

.about-story-quote {
    margin: 0 0 40px;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--primary-color);
}

.about-story-quote p {
    color: var(--secondary-color-dark);
    font-style: italic;
    font-size: 1.7rem;
    line-height: 1.3;
    margin: 0;
    font-family: var(--primary-font);
}

.about-story-card > .col-inner {
    padding: 24px;
    background-color: var(--cream);
    border: 1px solid var(--border);
    border-radius: 15px;
    height: 100%;
}

.about-story-card-label {
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color) !important;
    margin: 0 0 6px !important;
    line-height: 1.4 !important;
}

.about-story-card h5 {
    color: var(--secondary-color-dark);
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.1rem;
    font-variant: normal;
    text-transform: none;
    margin: 0 0 8px;
}

.about-story-card p {
    color: var(--muted-color);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.about-story-card p strong {
    color: var(--secondary-color-dark);
}

.about-story-card .icon-box-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    background-color: var(--sage);
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    padding: 0 !important;
}

.about-story-card .icon-box-img .icon,
.about-story-card .icon-box-img .icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
}

.about-story-card .icon-box-img img {
    padding: 0 !important;
    margin: 0 !important;
    width: 22px !important;
    height: auto !important;
}

/* ========================================
   ABOUT PAGE - CORE VALUES SECTION
======================================== */

.core-value-card > .col-inner {
    height: 100%;
    padding: 40px 32px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
}

.core-value-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-value-icon-inner {
    width: 28px;
    height: 28px;
    background-color: var(--primary-color);
}

.core-value-icon-inner.icon-shield {
    -webkit-mask: var(--icon-shield-svg) center / contain no-repeat;
    mask: var(--icon-shield-svg) center / contain no-repeat;
}

.core-value-icon-inner.icon-users {
    -webkit-mask: var(--icon-users-svg) center / contain no-repeat;
    mask: var(--icon-users-svg) center / contain no-repeat;
}

.core-value-icon-inner.icon-globe {
    -webkit-mask: var(--icon-globe-svg) center / contain no-repeat;
    mask: var(--icon-globe-svg) center / contain no-repeat;
}

.core-value-icon-inner.icon-award {
    -webkit-mask: var(--icon-award-svg) center / contain no-repeat;
    mask: var(--icon-award-svg) center / contain no-repeat;
}

.core-value-card h3 {
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.3;
    margin: 0 0 12px;
}

.core-value-card p {
    color: var(--muted-color-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 849px) {
    .core-value-card {
        margin-bottom: 20px;
    }
}

/* ========================================
   ABOUT PAGE - THE TEAM SECTION
======================================== */

.team-card > .col-inner {
    height: 100%;
    padding: 32px 24px;
    text-align: center;
    background-color: var(--cream);
    border: 1px solid var(--border);
    border-radius: 20px;
}

.team-card .icon-box-img {
    margin: 0 auto 20px;
}

.team-card .icon-box-img img {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50%;
    object-fit: cover;
}

.team-card .icon-box-text {
    text-align: center;
}

.team-card h5 {
    color: var(--secondary-color-dark);
    font-family: var(--primary-font);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: none;
    margin: 0 0 6px;
}

.team-card-role {
    color: var(--primary-color) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 8px !important;
}

.team-card p {
    color: var(--muted-color);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 849px) {
    .team-card {
        margin-bottom: 20px;
    }
}

/* ========================================
   ABOUT PAGE - WHY THE PHILIPPINES SECTION
======================================== */

.philippines-card {
    display: flex;
    align-self: stretch;
}

.philippines-card > .col-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
}

.philippines-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.philippines-icon-inner {
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
}

.philippines-icon-inner.icon-globe {
    -webkit-mask: var(--icon-globe-svg) center / contain no-repeat;
    mask: var(--icon-globe-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-graduationcap {
    -webkit-mask: var(--icon-graduationcap-svg) center / contain no-repeat;
    mask: var(--icon-graduationcap-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-users {
    -webkit-mask: var(--icon-users-svg) center / contain no-repeat;
    mask: var(--icon-users-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-clock {
    -webkit-mask: var(--icon-clock-svg) center / contain no-repeat;
    mask: var(--icon-clock-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-network {
    -webkit-mask: var(--icon-network-svg) center / contain no-repeat;
    mask: var(--icon-network-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-trendup {
    -webkit-mask: var(--icon-trendup-svg) center / contain no-repeat;
    mask: var(--icon-trendup-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-dollarsign {
    -webkit-mask: var(--icon-dollarsign-svg) center / contain no-repeat;
    mask: var(--icon-dollarsign-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-briefcase {
    -webkit-mask: var(--icon-briefcase-svg) center / contain no-repeat;
    mask: var(--icon-briefcase-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-shield {
    -webkit-mask: var(--icon-shield-svg) center / contain no-repeat;
    mask: var(--icon-shield-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-trenddown {
    -webkit-mask: var(--icon-trenddown-svg) center / contain no-repeat;
    mask: var(--icon-trenddown-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-filecheck {
    -webkit-mask: var(--icon-filecheck-svg) center / contain no-repeat;
    mask: var(--icon-filecheck-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-checkcircle {
    -webkit-mask: var(--icon-checkcircle-svg) center / contain no-repeat;
    mask: var(--icon-checkcircle-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-mail {
    -webkit-mask: var(--icon-mail-svg) center / contain no-repeat;
    mask: var(--icon-mail-svg) center / contain no-repeat;
}

.philippines-icon-inner.icon-uploadcloud {
    -webkit-mask: var(--icon-uploadcloud-svg) center / contain no-repeat;
    mask: var(--icon-uploadcloud-svg) center / contain no-repeat;
}

.philippines-card h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 10px;
}

.philippines-card p {
    color: var(--muted-color-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 849px) {
    .philippines-card {
        margin-bottom: 20px;
    }
}

/* ========================================
   WHY NOVENTRALINK PAGE - HERO SECTION
======================================== */

.why-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.why-hero-stat {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
}

.why-hero-stat h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 6px;
}

.why-hero-stat p {
    color: var(--muted-color-light);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 549px) {
    .why-hero-stats {
        grid-template-columns: 1fr;
    }
}

.why-narrow-row {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

.why-eyebrow {
    color: var(--primary-color) !important;
    font-family: "DM Sans", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 12px !important;
}

.why-block {
    border-top: 1px solid var(--border);
    padding-top: 60px;
    margin-top: 60px;
}

.why-block h2 {
    color: var(--secondary-color-dark);
    font-size: 1.8rem;
    margin: 0 0 24px;
}

.why-block p {
    color: var(--muted-color);
    font-size: 0.95rem;
    line-height: 1.75;
    margin: 0 0 18px;
}

.why-block p:last-child {
    margin-bottom: 0;
}

.why-option-card > .col-inner {
    height: 100%;
    padding: 32px 28px;
    background-color: var(--cream);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary-color);
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-option-card > .col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(27, 67, 50, 0.1);
}

.why-option-card h3 {
    color: var(--secondary-color-dark);
    font-size: 1.3rem;
    margin: 0 0 16px;
}

.why-option-card p {
    color: var(--muted-color);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 14px;
}

.why-option-card p:last-child {
    margin-bottom: 0;
}

.why-stat-compare {
    display: flex;
    background-color: var(--cream);
    border-radius: 16px;
    overflow: hidden;
    margin: 8px 0 32px;
}

.why-stat-item {
    flex: 1;
    text-align: center;
    padding: 32px 20px;
}

.why-stat-item + .why-stat-item {
    border-left: 1px solid var(--border);
}

.why-stat-num {
    display: block;
    font-family: var(--primary-font);
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 8px;
}

.why-stat-num-ok {
    color: var(--secondary-color-dark);
}

.why-stat-num-warn {
    color: #C0574B;
}

.why-stat-label {
    color: var(--muted-color);
    font-size: 0.85rem;
}

.why-quote-box {
    margin-top: 24px;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--primary-color-dark);
}

.why-quote-box p {
    color: var(--secondary-color-dark);
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.4;
    margin: 0 !important;
    font-family: var(--primary-font);
}

@media (max-width: 549px) {
    .why-stat-compare {
        flex-direction: column;
    }

    .why-stat-item + .why-stat-item {
        border-left: none;
        border-top: 1px solid var(--border);
    }
}

.differentiator-card > .col-inner {
    height: 100%;
    padding: 32px;
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.differentiator-card > .col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(27, 67, 50, 0.1);
    border-color: var(--primary-color);
}

.differentiator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color-dark);
    margin-bottom: 16px;
}

.differentiator-card h3 {
    color: var(--secondary-color-dark);
    font-size: 1.25rem;
    margin: 0 0 12px;
}

.differentiator-card p {
    color: var(--muted-color);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

.why-risk-col h2 {
    color: #fff;
    font-size: 2rem;
    line-height: 1.15;
    margin: 0 0 24px;
}

.why-risk-col h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 12px;
}

.why-risk-col p {
    color: var(--muted-color-light);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 24px;
}

.why-risk-col p:last-child {
    margin-bottom: 0;
}

.why-risk-callout {
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color-dark);
    border-radius: 16px;
    padding: 28px 32px;
    margin: 0 0 32px;
}

.why-risk-callout p {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.alternatives-card > .col-inner {
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--secondary-color-dark);
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.alternatives-card > .col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(27, 67, 50, 0.1);
}

.alternatives-card h3 {
    color: var(--secondary-color-dark);
    font-size: 1.1rem;
    line-height: 1.3;
    min-height: 46px;
    margin: 0 0 6px;
}

.alternatives-subtitle {
    color: var(--muted-color-light);
    font-size: 0.8rem;
    line-height: 1.4;
    min-height: 36px;
    margin: 0 0 20px !important;
}

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

.alternatives-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 16px;
    color: var(--muted-color);
    font-size: 0.9rem;
    line-height: 1.5;
}

.alternatives-list li:last-child {
    margin-bottom: 0;
}

.alternatives-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    background-color: #C0574B;
    -webkit-mask: var(--icon-x-svg) center / contain no-repeat;
    mask: var(--icon-x-svg) center / contain no-repeat;
}

.comparison-table-wrap {
    overflow-x: auto;
    background-color: #fff;
    border-radius: 16px;
    margin-top: 8px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.comparison-table th,
.comparison-table td {
    padding: 20px 16px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
    border-bottom: 0;
}

.comparison-table thead th {
    font-family: "DM Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-color-light);
}

.comparison-table thead th:first-child {
    color: var(--muted-color);
}

.cmp-pill {
    display: inline-block;
    background-color: var(--secondary-color-dark);
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 999px;
}

.comparison-table tbody td:first-child {
    color: var(--secondary-color-dark);
    font-size: 0.95rem;
}

.comparison-table tbody tr:nth-child(even) {
    background-color: var(--cream);
}

.cmp-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.cmp-yes .cmp-icon {
    background-color: var(--primary-color-dark);
    -webkit-mask: var(--icon-check-svg) center / contain no-repeat;
    mask: var(--icon-check-svg) center / contain no-repeat;
}

.cmp-no .cmp-icon {
    background-color: var(--muted-color-light);
    -webkit-mask: var(--icon-x-svg) center / contain no-repeat;
    mask: var(--icon-x-svg) center / contain no-repeat;
}

.cmp-maybe {
    color: var(--muted-color-light);
    font-size: 1rem;
}

.why-cta-col.hero-center-col > .col-inner {
    max-width: 820px;
}

.why-cta-col h2 {
    color: #fff;
    margin: 0 0 20px;
}

a.button.why-cta-link {
    margin-top: 16px;
    margin-left: 16px;
    padding: 0;
    background: none;
    color: var(--muted-color-light);
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

a.button.why-cta-link::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
    background-color: var(--muted-color-light);
    -webkit-mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    transition: transform 0.3s ease;
}

a.button.why-cta-link:hover {
    color: #fff;
}

a.button.why-cta-link:hover::after {
    background-color: #fff;
    transform: translateX(4px);
}

@media (max-width: 549px) {
    a.button.why-cta-link {
        margin-left: 0;
        display: inline-flex;
    }
}

/* ========================================
   PARTNER PAGE - HERO SECTION
======================================== */

.partner-hero-box {
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}

.partner-hero-box h3 {
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.3;
    margin: 0 0 16px;
}

.partner-hero-box p {
    color: var(--muted-color-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 549px) {
    .partner-hero-box {
        padding: 28px;
    }
}

/* ========================================
   PARTNER PAGE - WHO IT'S FOR SECTION
======================================== */

.partner-audience-card > .col-inner {
    height: 100%;
    padding: 32px 20px;
    text-align: center;
    background-color: var(--sage);
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-audience-card > .col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(27, 67, 50, 0.1);
}

.partner-audience-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 16px;
    background-color: var(--primary-color-dark);
}

.partner-audience-icon.icon-accounting {
    -webkit-mask: var(--icon-accounting-svg) center / contain no-repeat;
    mask: var(--icon-accounting-svg) center / contain no-repeat;
}

.partner-audience-icon.icon-book {
    -webkit-mask: var(--icon-book-svg) center / contain no-repeat;
    mask: var(--icon-book-svg) center / contain no-repeat;
}

.partner-audience-icon.icon-briefcase {
    -webkit-mask: var(--icon-briefcase-svg) center / contain no-repeat;
    mask: var(--icon-briefcase-svg) center / contain no-repeat;
}

.partner-audience-icon.icon-trendup {
    -webkit-mask: var(--icon-trendup-svg) center / contain no-repeat;
    mask: var(--icon-trendup-svg) center / contain no-repeat;
}

.partner-audience-icon.icon-users {
    -webkit-mask: var(--icon-users-svg) center / contain no-repeat;
    mask: var(--icon-users-svg) center / contain no-repeat;
}

.partner-audience-icon.icon-target {
    -webkit-mask: var(--icon-target-svg) center / contain no-repeat;
    mask: var(--icon-target-svg) center / contain no-repeat;
}

.partner-audience-card p {
    color: var(--secondary-color-dark);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

/* ========================================
   PARTNER PAGE - WHAT'S IN IT FOR YOU SECTION
======================================== */

.partner-benefit-card > .col-inner {
    height: 100%;
    padding: 32px 28px;
    background-color: #fff;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-benefit-card > .col-inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(27, 67, 50, 0.1);
}

.partner-benefit-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    background-color: var(--primary-color-muted);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-benefit-icon-inner {
    width: 22px;
    height: 22px;
    background-color: var(--primary-color-dark);
}

.partner-benefit-icon-inner.icon-trendup {
    -webkit-mask: var(--icon-trendup-svg) center / contain no-repeat;
    mask: var(--icon-trendup-svg) center / contain no-repeat;
}

.partner-benefit-icon-inner.icon-users {
    -webkit-mask: var(--icon-users-svg) center / contain no-repeat;
    mask: var(--icon-users-svg) center / contain no-repeat;
}

.partner-benefit-icon-inner.icon-handshake {
    -webkit-mask: var(--icon-handshake-svg) center / contain no-repeat;
    mask: var(--icon-handshake-svg) center / contain no-repeat;
}

.partner-benefit-icon-inner.icon-award {
    -webkit-mask: var(--icon-award-svg) center / contain no-repeat;
    mask: var(--icon-award-svg) center / contain no-repeat;
}

.partner-benefit-card h3 {
    color: var(--secondary-color-dark);
    font-size: 1.2rem;
    margin: 0 0 12px;
}

.partner-benefit-card p {
    color: var(--muted-color);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
}

/* ========================================
   PARTNER PAGE - HOW REFERRALS WORK SECTION
======================================== */

.partner-referral-row {
    position: relative;
}

@keyframes partnerLineFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.partner-referral-row::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 25px;
    right: 25px;
    height: 1px;
    background-color: var(--primary-color-dark);
    z-index: 0;
    opacity: 0;
    animation: partnerLineFadeInUp 0.8s ease-out 0.3s forwards;
}

@media (max-width: 549px) {
    .partner-referral-row::before {
        display: none;
    }
}

.partner-referral-step {
    position: relative;
    z-index: 1;
}

.partner-referral-step-number {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--primary-color-dark);
    border-radius: 50%;
    color: var(--primary-color-dark);
    font-family: var(--primary-font);
    font-size: 0.85rem;
    background-color: var(--cream);
}

.partner-referral-step h3 {
    color: var(--secondary-color-dark);
    font-size: 1.2rem;
    margin: 0 0 12px;
}

.partner-referral-step p {
    color: var(--muted-color);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
}

/* ========================================
   PARTNER PAGE - BECOME A PARTNER FORM SECTION
======================================== */

.partner-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.partner-checklist li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
}

.partner-checklist li:last-child {
    margin-bottom: 0;
}

.partner-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    -webkit-mask: var(--icon-checkcircle-svg) center / contain no-repeat;
    mask: var(--icon-checkcircle-svg) center / contain no-repeat;
}

.partner-form-box {
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
}

.partner-form-box label {
    display: block;
    color: var(--muted-color-light);
    font-family: "DM Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.partner-form-box .wpcf7-form-control-wrap {
    display: block;
}

.partner-form-box input.wpcf7-form-control,
.partner-form-box select.wpcf7-form-control,
.partner-form-box textarea.wpcf7-form-control {
    width: 100%;
    padding: 14px 16px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
}

.partner-form-box input.wpcf7-form-control::placeholder,
.partner-form-box textarea.wpcf7-form-control::placeholder {
    color: var(--muted-color-light);
    opacity: 1;
}

.partner-form-box select.wpcf7-form-control {
    -webkit-appearance: none;
    appearance: none;
    height: auto !important;
    line-height: 1.4;
    color: #fff !important;
    background-image: var(--icon-chevrondown-select-light-svg);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    padding-right: 40px;
}

.partner-form-box select.wpcf7-form-control option {
    background-color: var(--secondary-color-dark);
    color: #fff;
}

.partner-form-box textarea.wpcf7-form-control {
    min-height: 110px;
    resize: vertical;
}

.partner-form-box .partner-field {
    margin: 0 0 24px;
}

.partner-form-row {
    display: flex;
    gap: 24px;
}

.partner-form-row .partner-field {
    flex: 1;
    margin: 0;
}

.partner-form-box input.wpcf7-submit {
    width: 100%;
    padding: 16px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 15px;
    color: var(--secondary-color-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.partner-form-box input.wpcf7-submit:hover {
    background-color: var(--primary-color-dark);
}

.partner-submit-row {
    margin: 8px 0 0;
    text-align: center;
}

.partner-form-note {
    display: block;
    margin-top: 16px;
    color: var(--muted-color-light);
    font-size: 0.8rem;
}

.partner-form-box .wpcf7-response-output {
    color: var(--muted-color-light);
    border-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px;
    font-size: 0.85rem;
}


/* ========================================
   REMOVE ENQUIRY FORM SECTION ON FOOTER TO GIVE WAY TO BECOME A PARTNER FORM SECTION
======================================== */
.page-id-438 #footer .section-content > .row.align-top:first-of-type,
.page-id-677 #footer .section-content > .row.align-top:first-of-type,
.page-id-438 #footer .gap-element.clearfix {
    display: none !important;
}

@media (max-width: 549px) {
    .partner-form-box {
        padding: 28px;
    }

    .partner-form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ========================================
   POST HERO - PHOTO BACKGROUND WITH OVERLAY
   Reusable for Resources/Industries/Careers post heroes.
======================================== */

.post-hero-col h1 {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
    margin: 0 0 20px;
}

.post-hero-col p {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

/* Remove the default 30px top gap on single posts (.page-wrapper) so a
   full-bleed hero section starts flush behind the transparent header,
   matching how Pages (which use .content-area, no such padding) behave. */
.single-post .page-wrapper {
    padding-top: 0;
    background-color: var(--cream);
}

/* Same reasoning: .entry-content's default 1.5em top/bottom padding leaves
   a gap above the hero and below the last section on single posts. */
.single-post .entry-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* Its content (category/title/meta/featured image) is already suppressed
   via functions.php theme_mod filters; hide the now-empty wrapper too so
   it doesn't leave a small gap above the hero. */
.single-post .entry-header {
    display: none;
}

/* Hide the default "This entry was posted in... Bookmark the permalink"
   footer line — standard blog furniture not used on these service/resource
   posts. */
.single-post .entry-meta.text-center {
    display: none;
}

/* Removing the .row/.col grid wrapper (for the full-bleed hero) also
   removed its width constraint from everything after it, including the
   share icons area and comment form. Re-constrain just those to a
   readable centered width instead of the full section width. */
.single-post .share-row,
.single-post #comments.comments-area {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Comment form — sage theme, matching the testimonial comment card above
   it, so the whole comments area reads as one cohesive family. */
.single-post #comments label {
    display: block;
    color: var(--secondary-color-dark);
    font-family: "DM Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.single-post #comments input[type="text"],
.single-post #comments input[type="email"],
.single-post #comments input[type="url"],
.single-post #comments textarea {
    width: 100%;
    padding: 14px 16px;
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--secondary-color-dark);
    font-size: 0.95rem;
    font-family: inherit;
}

.single-post #comments textarea {
    min-height: 110px;
    resize: vertical;
}

.single-post #comments input[type="text"]::placeholder,
.single-post #comments input[type="email"]::placeholder,
.single-post #comments input[type="url"]::placeholder,
.single-post #comments textarea::placeholder {
    color: var(--muted-color-light);
    opacity: 1;
}

.single-post #comments input[type="submit"] {
    width: 100%;
    padding: 14px 32px;
    background-color: var(--secondary-color-dark);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s ease !important;
}

.single-post #comments input[type="submit"]:hover {
    background-color: var(--secondary-color);
}

/* Give the comment area its own card treatment — dark theme so it reads
   distinctly from the light comment/reply cards above it. */
.single-post #comments #respond.comment-respond {
    background-color: var(--sage);
    border: none;
    border-left: 3px solid var(--secondary-color-dark);
    border-radius: 20px;
    padding: 40px 44px;
    margin-top: 0;
}

.single-post #comments #reply-title {
    font-family: var(--primary-font);
    color: var(--primary-color);
    font-size: 1.6rem;
    margin: 0 0 8px;
}

.single-post #comments .comment-notes {
    color: var(--muted-color);
    font-size: 0.9rem;
    margin: 0 0 28px;
}

.single-post #comments .comment-form-cookies-consent {
    color: var(--muted-color);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 24px;
}

.single-post #comments .form-submit {
    margin: 0;
}

.single-post #comments .comment-form-cookies-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
}

.single-post #comments .comment-form-cookies-consent label {
    display: inline;
    color: var(--muted-color);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    margin: 0;
}

/* Prevent the form from stretching to fill its flex parent's full height,
   which was leaving dead space below the button. */
.single-post #comments #respond.comment-respond {
    align-self: flex-start;
    height: auto;
}

.single-post #comments .comment-form-comment,
.single-post #comments .comment-form-author,
.single-post #comments .comment-form-email,
.single-post #comments .comment-form-role-company {
    margin: 0 0 0px;
}

.single-post #comments input[type="text"],
.single-post #comments input[type="email"],
.single-post #comments input[type="url"],
.single-post #comments textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.single-post #comments input[type="text"]:focus,
.single-post #comments input[type="email"]:focus,
.single-post #comments input[type="url"]:focus,
.single-post #comments textarea:focus {
    outline: none;
    border-color: var(--secondary-color-dark);
    box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.15);
}

.single-post #comments input[type="submit"] {
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.single-post #comments input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(27, 67, 50, 0.3);
}

@media (max-width: 549px) {
    .single-post #comments #respond.comment-respond {
        padding: 28px 24px;
    }
}

/* Scroll-triggered fade-up, toggled by comments-fade-in.js */
.single-post #comments.comments-area {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.single-post #comments.comments-area.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   POST COMMENT LIST
======================================== */

.single-post #comments .comments-title {
    display: none;
}

.single-post #comments .comment-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.single-post #comments li.comment + li.comment {
    margin-top: 16px;
}

.single-post #comments .comment-inner {
    background-color: var(--sage);
    border-radius: 16px;
    padding: 32px;
    border-left: 3px solid var(--secondary-color-dark);
}

/* Flatsome sets margin-top/margin-bottom inline via JS on ul.children
   (measured at 0px / 60px) — override with !important since inline
   styles otherwise beat any class-based rule. */
.single-post #comments ul.children {
    margin-top: 0 !important;
    margin-bottom: 60px !important;
}

.single-post #comments ul.children li.comment {
    padding-top: 0 !important;
}

/* Reply from the business — not a testimonial, so it gets a distinct
   layout: header (avatar/name) on top, plain card, no quote icon/marks. */
.single-post #comments .comment-reply-inner {
    background-color: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary-color);
    border-radius: 12px;
    padding: 28px 32px;
}

.single-post #comments .comment-reply-header {
    margin: 0 0 20px;
    padding-top: 0;
    border-top: none;
}

.single-post #comments .comment-reply-text {
    color: var(--muted-color);
    font-size: 1rem;
    line-height: 1.75;
}

.single-post #comments .comment-reply-text p:last-child {
    margin-bottom: 0;
}

.single-post #comments .comment-awaiting-moderation {
    color: var(--muted-color);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0 0 12px;
}

.single-post #comments .comment-awaiting-moderation em {
    color: var(--primary-color);
}

.single-post #comments .testimonial-quote {
    font-size: 1.5rem;
}

.single-post #comments .testimonial-quote p {
    margin-bottom: 0.5rem;
}

.single-post #comments .testimonial-avatar {
    font-family: 'Playfair Display SC';
}

.single-post #comments .testimonial-avatar-site {
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
}

.single-post #comments .testimonial-avatar-site img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.single-post #comments .testimonial-person h4 {
    text-transform: none;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
}

/* The site's heading font (Playfair Display SC) renders lowercase letters
   as small-caps glyphs, which makes an email address look like it's
   shouting in uppercase. Use a plain readable font for reply emails only
   — original commenter names keep the small-caps heading style. */
.single-post #comments h4.testimonial-reply-email {
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
}

.single-post #comments .testimonial-quote > p:first-child::before {
    content: '\201C';
}

.single-post #comments .testimonial-date {
    margin-top: 2px;
    color: var(--muted-color-light);
    font-size: 0.75rem;
}

.single-post #comments .testimonial-quote > p:last-child::after {
    content: '\201D';
}

/* ========================================
   POST: ACCOUNTING & BOOKKEEPING
   Sound Familiar? / Your Outcomes section
======================================== */

.accounting-challenge-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background-color: var(--cream);;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
}

.accounting-challenge-item:last-child {
    margin-bottom: 0;
}

.accounting-challenge-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(192, 87, 75, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.accounting-challenge-icon::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: #C0574B;
    -webkit-mask: var(--icon-x-svg) center / contain no-repeat;
    mask: var(--icon-x-svg) center / contain no-repeat;
}

.accounting-challenge-item p {
    margin: 0;
    color: var(--secondary-color-dark);
    font-size: 0.95rem;
}

.accounting-outcome-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background-color: var(--sage);
    border-radius: 12px;
    margin-bottom: 16px;
}

.accounting-outcome-item:last-child {
    margin-bottom: 0;
}

.accounting-outcome-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(184, 150, 46, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.accounting-outcome-icon::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--primary-color-dark);
    -webkit-mask: var(--icon-checkcircle-svg) center / contain no-repeat;
    mask: var(--icon-checkcircle-svg) center / contain no-repeat;
}

.accounting-outcome-item p {
    margin: 0;
    color: var(--secondary-color-dark);
    font-size: 0.95rem;
}

.accounting-body-copy > .col-inner {
    margin-left: auto !important;
    margin-right: auto !important;
}

.accounting-body-copy p {
    color: var(--muted-color);
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0 0 24px;
}

.accounting-body-copy p:last-child {
    margin-bottom: 0;
}

h2.alt-font.accounting-col-heading {
    font-size: 2rem;
    min-height: 40px;
}

/* ========================================
   POST: ACCOUNTING & BOOKKEEPING
   Roles We Place section
======================================== */

.role-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 20px;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--secondary-color-dark);
    font-size: 0.9rem;
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.role-pill:hover {
    background-color: var(--sage);
    border-color: var(--primary-color);
    transform: translateY(-3px);
}

a.button.view-all-roles-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    color: var(--secondary-color-dark);
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.95rem;
    text-decoration: underline;
}

a.button.view-all-roles-link::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: var(--secondary-color-dark);
    -webkit-mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    transition: transform 0.3s ease;
}

a.button.view-all-roles-link:hover::after {
    transform: translateX(4px);
}

/* ux_menu_link version of the link above (post="337") — resets the
   ux-menu-link default styles (full-width flex, divider border,
   10px/15px padding, min-height) back to a content-sized text link. */
.ux-menu-link.view-all-roles-link {
    align-self: flex-start;
}

.view-all-roles-link .ux-menu-link__link {
    flex: none;
    min-height: 0;
    padding: 0;
    border-bottom: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    color: var(--secondary-color-dark);
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.95rem;
    text-decoration: underline;
}

.ux-menu-link.view-all-roles-link:hover {
    background-color: transparent;
}

.view-all-roles-link .ux-menu-link__link::after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: var(--secondary-color-dark);
    -webkit-mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    mask: var(--icon-arrow-right-svg) center / contain no-repeat;
    transition: transform 0.3s ease;
}

.view-all-roles-link .ux-menu-link__link:hover::after {
    transform: translateX(4px);
}

/* ========================================
   INDUSTRIES PAGE - HERO SECTION
======================================== */

.industries-hero {
    position: relative;
    overflow: hidden;
}

.industries-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiB2aWV3Qm94PSIwIDAgMzAwIDMwMCI+CjxjaXJjbGUgY3g9IjE4IiBjeT0iMjQiIHI9IjEuNiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4zNSIvPgo8Y2lyY2xlIGN4PSI2MiIgY3k9IjEyIiByPSIxLjEiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMjUiLz4KPGNpcmNsZSBjeD0iMTA3IiBjeT0iNDAiIHI9IjEuOCIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4zIi8+CjxjaXJjbGUgY3g9IjE0NSIgY3k9IjE4IiByPSIxLjIiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMiIvPgo8Y2lyY2xlIGN4PSIxODQiIGN5PSI1NCIgcj0iMS41IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjMiLz4KPGNpcmNsZSBjeD0iMjI2IiBjeT0iMjAiIHI9IjEuMSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yMiIvPgo8Y2lyY2xlIGN4PSIyNjYiIGN5PSI0NiIgcj0iMS43IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjI4Ii8+CjxjaXJjbGUgY3g9IjI5MiIgY3k9IjgiIHI9IjEuMyIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yNSIvPgo8Y2lyY2xlIGN4PSIzNSIgY3k9Ijc4IiByPSIxLjMiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMjIiLz4KPGNpcmNsZSBjeD0iOTAiIGN5PSI5MiIgcj0iMS42IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjMyIi8+CjxjaXJjbGUgY3g9IjEyOCIgY3k9IjcwIiByPSIxLjEiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMiIvPgo8Y2lyY2xlIGN4PSIxNjgiIGN5PSI5OCIgcj0iMS45IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjMiLz4KPGNpcmNsZSBjeD0iMjEwIiBjeT0iODIiIHI9IjEuMiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yNCIvPgo8Y2lyY2xlIGN4PSIyNTIiIGN5PSIxMDAiIHI9IjEuNSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yNiIvPgo8Y2lyY2xlIGN4PSI4IiBjeT0iMTIwIiByPSIxLjQiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMjgiLz4KPGNpcmNsZSBjeD0iNTUiIGN5PSIxNDAiIHI9IjEuMSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yIi8+CjxjaXJjbGUgY3g9IjEwMCIgY3k9IjEyOCIgcj0iMS43IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjMiLz4KPGNpcmNsZSBjeD0iMTUwIiBjeT0iMTUwIiByPSIxLjMiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMjQiLz4KPGNpcmNsZSBjeD0iMTk2IiBjeT0iMTMyIiByPSIxLjYiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMyIvPgo8Y2lyY2xlIGN4PSIyNDAiIGN5PSIxNTIiIHI9IjEuMSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yIi8+CjxjaXJjbGUgY3g9IjI4MCIgY3k9IjEyNiIgcj0iMS44IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjMiLz4KPGNpcmNsZSBjeD0iMjIiIGN5PSIxNzYiIHI9IjEuMiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yMiIvPgo8Y2lyY2xlIGN4PSI2OCIgY3k9IjE5NiIgcj0iMS41IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjI4Ii8+CjxjaXJjbGUgY3g9IjExNSIgY3k9IjE4MCIgcj0iMS4xIiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjIiLz4KPGNpcmNsZSBjeD0iMTU4IiBjeT0iMjA0IiByPSIxLjkiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMzIiLz4KPGNpcmNsZSBjeD0iMjAyIiBjeT0iMTg2IiByPSIxLjMiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMjQiLz4KPGNpcmNsZSBjeD0iMjQ2IiBjeT0iMjEwIiByPSIxLjYiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMyIvPgo8Y2lyY2xlIGN4PSIyODgiIGN5PSIxODIiIHI9IjEuMiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yMiIvPgo8Y2lyY2xlIGN4PSI0MCIgY3k9IjIzNCIgcj0iMS43IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjMiLz4KPGNpcmNsZSBjeD0iODIiIGN5PSIyNTIiIHI9IjEuMSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yIi8+CjxjaXJjbGUgY3g9IjEzMCIgY3k9IjIzNiIgcj0iMS40IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjI2Ii8+CjxjaXJjbGUgY3g9IjE3MiIgY3k9IjI1OCIgcj0iMS4yIiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjIyIi8+CjxjaXJjbGUgY3g9IjIxNiIgY3k9IjI0MCIgcj0iMS44IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjMiLz4KPGNpcmNsZSBjeD0iMjYwIiBjeT0iMjYyIiByPSIxLjEiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMiIvPgo8Y2lyY2xlIGN4PSIyOTYiIGN5PSIyMzYiIHI9IjEuNSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yOCIvPgo8Y2lyY2xlIGN4PSIxMiIgY3k9IjI4NCIgcj0iMS4zIiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjI0Ii8+CjxjaXJjbGUgY3g9IjU4IiBjeT0iMjk2IiByPSIxLjYiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMyIvPgo8Y2lyY2xlIGN4PSIxMDQiIGN5PSIyODAiIHI9IjEuMSIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iMC4yIi8+CjxjaXJjbGUgY3g9IjE0OCIgY3k9IjI5MiIgcj0iMS45IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjMiLz4KPGNpcmNsZSBjeD0iMTkwIiBjeT0iMjc4IiByPSIxLjIiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMjIiLz4KPGNpcmNsZSBjeD0iMjM0IiBjeT0iMjk0IiByPSIxLjUiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMjgiLz4KPGNpcmNsZSBjeD0iMjcyIiBjeT0iMjc2IiByPSIxLjEiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMiIvPgo8L3N2Zz4K");
    background-repeat: repeat;
    background-size: 260px 260px;
    pointer-events: none;
}

.industries-hero .section-content {
    position: relative;
    z-index: 1;
}

.industries-hero h1 .hero-accent {
    color: var(--primary-color);
    font-style: italic;
}

/* ========================================
   INDUSTRIES PAGE - POST GRID CARDS
   Card-style redesign for [blog_posts class="industries-post-grid"]:
   rounded photo-top card, green-tinted image (via native
   image_overlay attribute), left-aligned serif title, hover lift.
======================================== */

.industries-post-grid .box-blog-post {
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.12), 0 2px 6px rgba(27, 67, 50, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.industries-post-grid .box-blog-post:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(27, 67, 50, 0.2), 0 4px 10px rgba(27, 67, 50, 0.1);
}

.industries-post-grid .box-text {
    padding: 0;
}

.industries-post-grid .box-text-inner {
    padding: 10px 20px 35px 20px;
}

.industries-post-grid .post-title {
    font-family: "Playfair Display", Georgia, serif;
    margin-bottom: 10px;
    font-weight: normal !important;
    font-size: 20px;
}

.industries-post-grid .post-title a {
    color: var(--secondary-color-dark);
}

.industries-post-grid .is-divider {
    display: none;
}

.industries-post-grid .from_the_blog_excerpt {
    color: var(--muted-color);
    margin-bottom: 18px !important;
    font-size: 14px !important;
}

.industries-post-grid .button.secondary.is-underline {
    text-decoration: none;
    font-weight: 700;
    text-transform: none !important;
}

/* ========================================
   RESOURCES PAGE - POST GRID CARDS
   Same card treatment as .industries-post-grid, kept as its own class
   so either page's cards can be tuned independently later.
======================================== */

.resources-post-grid .box-blog-post {
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.12), 0 2px 6px rgba(27, 67, 50, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resources-post-grid .box-blog-post:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(27, 67, 50, 0.2), 0 4px 10px rgba(27, 67, 50, 0.1);
}

.resources-post-grid .box-image .overlay {
    display: none;
}

.resources-post-grid .box-text {
    padding: 0;
}

.resources-post-grid .box-text-inner {
    padding: 28px 32px 32px 32px;
}

.resources-post-grid .post-title {
    font-family: "Playfair Display", Georgia, serif;
    margin-bottom: 14px;
    font-weight: normal !important;
    font-size: 26px;
    line-height: 1.25;
}

.resources-post-grid .post-title a {
    color: var(--secondary-color-dark);
}

.resources-post-grid .is-divider {
    display: none;
}

.resources-post-grid .from_the_blog_excerpt {
    color: var(--muted-color);
    margin-bottom: 24px !important;
    font-size: 15px !important;
    line-height: 1.6;
}

.resources-post-grid .box-text-inner::after {
    content: '';
    display: table;
    clear: both;
}

.resources-post-grid .post-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    float: left;
}

.resources-post-grid .post-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--secondary-color-dark);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--primary-font);
    font-weight: 700;
    flex-shrink: 0;
}

.resources-post-grid .post-author-info {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.resources-post-grid .post-author-name {
    color: var(--secondary-color-dark);
    font-weight: 700;
    font-size: 0.95rem;
}

.resources-post-grid .post-author-date {
    color: var(--muted-color);
    font-size: 0.85rem;
}

.resources-post-grid .button.secondary.is-underline {
    float: right;
    margin-top: 8px;
    text-decoration: none;
    font-weight: 700;
    text-transform: none !important;
}

/* ========================================
   CAREERS PAGE - POST GRID CARDS
   Same card treatment as .industries-post-grid / .resources-post-grid,
   kept as its own class so this page's cards can be tuned independently.
======================================== */

.careers-post-grid .box-blog-post {
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.12), 0 2px 6px rgba(27, 67, 50, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.careers-post-grid .box-blog-post:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(27, 67, 50, 0.2), 0 4px 10px rgba(27, 67, 50, 0.1);
}

.careers-post-grid .box-text {
    padding: 0;
}

.careers-post-grid .box-text-inner {
    padding: 10px 20px 35px 20px;
}

.careers-post-grid .post-title {
    font-family: "Playfair Display", Georgia, serif;
    margin-bottom: 10px;
    font-weight: normal !important;
    font-size: 20px;
}

.careers-post-grid .post-title a {
    color: var(--secondary-color-dark);
}

.careers-post-grid .is-divider {
    display: none;
}

.careers-post-grid .from_the_blog_excerpt {
    color: var(--muted-color);
    margin-bottom: 18px !important;
    font-size: 14px !important;
}

.careers-post-grid .button.secondary.is-underline {
    text-decoration: none;
    font-weight: 700;
    text-transform: none !important;
}

/* ========================================
   RESOURCES ARTICLE - BODY TABLES
   Styles raw <table> markup inside .resource-table, used for the
   time-zone, roles, and staffing-model comparison tables.
======================================== */

.resource-table {
    max-width: 780px;
    margin: 0 auto 40px;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #fff;
    border-radius: 16px;
    padding-bottom: 0px;
}

.resource-table table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.resource-table th,
.resource-table td {
    padding: 20px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--muted-color);
    word-break: break-word;
}

.resource-table thead th {
    font-family: "DM Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary-color-dark);
}

.resource-table tbody td:first-child {
    color: var(--secondary-color-dark);
    font-size: 0.95rem;
}

.resource-table tbody tr:nth-child(even) {
    background-color: var(--cream);
}

.resource-table tbody tr:hover {
    background-color: var(--sage);
}

.resource-table tbody tr:last-child td {
    border-bottom: none;
}

.resource-table-pill {
    display: inline-block;
    background-color: var(--secondary-color-dark);
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 10px;
}

.resource-table td.is-highlighted {
    background-color: var(--sage);
    color: var(--secondary-color-dark);
    font-weight: 600;
}

/* ========================================
   RESOURCES ARTICLE - CONCERN CARDS
   Reuses the accounting-outcome-item visual language (sage card,
   checkcircle icon) for the "Common Concerns" section.
======================================== */

.resource-concern-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background-color: var(--sage);
    border-radius: 12px;
    margin-bottom: 16px;
}

.resource-concern-item:last-child {
    margin-bottom: 0;
}

.resource-concern-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: 50%;
    background-color: rgba(184, 150, 46, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-concern-icon::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--primary-color-dark);
    -webkit-mask: var(--icon-checkcircle-svg) center / contain no-repeat;
    mask: var(--icon-checkcircle-svg) center / contain no-repeat;
}

.resource-concern-item p {
    margin: 0;
    color: var(--secondary-color-dark);
    font-size: 0.95rem;
    line-height: 1.6;
}

.resource-concern-item p strong {
    color: var(--secondary-color-dark);
}

/* ========================================
   RESOURCES ARTICLE - CHECKLIST
   Reuses the pricing-check circle-tick visual language for the
   "Is the Philippines Right for Your Business?" checklist.
======================================== */

.resource-checklist {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.resource-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--secondary-color-dark);
    font-size: 1rem;
    margin-left: 0 !important;
    margin-bottom: 16px;
}

.resource-checklist li:last-child {
    margin-bottom: 0;
}

.resource-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--secondary-color-dark);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ========================================
   RESOURCES ARTICLE - TABLE OF CONTENTS
   Jump-link box for long-form Resources articles, linking to id=""
   anchors on each H2. Sits between the intro and the stat cards.
======================================== */

.resource-toc {
    max-width: 640px;
    margin: 10px auto 30px;
    padding: 24px 28px;
    background-color: var(--sage);
    border-radius: 12px;
}

.resource-toc-label {
    margin: 0 0 12px;
    color: var(--secondary-color-dark);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resource-toc ol {
    margin: 0;
    padding: 0 0 0 20px;
}

.resource-toc li {
    margin-bottom: 8px;
    margin-left: 0 !important;
    color: var(--muted-color);
}

.resource-toc li:last-child {
    margin-bottom: 0;
}

.resource-toc a {
    display: inline-block;
    color: var(--secondary-color-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.resource-toc a:hover {
    color: var(--primary-color-dark);
    border-bottom-color: var(--primary-color-dark);
    transform: translateX(4px);
}

.resource-toc a:active {
    transform: translateX(4px) scale(0.98);
}

/* Smooth-scroll into any anchor (table of contents, back-to-top, etc.)
   instead of an instant jump. */
html {
    scroll-behavior: smooth;
}

/* Briefly highlights whichever heading a jump link lands on, so it's
   obvious where you arrived after clicking a table-of-contents entry. */
h2.alt-font:target,
h3.alt-font:target {
    animation: resource-toc-landing 1.8s ease;
}

@keyframes resource-toc-landing {
    0% {
        background-color: var(--sage);
    }
    100% {
        background-color: transparent;
    }
}

/* ========================================
   COMMITMENT PAGE - HERO MINI CARDS
   Small glass-style cards for the hero's 2x2 "what we promise" grid,
   sitting on the dark hero background.
======================================== */

.commitment-hero-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 549px) {
    .commitment-hero-cards {
        grid-template-columns: 1fr;
    }
}

.commitment-hero-card {
    padding: 20px 22px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
}

.commitment-hero-card h4 {
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.commitment-hero-card p {
    color: var(--muted-color-light);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

/* ========================================
   COMMITMENT PAGE - CORE VALUES CARDS
   Left-aligned dark card with a gold dot marker (reuses the
   .differentiator-dot look from the Why Noventralink page), since
   the existing .core-value-card is centered rather than left-aligned.
======================================== */

.commitment-value-card {
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
}

.commitment-value-card h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 10px;
}

.commitment-value-card p {
    color: var(--muted-color-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   OPEN ROLES PAGE - HERO MINI CARDS
   Same glass-card look as .commitment-hero-card, kept as its own
   class per the site's convention of independent per-page card
   variants.
======================================== */

.roles-hero-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 549px) {
    .roles-hero-cards {
        grid-template-columns: 1fr;
    }
}

.roles-hero-card {
    padding: 20px 22px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
}

.roles-hero-card h4 {
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.roles-hero-card p {
    color: var(--muted-color-light);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

/* ========================================
   OPEN ROLES PAGE - RECRUITMENT PROCESS STEPS
   Wide card per step: fixed-width label column (number badge, title,
   stage tag) beside a flexible description column.
======================================== */

.roles-process-step {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 28px 32px;
    background-color: var(--sage);
    border-radius: 16px;
    margin-bottom: 20px;
}

@media (max-width: 849px) {
    .roles-process-step {
        flex-direction: column;
        gap: 16px;
    }
}

.roles-process-step-label {
    flex: 0 0 280px;
    display: flex;
    align-items: center;
    gap: 16px;
}

@media (max-width: 849px) {
    .roles-process-step-label {
        flex: none;
    }
}

.roles-process-step-label .icon-circle-badge {
    margin-bottom: 0;
    flex-shrink: 0;
    background-color: var(--cream);
}

.roles-process-step-label h3 {
    color: var(--secondary-color-dark);
    font-size: 1.15rem;
    margin: 0 0 4px;
}

.roles-process-step-tag {
    color: var(--muted-color);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.roles-process-step-body {
    flex: 1;
    color: var(--muted-color);
    font-size: 0.92rem;
    line-height: 1.7;
}

.roles-process-step-body p {
    margin: 0 0 12px;
}

.roles-process-step-body p:last-child {
    margin-bottom: 0;
}

.roles-process-step-body ul {
    margin: 0;
    padding-left: 0;
    list-style-position: inside;
}

.roles-process-step-body li {
    margin-bottom: 10px;
    margin-left: 0 !important;
}

.roles-process-step-body li::marker {
    color: var(--primary-color);
}

.roles-process-step-body li:last-child {
    margin-bottom: 0;
}

.roles-process-step-body li strong {
    color: var(--secondary-color-dark);
}

/* ========================================
   OPEN ROLES PAGE - COMMUNICATION NOTE BOX
   Centered dark callout card at the end of the recruitment process
   section.
======================================== */

.roles-note-box {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 40px;
    background-color: var(--secondary-color-dark);
    border-radius: 20px;
}

.roles-note-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 50%;
    background-color: rgba(184, 150, 46, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.roles-note-icon .philippines-icon-inner {
    width: 18px;
    height: 18px;
    background-color: var(--primary-color);
}

.roles-note-box h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 14px;
}

.roles-note-box p {
    color: var(--muted-color-light);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 12px;
}

.roles-note-box p:last-child {
    margin-bottom: 0;
}

.roles-note-box a {
    color: var(--primary-color);
    font-weight: 600;
}

/* ========================================
   OPEN ROLES PAGE - JOB APPLICATION FORM
   Styles Contact Form 7's default markup (.wpcf7-form-control,
   .wpcf7-not-valid-tip, .wpcf7-response-output) plus the Drag and
   Drop Multiple File Upload plugin's own classes
   (.codedropz-upload-*, .cd-upload-btn, .dnd-*).
======================================== */

.app-form-card {
    max-width: 720px;
    margin: 0 auto;
}

.app-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.app-form-row .app-form-group {
    margin-bottom: 0;
}

@media (max-width: 549px) {
    .app-form-row {
        grid-template-columns: 1fr;
    }
}

.app-form-group {
    margin-bottom: 24px;
}

.app-form-group label {
    display: block;
    color: var(--secondary-color-dark);
    font-family: "DM Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.app-required {
    color: var(--primary-color-dark);
}

.app-form-group .wpcf7-form-control-wrap {
    display: block;
}

.app-form-group input.wpcf7-form-control,
.app-form-group select.wpcf7-form-control,
.app-form-group textarea.wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: #fff;
    color: var(--secondary-color-dark);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-form-group textarea.wpcf7-form-control {
    min-height: 110px;
    resize: vertical;
}

.app-form-group input.wpcf7-form-control::placeholder,
.app-form-group textarea.wpcf7-form-control::placeholder {
    color: var(--muted-color-light);
    opacity: 1;
}

.app-form-group input.wpcf7-form-control:focus,
.app-form-group select.wpcf7-form-control:focus,
.app-form-group textarea.wpcf7-form-control:focus {
    outline: none;
    border-color: var(--secondary-color-dark);
    box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.15);
}

.app-form-group select.wpcf7-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: var(--icon-chevrondown-select-svg);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 44px;
    cursor: pointer;
}

.app-form-group select.wpcf7-form-control option {
    color: var(--secondary-color-dark);
    background-color: #fff;
}

.app-form-group .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #c0392b;
    font-size: 0.8rem;
}

.app-form-group input.wpcf7-form-control.wpcf7-not-valid,
.app-form-group select.wpcf7-form-control.wpcf7-not-valid {
    border-color: #c0392b;
}

/* Resume upload zone */

.app-upload-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 16px;
}

.app-upload-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 50%;
    background-color: var(--sage);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-upload-icon .philippines-icon-inner {
    width: 22px;
    height: 22px;
    background-color: var(--primary-color-dark);
}

.app-upload-title {
    color: var(--secondary-color-dark);
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 4px;
}

.app-upload-hint {
    color: var(--muted-color);
    font-size: 0.8rem;
    margin: 0;
}

.app-form-group-upload .codedropz-upload-handler {
    border: 2px dashed var(--border);
    border-radius: 16px;
    background-color: var(--cream);
    padding: 32px 24px;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.app-form-group-upload .codedropz-upload-handler.codedropz-dragover,
.app-form-group-upload .codedropz-upload-handler:hover {
    border-color: var(--primary-color);
    background-color: var(--sage);
}

.app-form-group-upload .cd-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 10px 24px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 50px;
    color: var(--secondary-color-dark);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.app-form-group-upload .dnd-upload-status .dnd-upload-image {
    border-color: var(--border);
    background-color: var(--cream);
}

.app-form-group-upload .dnd-upload-status .dnd-upload-image span.file {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='23' viewBox='0 0 18 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.569 0.659576H0.5V23H18V6.09053L12.569 0.659576ZM12.7872 1.93075L16.7288 5.87234H12.7872V1.93075ZM1.24468 22.2553V1.40426H12.0426V6.61702H17.2553V22.2553H1.24468Z' fill='%231B4332'/%3E%3C/svg%3E%0A");
}

.app-form-group-upload .dnd-upload-status .dnd-upload-details .name {
    color: var(--secondary-color-dark);
    font-weight: 600;
}

.app-form-group-upload .dnd-upload-status .dnd-upload-details .name em {
    color: var(--muted-color);
    font-weight: 400;
}

.app-form-group-upload .remove-file {
    cursor: pointer;
}

.app-form-group-upload .dnd-upload-status .dnd-upload-details .remove-file span:after {
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 0C7.83499 0 0 7.83499 0 17.5C0 27.165 7.83499 35 17.5 35C27.165 35 35 27.165 35 17.5C34.9888 7.83965 27.1604 0.0112198 17.5 0ZM17.5 33.871C8.45857 33.871 1.12903 26.5414 1.12903 17.5C1.12903 8.45857 8.45857 1.12903 17.5 1.12903C26.5414 1.12903 33.871 8.45857 33.871 17.5C33.861 26.5373 26.5373 33.861 17.5 33.871Z' fill='%23c0392b'/%3E%3Cpath d='M25.4834 9.51661C25.2629 9.29624 24.9056 9.29624 24.6852 9.51661L17.5 16.7018L10.3148 9.51661C10.0983 9.29236 9.74087 9.28615 9.51661 9.50271C9.29236 9.71927 9.28615 10.0767 9.50271 10.3009C9.50723 10.3057 9.51188 10.3103 9.51661 10.3148L16.7018 17.5L9.51661 24.6852C9.29236 24.9018 9.28615 25.2591 9.50278 25.4834C9.71941 25.7076 10.0768 25.7139 10.301 25.4972C10.3057 25.4927 10.3103 25.488 10.3148 25.4834L17.5 18.2982L24.6852 25.4834C24.9094 25.7 25.2668 25.6938 25.4834 25.4696C25.6947 25.2508 25.6947 24.9039 25.4834 24.6852L18.2982 17.5L25.4834 10.3148C25.7038 10.0944 25.7038 9.73705 25.4834 9.51661Z' fill='%23c0392b'/%3E%3C/svg%3E%0A");
}

.app-form-group-upload .dnd-upload-status .dnd-upload-details .dnd-progress-bar {
    background: var(--cream);
}

.app-form-group-upload .dnd-upload-status .dnd-upload-details .dnd-progress-bar span {
    background: var(--primary-color);
    color: var(--secondary-color-dark);
}

.app-form-group-upload .has-error-msg,
.app-form-group-upload .error-new {
    color: #c0392b;
    font-size: 0.85rem;
    margin-top: 8px;
    display: block;
}

/* The plugin leaves its "only 1 file allowed" rejection note showing even
   after the accepted file finishes uploading — hide it once a completed
   file entry exists, since the note no longer reflects the current state. */
.app-form-group-upload .has-error-msg:has(~ .dnd-upload-status-complete),
.app-form-group-upload .error-new:has(~ .dnd-upload-status-complete) {
    display: none;
}

/* Consent checkbox */

.app-form-group-consent .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--muted-color);
    line-height: 1.6;
}

.app-form-group-consent .wpcf7-list-item {
    margin: 0;
}

.app-form-group-consent input[type="checkbox"] {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.app-form-group-consent a {
    color: var(--secondary-color-dark);
    font-weight: 600;
    text-decoration: underline;
}

/* Submit button */

.app-form-submit {
    margin-top: 32px;
    text-align: center;
}

.app-form-submit input.wpcf7-form-control.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 32px;
    background-color: var(--secondary-color-dark);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.app-form-submit input.wpcf7-form-control.wpcf7-submit:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(27, 67, 50, 0.3);
}

.app-form-submit .wpcf7-spinner {
    margin-left: 10px;
}

/* Response / success message */

.app-form-card .wpcf7-response-output {
    margin: 0 0 24px;
    padding: 20px 24px;
    border-radius: 8px;
    border: none;
    font-size: 0.9rem;
    line-height: 1.6;
}

.app-form-card form.sent .wpcf7-response-output {
    background-color: var(--sage);
    color: var(--secondary-color-dark);
    font-weight: 600;
}

.app-form-card form.invalid .wpcf7-response-output,
.app-form-card form.failed .wpcf7-response-output,
.app-form-card form.aborted .wpcf7-response-output {
    background-color: #fdecea;
    color: #c0392b;
}

/* Careers email note below the form */

.app-careers-note {
    max-width: 720px;
    margin: 24px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--muted-color);
    font-size: 0.85rem;
}

.app-careers-note a {
    color: var(--primary-color-dark);
    font-weight: 600;
}

/* ========================================
   BOOK CONSULTATION PAGE — form card
   ======================================== */

.consult-form-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.12), 0 2px 6px rgba(27, 67, 50, 0.08);
}

@media (max-width: 549px) {
    .consult-form-card {
        padding: 32px 24px;
    }
}

.consult-intro p {
    color: var(--muted-color);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 32px;
}

.consult-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

@media (max-width: 549px) {
    .consult-form-row {
        grid-template-columns: 1fr;
    }
}

.consult-form-group {
    margin-bottom: 24px;
}

.consult-form-group label {
    display: block;
    color: var(--secondary-color-dark);
    font-family: "DM Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.consult-required {
    color: var(--primary-color-dark);
}

.consult-form-group input.wpcf7-form-control,
.consult-form-group select.wpcf7-form-control,
.consult-form-group textarea.wpcf7-form-control {
    width: 100%;
    margin-bottom: 4px;
    box-sizing: border-box;
    min-height: 52px;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: var(--cream);
    color: var(--secondary-color-dark);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.consult-form-group textarea.wpcf7-form-control {
    min-height: 110px;
    resize: vertical;
}

.consult-form-group input.wpcf7-form-control::placeholder,
.consult-form-group textarea.wpcf7-form-control::placeholder {
    color: var(--muted-color-light);
    opacity: 1;
}

.consult-form-group input.wpcf7-form-control:focus,
.consult-form-group select.wpcf7-form-control:focus,
.consult-form-group textarea.wpcf7-form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(184, 150, 46, 0.2);
    background-color: #fff;
}

.consult-form-group select.wpcf7-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: var(--icon-chevrondown-select-svg);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 44px;
    cursor: pointer;
    margin-bottom: 10px;
}

.consult-form-group select.wpcf7-form-control option {
    color: var(--secondary-color-dark);
    background-color: #fff;
}

.consult-form-group .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #c0392b;
    font-size: 0.8rem;
}

.consult-form-group input.wpcf7-form-control.wpcf7-not-valid,
.consult-form-group select.wpcf7-form-control.wpcf7-not-valid {
    border-color: #c0392b;
}

.consult-form-submit {
    margin-top: 8px;
}

.consult-form-submit input.wpcf7-form-control.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 32px;
    background-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4332' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(50% - 115px) center;
    background-size: 20px;
    border: none;
    border-radius: 10px;
    color: var(--secondary-color-dark);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.consult-form-submit input.wpcf7-form-control.wpcf7-submit:hover {
    background-color: var(--primary-color-dark);
}

.consult-form-submit .wpcf7-spinner {
    margin-left: 10px;
}

.consult-form-card .wpcf7-response-output {
    margin: 0 0 24px;
    padding: 20px 24px;
    border-radius: 8px;
    border: none;
    font-size: 0.9rem;
    line-height: 1.6;
}

.consult-form-card form.sent .wpcf7-response-output {
    background-color: var(--sage);
    color: var(--secondary-color-dark);
    font-weight: 600;
}

.consult-form-card form.invalid .wpcf7-response-output,
.consult-form-card form.failed .wpcf7-response-output,
.consult-form-card form.aborted .wpcf7-response-output {
    background-color: #fdecea;
    color: #c0392b;
}

.consult-note {
    margin-top: 20px;
    text-align: center;
    color: var(--muted-color);
    font-size: 0.85rem;
}

.consult-note p {
    margin: 0;
}

/* ========================================
   CONTENT PROTECTION (deterrent-only)
   See assets/js/content-protection.js for the matching JS behavior.
   Not a guarantee against copying — a technically capable visitor can
   still bypass CSS/JS-only restrictions.
   ======================================== */

html, body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input, textarea, select, [contenteditable="true"], .nvn-allow-select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

img {
    -webkit-user-drag: none;
    user-drag: none;
}