/* ==========================================================================
   Customizer overrides — promoted from WP Customizer → Additional CSS
   ==========================================================================
   These rules used to live in the WordPress Customizer (wp_posts.ID=524,
   post_type='custom_css') and were inlined into every page as
   <style id="wp-custom-css">. As of 2026-05-25 they live in this file and
   are loaded via wp_enqueue_style from functions.php with a dependency on
   'prespa-child-customizations', so they cascade AFTER customizations.css —
   same source-order semantics as the old Customizer block had.

   Edit workflow (new):
     - Edit this file directly. Changes ship with the theme via git.
     - The WP Customizer → Additional CSS panel should be EMPTY. If a future
       editor adds rules there, those rules will still load (and will win
       over this file because wp-custom-css inlines at wp_head priority 101).
       Move any such rules back into this file and re-empty the Customizer.

   Deploy note:
     - First deploy of this file to any environment also requires emptying
       that environment's wp_posts.ID=524 row, otherwise both copies load:
         UPDATE wp_posts SET post_content=''
           WHERE ID=524 AND post_type='custom_css';

   Known limitations (intentionally not fixed):
     - Resizing the WP Customizer sidebar below the 1109px desktop/mobile
       breakpoint can cause transient layout artifacts in the preview
       iframe. Customizer-editing only — refresh fixes it.
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL FRAMEWORK RESETS, UTILITIES & OVERRIDES
   ========================================================================== */
.site { overflow: hidden !important; }
.site-wrapper { margin-bottom: 0 !important; max-width: 100% !important; padding: 0 !important; }
.site-wrapper p a { text-decoration: underline; }
.site-wrapper p a:hover { text-decoration: none; }
.entry-footer, .entry-title, .site-info, .post-thumbnail, .nav-links { display: none !important; padding: 0 !important; }
.entry-content { margin-bottom: 0 !important; }

/* Image Stability & Performance Layouts */
.stk-img-wrapper img { height: auto !important; }

