/* ==========================================================================
   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, .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: 'Inter', 'Helvetica Neue', Helvetica, Arial, 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: 'Inter', 'Helvetica Neue', Helvetica, Arial, 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: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !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: 'Inter', '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: 'Inter', '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) {
    /* Center horizontally on phones — the off-right placement crowds
       the footer menu's right-aligned items. Use left:50% + translateX
       so we don't need to know the pill's width. The hover/focus state
       below has to repeat translateX(-50%) alongside its translateY so
       the centering isn't lost when hover swaps the transform. */
    .td-floating-cta {
        left: 50% !important;
        right: auto !important;
        bottom: 16px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        transform: translateX(-50%) !important;
    }
    .td-floating-cta:hover,
    .td-floating-cta:focus-visible {
        transform: translateX(-50%) translateY(-2px) !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;
    }

    /* Homepage success-stories right-column subhead "Customized digital
       solutions designed for your business" — the generic H3 cap above
       lands at 36px on tablet, which reads too loud beside the body
       copy underneath. Pin this specific block to 1.75rem. */
    body .stk-65cb1c5 h3.stk-block-heading__text {
        font-size: 1.75rem !important;
        line-height: 1.2 !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;
    }
}


/* ==========================================================================
   Homepage "Sectors We Serve" carousel — responsive slide count.

   The Stackable carousel block (stk-e665893) on the homepage ships with
   `--slides-to-show: 3.3 !important` inline at every viewport. On phones
   that compresses each slide column to ~100px while the card images are
   pinned at 243px wide — the cards overflow the slider, you see four
   cramped/clipped cards with the last cut off the right edge.

   Drop to one-and-a-peek on phones (1.15) and two-and-a-peek on tablets
   (2.15). The `.x` peek is intentional — it signals "swipe me" without
   cropping a card to unreadable.

   Specificity: Stackable's inline rule uses `.stk-e665893 { ... !important }`
   (0,1,0). The inline <style class="stk-block-styles"> tag prints AFTER our
   linked stylesheet in the document, so equal-specificity !important would
   lose on source order. Adding the body prefix bumps us to (0,1,1) and wins
   regardless of source order.

   Also unpin the per-card image width on phones: the inline rule fixes
   `.stk-img-wrapper { width:243px !important; height:324px !important }`,
   which overflows slides on viewports below ~290px. width:100% + aspect-
   ratio keeps the card proportions while letting it shrink with the slide.
   ========================================================================== */
/* Tighten the inter-card gap at every viewport. Stackable's block sets
   `--gap: 30px !important` inline; that reads as a big tan dead-band
   between cards on desktop and a wasteful spacer on mobile. 1rem (16px)
   keeps the cards visually distinct without floating apart. */
body .stk-e665893 {
    --gap: 1rem !important;
}

@media (max-width: 767px) {
    body .stk-e665893 {
        --slides-to-show: 1.15 !important;
    }
    /* Let the card image fill the slide column on phones — without this it
       stays clamped at the desktop 243px and the slide width (~87% of vw)
       runs wider than the picture, leaving a tan dead-zone to its right
       inside each slide. width:100% fills the column; aspect-ratio holds
       the original 243:324 card proportion so nothing squashes. */
    body .stk-e665893 :is(.stk-aa20d38, .stk-8a1d1d9, .stk-ab61e47, .stk-e2518b5, .stk-c03b457) .stk-img-wrapper {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 243 / 324;
    }
    /* Note: .stk-125b85a (Sectors section wrapper) ships with a 1090px
       bottom padding on phones. It LOOKS like dead space below the
       carousel, but it's actually the reservoir that the next section
       (.stk-f5562f6) overlaps into via `margin-top: -2000px`. Touching
       this padding collapses both sections onto each other. Leave it. */
}
@media (min-width: 768px) and (max-width: 1023px) {
    body .stk-e665893 {
        --slides-to-show: 2.15 !important;
    }
}


