/*
Theme Name:  Lakeshore Media Services
Theme URI:   https://www.lakeshoremediaservices.com
Author:      Lakeshore Media Services
Description: Custom accessible WordPress theme for Lakeshore Media Services. WCAG 2.1 AA compliant.
Version:     2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     Proprietary
Text Domain: lakeshore-media
*/

/* ============================================================
   SELF-HOSTED FONTS  –  Montserrat  (replaces licensed Gotham)
   ============================================================ */
@font-face {
    font-display: swap;
    font-family:  'Montserrat';
    font-style:   normal;
    font-weight:  400;
    src: url('assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family:  'Montserrat';
    font-style:   normal;
    font-weight:  500;
    src: url('assets/fonts/montserrat-v31-latin-500.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family:  'Montserrat';
    font-style:   normal;
    font-weight:  600;
    src: url('assets/fonts/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family:  'Montserrat';
    font-style:   normal;
    font-weight:  700;
    src: url('assets/fonts/montserrat-v31-latin-700.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family:  'Montserrat';
    font-style:   normal;
    font-weight:  800;
    src: url('assets/fonts/montserrat-v31-latin-800.woff2') format('woff2');
}

/* ============================================================
   WCAG ADDITIONS  (not in original – skip link & focus ring)
   ============================================================ */
.lms-skip-link {
    position:        absolute !important;
    top:             -200%;
    left:            0;
    z-index:         999999;
    padding:         0.75rem 1.5rem;
    background:      #DC7427;
    color:           #ffffff;
    font-family:     'Montserrat', sans-serif;
    font-weight:     700;
    font-size:       14px;
    text-decoration: none;
    border-radius:   0 0 4px 0;
    transition:      top 150ms ease;
}
.lms-skip-link:focus { top: 0; }

:focus-visible {
    outline:        3px solid #DC7427;
    outline-offset: 3px;
    border-radius:  4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   BASE OVERRIDES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing:   antialiased;
}
img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        -webkit-animation-duration:        0.01ms !important;
                animation-duration:        0.01ms !important;
        -webkit-animation-iteration-count: 1      !important;
                animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }
}

ul, ol, li {
    font-family: 'Montserrat', sans-serif;
    font-size:   18px;
    font-weight: 500;
    line-height: 2;
    color:       #414042;
}

/* ============================================================
   CONTAINER
   ============================================================ */
div.container-max-width {
    max-width: 1200px;
}

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

@media (min-width: 1440px) {
  .container {
    width: 1400px;
  }
}

/* ============================================================
   VERTICAL PADDING UTILITIES
   ============================================================ */
.vertical-padding-large {
    padding-top:    150px;
    padding-bottom: 150px;
}
.vertical-padding-large-top {
    padding-top: 150px;
}
.vertical-padding-first-block {
    padding-top:    150px;
    padding-bottom: 90px;
}
.vertical-padding-medium {
    padding-top:    100px !important;
    padding-bottom: 100px !important;
}
.vertical-padding-small {
    padding-top:    30px;
    padding-bottom: 30px;
}
.top-vertical-padding-medium {
    padding-top: 100px !important;
}
.no-left-right-padding {
    padding-left:  0;
    padding-right: 0;
}

div.no-bottom-padding {
  padding-bottom: 0px;
}

@media screen and (max-width: 992px) {
    .vertical-padding-large        { padding-top: 80px; padding-bottom: 80px; }
    .vertical-padding-large-top    { padding-top: 80px; }
    .vertical-padding-first-block  { padding-top: 80px; padding-bottom: 20px; }
    .vertical-padding-medium       { padding-top: 60px !important; padding-bottom: 60px !important; }
    .top-vertical-padding-medium   { padding-top: 60px !important; }
    #footer                        { padding: 100px 0 !important; }
}

div.no-upper-padding {
  padding-top: 0px !important;
}

@media screen and (max-width: 1200px) {
  .no-upper-padding-on-mobile {
    padding-top: 0px !important;
  }
}

/* ============================================================
   RESPONSIVE SHOW / HIDE
   Desktop >= 1025px  |  Mobile <= 1440x
   ============================================================ */
@media screen and (min-width: 1441px) {
    .hide-on-desktop              { display: none !important; }
    div#desktop-content-container { margin-top: 0; }
}
@media screen and (max-width: 1440px) {
    .hide-on-mobile               { display: none !important; }
    div#desktop-content-container { margin-top: 80px; }
}

/* ============================================================
   DESKTOP HEADER  (>= 1440px)
   ============================================================ */
@media screen and (min-width: 1441px) {
    #header-desktop {
        position:   relative;
        z-index:    10;
        border-top: 10px solid #007EAB;
        padding:    30px 0;
    }
    #header-desktop > div:first-of-type {
        display:         flex;
        justify-content: space-between;
        align-items:     center;
        width:           calc(100% - 30px);
        max-width:       1170px;
        margin:          0 auto;
    }
    #header-desktop > div:first-of-type #desktop_header_logo {
        position: relative;
        display:  block;
        width:    215px;
    }
    #header-desktop > div:first-of-type #desktop_header_logo:focus { outline: none; }
    #header-desktop > div:first-of-type #desktop_header_logo:focus::after {
        content:    '';
        position:   absolute;
        top:        160px;
        right:      0;
        left:       0;
        display:    block;
        width:      30px;
        opacity:    1;
        height:     3px;
        margin:     0 auto;
        background: #68A342;
        transition: opacity 200ms;
    }
    #header-desktop > div:first-of-type #desktop_header_logo img {
        width: 100% !important; height: 100% !important;
    }
    #header-desktop > div:first-of-type #menu-builder-header-nav {
        position:    relative;
        display:     flex;
        align-items: center;
        margin-top:  -70px;
    }
}

