.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =======================================================================
   BPO365 — Custom CSS
   Paste into: Elementor → Site Settings → Custom CSS (requires Elementor Pro)
   Or via:    WP admin → Appearance → Customize → Additional CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --bpo-orange-50:  #FFF1EC;
  --bpo-orange-100: #FFD9CC;
  --bpo-orange-200: #FFB89D;
  --bpo-orange-300: #FF9879;
  --bpo-orange-400: #FF785A; /* anchor / brand orange */
  --bpo-orange-500: #F0563A;
  --bpo-orange-600: #D14E2F;
  --bpo-orange-700: #A93C24;
  --bpo-orange-800: #7E2D1B;
  --bpo-orange-900: #521D11;
  --bpo-magenta:    #ED1697;
  --bpo-text:       #2C2C2A;
  --bpo-text-muted: #5F5E5A;
  --bpo-text-tertiary: #888780;
  --bpo-border-light: #EFECE3;
  --bpo-border:     #D3D1C7;
  --bpo-surface:    #FAFAF7;
  --bpo-surface-tinted: #FFF8F3;
  --bpo-surface-cream:  #FFEDE3;
  --bpo-dark-surface: #1A1A18;
  --bpo-dark-surface-2: #2C2C2A;

  --bpo-gradient: linear-gradient(135deg, #FF9A6B 0%, #FF785A 50%, #D14E2F 100%);
  --bpo-gradient-pill: linear-gradient(135deg, #FF9A6B, #D14E2F);
  --bpo-radius-md: 8px;
  --bpo-radius-lg: 12px;
}

/* --------------------------------------------------------------------------
   2. BUTTONS — primary, secondary, pill (override Elementor defaults)
   -------------------------------------------------------------------------- */

/* Primary CTA — gradient fill */
.elementor-button.bpo-btn-primary,
.bpo-btn-primary .elementor-button {
  background: var(--bpo-gradient) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--bpo-radius-md) !important;
  padding: 12px 22px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.elementor-button.bpo-btn-primary:hover,
.bpo-btn-primary .elementor-button:hover {
  background: linear-gradient(135deg, #D14E2F 0%, #FF785A 50%, #FF9A6B 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(209, 78, 47, 0.25);
}

/* Secondary CTA — outline */
.elementor-button.bpo-btn-secondary,
.bpo-btn-secondary .elementor-button {
  background: transparent !important;
  color: var(--bpo-text) !important;
  border: 1px solid var(--bpo-border) !important;
  border-radius: var(--bpo-radius-md) !important;
  padding: 11px 20px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: background 0.15s ease;
}

.elementor-button.bpo-btn-secondary:hover,
.bpo-btn-secondary .elementor-button:hover {
  background: var(--bpo-orange-50) !important;
  border-color: var(--bpo-orange-100) !important;
}

/* Nav pill — small gradient pill (Get a quote) */
.elementor-button.bpo-btn-pill,
.bpo-btn-pill .elementor-button {
  background: var(--bpo-gradient-pill) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

.elementor-button.bpo-btn-pill:hover,
.bpo-btn-pill .elementor-button:hover {
  background: linear-gradient(135deg, #D14E2F, #FF9A6B) !important;
}

/* Reverse button — used on gradient backgrounds */
.elementor-button.bpo-btn-reverse,
.bpo-btn-reverse .elementor-button {
  background: #FFFFFF !important;
  color: var(--bpo-orange-600) !important;
  border: none !important;
  border-radius: var(--bpo-radius-md) !important;
  padding: 13px 28px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

.elementor-button.bpo-btn-reverse:hover,
.bpo-btn-reverse .elementor-button:hover {
  background: var(--bpo-orange-50) !important;
}

/* --------------------------------------------------------------------------
   3. HEADINGS & TYPOGRAPHY

   Note on Elementor inheritance: Elementor's Heading widget wraps text in an
   inner <h1>-<h6> tag (.elementor-heading-title). That inner tag picks up
   colour/size from your Global Typography settings, not from the bpo-* wrapper
   class we put on the widget. The .bpo-heading-inherit rule at the bottom of
   this file forces the inner heading to inherit from its wrapper.
   -------------------------------------------------------------------------- */

.bpo-eyebrow {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--bpo-orange-600) !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  margin: 0 0 12px !important;
}

.bpo-headline-1 { letter-spacing: -1px !important; line-height: 1.1 !important; }
.bpo-headline-2 { letter-spacing: -0.5px !important; line-height: 1.2 !important; }

/* Link color */
a { color: var(--bpo-orange-600); }
a:hover { color: var(--bpo-orange-700); }

/* --------------------------------------------------------------------------
   4. STAT TILES (apply class bpo-stat-tile to Inner Section / Container)
   -------------------------------------------------------------------------- */

.bpo-stat-tile {
  background: var(--bpo-orange-50);
  border: 0.5px solid var(--bpo-orange-100);
  border-radius: var(--bpo-radius-lg);
  padding: 18px 20px;
}

.bpo-stat-tile .bpo-stat-number {
  font-size: 28px;
  font-weight: 500;
  color: var(--bpo-orange-600);
  line-height: 1;
  margin: 0 0 8px;
}

.bpo-stat-tile .bpo-stat-qualifier {
  font-size: 12px;
  color: var(--bpo-orange-800);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   5. SERVICE CARDS
   -------------------------------------------------------------------------- */

.bpo-service-card {
  background: #FFFFFF;
  border: 0.5px solid var(--bpo-border-light);
  border-radius: var(--bpo-radius-lg);
  padding: 24px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bpo-service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(60, 30, 10, 0.08);
}

.bpo-service-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bpo-gradient-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.bpo-service-icon-wrap i,
.bpo-service-icon-wrap svg {
  color: #FFFFFF !important;
  fill: none;
  stroke: #FFFFFF;
}

/* --------------------------------------------------------------------------
   6. TESTIMONIAL CARDS
   -------------------------------------------------------------------------- */

.bpo-testimonial-card {
  background: #FFFFFF;
  border: 0.5px solid var(--bpo-border-light);
  border-radius: var(--bpo-radius-lg);
  padding: 20px;
  position: relative;
}

.bpo-testimonial-card::before {
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 0.6;
  color: var(--bpo-orange-400);
  display: block;
  margin-bottom: 8px;
}

.bpo-testimonial-quote {
  font-size: 12px;
  color: var(--bpo-text);
  line-height: 1.55;
  font-style: italic;
  margin: 0 0 14px;
}

.bpo-testimonial-attribution {
  padding-top: 10px;
  border-top: 0.5px solid var(--bpo-border-light);
}

.bpo-testimonial-role {
  font-size: 11px;
  font-weight: 500;
  color: var(--bpo-orange-800);
}

.bpo-testimonial-org {
  font-size: 10px;
  color: var(--bpo-text-muted);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   7. INDUSTRY PILLS
   -------------------------------------------------------------------------- */

.bpo-industry-pill {
  display: inline-block;
  background: var(--bpo-orange-50);
  border: 0.5px solid var(--bpo-orange-100);
  color: var(--bpo-orange-800);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  margin: 4px;
}

/* --------------------------------------------------------------------------
   8. SECTIONS WITH WARM-TINTED BACKGROUNDS
   -------------------------------------------------------------------------- */

.bpo-section-warm-tint {
  background: linear-gradient(135deg, var(--bpo-surface-tinted) 0%, var(--bpo-surface-cream) 100%) !important;
  border-top: 0.5px solid var(--bpo-orange-100);
  border-bottom: 0.5px solid var(--bpo-orange-100);
}

.bpo-section-dark {
  background: var(--bpo-dark-surface-2) !important;
  color: #FAFAF7;
}

.bpo-section-dark h2,
.bpo-section-dark h3 {
  color: #FAFAF7 !important;
}

.bpo-section-dark p {
  color: #D3D1C7 !important;
}

/* --------------------------------------------------------------------------
   9. FINAL CTA BANNER (full-width gradient)
   -------------------------------------------------------------------------- */

.bpo-cta-banner {
  background: var(--bpo-gradient) !important;
  padding: 48px 40px !important;
  text-align: center;
}

.bpo-cta-banner h2 {
  color: #4A1B0C !important;
  font-size: 24px !important;
  font-weight: 500 !important;
}

.bpo-cta-banner p {
  color: #4A1B0C !important;
  opacity: 0.85 !important;
}

/* --------------------------------------------------------------------------
   10. FOOTER (apply to Theme Builder footer container)
   -------------------------------------------------------------------------- */

.bpo-footer { background: var(--bpo-dark-surface) !important; color: #D3D1C7; }
.bpo-footer h3 { color: #FAFAF7 !important; font-size: 11px !important; letter-spacing: 0.5px; }
.bpo-footer a { color: #B4B2A9; text-decoration: none; }
.bpo-footer a:hover { color: var(--bpo-orange-400); }
.bpo-footer .bpo-footer-meta { color: var(--bpo-text-tertiary); font-size: 11px; }

/* --------------------------------------------------------------------------
   11. RESPONSIVE TWEAKS
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .bpo-stat-tile { padding: 14px 16px; }
  .bpo-stat-tile .bpo-stat-number { font-size: 22px; }
  .bpo-service-card { padding: 18px 16px; }
  .bpo-cta-banner { padding: 32px 24px !important; }
  .bpo-cta-banner h2 { font-size: 20px !important; }
}

/* --------------------------------------------------------------------------
   12. ELEMENTOR HEADING INHERITANCE FIX

   Elementor's Heading widget renders as:
     <div class="elementor-element bpo-stat-number">
       <h3 class="elementor-heading-title">13+ years</h3>
     </div>

   The inner .elementor-heading-title picks up colour/size from your Global
   Typography settings, not from the bpo-* wrapper class. This rule forces the
   inner heading to inherit colour/size/weight/spacing from its bpo-* wrapper.

   Targeted to specific bpo-* classes so Elementor headings outside our
   wrappers keep their normal Global Typography behaviour.
   -------------------------------------------------------------------------- */

.bpo-eyebrow .elementor-heading-title,
.bpo-stat-number .elementor-heading-title,
.bpo-stat-qualifier .elementor-heading-title,
.bpo-testimonial-role .elementor-heading-title,
.bpo-testimonial-org .elementor-heading-title {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-style: inherit !important;
}

/* --------------------------------------------------------------------------
   17. MOBILE GRID OVERRIDES — TEXT-EDITOR EMBEDDED HTML

   The Contact page (4 contact-method cards) and Our People page (5 discipline
   pills) are rendered as inline-styled HTML inside Text Editor widgets. The
   inline grid-template-columns declarations use fixed pixel widths that do
   not adapt below ~500px, causing text to wrap word-by-word inside narrow
   columns. These rules collapse the outer grid on small viewports.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  /* Contact page — 4 cards stack to single column, icon + text kept horizontal */
  .elementor-element-c2d84a0 .elementor-widget-container > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .elementor-element-c2d84a0 .elementor-widget-container > div > div {
    grid-template-columns: 56px 1fr !important;
    gap: 14px !important;
  }

  /* Our People — 5 discipline pills wrap to 2 columns (3 + 2 layout) */
  .elementor-element-969fa33 .elementor-widget-container > div {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* --------------------------------------------------------------------------
   13. FOOTER MOBILE STACKING
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .bpo-footer .elementor-row,
  .bpo-footer [data-element_type="container"] {
    flex-direction: column !important;
  }
}

/* --------------------------------------------------------------------------
   14. PILL BUTTON — never wrap, never shrink
   -------------------------------------------------------------------------- */

.bpo-btn-pill,
.bpo-btn-pill .elementor-button {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   15. HEADER WHITE OVERRIDE (clears any stale gradient bg from template)
   -------------------------------------------------------------------------- */

.elementor-location-header > .elementor-element,
.elementor-element-9c65c53 {
  background-color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   16. FORM FIELD STYLING (Contact page form)
   -------------------------------------------------------------------------- */

.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form input[type="number"],
.elementor-form input[type="url"],
.elementor-form select,
.elementor-form textarea {
  background-color: #FAFAF7 !important;
  border: 1px solid #D3D1C7 !important;
  color: #2C2C2A !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
}
.elementor-form input::placeholder,
.elementor-form textarea::placeholder { color: #888780 !important; }
.elementor-form input:focus,
.elementor-form select:focus,
.elementor-form textarea:focus {
  border-color: #FF785A !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(255,120,90,0.15) !important;
}
.elementor-form .elementor-button {
  background: linear-gradient(135deg, #FF9A6B 0%, #FF785A 50%, #D14E2F 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 22px !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   18. MOBILE NAV DROPDOWN — FULL-WIDTH BREAKOUT
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Remove the narrow flex-column constraint on the nav widget */
  .elementor-element-020a476 { position: static !important; }
  /* Pull dropdown out and span full header */
  .elementor-element-020a476 .elementor-nav-menu--dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.10) !important;
    z-index: 9999 !important;
    border-top: 1px solid #EFECE3 !important;
  }
  .elementor-element-020a476 .elementor-nav-menu--dropdown ul {
    width: 100% !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .elementor-element-020a476 .elementor-nav-menu--dropdown li {
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #F4F2EC !important;
  }
  .elementor-element-020a476 .elementor-nav-menu--dropdown li:last-child {
    border-bottom: none !important;
  }
  .elementor-element-020a476 .elementor-nav-menu--dropdown a {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    white-space: nowrap !important;
    text-align: left !important;
    font-size: 14px !important;
    color: #2C2C2A !important;
  }
}

/* 18b. Prevent header container from clipping dropdown */
@media (max-width: 767px) {
  .elementor-element-9c65c53 { overflow: visible !important; }
  .elementor-element-9c65c53 .e-con-inner { overflow: visible !important; }
}/* End custom CSS */