/* ==========================================================================
   Homepage "Our Services" — restore the always-visible feature lists.

   The three service items (Website Design & Development, Digital Marketing,
   Custom Software) are authored as accordion-blocks (wp:pb/accordion-item).
   But the "accordion title" is actually a paragraph + the line "Every
   website we create is engineered for:" — and the "accordion content" is
   the bullet list of features. So the content reads as a complete static
   section, not as a clickable accordion. The plugin's default
   `[data-initially-open=false] .c-accordion__content { display: none }`
   was hiding the list, making it look like the bullets had been removed.

   The two FAQ items further down the page (#ac-19053, #ac-19054) DO use
   the accordion as designed: short H2 question + answer body that should
   stay collapsible. We distinguish by title element: services use <h4>,
   FAQs use <h2>. :has() scopes the override to H4-titled accordions only.
   ========================================================================== */
.c-accordion__item:has(> h4.c-accordion__title) > .c-accordion__content {
    display: block !important;
}
.c-accordion__item:has(> h4.c-accordion__title) > .c-accordion__title {
    cursor: default !important;
    padding-right: 0 !important;
}
.c-accordion__item:has(> h4.c-accordion__title) > .c-accordion__title::after {
    display: none !important;
}

/* Homepage FAQ accordions (H2-titled) — restore the "+" / "−" visual cue.
   Line ~508 above kills `.c-accordion__title:after { display: none }`
   site-wide (was added back when a different custom expand-button was
   injected, but that button doesn't render on the FAQ section). Without
   the cue, the FAQ rows look like plain text — users don't know they
   expand. Re-enable inline-block on H2-titled accordions only; the
   plugin's own CSS supplies content ("+" closed, "−" open), color,
   and position. */
.c-accordion__item:has(> h2.c-accordion__title) > .c-accordion__title::after {
    display: inline-block !important;
}

/* FAQ "+/−" indicator: keep it adjacent to the question text instead of
   floating at the right edge of the title block.

   accordion-blocks plugin CSS pins ::after at position:absolute; right:0
   on a block-level title — fine when titles are narrow, but on wide
   screens it leaves a big visible gap between a short question on the
   left and the "+" on the right. Two changes solve it without touching
   the plugin's positioning logic:

     1. Title becomes display:inline-block + max-width:100% so it shrinks
        to its content width. right:0 then lands just past the end of
        single-line questions (the padding-right value below controls
        the visible gap). For questions long enough to wrap, the title
        fills available width and the indicator sits at the end of the
        first line.

     2. ::after gets top:0 + line-height:inherit (was top:50%; transform:
        translateY(-50%)) so the indicator aligns with the FIRST line of
        the title rather than vertically-centered across all wrapped lines.

   padding-right: 1.5em gives roughly a 1em visible gap between text end
   and "+" left edge (the "+" character itself is ~0.5em wide). Tune if
   the gap feels off at the current font-size (line 507: 1.1875rem ≈ 19px).

   Scoped to H2-titled accordion items so the H4 always-open service
   blocks (which hide ::after entirely via the earlier rule) aren't
   affected. Applies to both the homepage FAQ and the audit-page FAQ. */
.c-accordion__item:has(> h2.c-accordion__title) > .c-accordion__title {
    display: inline-block !important;
    max-width: 100% !important;
    padding-right: 1.5em !important;
}
.c-accordion__item:has(> h2.c-accordion__title) > .c-accordion__title::after {
    top: 0 !important;
    transform: none !important;
    line-height: inherit !important;
}

/* Audit page FAQ — tighten the gap between question and its expanded
   answer to 1.75em (~33px at 19px font), down from the ~60px combined
   site-wide margin-bottom on .c-accordion__title (line 507: 40px) plus
   the default <p> margin-top inside .c-accordion__content. Total gap
   should equal a single line at line-height 1.75 (Ray's spec, audit
   page only — homepage FAQ keeps the looser spacing).

   Three rules:
     1. Title margin-bottom → 1.75em (controls the gap when open).
     2. First <p> in the answer → margin-top 0 (was inheriting browser/
        theme default of ~1em, which was double-counting against the
        title margin).
     3. Last <p> in the answer → margin-bottom 0 so a long answer
        doesn't add extra space before the NEXT FAQ item. */