/* Isolated Service Panel Heading Over-Sizing Fix */
.service-panel-heading {
    font-size: 32px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

/* Page Specific Wrapper Baseline (Dynamic Content Landing Blocks) */
.page.page-id-5636 .entry-content {
    padding-top: 150px;
    margin: 0 auto;
    padding-bottom: 60px;
    padding-left: 73px !important;
    padding-right: 73px !important;
}

/* Global Desktop Button Framework Settings */
.wp-block-button__link,  
.wp-element-button {
  background-color: #282728 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px;
  width: 110px;
  height: 43px;
  margin-left: 10px;
  border-radius: 100px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 24px;
  letter-spacing: -0.6px;
  background: linear-gradient(to top, #FEBC62 0%, #FEBC62 50%, #282728 50%, #282728 100%) !important;
  background-size: 100% 200% !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  transition: background-position 0.4s ease, color 0.4s ease;
}
.wp-block-button a:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background-position: center bottom !important;
  color: #282728 !important;
}

/* Card Image & Overlay Hover Scale Effects */
.hover-animation { cursor: pointer; max-width: fit-content !important; }
.img-style, .stk-img-wrapper, .img-style img, .text-style { transition: transform 0.5s ease-in-out !important; }
.hover-animation:hover .img-style .stk-img-wrapper img { transform: scale(1.15) !important; }
.hover-animation:hover .text-style { transform: scale(1.07); transform-origin: left center; }

/* Structural Parallax Elements */
.background-animation { position: relative; overflow: hidden; }
.img-first, .img-second { position: relative; transition: transform 0.4s ease-out; will-change: transform; }
.img-first { transform: translateX(400px); }
.img-second { transform: translateX(-500px); }


/* ==========================================================================
   2. PHASE A - ISOLATED DESKTOP ONLY NAVIGATION (min-width: 1110px)
   ========================================================================== */
@media screen and (min-width: 1110px) {
  /* Absolute transparent resting layer floating seamlessly over hero content */
  .main-navigation-container {
    position: absolute !important;
    top: 0 !important;
    padding: 15px 73px !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1000;
    width: 100% !important;
    border-bottom: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  
  /* Sticky header scroll transitions */
  .main-navigation-container.fixed-header {
    position: fixed !important;
    background: #FFFFFF !important;
    justify-content: space-around !important;
    transition: transform 0.5s ease, opacity 0.5s ease;
  }
  .fixed-header { transform: translateY(-100%); opacity: 0; }
  .fixed-header.header-visible { transform: translateY(0); opacity: 1; }
  .main-navigation-hidden { transform: translateY(-100%); opacity: 0; }

  /* Desktop Font & Branding Resets */
  .header-content-wrapper { padding: 0 !important; }
  .custom-logo-link { padding: 0 !important; margin-top: 1rem; }
  .site-branding { z-index: 10; display: flex !important; align-items: center !important; }
  #primary-menu > li > a {
    color: #282728 !important;
    font-family: 'Helvetica Now Display', 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 14px;
  }
  .main-navigation a { padding: .7rem 0.625rem !important; }
  .menu-item-2058 { display: none !important; }

  /* Interaction Engine: Centered Underline Emanation Hover Effect */
  #primary-menu > li > a > span {
    position: relative;
    display: inline-block;
    align-items: center !important;
  }
  #primary-menu > li:not(.call-to-action) > a > span::after {
    content: "";
    position: absolute;
    bottom: -10%;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #282728;
    transition: all 0.4s ease;
    transform: translateX(-50%);
  }
  #primary-menu > li:not(.call-to-action) > a > span:hover::after { width: 30px; }
  
  #primary-menu > li.current-menu-item:not(.call-to-action) > a > span::after,
  #primary-menu > li.current_page_item:not(.call-to-action) > a > span::after {
    content: "";
    position: absolute;
    bottom: -10%;
    left: 50%;
    width: 30px;
    height: 2px;
    background-color: #282728;
    transform: translateX(-50%);
  }

  /* Desktop Sub-Menu White Dropdown Panels (Services & Sectors) */
  ul .sub-menu {
    width: 330px !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    padding: 20px 16px;
    border: none !important;
    box-shadow: none !important;
  }
  .site-menu ul ul a { border: none !important; }
  ul .sub-menu li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 305px !important;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.125rem;
    color: #282728 !important;
    transition: all 0.6s ease;
    overflow: hidden;
    background: transparent !important;
  }

  /* Interaction Engine: Sliding Sub-Menu Left-to-Right Hover Arrows */
  ul .sub-menu li a::before {
    content: "→";
    font-size: 28px;
    color: #282728;
    position: absolute;
    left: -50px;
    opacity: 0;
    transform: translateX(-10px) translateY(-10%);
    transition: all 0.6s ease;
  }
  ul .sub-menu li a:hover::before {
    opacity: 1;
    left: 10px;
    transform: translateX(0) translateY(-10%);
  }
  ul .sub-menu li a:hover { padding-left: 50px !important; }

  /* Desktop Menu Downward Caret Rotations */
  .site-menu li.menu-item-has-children>a:after, 
  .site-menu li.page_item_has_children>a:after {
    font-size: 10px !important;
    opacity: 1 !important;
    color: #282728 !important;
    padding: 5px;
    display: inline-block;
    transition: transform 0.4s ease;
    transform: rotate(0deg);
  }
  .site-menu li.menu-item-has-children:hover > a:after,
  .site-menu li.page_item_has_children:hover > a:after {
    transform: rotate(180deg) !important;
  }
  
  .mobile-side-button { display: none !important; }
}


/* ==========================================================================
   3. PHASE A - REFINED MOBILE NAVIGATION ENGINE (max-width: 1109px)
   ========================================================================== */