/* ============================================================
   MOBILE BLUE BAR
   ============================================================ */
@media screen and (max-width: 1440px) {
    div.header-mobile-with-blue-bar {
        position:         fixed;
        left:             0;
        top:              0;
        width:            100%;
        height:           10px;
        background-color: #007EAB;
        z-index:          999999;
        border-top: 10px solid #007EAB;
    }
}
@media screen and (min-width: 1441px) {
    div.header-mobile-with-blue-bar { display: none; }
}

/* ============================================================
   MOBILE HEADER
   ============================================================ */

@media screen and (max-width: 1440px) {
  div#header-mobile-only {
    display: block;
    position: fixed;
    top: 0;
    height: 80px;
    width: 100%;
    background-color: #ffffff;
    z-index: 10000;
    transition: background-color 200ms;
  }

  div#header-mobile-only::after {
    clear: both;
    content: "\00a0";
    display: block;
    height: 0;
    font: 0px/0 serif;
    overflow: hidden;
  }
  
  div#header-mobile-only #mobile-header-logo {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% + 5px));
    width: 235px;
    left: 15px;
    display: block;
  }

}

@media screen and (min-width: 1441px) {
    div#header-mobile-only { display: none; }
}

/* ============================================================
   MOBILE NAV TOGGLE
   ============================================================ */
@media screen and (max-width: 1440px) {
 
     .header-menu-navigation-btn {
          position: fixed;
          z-index: 10003;
          top: 18px;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50px;
          height: 50px;
          cursor: pointer;
          -webkit-tap-highlight-color: rgba(0,0,0,0);
     }

     .header-menu-navigation-btn-icon {
          position: relative;
          display: block;
          width: 23px;
          height: 3px;
          background: #007EAB;
          border-radius: 3px;
          transition: background 0.25s;
     }

     .header-menu-navigation-btn-icon::before,
     .header-menu-navigation-btn-icon::after {
          content: '';
          position: absolute;
          left: 0;
          width: 23px;
          height: 3px;
          background: #007EAB;
          border-radius: 3px;
          transition: all 0.25s;
     }
     .header-menu-navigation-btn-icon::before { top: -8px; }
     .header-menu-navigation-btn-icon::after {
        bottom: -8px;
        top: auto;
        width: 15px;
    }

     /* Open state — X */
     body.mobile-nav-open .header-menu-navigation-btn-icon            { background: transparent; }
     body.mobile-nav-open .header-menu-navigation-btn-icon::before,
     body.mobile-nav-open .header-menu-navigation-btn-icon::after     { background: #ffffff; width: 23px; }
     body.mobile-nav-open .header-menu-navigation-btn-icon::before    { top: 0;    transform: rotate(45deg);  }
     body.mobile-nav-open .header-menu-navigation-btn-icon::after     { bottom: 0; transform: rotate(-45deg); }
}
@media screen and (min-width: 1441px) {
    #mobile_nav_toggle { display: none; }
}

/* ============================================================
   PRIMARY NAVIGATION – mobile slide-down  (<= 1440px)
   ============================================================ */
@media screen and (max-width: 1440px) {
    #header-desktop #menu-builder-header-nav {
        position:         fixed;
        top:              0;
        z-index:          10001;
        left:             0;
        width:            100%;
        max-height:       calc(100% - 60px);
        overflow-y:       auto;
        background-color: #007EAB;
        transform:        translateY(calc(-100% + 10px));
    }
    body.mobile-nav-open #header-desktop #menu-builder-header-nav {
        transition: transform 400ms;
        transform:  translateY(0);
        box-shadow: 0 10px 20px rgba(0,0,0,0.4);
        text-align: center;
    }
    
    /* Close (X) icon – white bars against blue nav background */
    body.mobile-nav-open .header-menu-navigation-btn-icon::before,
    body.mobile-nav-open .header-menu-navigation-btn-icon::after {
        background: #ffffff;
    }
    
    #header-menu-navigation {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        width: 100%;
        background: transparent;
        overflow-y: auto;
        padding: 60px 0;
        height: auto;
    }

    #header-menu-navigation ul,
    #header-menu-navigation li { list-style: none; margin: 0; padding: 0; }
    #header-menu-navigation li a,
    #header-menu-navigation li a:link,
    #header-menu-navigation li a:visited {
        display:         block;
        padding:         15px 20px;
        font-family:     'Montserrat', sans-serif;
        font-size:       32px;
        color:           #ffffff !important;
        text-decoration: none;
        border-bottom:   1px solid rgba(255,255,255,0.2);
    }
    #header-menu-navigation li a:hover { background-color: rgba(255,255,255,0.1); }
    #header-menu-navigation ul         { display: block; }
    #header-menu-navigation .sub-menu li a,
    #header-menu-navigation .sub-menu li a:link { 
        font-size: 20px; 
        font-weight: 500; 
    }
}

/* ============================================================
   PRIMARY NAVIGATION – desktop  (>= 1025px)
   ============================================================ */