body.page-id-6615 .c-accordion__item:has(> h2.c-accordion__title) > .c-accordion__title {
    margin-bottom: 1.75em !important;
}
body.page-id-6615 .c-accordion__item:has(> h2.c-accordion__title) > .c-accordion__content > p:first-child {
    margin-top: 0 !important;
}
body.page-id-6615 .c-accordion__item:has(> h2.c-accordion__title) > .c-accordion__content > p:last-child {
    margin-bottom: 0 !important;
}

/* ---- Audit page FAQ spacing — tighter Q→A, larger A→nextQ.
   All values in em so the proportions track typography: Q→A reads as
   "half a line of breathing", A→nextQ reads as "two full lines of
   breathing". Reapply elsewhere by reusing these em values.

   Layered above the three rules just above; uses the same selectors so
   source order wins. To revert: delete from this comment down to the
   matching "end of revertible audit FAQ override" marker. ---- */
body.page-id-6615 .c-accordion__item:has(> h2.c-accordion__title) > .c-accordion__title {
    margin-bottom: 0.5em !important;  /* was 1.75em — tightens Q→A */
}
body.page-id-6615 .c-accordion__item:has(> h2.c-accordion__title) {
    margin-bottom: 1em !important;    /* separates Q/A pair from next (was 2em, dialed down so collapsed Q→Q reads tighter) */
}
body.page-id-6615 .c-accordion__item:has(> h2.c-accordion__title):last-child {
    margin-bottom: 0 !important;      /* no trailing space below last FAQ */
}
/* ---- end of revertible audit FAQ override ---- */


/* ==========================================================================
   Homepage "Our Services" — shrink the three "Explore Our ___ Services"
   buttons.

   Stackable doesn't set an explicit font-size on these three buttons
   (stk-02e3eb3 Website Design, stk-2ed6a7a Digital Marketing,
   stk-1359db3 Custom Software), so they inherit the body default of
   16px and render too loud at long text widths. Drop to 14px to match
   the "See more" button (stk-c553b57) further down the same page —
   gives the homepage a consistent button-text scale.
   ========================================================================== */
:is(.stk-02e3eb3, .stk-2ed6a7a, .stk-1359db3) .stk-button__inner-text {
    font-size: 14px !important;
}


/* ==========================================================================
   FOOTER MOBILE (<=767px) — single column, centered, tight rhythm.

   The tablet/desktop blocks higher up handle ≥768px. On phones the parent
   theme's default 4-column flex widget-area renders, and widget-2 +
   widget-3 (which carry the mobile-only menu groups) keep their default
   Stackable margins — producing the huge tan vertical gaps between logo,
   "About Us / Services / Sectors", and "Case Studies / Partner with Us /
   Blog / Privacy" visible on the page.

   Fix: collapse to single column, center the logo + menu groups, kill
   the per-block top/bottom margins, and pad each link with a small
   tap-friendly vertical breathing room.
   ========================================================================== */