@media screen and (max-width: 1109px) {
  /* Force baseline container to remain an absolute transparent layout track over hero layers */
  .main-navigation-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    z-index: 1000;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 24px !important;
    box-sizing: border-box !important;
  }
  .nav-wrapper { 
    display: flex !important; 
    flex-direction: row !important;
    align-items: center !important; 
    justify-content: flex-end !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* GHOST LINK LEAK FIX: Keep primary dropdown arrays fully hidden when inactive */
  #primary-menu {
    display: none !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    flex-direction: column !important;
  }

  /* Solid Black Track Mobile Contact Button */
  .mobile-side-button {
    display: flex !important;
    color: #FFFFFF !important;
    width: auto !important;
    height: 46px !important;
    padding: 0px 24px !important;
    border-radius: 100px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: -0.4px !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    z-index: 9999 !important;
    background-color: #000000 !important;
    background: #000000 !important; 
    border: none !important;
    margin: 0 !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
  }
  .mobile-side-button:hover {
    background-color: #FEBC62 !important;
    background: #FEBC62 !important;
    color: #000000 !important;
  }

  /* ALIGNMENT CRUSH FIX: Force white menu vectors to keep true axis centers */
  .main-navigation-container > .menu-toggle,
  .main-navigation-container > .main-navigation,
  .main-navigation-container > .site-menu { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    background-color: #000000 !important;
    background: #000000 !important; 
    border-radius: 100px !important; 
    height: 46px !important; 
    width: 46px !important; 
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  .burger:before, .burger:after { border-color: #FFFFFF !important; }
  .menu-toggle[aria-expanded="true"] .burger:after { border-color: #282728 !important; }
  .menu-toggle[aria-expanded="false"] .burger { padding-top: 0px !important; }
  .burger { border-bottom: none !important; padding-top: 0px; display: flex !important; align-items: center !important; justify-content: center !important; }
  .burger:after { padding-bottom: 0px; }

  /* Strip background track leaks away from native inner sub-menu chevrons */
  .main-navigation-container .sub-menu-toggle,
  .main-navigation-container .dropdown-toggle {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    padding: 5px !important;
  }

  /* Active Toggle Sheet Backdrop (Locks a solid white canvas over background text) */
  .slide-menu,
  .site-menu:is(.toggled, :has(#burger-check:checked)),
  .main-navigation:is(.toggled, :has(#burger-check:checked)) {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
  }

  /* Closed-state guard: above rule lays slide-menu over the entire viewport
     even when invisible (opacity 0). Without disabling pointer-events the
     header CTA + hamburger become unclickable. Restore hit-testing for the
     closed state only. */
  .main-navigation:not(:is(.toggled, :has(#burger-check:checked))) .slide-menu {
    pointer-events: none !important;
  }

  /* Reveal menu link tracks when activation class is appended.
     Per Figma: items centered horizontally + vertically in the panel,
     with the X button anchored top-right (handled below). Override the
     parent theme's #primary-menu { position: absolute; top: 15% } so the
     flex container fills the panel and centers its children. */
  .main-navigation:is(.toggled, :has(#burger-check:checked)) #primary-menu,
  .site-menu:is(.toggled, :has(#burger-check:checked)) #primary-menu {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    text-align: right !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    /* X button geometry: top:19, right:40, 46x46. Right edge = vp-40,
       left edge = vp-86, bottom = 65. Line-height = 18 * 1.25 = 22.5.
       padding-right = 86 so text right-edge aligns with X left edge
       (clears the circle horizontally). padding-top = 88 so first
       menu item top sits one line-height below X bottom (clears the
       circle vertically — "About" always below the X, never overlapping). */
    padding: 88px 86px 24px 24px !important;
    line-height: 1.25 !important;
  }

  /* Contrast Readability Overrides strictly scoped inside active drawer window */
  .main-navigation:is(.toggled, :has(#burger-check:checked)) ul li a,
  .main-navigation:is(.toggled, :has(#burger-check:checked)) .sub-menu li a,
  .site-menu:is(.toggled, :has(#burger-check:checked)) ul li a,
  #primary-menu li a,
  #primary-menu li a span {
    color: #282728 !important;
  }
  .sub-menu-toggle i:after,
  .site-menu li.menu-item-has-children>a:after {
    color: #282728 !important;
  }

  /* Mobile Dropdown Open Navigation Alignments — right-aligned column,
     items hugging the right edge of the panel under the X button. */
  #primary-menu > li {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    flex-direction: column !important;
    width: auto !important;
    margin: 0 0 18px !important;
    text-align: right !important;
  }
  #primary-menu > li:last-child { margin-bottom: 0 !important; }
  #primary-menu > li > a {
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
  }
  /* Active page indicator — Figma shows the current page item underlined */
  #primary-menu > li.current-menu-item > a,
  #primary-menu > li.current_page_item > a,
  #primary-menu > li.current-menu-ancestor > a {
    text-decoration: underline !important;
    text-underline-offset: 8px !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: #282728 !important;
  }
  ul .sub-menu { width: 100% !important; padding: 10px 0px 10px 15px !important; }
  ul .sub-menu li a {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.5rem !important;
    width: 100% !important;
  }
  .main-navigation a { padding: 5px 0px !important; }

  /* Mobile menu — per Figma, top-level items only. Hide the disclosure
     buttons + sub-menus so the panel stays clean. Users tap Services /
     Sectors to navigate to those pages, which handle their own subnav. */
  #primary-menu > li.menu-item-has-children > .sub-menu-toggle,
  #primary-menu > li.menu-item-has-children > .sub-menu {
    display: none !important;
  }

  /* Hides duplicate backend menu links dynamically */
  #primary-menu .call-to-action, .menu-item-2058 { display: none !important; }
  
  /* Active State Hamburger Circle Overlay — orange circle X.
     Pin to the SAME viewport coords as the closed-state hamburger so the
     button doesn't jump on toggle. Closed state measures x=304, y=19 at
     viewport=390 (40px from right edge, 19px from top). Use position:
     fixed (relative to viewport) with those coords. */
  .main-navigation:is(.toggled, :has(#burger-check:checked)) > .menu-toggle {
    background: #FEBC62 !important;
    background-color: #FEBC62 !important;
    border-radius: 100px !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 19px !important;
    right: 40px !important;
    left: auto !important;
    z-index: 100000 !important;
  }

  /* Open-state X icon — redraw as two clean diagonal lines crossing at
     center of the burger box. Parent theme stacks ::before / ::after with
     odd translates that don't form a clean ✕. Reset and re-draw. */
  .main-navigation:is(.toggled, :has(#burger-check:checked)) .burger {
    border-bottom: none !important;
    position: relative !important;
  }
  .main-navigation:is(.toggled, :has(#burger-check:checked)) .burger::before,
  .main-navigation:is(.toggled, :has(#burger-check:checked)) .burger::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 22px !important;
    height: 2px !important;
    background-color: #282728 !important;
    border: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .main-navigation:is(.toggled, :has(#burger-check:checked)) .burger::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }
  .main-navigation:is(.toggled, :has(#burger-check:checked)) .burger::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}


/* ==========================================================================
   4. ACTIVE ACCORDIONS & FAQS LAYOUT CORES
   ========================================================================== */
.custom-accordion { max-width: 100%; margin: 20px 0; overflow: hidden; }
.accordion-header { cursor: pointer; transition: background-color 0.2s; padding-bottom: 30px; }
.accordion-title { font-family: 'Helvetica Neue', sans-serif !important; font-weight: 400; font-size: 18px !important; line-height: 32px !important; color: #282728; }
.accordion-title strong { font-weight: 600; }
.accordion-content { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.accordion-content.open { max-height: 1000px; opacity: 1; transform: translateY(0); }

/* Static Portal Accordion Blocks Placement Rules */
.c-accordion__title { outline: none; color: #1E1E1E !important; font-size: 1.1875rem !important; font-weight: 400 !important; line-height: 2rem !important; margin-bottom: 40px; }
.c-accordion__title:after { display: none !important; }

/* Plus-to-Minus Dynamic JavaScript Action Elements */
.custom-button { background-color: #282728; color: #FFFFFF; font-size: 24px; height: 37px; width: 37px; padding: 10px; position: relative; }
.custom-button:after { content: "+"; font-size: 24px; display: flex !important; align-items: center !important; justify-content: center !important; margin-top: -2px !important; }
.is-open>.c-accordion__title .custom-button:after { content: "-" !important; font-size: 28px; }
.is-open>.c-accordion__title .custom-button {
    background: linear-gradient(to top, #282728 0%, #282728 50%, #FEBC62 50%, #FEBC62 100%) no-repeat center top;
    background-size: 100% 200%; color: #282728 !important;
}
.is-open>.c-accordion__title .custom-button:hover { background-position: center bottom; color: #FFFFFF !important; }

/* FAQ Template Block System */
.faq-acc { padding: 30px 0; border-bottom: 1px solid black; }
.faq-acc h4 { width: 100%; margin-bottom: 0; font-family: 'Helvetica Neue' !important; font-weight: 400 !important; font-size: 30px !important; line-height: 28.3px !important; }
.faq-acc h4 span { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; }
.faq-acc h4 button { height: 60px; width: 60px; }
.faqs_sectionsa { padding: 60px 0px; max-width: 1140px; margin: 0 auto; }
.faqs_sectionsa .c-accordion__title { background: #f5f5f5; padding: 11px; border-radius: 5px; margin-bottom: 11px; }
.faqs_sectionsa button.custom-button { position: absolute; right: 0; }


/* ==========================================================================
   5. FORM CONTAINER UTILITIES & RESPONSIVE SPLITS
   ========================================================================== */
.form, .audit-form-container { max-width: 686px; margin: auto; padding: 18px; background: #ffffff; border-radius: 20px; font-family: 'Roboto', sans-serif !important; font-weight: 500; }
.form-title h3, .form2-title h3 { font-size: 17px; color: #FFFFFF; font-weight: 400 !important; margin: 0 !important; }
.form-grid, .form-grid-news { display: grid; gap: 10px; }

.form-group input, .form-group select, .form-group textarea,
.form2-name, .form2-email, .form2-tel, .form2-enterprise, .form2-challenge, .form-name, .form-email, .form-company, .form-msg {
  width: 100%; height: 52px; padding: 13px 15px; border: 1px solid #dcdcdc; border-radius: 12px;
  font-size: 15px; background: #f9f9f9; transition: all .25s ease; outline: none; color: #000 !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { background: #fff; border-color: #0

00; }


/* ==========================================================================
   6. FOOTER LAYOUT — single column at all widths above mobile (2026-05-25)
   ==========================================================================
   The footer has 4 widget columns:
     widget-1: logo (visible all widths)
     widget-2, widget-3: mobile-only content (empty at tablet+desktop)
     widget-4: tablet+desktop menu (a Stackable "row of 7 columns" block)

   At >=768px the parent theme renders .widget-area as a 4-column flex
   row. With widgets 2 and 3 empty (their inner content is `.stk--hide-
   desktop .stk--hide-tablet`), the result is logo | empty | empty |
   broken-narrow-menu, with thin vertical dividers between each column.
   Visually four columns where there should be one.

   Fix at >=768px: collapse .widget-area to a single vertical stack.
   Hide widgets 2 and 3 entirely (they're empty here anyway). Render
   widget-1 (logo) above widget-4 (menu), each full width, no dividers.
   The menu's inner 7 Stackable columns are flattened into one wrapping
   horizontal row of centered links.
   ========================================================================== */
@media (min-width: 768px) {
    footer .widget-area {
        display: block !important;
        padding: 40px 60px 30px !important;
    }
    footer .widget-column.footer-widget-1,
    footer .widget-column.footer-widget-4 {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        border-right: none !important;
        border-left: none !important;
        padding: 0 !important;
    }
    footer .widget-column.footer-widget-1 {
        margin-bottom: 40px !important;
        text-align: center !important;
    }
    /* Center the logo image inside widget-1 */
    footer .widget-column.footer-widget-1 .stk-img-wrapper {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    footer .widget-column.footer-widget-2,
    footer .widget-column.footer-widget-3 {
        display: none !important;
    }

    /* Menu inside widget-4 — flatten the 7-column Stackable block into a
       single wrapping flex row of centered link items. */
    footer .widget-column.footer-widget-4 .wp-block-stackable-columns.stk--hide-mobile,
    footer .widget-column.footer-widget-4 .wp-block-stackable-columns.stk--hide-mobile .stk-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 14px 28px !important;
        max-width: none !important;
        width: 100% !important;
    }
    footer .widget-column.footer-widget-4 .wp-block-stackable-columns.stk--hide-mobile .stk-row > .wp-block-stackable-column {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        align-self: center !important;
    }
    footer .widget-column.footer-widget-4 .wp-block-stackable-columns.stk--hide-mobile .stk-row > .wp-block-stackable-column .stk-column-wrapper,
    footer .widget-column.footer-widget-4 .wp-block-stackable-columns.stk--hide-mobile .stk-row > .wp-block-stackable-column .stk-block-content,
    footer .widget-column.footer-widget-4 .wp-block-stackable-columns.stk--hide-mobile .stk-row > .wp-block-stackable-column .wp-block-stackable-text {
        width: auto !important;
        max-width: none !important;
        flex-basis: auto !important;
        flex-grow: 0 !important;
    }
    footer .widget-column.footer-widget-4 .wp-block-stackable-columns.stk--hide-mobile .stk-block-text__text {
        white-space: nowrap !important;
        width: auto !important;
        margin: 0 !important;
    }
}


/* ==========================================================================
   6b. FOOTER DESKTOP OVERRIDE (>=1024px, per Figma) — 2026-05-25
   ==========================================================================
   At >=1024px the user wants the footer to mirror the Figma proportions:
   logo on the LEFT, menu on the RIGHT, both pinned near the TOP of the
   footer area (close to the horizontal line above), with empty space
   below. Single-row layout, not stacked.
   ========================================================================== */
@media (min-width: 1024px) {
    footer .widget-area {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 40px !important;
        padding: 60px 73px !important;
    }
    footer .widget-column.footer-widget-1 {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        text-align: left !important;
    }
    footer .widget-column.footer-widget-1 .stk-img-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    footer .widget-column.footer-widget-4 {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
    }
    /* Menu row right-aligned with generous spacing matching the Figma */
    footer .widget-column.footer-widget-4 .wp-block-stackable-columns.stk--hide-mobile,
    footer .widget-column.footer-widget-4 .wp-block-stackable-columns.stk--hide-mobile .stk-row {
        justify-content: flex-end !important;
        gap: 14px 50px !important;
    }
}


/* ==========================================================================
   7. FOOTER LINK UNDERLINES (match header behaviour, 2026-05-25)
   ==========================================================================
   Footer links shipped with the default browser `text-decoration: underline`
   under every link. The header has no default underline + a 30px centered
   underline that expands from the middle on hover (charcoal in the header
   because that's a light background). Mirror that in the footer with
   white since footer text is on dark purple.
   ========================================================================== */
footer a {
    text-decoration: none !important;
}
footer .widget-area a {
    position: relative;
    display: inline-block;
}
footer .widget-area a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #ffffff;
    transition: width 0.3s ease;
    transform: translateX(-50%);
    pointer-events: none;
}
footer .widget-area a:hover::after,
footer .widget-area a:focus-visible::after {
    width: 30px;
}





/* ==========================================================================
   8. FOOTER MENU LINE-HEIGHT OVERRIDE (2026-05-25)
   ==========================================================================
   Stackable text blocks in the footer menu carry inline
   `line-height: 86px !important` from the editor. Reset to the browser
   default (1.15) so the menu reads as a compact row. Scoped to footer
   only -- other Stackable text on the page keeps its configured
   line-height.
   ========================================================================== */
footer .widget-area .stk-block-text__text,
footer .widget-area .stk-block-text__text * {
    line-height: 1.15 !important;
}



/* ==========================================================================
   9. HAMBURGER TOGGLE — closed state = black circle (Figma) — 2026-05-25
   ==========================================================================
   The Figma "Menu button" styleguide shows the closed hamburger as a 46x46
   black circle with two white horizontal bars. An earlier inline rule
   `.main-navigation-container > .menu-toggle { background:#000; ... }`
   tried to do this but used a direct-child selector that doesn't match the
   actual DOM (the toggle lives at `.main-navigation > .menu-toggle`, not as
   a direct child of the container). So the rule was silently dead and the
   toggle has been rendering as a transparent default <button>.

   Apply the styling with the correct selector. The open state
   (.main-navigation:is(.toggled, :has(#burger-check:checked)) > .menu-toggle, orange circle) has higher
   specificity and continues to win when the menu is open.
   ========================================================================== */
@media screen and (max-width: 1109px) {
    .main-navigation > .menu-toggle {
        background: #000000 !important;
        background-color: #000000 !important;
        border-radius: 100px !important;
        width: 46px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }
}







/* ==========================================================================
   10. STACKABLE HEADING WORD-BREAK FIX (2026-05-25)
   ==========================================================================
   .stk-block-heading__text ships with `word-break: break-word`, which on
   modern browsers maps to `word-break: normal; overflow-wrap: anywhere`
   and so breaks even short words mid-character when a heading container
   is too narrow for its font-size (e.g. the about-us H2 "Simplifying
   Complexity Through Digital Innovation" at 91px Georgia in a 533px
   column wraps as "Simplifyin / g  C / o ...").

   Fix: normalize the wrap behaviour. Words break only at whitespace
   boundaries (word-break: normal) and overflow-wrap: break-word is
   still allowed as a last resort for genuinely unbreakable long
   strings like URLs.
   ========================================================================== */
.stk-block-heading__text {
    word-break: normal !important;
    overflow-wrap: break-word !important;
}


/* ==========================================================================
   11. ABOUT PAGE CLIENT-LOGOS — match homepage treatment (2026-05-25)
   ==========================================================================
   The About page (/about-us/, page-id-482) still uses the legacy Carousel
   Block / Swiper-slide markup for its client-logo strip. The Swiper plugin
   was uninstalled (per original handoff), so the slides now render as a
   plain vertical stack of full-width block divs -- no monochrome filter,
   no horizontal grid.

   The homepage's hand-authored .client-logo-showcase / .logo-box.logo-<name>
   replacement applies grayscale + hover-to-color. Mirror that treatment on
   the About page swiper-slides via CSS:

   1. Make .swiper-wrapper a wrapping horizontal flex row.
   2. Each .swiper-slide is content-sized (intrinsic image width).
   3. Images: grayscale by default, color on hover.

   Scoped to the About page (body.page-id-482) so other pages still using
   the Carousel block aren't affected.
   ========================================================================== */
body.page-id-482 .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px 50px !important;
    transform: none !important;       /* override any leftover Swiper transform */
    height: auto !important;
}
body.page-id-482 .swiper-slide.cb-slide {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
body.page-id-482 .swiper-slide.cb-slide img {
    filter: grayscale(100%) !important;
    transition: filter 0.3s ease !important;
    max-width: 100% !important;
    height: auto !important;
}
body.page-id-482 .swiper-slide.cb-slide:hover img,
body.page-id-482 .swiper-slide.cb-slide img:hover {
    filter: grayscale(0%) !important;
}



/* ==========================================================================
   10b. ABOUT PAGE — heading fixes (2026-05-25)
   ==========================================================================
   Three rules, all scoped to /about-us/ (body.page-id-482):

   (a) Global wrap-behaviour: `word-break: normal` plus `overflow-wrap:
       normal` on all .stk-block-heading__text so even genuinely-wide
       words don't fall back to char-level breaks ("Simplifyin / g").

   (b) Hero H2 ("Simplifying Complexity...", block stk-4de7589) is in a
       ~40% column. "Simplifying" at the authored 91px Georgia overflows
       at viewports 1100-1280. Scale font-size via clamp() so the word
       fits at every breakpoint, and override line-height to 1.1 because
       Stackable's authored pixel line-height was sized for the original
       font and looks wrong at the new sizes. SCOPED TO THIS BLOCK ONLY —
       the other H2s on the page (subheaders like "Our Approach" /
       "Our Promise" in narrow side-by-side columns) were authored at
       smaller sizes that already fit their containers, and globally
       enlarging them caused horizontal column overflow.

   (c) "clarity, creativity & results" (block stk-60bf3a2) ships at the
       Stackable default heading weight which reads too heavy alongside
       the lighter "design thinking in action!" heading on its left.
       Drop to font-weight 400 to match.
   ========================================================================== */
body.page-id-482 .stk-block-heading__text {
    overflow-wrap: normal !important;
}

body.page-id-482 .wp-block-stackable-heading.stk-4de7589 .stk-block-heading__text {
    font-size: clamp(2.5rem, 6vw, 5.6875rem) !important;
    line-height: 1.1 !important;
}

body.page-id-482 .wp-block-stackable-heading.stk-60bf3a2 .stk-block-heading__text {
    font-weight: 400 !important;
}


/* ==========================================================================
   12. /sectors/ PAGE — sector-link band quiet treatment (2026-05-25)
   ==========================================================================
   The horizontal row of sector links (B2B / Non Profit / Education / Arts
   & Culture / E-commerce) just above the per-sector detail sections on
   /sectors/ (page-id 4880) ships with default browser link styling:
   blue, underlined, Roboto. Normalize to the header nav's font + color +
   weight, drop the default underline, and add a hidden-until-hover
   underline that mirrors the header nav's interaction.

   Scoped to the single Stackable columns block that wraps the row
   (stk-f024f13) so other links on the page are unaffected.

   Delete this entire block to revert.
   ========================================================================== */
body.page-id-4880 .wp-block-stackable-columns.stk-f024f13 .stk-block-text__text a,
body.page-id-4880 .wp-block-stackable-columns.stk-f024f13 .stk-block-text__text a * {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important;
    color: #000 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
}

body.page-id-4880 .wp-block-stackable-columns.stk-f024f13 .stk-block-text__text a {
    position: relative !important;
    display: inline-block !important;
    padding-bottom: 8px !important;
}

body.page-id-4880 .wp-block-stackable-columns.stk-f024f13 .stk-block-text__text a::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background-color: #000 !important;
    transition: width 0.3s ease !important;
}

body.page-id-4880 .wp-block-stackable-columns.stk-f024f13 .stk-block-text__text a:hover::after,
body.page-id-4880 .wp-block-stackable-columns.stk-f024f13 .stk-block-text__text a:focus-visible::after {
    width: 30px !important;
}


/* ==========================================================================
   14. /services/ SWIPER — move arrows down to byline level
   ==========================================================================
   Swiper defaults position .swiper-button-prev/next at top: 50% (vertically
   centered on the slide), which puts them right over the slide's logo on
   the left side. Anchor from the bottom instead so they sit near the
   author byline.

   Scoped to /services/ (page-id 483) so other swipers on the site keep
   their default centered arrows.
   ========================================================================== */
body.page-id-483 .swiper .swiper-button-prev,
body.page-id-483 .swiper .swiper-button-next {
    top: auto !important;
    bottom: 90px !important;
    margin-top: 0 !important;
}


/* ==========================================================================
   13. FLOATING "Book a call with us." CTA (2026-05-25)
   ==========================================================================
   Rendered by td_floating_cta_render() in functions.php on every front-end
   page except /contact-us/. Opens the same Calendly popup the existing
   "Fix Your Funnel: Book a Call" CTA on the audit page opens.

   z-index 9000 sits above page content but below the mobile slide-menu
   (which uses 10001+). Calendly's own modal overlay is z-index 9999+ and
   handles itself when open.

   Delete this entire block + the td_floating_cta_* functions in
   functions.php to revert.
   ========================================================================== */
.td-floating-cta {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 9000 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 14px 26px !important;
    background-color: #000 !important;
    color: #fff !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.td-floating-cta:hover,
.td-floating-cta:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
    text-decoration: none !important;
}

@media (max-width: 600px) {
    .td-floating-cta {
        right: 16px !important;
        bottom: 16px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}


/* ==========================================================================
   Mobile + tablet heading-size cap.

   Many hero blocks (Stackable + native WP) ship with desktop-only px font
   sizes that carry straight through to phone and tablet viewports,
   producing 90px+ words on a 768px iPad Mini and 100px+ on a 375px phone.
   Stackable's per-block tablet/mobile sizing isn't set on every block,
   so this cap is a site-wide safety net: clamp() keeps headings readable
   on small + medium screens without flattening intentional differences
   between heading levels — H1 stays larger than H2, etc.

   Scoped to <=1023px so the desktop layout is untouched. !important is
   required because Stackable's generated inline CSS uses !important on
   font-size, so we have to win the cascade.

   Per-heading caps (the max in clamp): H1 3.3rem, H2 2.5rem, H3 2.25rem.
   ========================================================================== */
@media (max-width: 1023px) {
    h1,
    .stk-block-heading h1,
    .stk-block-heading h1.stk-block-heading__text {
        font-size: clamp(32px, 9vw, 3.3rem) !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
    }

    h2,
    .stk-block-heading h2,
    .stk-block-heading h2.stk-block-heading__text {
        font-size: clamp(26px, 7.5vw, 2.5rem) !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    h3,
    .stk-block-heading h3,
    .stk-block-heading h3.stk-block-heading__text {
        font-size: clamp(22px, 6vw, 2.25rem) !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }
}


/* ==========================================================================
   Blog grid: make featured-image links feel clickable.

   The core wp:post-featured-image block (with isLink:true) wraps the
   <img> in an anchor, but the figure's alignleft float + Stackable
   wrappers above it can leave the anchor's painted box smaller than the
   visible image, and Stackable's column-wrapper CSS can win the cursor
   cascade in those gutters. !important + figure-element selector
   guarantees we beat anything Stackable or core inserts.
   ========================================================================== */
figure.wp-block-post-featured-image,
figure.wp-block-post-featured-image a,
figure.wp-block-post-featured-image a img,
figure.wp-block-post-featured-image .wp-post-image {
    cursor: pointer !important;
}
figure.wp-block-post-featured-image a img {
    transition: opacity 0.2s ease;
}
figure.wp-block-post-featured-image a:hover img,
figure.wp-block-post-featured-image a:focus-visible img {
    opacity: 0.85;
}


/* ==========================================================================
   Blog grid: collapse to single column below desktop.

   The Query Loop's post-template renders as a 3-column CSS grid via the
   `columns-3` class. On tablet + small-laptop widths the 3-column layout
   forces post titles to wrap mid-word (e.g. "Perform / ance for / 2026").
   Force a single column at <=1199px so anything narrower than desktop
   gets the readable stacked layout; desktop (>=1200px) keeps 3 columns.
   ========================================================================== */
@media (max-width: 1199px) {
    .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   Blog grid: collapse to single column at <=1199px.

   The Blog archive's Query Loop renders <ul class="columns-3
   wp-block-post-template is-layout-grid">, which keeps 3 columns down
   to roughly 700px viewport — far narrower than the post titles can
   handle. At ~1100-1200px the columns are still too cramped (long
   titles like "Think Design goes off-line and in person..." break
   mid-word and become hard to scan).

   Force single column up to and including 1199px so only true desktop
   (>=1200px) keeps the 3-up grid. Removes the row-gap collapse that
   grid-template-columns: 1fr would normally introduce by also resetting
   gap-related vars.
   ========================================================================== */
@media (max-width: 1199px) {
    .wp-block-post-template.is-layout-grid,
    .columns-2.wp-block-post-template.is-layout-grid,
    .columns-3.wp-block-post-template.is-layout-grid,
    .columns-4.wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}