@media screen and (min-width: 1441px) {
    /* Reset list styles */
    #header-menu-navigation,
    #header-menu-navigation ul,
    #header-menu-navigation li {
        list-style:  none !important;
        margin: 0; padding: 0; line-height: normal;
    }

    /* Top-level nav bar */
    #header-menu-navigation { display: flex; justify-content: flex-end; align-items: center; }
    #header-menu-navigation > li { margin-right: 60px; position: relative; }
    #header-menu-navigation > li:last-child { margin-right: 0; }

    /* Top-level links */
    #header-menu-navigation > li > a,
    #header-menu-navigation > li > a:link,
    #header-menu-navigation > li > a:visited {
        display:         flex;
        align-items:     center;
        position:        relative;
        font-family:     'Montserrat', sans-serif;
        font-weight:     500;
        font-size:       24px;
        color:           #007EAB;
        text-decoration: none;
        transition:      color 200ms;
    }
    #header-menu-navigation > li > a.active-page { color: #DC7427; }

    /* Underline indicator */
    #header-menu-navigation > li > a::before {
        content:    '';
        position:   absolute;
        bottom:     -15px;
        right:      0;
        left:       0;
        display:    block;
        width:      30px;
        opacity:    0;
        height:     3px;
        margin:     0 auto;
        background: #007EAB;
        transition: opacity 200ms;
    }
    #header-menu-navigation > li > a:hover::before       { opacity: 1; }
    #header-menu-navigation > li > a.active-page::before { opacity: 1; background: #DC7427; }
    #header-menu-navigation > li > a:focus               { outline: none; }
    #header-menu-navigation > li > a:focus::before       { opacity: 1; background: #68A342; }

    /* Dropdown */
    #header-menu-navigation ul {
        display:    none;
        position:   absolute;
        top:        100%;
        left:       0;
        width:      auto;
        min-width:  240px;
        background: #ffffff;
        padding:    8px 0;
        z-index:    9999;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    #header-menu-navigation li:hover > ul,
    #header-menu-navigation li:focus-within > ul { display: block; }

    #header-menu-navigation ul li a,
    #header-menu-navigation ul li a:link,
    #header-menu-navigation ul li a:visited {
        display:         block;
        padding:         12px 24px;
        font-family:     'Montserrat', sans-serif;
        font-size:       18px;
        color:           #007EAB !important;
        text-decoration: none;
        white-space:     nowrap;
        transition:      background-color 150ms;
    }
    #header-menu-navigation ul li a:hover {
        background-color: #f5f5f5;
        color:            #035878 !important;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer { padding: 200px 0; }

#footer #footer-logo {
    position:  relative;
    display:   block;
    width:     100%;
    max-width: 229px;
    margin:    0 auto 60px auto;
}
#footer #footer-logo img      { width: 100%; height: auto; }
#footer #footer-logo:focus    { outline: none; }
#footer #footer-logo:focus::after {
    content:  "";
    position: absolute;
    top:      -12px; left: -12px;
    display:  block;
    width:    calc(100% + 24px);
    height:   calc(100% + 24px);
    border:   2px solid #68A342;
}

/* Footer nav links (bare <a> via custom walker, or <ul><li><a> fallback) */
#menu-builder-footer {
    text-align:      center;
    display:         flex;
    justify-content: space-between;
    margin-bottom:   60px;
}
#menu-builder-footer a,
#menu-builder-footer a:link,
#menu-builder-footer a:visited {
    font-family:     'Montserrat', sans-serif;
    font-weight:     500;
    font-size:       18px;
    color:           #007EAB;
    text-decoration: none;
    margin:          0 10px;
    transition:      color 150ms;
}
#menu-builder-footer a:hover          { text-decoration: underline; }
#menu-builder-footer ul               { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
#menu-builder-footer ul li a          { font-family: 'Montserrat', sans-serif; font-size: 16px; color: #414042; text-decoration: none; }
#menu-builder-footer ul li a:hover    { text-decoration: underline; }

@media screen and (max-width: 992px) {
  #menu-builder-footer {
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
  }
}

#footer .contact-container {
    text-align:    center;
    width:         calc(100% - 60px);
    margin:        0 auto 30px auto;
}
#footer .contact-container a:link,
#footer .contact-container a:active,
#footer .contact-container a:visited {
    position:        relative;
    font-family:     'Montserrat', sans-serif;
    font-weight:     500;
    font-size:       16px;
    color:           #414042;
    line-height:     2;
    text-decoration: none;
    transition:      color 150ms;
}
#footer .contact-container a:hover    { text-decoration: underline; color: #DC7427; }
#footer .contact-container a:focus    { outline: none; }
#footer .contact-container a:focus::after {
    content:  "";
    position: absolute;
    top:      -17px; left: -17px;
    display:  block;
    width:    calc(100% + 34px);
    height:   calc(100% + 34px);
    border:   2px solid #68A342;
}

#footer .copyright-container {
    text-align:  center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size:   16px;
    color:       #414042;
    line-height: 2;
}

/* ============================================================
   TYPOGRAPHY  –  p / ww_p / headings / buttons
   ============================================================ */
p, .ww_p {
    font-family: 'Montserrat', sans-serif;
    font-style:  normal;
    font-weight: 500;
    font-size:   18px;
    color:       #414042;
    line-height: 2;
    margin:      0 0 16px 0;
    padding:     0;
}
p strong, .ww_p strong { font-weight: 600; }

.ww_p.margin-30-60     { margin-top: 30px !important; margin-bottom: 60px !important; }
.ww_p.larger-body-copy { font-size: 24px; }
.ww_p.upper-margin     { margin-top: 15px; }
p.no-bottom-margin,
.ww_p.no-bottom-margin { margin-bottom: 0 !important; }