@media (max-width: 767px) {
    /* Parent theme's site-footer carries `padding: ... 16px ...` on mobile.
       That would stack with our 3rem widget-area padding-right and push
       items 64px in from the viewport edge. Zero out the parent right
       padding so 3rem (48px) is the only gap users see. */
    footer.site-footer {
        padding-right: 0 !important;
    }
    footer .widget-area {
        display: block !important;
        /* Bottom padding bumped from 32px → 64px (added 2rem) to keep
           "Privacy" clear of the centered floating CTA below. */
        padding: 40px 3rem 64px 24px !important;
    }
    footer .widget-column.footer-widget-1,
    footer .widget-column.footer-widget-2,
    footer .widget-column.footer-widget-3,
    footer .widget-column.footer-widget-4 {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: right !important;
    }
    footer .widget-column.footer-widget-1 {
        margin-bottom: 28px !important;
    }
    /* Pull the menu group up so "About Us" baseline lands on the same
       horizontal line as the "Think" baseline (the TOP word) of the
       two-line logo. The logo sits at the left edge and the menu is
       right-aligned (no horizontal overlap), so vertical co-occupation
       is fine. Lifting to the top word (vs the bottom "Design" word)
       also reclaims ~22px of vertical real estate at the bottom of the
       footer, reducing overlap with the floating "Book a call" CTA.
       Calibrated for the current logo (41px tall, two-line "think /
       design" stack) — re-measure if the logo asset is swapped. */
    footer .widget-column.footer-widget-2 {
        margin-top: -97px !important;
    }
    /* Push the logo to the right edge to match the menu items below it */
    footer .widget-column.footer-widget-1 .stk-img-wrapper {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    /* No visual gap between the two menu groups — read as one
       continuous right-aligned list. The 2.2 line-height on items
       supplies all the inter-line breathing room. */
    footer .widget-column.footer-widget-2 {
        margin-bottom: 0 !important;
    }
    /* Strip Stackable's default per-block margins inside the mobile menu
       widgets so the links sit in a tight, right-aligned column with a
       consistent 2.2 line-height rhythm. */
    footer :is(.footer-widget-2, .footer-widget-3) .wp-block-stackable-columns,
    footer :is(.footer-widget-2, .footer-widget-3) .wp-block-stackable-column,
    footer :is(.footer-widget-2, .footer-widget-3) .stk-row,
    footer :is(.footer-widget-2, .footer-widget-3) .stk-column-wrapper,
    footer :is(.footer-widget-2, .footer-widget-3) .stk-block-content,
    footer :is(.footer-widget-2, .footer-widget-3) .wp-block-stackable-text {
        margin: 0 !important;
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }
    footer :is(.footer-widget-2, .footer-widget-3) .stk-block-text__text {
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
        line-height: 1.8 !important;
    }
}


/* ==========================================================================
   FAQ section — bottom buffer so the centered floating CTA doesn't sit on
   the seam between the FAQ background and the footer.

   The FAQ accordion block is wrapped in `.stk-3c8ed3a`, which has a light
   gray (`#f1f1f1`) background. On mobile, that section ends and the purple
   footer begins immediately below — meanwhile the floating "Book a call
   with us" CTA is centered at the viewport bottom and straddles the two
   color zones, looking broken.

   Adding bottom padding to the FAQ wrapper at <=600px (same breakpoint
   that centered the CTA) extends the gray background past the seam, so
   the CTA hovers over a uniform surface. Used on services + homepage +
   any other page that shares this FAQ section.
   ========================================================================== */
@media (max-width: 600px) {
    body .stk-3c8ed3a {
        padding-bottom: 96px !important;
    }
}


/* ==========================================================================
   Audit page (page-id-6615) FAQ spacing — tighten Q→A, loosen A→nextQ.

   Default rendering on the audit FAQ pairs:
     - Q → A gap: ~39px (H2 .c-accordion__title margin-bottom 33.25px +
       line-leading).
     - A → next Q gap: ~21px (next H2 margin-top 15.77px + line-leading).
   Ray wanted the question visually paired with its own answer, and the
   answer visually separated from the next question. Tighten the title's
   margin-bottom and add a per-item bottom margin so each Q/A block sits
   in its own breathing space.
   ========================================================================== */
body.page-id-6615 .c-accordion__title {
    margin-bottom: 10px !important;
}
body.page-id-6615 .c-accordion__item {
    margin-bottom: 30px !important;
}
body.page-id-6615 .c-accordion__item:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Single blog post template styling (restored from WPCode snippet 4776).

   Provided the single-post layout (centered 1280px wrapper, content padding,
   box-shadow removal) and the post typography scale. Stopped applying when
   the WPCode plugin was uninstalled; ported here verbatim so single posts
   stop falling back to the parent-theme defaults.
   ========================================================================== */
body {
    --p-box-shadow: none !important;
}

.single-post .hentry {
    padding: 0px !important;
}

.single-post .site-wrapper {
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto;
}

.single-post .entry-content {
    margin-top: 90px !important;
    padding: 20px 150px;
}

@media (max-width: 994px) {
    .single-post .entry-content {
        padding: 20px 24px !important;
    }
}

/* Title (H1) */
.single-post h1 {
    font-size: 3rem;
    line-height: 3.275rem;
    font-weight: 500;
    color: #282728;
}

/* Subtitle (H2) */
.single-post h2 {
    font-size: 1.75rem;
    line-height: 1.89375rem;
    font-weight: 500;
    color: #49535A;
}

/* Content heading (H3) */
.single-post h3 {
    font-size: 2.5rem;
    line-height: 2.625rem;
    font-weight: 500;
    color: #282728;
}

/* Content sub-heading (H4) */
.single-post h4 {
    font-size: 2rem;
    line-height: 2.39375rem;
    font-weight: 500;
    color: #282728;
}

/* Body paragraphs */
.single-post p {
    font-size: 1.125rem;
    line-height: 1.525rem;
    font-weight: 400;
    color: #282728;
    font-family: "Roboto", Sans-Serif;
}

/* Publish date */
.single-post .wp-block-post-date {
    font-size: 1rem;
    line-height: 1.2;
    text-transform: uppercase !important;
    font-weight: 400;
    font-family: "Roboto", Sans-Serif;
    color: #2928299c;
}

/* Icon list */
.single-post .wp-block-stackable-icon-list {
    padding-left: 30px;
}

.single-post .stk-block-icon-list__ul {
    --stk-icon-list-row-gap: 10px !important;
}

.single-post .wp-block-stackable-icon-list ul li {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    color: #282728;
    font-family: "Roboto", Sans-Serif;
}

.single-post .stk-block-icon-list-item__content {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px;
}

/* ==========================================================================
   Services › Website Design & Development (page-id-5877) — process section
   responsive stacking.

   Keep the page's NATIVE desktop layout — the 3-column design from the
   reference build (sticky intro | step titles | step details): nothing is
   overridden above 1080px. The section ships as nested Stackable column blocks
   (an outer [spacer | intro | steps] row, steps = title|detail rows), and
   Stackable only collapses its columns below 768px — so between ~769–1024px
   the columns shrink to 150–300px ribbons (the "3½-column" breakage; the
   reference build has this same bug). Below 1080px, force the rows to wrap and
   their columns to full width so each step stacks cleanly (intro → steps,
   title → detail) instead of cramming.

   1080 (not 1024): Stackable's min-width:1024 desktop rule collides at exactly
   1024 (iPad landscape), so 1080 covers the whole cramped band.

   NOTE: the stk-* hashes are per-block. If these blocks are rebuilt in the
   editor the classes change and these selectors must be updated.
   ========================================================================== */
@media (max-width: 1080px) {
    /* Force the rows to wrap — Stackable keeps them nowrap above ~810px, which
       makes flex-basis:100% columns shrink onto one line instead of stacking. */
    body.page-id-5877 .stk-eef17a7-column,
    body.page-id-5877 .stk-592aa43-column,
    body.page-id-5877 .stk-833484f-column,
    body.page-id-5877 .stk-2b38d18-column,
    body.page-id-5877 .stk-ec5ac3b-column,
    body.page-id-5877 .stk-d02da97-column,
    body.page-id-5877 .stk-9d3dd5f-column {
        flex-wrap: wrap !important;
    }
    /* Each column to full width so it wraps to its own line (stacks). */
    body.page-id-5877 .stk-eef17a7-column > .stk-column,  /* outer: intro | steps */
    body.page-id-5877 .stk-592aa43-column > .stk-column,  /* step: Discovery & Strategy */
    body.page-id-5877 .stk-833484f-column > .stk-column,  /* step: User-Centered Design */
    body.page-id-5877 .stk-2b38d18-column > .stk-column,  /* step: Custom Development */
    body.page-id-5877 .stk-ec5ac3b-column > .stk-column,  /* step: Enhanced SEO */
    body.page-id-5877 .stk-d02da97-column > .stk-column,  /* step: Maintenance & Support */
    body.page-id-5877 .stk-9d3dd5f-column > .stk-column {  /* step: eCommerce */
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Services › Website Design & Development (page-id-5877) — FAQ left alignment.

   The FAQ Stackable column (stk-59f27bd) was max-width:1140px and auto-centered,
   so it drifted to ~143px left on wide screens (vs the page's 66px content
   inset) and went flush to the edge below ~1140px. The rest of the page insets
   content with a left margin of 73 / 35 / 24px (→ 66 / 28 / 17px from the
   alignfull row at -7). Left-align the FAQ to that same responsive inset so its
   left edge matches the hero and other sections.

   NOTE: stk-59f27bd is the FAQ column's per-block hash — update if rebuilt.
   ========================================================================== */
/* Symmetric margins: left aligns with the page inset; right keeps the column
   off the edge (with max-width:1140 the block stays left-aligned on desktop and
   insets evenly on mobile — previously margin-right:auto let it overflow ~8px
   past the right edge on phones). */
@media (min-width: 1024px) {
    body.page-id-5877 .stk-59f27bd { margin-left: 73px !important; margin-right: 73px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    body.page-id-5877 .stk-59f27bd { margin-left: 35px !important; margin-right: 35px !important; }
}
@media (max-width: 767px) {
    body.page-id-5877 .stk-59f27bd { margin-left: 24px !important; margin-right: 24px !important; }
}

/* ==========================================================================
   Services › Website Design & Development (page-id-5877) — "Our Process" cards
   left/right margin.

   The process steps ("01 Discover / Discovery & Strategy" …) are a Custom HTML
   block (<div class="grid"> of <article class="card">) with no CSS of its own,
   so it renders full-bleed (content flush to both viewport edges; the "01"
   numbers clip on the left). Inset it to the same responsive content margin the
   rest of the page uses (73 / 35 / 24px → 66 / 28 / 17px) so it aligns with the
   hero, FAQ, and other sections.

   This only fixes the horizontal margin; the cards are otherwise unstyled.
   ========================================================================== */
@media (min-width: 1024px) {
    body.page-id-5877 .grid { padding-left: 73px !important; padding-right: 73px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    body.page-id-5877 .grid { padding-left: 35px !important; padding-right: 35px !important; }
}
@media (max-width: 767px) {
    body.page-id-5877 .grid { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ==========================================================================
   Services › Website Design & Development (page-id-5877) — "Our Process" cards
   DEFAULT styling.

   The Custom HTML block ships markup (.grid / .card / .step-badge / .step-num)
   with no CSS, so it rendered as a plain stacked text list. This gives it a
   default look matching the site: a 2-up responsive grid of warm-tinted cards
   (on the white section), Georgia step titles, Inter body, a prominent step
   number, and a subtle hover/focus lift. No Figma reference — adjust to taste.
   ========================================================================== */
body.page-id-5877 .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 16px;
}
@media (max-width: 767px) {
    body.page-id-5877 .grid { grid-template-columns: 1fr; gap: 16px; }
}
body.page-id-5877 .card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f7f4ee;
    border: 1px solid #e7e1d5;
    border-radius: 16px;
    padding: 30px 32px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.page-id-5877 .card:hover,
body.page-id-5877 .card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(40, 39, 40, 0.08);
    border-color: #cdc0af;
    outline: none;
}
body.page-id-5877 .step-badge {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
body.page-id-5877 .step-num {
    font-family: 'Inter', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: #282728;
}
/* the small label beside the number (Discover / Design / Build / Launch) */
body.page-id-5877 .step-badge span:last-child {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8175;
    opacity: 1 !important;
}
body.page-id-5877 .card h3 {
    margin: 0;
    font-family: 'Georgia', serif;
    font-size: 1.5rem;
    line-height: 1.25;
    color: #282728;
}
body.page-id-5877 .card p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #49535A;
}

/* The black "Why Choose" section (stk-b48cf6d) sat flush against the "Our
   Process" cards above it (its 100px was internal padding-top, not a gap).
   Add margin-top so there's a real gap between the cards and the black block. */
body.page-id-5877 .stk-b48cf6d { margin-top: 100px !important; }
@media (max-width: 767px) {
    body.page-id-5877 .stk-b48cf6d { margin-top: 56px !important; }
}

/* "Our Process" centered header (heading + subtitle share column stk-3015150).
   The column is full-bleed, so on narrow screens the longer subtitle ("From
   discovery to deployment …") ran to / past the viewport edge. Inset it with
   the same responsive gutter used elsewhere so the centered text stays clear of
   the edges at every width. */
@media (min-width: 1024px) {
    body.page-id-5877 .stk-3015150 { padding-left: 73px !important; padding-right: 73px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    body.page-id-5877 .stk-3015150 { padding-left: 35px !important; padding-right: 35px !important; }
}
@media (max-width: 767px) {
    body.page-id-5877 .stk-3015150 { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ============================================================
   Single-post byline + header tidy (2026-06-26)
   Byline is injected under the post title by
   prespa-child/inc/author-byline.php (the_content filter). These rules
   style it and give single posts a solid header band so the transparent
   masthead overlay no longer lets content tuck under the logo/nav.
   Scoped to body.single-post so hero pages keep their transparent header.
   ============================================================ */

/* "By {name}" line under the title */
body.single-post .td-byline {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: #6b6b6b;
    margin: 0.25rem 0 2rem;
}
body.single-post .td-byline .author-name {
    font-weight: 600;
    color: #404040;
}

/* Solid header band on single posts (parent sets it transparent inline). */
body.single-post .main-navigation-container {
    background-color: var(--wp--preset--color--bgr, #f1f1f1) !important;
}

/* Image captions. */
body.single-post .entry-content figcaption,
body.single-post .entry-content .wp-element-caption {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* About Us (page-482): the team photos for the other members carry a Stackable
   cap of 260px on their .stk-img-wrapper; Ray's image block (stk-d724be8) lacks
   it, so his photo goes full-bleed when the layout stacks on mobile. Match the
   others at mobile only (desktop keeps his featured founder layout). */
@media (max-width: 767px) {
    body.page-id-482 .stk-d724be8 .stk-img-wrapper {
        display: block !important;
        width: 260px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================
   Single-post Previous / Next navigation (2026-06-26)
   Markup comes from inc/post-nav.php (filters on prev/next_post_link).
   ============================================================ */
body.single-post .post-navigation {
    margin: 3rem 0 1rem;
    border-top: 1px solid #e3e3e3;
    padding-top: 1.5rem;
}
body.single-post .post-navigation .nav-links {
    /* line 38 hides .nav-links globally with display:none !important — override it */
    display: flex !important;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: flex-start;
}
body.single-post .td-pn-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 0 1 48%;
    text-decoration: none;
}
body.single-post .td-pn-next {
    flex-direction: row-reverse;
    text-align: right;
    margin-left: auto;
}
body.single-post .td-pn-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.single-post .td-pn-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b6b6b;
    margin-bottom: 2px;
}
body.single-post .td-pn-title {
    font-weight: 600;
    line-height: 1.3;
    color: #404040;
}
body.single-post .td-pn-link:hover .td-pn-title {
    text-decoration: underline;
}
@media (max-width: 600px) {
    body.single-post .post-navigation .nav-links {
        flex-direction: column;
        gap: 1rem;
    }
    body.single-post .td-pn-link,
    body.single-post .td-pn-next {
        flex: 1 1 auto;
        max-width: 100%;
        flex-direction: row;
        text-align: left;
        margin-left: 0;
    }
}