.ww_p_call_out {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size:   25px;
    line-height: 1.2;
    color:       #035878;
    padding:     0;
}
.ww_p_call_out.medium  { font-weight: 500; font-size: 42px; line-height: 53px; }
.ww_p_call_out.larger  { font-size: 42px; font-weight: 700; line-height: 53px; }

@media screen and (max-width: 1200px) { .ww_p_call_out { font-size: 21px; } }
@media screen and (max-width: 440px)  {
    .ww_p_call_out          { font-size: 16px; }
    .ww_p_call_out.larger   { font-size: 32px; line-height: 42px; }
}

h1, h1.ww_h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size:   44px;
    color:       #DC7427;
    margin: 0; padding: 0;
}
h2, h2.ww_h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size:   37px;
    color:       #DC7427;
    margin: 0; padding: 0;
}
h3, h3.ww_h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size:   32px;
    color:       #007EAB;
    margin: 0; padding: 0;
}
h4, h4.ww_h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size:   29px;
    color:       #007EAB;
    margin: 0; padding: 0;
}

@media screen and (max-width: 480px) {
    h1, h1.ww_h1 { font-size: 37px; }
}

/* ============================================================
   LEGAL PAGE — style WP heading blocks to match ww_p_call_out
   ============================================================ */
.legal-content h2,
.legal-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size:   25px;
    line-height: 2;
    color:       #035878;
    padding:     0;
}

@media screen and (max-width: 1200px) {
    .legal-content h2,
    .legal-content h3 { font-size: 21px; }
}

@media screen and (max-width: 440px) {
    .legal-content h2,
    .legal-content h3 { font-size: 16px; }
}

.ww_action_button1 {
    position:           relative;
    display:            inline-flex;
    flex-flow:          row wrap;
    justify-content:    center;
    align-items:        center;
    font-family:        'Montserrat', sans-serif;
    font-size:          17px;
    font-weight:        500;
    letter-spacing:     2px;
    color:              #007EAB !important;
    text-decoration:    none !important;
    background-color:   #ffffff;
    border:             2px solid #007EAB;
    border-radius:      30px;
    padding:            8px 20px;
    cursor:             pointer;
    text-align:         center;
    transition:         all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.ww_action_button1:hover  { color: #ffffff !important; background-color: #007EAB; border-color: #007EAB; }
.ww_action_button1:active { color: rgba(255,255,255,0.6) !important; background-color: #007EAB; }
.ww_action_button1:focus  { outline: none; }
.ww_action_button1:focus::after {
    content:       "";
    position:      absolute;
    top: -3px; left: -3px;
    display:       block;
    width:         calc(100% + 6px);
    height:        calc(100% + 6px);
    border:        2px solid #68A342;
    border-radius: 30px;
}

@media screen and (max-width: 480px) {
    .ww_action_button1 { letter-spacing: 1px; }
}

body:not(.cke_ltr) a:link,
body:not(.cke_ltr) a:visited {
    position:                  relative;
    color:                     #035878;
    text-decoration:           underline;
    -webkit-text-decoration-color: #035878;
            text-decoration-color: #035878;
}

body:not(.cke_ltr) a:hover {
    text-decoration: none;
}

body:not(.cke_ltr) a:active {
    color:                     #007EAB;
    text-decoration:           underline;
    -webkit-text-decoration-color: #007EAB;
            text-decoration-color: #007EAB;
}

body:not(.cke_ltr) a:focus {
    outline: none;
}

/* ============================================================
   LONG DESCRIPTION  (visually hidden, read by screen readers)
   ============================================================ */
.long-description-container { display: none; }

/* ============================================================
   BANNER / HERO
   ============================================================ */
.banner-wrapper {
    overflow:      hidden;
    margin-top:    -70px;
    margin-bottom: 120px;
}
@media screen and (max-width: 1440px) {
    .banner-wrapper { margin-top: 0; overflow: visible; }
}

.banner-container {
    position:  relative;
    width:     100%;
    max-width: 1800px;
    margin:    0 auto;
    height:    815px;
}
@media screen and (max-width: 1440px) { .banner-container { height: auto; } }
@media screen and (max-width: 992px)  { .banner-container { height: auto; } }

.banner-container img.hero-image {
    position:     relative;
    z-index:      1;
    display:      block;
    margin:       0 0 0 auto;
    width:        auto;
    max-width:    1200px;
    height:       100%;
    padding-left: 15px;
    transition:   all 0.2s;
}
@media screen and (max-width: 1440px) {
    .banner-container img.hero-image { width: 75%; height: auto; }
}
@media screen and (max-width: 992px) {
    .banner-container img.hero-image { position: relative; width: 100%; height: auto; }
}

.banner-container .content-wrapper {
    width:     calc(100% - 30px);
    max-width: 1200px;
    margin:    0 auto;
}
.banner-container .content-wrapper .content-container {
    position:  absolute;
    z-index:   2;
    width:     100%;
    max-width: 500px;
}
@media screen and (min-width: 993px) {
    .banner-container .content-wrapper .content-container { top: 50%; transform: translateY(-50%); }
}
@media screen and (max-width: 992px) {
    .banner-container .content-wrapper .content-container {
        position:      relative;
        z-index:       2;
        left:          0; bottom: 0;
        padding-left:  21px;
        padding-right: 39px;
        max-width:     100%;
    }
}

/* Blue panel pseudo-element */
.banner-container .content-wrapper .content-container::before {
    content:          "";
    position:         absolute;
    left:             -400px; top: -100px;
    z-index:          -1;
    display:          block;
    width:            960px;
    height:           calc(100% + 200px);
    background-color: #007EAB;
    box-shadow:       9px 9px 20px 0 rgba(3,51,66,0.4);
}
@media screen and (max-width: 1440px) {
    .banner-container .content-wrapper .content-container::before { width: 920px; }
}
@media screen and (max-width: 992px) {
    .banner-container .content-wrapper .content-container::before {
        width: calc(100% + 15px); left: -15px; top: -44px; height: calc(100% + 96px);
    }
}

.banner-container .content-wrapper .content-container *   { color: #ffffff !important; background-color: #007EAB; }
/*.banner-container .content-wrapper .content-container h1  { font-size: calc(46px + (66 - 46) * ((100vw - 992px) / (1800 - 992))); }*/
@media screen and (max-width: 992px)  { .banner-container .content-wrapper .content-container h1 { font-size: 46px; } }
@media screen and (min-width: 1800px) { .banner-container .content-wrapper .content-container h1 { font-size: 48px; } }

.banner-container .content-wrapper .content-container p             { margin-top: 15px; }
.banner-container .content-wrapper .content-container a.ww_action_button1 {
    margin-top:       15px;
    background-color: #007EAB;
    border-color:     #ffffff;
}
.banner-container .content-wrapper .content-container .ww_action_button1:hover {
    background-color: #ffffff;
    border-color:     #ffffff;
    color:            #007EAB !important;
}

/* ============================================================
   FEATURE STRIP  (green background, 4-column icons)
   ============================================================ */
.green-background                   { position: relative; background-color: #68A342; }
.green-background.number-container  { width: calc(100% - 40px); max-width: 1260px; overflow: hidden; margin: 0 auto; background-color: #68A342; }
.green-background.number-container * { color: #ffffff !important; }

.number-icon-text-container img     { margin-bottom: 20px; }
@media screen and (max-width: 1199px) {
    .number-icon-text-container       { display: flex; align-items: flex-start; width: calc(100% - 30px); margin: 0 auto; min-height: 132px; }
    .number-icon-text-container.last  { min-height: 0; margin-bottom: 0; }
    .number-icon-text-container img   { margin: 0 20px 0 0; }
}

.number-icon-text-container .white-dots { position: relative; height: 40px;}
.number-icon-text-container .white-dots::after {
    content:    "";
    position:   absolute;
    top:        50%; right: -46px;
    transform:  translateY(-50%);
    display:    block;
    width:      270px; height: 49px;
    background: url('images/row-of-white-dots.svg') top center no-repeat;
}
@media screen and (max-width: 1440px) { .number-icon-text-container .white-dots::after { right: -37px; width: 264px; } }
@media screen and (max-width: 1199px) {
    .number-icon-text-container .white-dots::after {
        background: url('images/column-of-white-dots.svg') top center no-repeat;
        top: auto; bottom: -108px; right: auto; left: calc(50% - 10px);
        transform: translateX(-50%);
        height: 121px; width: 52px;
    }
}

#homepage_instance_1.number-icon-text-container .ww_p_call_out,
#homepage_instance_3.number-icon-text-container .ww_p_call_out,
#homepage_instance_4.number-icon-text-container .ww_p_call_out { width: 100%; max-width: 210px; }
#homepage_instance_2.number-icon-text-container .ww_p_call_out { width: 100%; max-width: 190px; }
@media screen and (max-width: 1199px) {
    #homepage_instance_1.number-icon-text-container .ww_p_call_out,
    #homepage_instance_2.number-icon-text-container .ww_p_call_out,
    #homepage_instance_3.number-icon-text-container .ww_p_call_out,
    #homepage_instance_4.number-icon-text-container .ww_p_call_out { max-width: calc(100% - 60px) !important; }
}

/* ============================================================
   SERVICE BLOCKS  (offset-image + beside-image-content)
   ============================================================ */
.offset-image                         { display: block !important; max-width: 613px !important; }
.offset-image.right                   { margin: 0 0 0 auto; }
@media screen and (max-width: 1199px) { .offset-image, .offset-image.right { margin: 0 auto; max-width: 100% !important; } }

.beside-image-content-container       { display: flex; flex-flow: column nowrap; justify-content: center; height: 474px; }
@media screen and (max-width: 1199px) { .beside-image-content-container { height: auto; max-width: 590px; margin: 100px auto 0 auto; } }

/* ============================================================
   STATS SECTION  (blue background)
   ============================================================ */
.blue-background                      { position: relative; background-color: #007EAB; }
.blue-background *:not(a)             { color: #ffffff !important; }

/* ============================================================
   INDUSTRIES / CATEGORIES
   ============================================================ */
.category-image-and-text-container      { height: 400px; }
.category-image-and-text-container h3   { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 25px; line-height: 1.2; color: #035878; }
@media screen and (max-width: 768px) {
    .category-image-and-text-container   { height: 220px; }
    .category-image-and-text-container h3 { font-size: 14px; }
    .category-image-and-text-container img { height: 60px !important; width: auto !important; }
}

/* ============================================================
   GREEN CONTAINERS with DOTS 
   ============================================================ */

.hollow-circle-container {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 60px;
}

.hollow-circle-container .white-dots {
  position: relative;
}

.hollow-circle-container .white-dots::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -219px;
  transform: translateY(-50%);
  display: block;
  width: 403px;
  height: 32px;
  margin-top: 2px;
  background: url("images/longer-row-of-white-dots.svg") top center no-repeat;
}

.hollow-circle-container.five-columns .white-dots::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -115px;
  transform: translateY(-50%);
  display: block;
  width: 224px;
  height: 34px;
  margin-top: 2px;
  background: url("images/row-of-white-dots-for-5-column-container.svg") top center no-repeat;
}

.hollow-circle-container h2 {
    font-size: 30px;
    font-weight: 600;
    margin-top: 30px;
}

.hollow-circle-container.five-columns {
  width: 100%;
  max-width: 1260px;
}

.hollow-circle-container.five-columns > div {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

.hollow-circle-container.five-columns > div h2 {
  font-size: 20px;
}

.hollow-circle-container * {
  color: #ffffff !important;
}

.hollow-circle-container.five-columns .circle-icon-text-container {
  width: 20%;
}

@media screen and (max-width: 1440px) {
  .white-container-holding-green-container {
    padding-left: 15px;
    padding-right: 15px;
    background-color: white;
  }
  
    .hollow-circle-container .white-dots::after {
    right: -205px;
    width: 374px;
  }
}

@media screen and (max-width: 1199px) {
  .hollow-circle-container {
    width: calc(100% - 40px);
    max-width: 1260px;
    overflow: hidden;
    margin: 0 auto;
  }
  
   .hollow-circle-container.five-columns > div {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
    .hollow-circle-container.five-columns > div h2 {
    text-align: left !important;
  }
  
    .hollow-circle-container h2 {
        margin-top: 0;
    }
  
   .hollow-circle-container .white-dots::after {
    background: url("images/column-of-white-dots.svg") top center no-repeat;
    top: auto;
    bottom: -96px;
    right: auto;
    left: calc(50% - 15px);
    transform: translateX(-50%);
    height: 121px;
  }
  
   .hollow-circle-container.five-columns .white-dots::after {
    background: url("images/column-of-white-dots.svg") top center no-repeat;
    top: auto;
    bottom: -6px;
    right: auto;
    left: calc(50% - 15px);
    transform: translateX(-50%);
    height: 121px;
  }
  
   .hollow-circle-container.five-columns .circle-icon-text-container {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    min-height: 132px;
    text-align: left;
  }
  
    .hollow-circle-container.five-columns .circle-icon-text-container.last {
    min-height: 0;
  }
  
    .hollow-circle-container .circle-icon-text-container img {
    margin-right: 30px;
  }
  
   .circle-icon-text-container {
    display: flex;
    width: calc(100% - 60px);
    margin-left: auto;
    margin-right: auto;
  }
  
    .circle-icon-text-container:not(.last) {
    margin-bottom: 80px;
  }
}

@media screen and (max-width: 480px) {
  .hollow-circle-container h2 {
    font-size: 20px;
  }
}


/* ============================================================
   DESCRIBED VIDEO / AD LOGO CONTAINERS
   ============================================================ */
.described-video-images-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-top: 52px;
    padding-bottom: 14px;
}

@media screen and (max-width: 768px) {
  .described-video-images-container {
    justify-content: space-evenly;
  }
  
    .described-video-images-container > div:first-of-type img {
    height: 140px !important;
  }
    .described-video-images-container > div:last-of-type img {
    height: 66px !important;
  }
}

@media screen and (max-width: 480px) {
    .described-video-images-container > div:first-of-type img {
    height: 100px !important;
  }
  .described-video-images-container > div:last-of-type img {
    height: 56px !important;
  }
}

/* ============================================================
   IMAGES BESIDE CONTENT
   ============================================================ */
.beside-image-content-container-medium.left {
  max-width: 460px;
}

@media screen and (max-width: 1199px) {
  .beside-image-content-container-medium {
    padding-top: 37px;
    padding-left: 15px;
  }
}

@media screen and (max-width: 992px) {
    
    div.beside-image-content-container-medium {
    padding-top: 60px !important;
  }
    .beside-image-content-container-medium {
    padding-left: 0px !important;
  }
  .beside-image-content-container-medium.left {
    max-width: 100%;
  }
    .beside-image-content-container-medium.left.bottom-mobile-padding-only {
    padding: 0 0 15px 0;
    padding-top: 0px;
    padding-left: 0px;
    padding-top: 0px !important;
  }
}

.container img:not(.img-non-responsive) {
  display: inline-block;
  max-width: 100%;
  height: auto !important;
  border: none;
}

@media screen and (max-width: 1200px) {
    .mobile-centered {
    float: none !important;
    clear: both;
    display: block !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  img.mobile-centered {
    max-width: 60% !important;
    height: auto !important;
  }
  
    .smaller-upper-padding-on-mobile {
    padding-top: 60px !important;
  }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
   
@media screen and (min-width: 1200px) {
  .about-us-photo-column {
    width: 100%;
    max-width: 270px;
    margin: 0 0 0 auto;
  }
}   

/* ============================================================
   CONTACT FORM — Gravity Forms styling (high specificity)
   ============================================================ */

.form-builder-container .description-container {
    width: 100%;
    max-width: 360px;
    margin: 0 0 0 auto;
}

/* Hide "* indicates required fields" notice */
.form-builder-container .gform_required_legend { display: none; }

/* Field spacing */
.form-builder-container .gfield { margin-bottom: 28px; }

/* Labels */
.form-builder-container .gfield_label {
    font-family:   'Montserrat', sans-serif;
    font-weight:   500;
    font-size:     24px;
    color:         #007EAB;
    margin-bottom: 6px;
}

/* Required asterisk — match label colour */
.form-builder-container .gfield_required,
.form-builder-container .gfield_required * { color: #007EAB !important; }

/* Text / email / tel inputs */
.form-builder-container .gform_wrapper input[type="text"],
.form-builder-container .gform_wrapper input[type="email"],
.form-builder-container .gform_wrapper input[type="tel"],
.form-builder-container .gform_wrapper input[type="url"] {
    border:        none !important;
    border-bottom: 2px solid #414042 !important;
    border-radius: 0 !important;
    background:    transparent !important;
    box-shadow:    none !important;
    margin:        5px 0;
    padding:       7px 10px !important;
    font-family:   'Montserrat', sans-serif;
    font-size:     24px;
    color:         #333;
}

.form-builder-container .gform_wrapper input[type="text"]:focus,
.form-builder-container .gform_wrapper input[type="email"]:focus,
.form-builder-container .gform_wrapper input[type="tel"]:focus {
    border-bottom-color: #035878 !important;
    box-shadow:          none !important;
    outline:             none !important;
}

/* Select */
.form-builder-container .gform_wrapper select {
    border:        2px solid #414042 !important;
    border-radius: 0 !important;
    background:    #fff !important;
    box-shadow:    none !important;
    padding:       24px !important;
    font-family:   'Montserrat', sans-serif;
    font-size:     16px;
    color:         #414042;
}

/* Textarea */
.form-builder-container .gform_wrapper textarea {
    border:        none !important;
    border-bottom: 2px solid #007EAB !important;
    border-radius: 0 !important;
    background:    transparent !important;
    box-shadow:    none !important;
    padding:       8px 0 !important;
    font-family:   'Montserrat', sans-serif;
    font-size:     19px;
    color:         #414042;
    resize:        vertical;
    min-height:    120px;
}

/* Submit button */
.form-builder-container .gform_wrapper input[type="submit"],
.form-builder-container .gform_wrapper .gform_button {
    background:       transparent !important;
    background-color: transparent !important;
    border:           2px solid #007EAB !important;
    border-radius:    30px !important;
    color:            #007EAB !important;
    font-family:      'Montserrat', sans-serif;
    font-weight:      700;
    font-size:        14px;
    letter-spacing:   0.1em;
    text-transform:   uppercase;
    padding:          12px 32px !important;
    cursor:           pointer;
    transition:       background 0.2s, color 0.2s;
    box-shadow:       none !important;
}

.form-builder-container .gform_wrapper input[type="submit"]:hover,
.form-builder-container .gform_wrapper .gform_button:hover {
    background:       #007EAB !important;
    background-color: #007EAB !important;
    color:            #fff !important;
}

/* Hide GF honeypot/spam field (shown when GF CSS is disabled) */
.gform_validation_container,
.gfield--type-honeypot,
.gfield--type-honeypot ~ li {
    display:    none !important;
    visibility: hidden !important;
}

/* Restore full-width layout lost when GF CSS is disabled */
.form-builder-container .gform_wrapper ul.gform_fields {
    list-style: none;
    padding:    0;
    margin:     0;
}
.form-builder-container .gform_wrapper .ginput_container {
    width:      100%;
    box-sizing: border-box;
    margin:     0;
}
.form-builder-container .gform_wrapper .ginput_container input,
.form-builder-container .gform_wrapper .ginput_container select,
.form-builder-container .gform_wrapper .ginput_container textarea {
    width:      100% !important;
    box-sizing: border-box;
}

/* Remove default GF validation message spacing */
.form-builder-container .gform_wrapper .validation_message {
    font-size:  13px;
    color:      #c00;
    margin-top: 4px;
}

/* ============================================================
   CTA SECTION  (green background, white rounded card)
   ============================================================ */
.rounded-white-shadow-container {
    background-color: #ffffff;
    border-radius:    20px;
    padding:          100px 100px 85px 100px;
    box-shadow:       0 0 20px 20px rgba(0,0,0,0.1);
}
@media screen and (max-width: 480px) {
    .rounded-white-shadow-container { padding: 80px 25px; border-radius: 10px; }
}
.rounded-white-shadow-container h2 { color: #007EAB; }

@media screen and (min-width: 1200px) {
    .block-on-lg { display: block; }
}

/* ============================================================
   Bootstrap tooltip brand colours  (minor override)
   ============================================================ */
.tooltip.left   .tooltip-arrow { border-left-color:   #007EAB !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #007EAB !important; }
.tooltip.top    .tooltip-arrow { border-top-color:    #007EAB !important; }
.tooltip .tooltip-inner {
    max-width:        none !important;
    white-space:      nowrap;
    font-size:        14px !important;
    color:            #ffffff !important;
    background-color: #007EAB !important;
}

/* ============================================================
   WordPress custom_logo() sizing  (WP wraps logo in <a>)
   ============================================================ */
#desktop_header_logo .custom-logo-link { display: block; }
#desktop_header_logo .custom-logo      { width: 100%; height: auto; display: block; }
#mobile-header-logo .custom-logo-link  { display: block; }
#mobile-header-logo .custom-logo       { width: 100%; height: auto; display: block; }
#footer-logo .custom-logo-link         { display: block; margin: 0 auto; }
#footer-logo .custom-logo              { width: 100%; height: auto; display: block; }

/* ============================================================
   COOKIE / GDPR CONSENT BANNER
   ============================================================ */
.cookie-message {
    display:    none;
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    30px 20px 20px 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 3px #ccc;
    z-index:    90000;
}

/*#ww-gdpr-black-out {*/
/*    display:          none;*/
/*    position:         fixed;*/
/*    top:              0;*/
/*    left:             0;*/
/*    width:            100%;*/
/*    height:           100%;*/
/*    overflow:         hidden;*/
/*    background-color: rgba(0, 0, 0, 0.6);*/
/*    z-index:          89999;*/
/*}*/

#ww-gdpr-message-container { width: 100%; }

/* Show logo column only at ≥ 1200px */
.hidden-1200-down { display: none !important; }
@media screen and (min-width: 1200px) {
    .hidden-1200-down        { display: block !important; }
    .ww_p.margin-1200-up     { margin-top: 30px; }
}

/* Centre banner content on narrow screens */
@media screen and (max-width: 768px) {
    #ww-gdpr-message-container .mobile-centered { text-align: center; }
}

/* Cookie logo sizing */
.cookie-message .cookie-logo {
    display:   block;
    max-width: 265px;
    height:    auto;
}

/* ============================================================
   SLICK CAROUSEL – BY-THE-NUMBERS STATS SLIDER
   ============================================================ */
.by-the-numbers-slider-wrapper {
    overflow-x: hidden;
    padding-bottom: 60px;
}

.by-the-numbers-slider {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    height: 100%;
}

/* Slider: no center padding by default (tablet 2-slide view) */
.by-the-numbers-slider.slick-initialized .slick-list {
    padding: 0 30px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}

/* Phone only: restore peek padding for 1-slide centerMode */
@media screen and (max-width: 600px) {
    .by-the-numbers-slider.slick-initialized .slick-list {
        padding: 0 40px !important;
    }
}

.by-the-numbers-slider .slick-list {
    padding: 0 !important;
}

.by-the-numbers-slider .overflow-box-item {
    border-radius: 10px;
    width: 270px !important;
    padding: 25px;
    min-height: 391px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* Desktop grid: 1441px and up */
@media screen and (min-width: 1441px) {
    .by-the-numbers-slider {
        gap: 20px;
    }
    .by-the-numbers-slider .overflow-box-item {
        flex: 1;
        min-width: 0;
        width: auto !important;
    }
}

/* Slider styles: 1440px and below */
@media screen and (max-width: 1440px) {

    .by-the-numbers-slider.slick-initialized {
        padding-bottom: 60px;
    }

    /* Cards fill slide width and stretch to equal height */
    .by-the-numbers-slider.slick-initialized .slick-slide .overflow-box-item {
        width: 100% !important;
        box-sizing: border-box;
        height: 100%;
    }

    .by-the-numbers-slider.slick-initialized .slick-track {
        display: flex !important;
        align-items: stretch;
    }

    .by-the-numbers-slider.slick-initialized .slick-slide {
        padding: 0 8px;
        height: auto !important;
        display: flex !important;
    }

    .by-the-numbers-slider.slick-initialized .slick-slide > div {
        display: flex;
        width: 100%;
    }

    .slick-prev,
    .slick-next {
        top: auto;
        bottom: 0px;
        height: 33px;
    }

    .by-the-numbers-slider .slick-prev,
    .by-the-numbers-slider .slick-next {
        font-size: 0 !important;
        line-height: 0 !important;
        width: 40px !important;
        height: 40px !important;
        z-index: 10;
        top: auto !important;
        bottom: 12px !important;
        transform: none !important;
    }

    .by-the-numbers-slider .slick-prev { left: 10px !important; }
    .by-the-numbers-slider .slick-next { right: 10px !important; }

    .by-the-numbers-slider .slick-prev::before,
    .by-the-numbers-slider .slick-next::before {
        display: none !important;
    }

    .by-the-numbers-slider .slick-prev span,
    .by-the-numbers-slider .slick-next span {
        font-size: 40px;
        font-family: Arial, sans-serif;
        color: #ffffff;
        line-height: 1;
        display: block;
    }

    .by-the-numbers-slider .slick-dots {
        bottom: 12px;
    }

    .by-the-numbers-slider .slick-dots li {
        margin-right: 25px;
    }

    .by-the-numbers-slider .slick-dots li:last-of-type {
        margin-right: 0;
    }

    .by-the-numbers-slider .slick-dots li button {
        color: #ffffff !important;
        font-size: 17px !important;
    }

    .by-the-numbers-slider .slick-dots li.slick-active button {
        position: relative;
        z-index: 2;
        background-color: #ffffff;
        color: #007EAB !important;
    }

    .by-the-numbers-slider .slick-dots li button::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        display: block;
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        border-radius: 50%;
        border: 3px solid #ffffff;
        opacity: 1 !important;
    }

    .by-the-numbers-slider .slick-dots li.slick-active button::before {
        background-color: #ffffff;
        z-index: -1;
    }
}

.by-the-numbers-slider .overflow-box-item h3 {
    font-size: 43px;
    color: #DC7427 !important;
    line-height: 1;
    font-weight: 600;
}

.by-the-numbers-slider .overflow-box-item h3 strong {
    font-size: 77px;
    color: #DC7427 !important;
    line-height: 1;
    font-weight: 800;
}

.by-the-numbers-slider .overflow-box-item p {
    color: #414042 !important;
}

.by-the-numbers-slider .overflow-box-item > a,
.by-the-numbers-slider .overflow-box-item > p:last-child {
    margin-top: auto;
}