/**

 * Site-wide mobile overlay menu (≤1200px).

 * Desktop overlay / hover submenu behavior is unchanged.

 */



/* Mobile-only submenu chrome — never show in desktop hover flyout */

#mainnav .submenu-services-heading {

  display: none !important;

}

/* Desktop: never show the mobile-only logo + GPTW row */
.footer-mobile-brand {
  display: none !important;
}

/* Desktop: keep industries heading on one line (br only for mobile) */
body.services-page .look-what-industry .header-text h6 br.svc-h6-br {
  display: none;
}

/* Blog article body: keep copy left-aligned on all blog detail pages */
body.blog-detail .blog-content,
body.blog-detail .blog-content .content-width,
body.blog-detail .blog-content .card-body,
body.blog-detail .blog-content .card-body p,
body.blog-detail .blog-content .card-body h5,
body.blog-detail .blog-content p,
body.blog-detail .blog-content h4 {
  text-align: left;
}

/* Related / listing card meta under images — left on desktop */
body.blog-detail .our-thoughts-perspective .cards .card-body,
body.blog-detail .subscriber-with-us .our-thoughts-perspective .cards .card-body,
body.home-page .our-thoughts-perspective .cards .card-body {
  text-align: left;
}

body.blog-detail .our-thoughts-perspective .cards .card-body p,
body.blog-detail .our-thoughts-perspective .cards .card-body h5,
body.blog-detail .subscriber-with-us .our-thoughts-perspective .cards .card-body p,
body.blog-detail .subscriber-with-us .our-thoughts-perspective .cards .card-body h5,
body.home-page .our-thoughts-perspective .cards .card-body p,
body.home-page .our-thoughts-perspective .cards .card-body h5 {
  text-align: left;
}



@media screen and (max-width: 1200px) {

  /* ------------------------------------------------------------------ */

  /* 0a. Banner typewriter — stable size so typing never shifts layout   */

  /*     (all pages with .about_banner; desktop unchanged)               */

  /* ------------------------------------------------------------------ */

  .about_banner .texttypo {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .about_banner .texttypo p {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-size: clamp(24px, 7vw, 40px) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  /*
   * Typewriter on its own full-width line. Reserve 3 lines of height
   * (use lh so it matches line-height; em alone was under-counting and
   * still let long phrases wrap and push .img_banner down).
   */
  .about_banner .texttypo p > .typewriter,
  .about_banner .texttypo p > span.typewriter-blog {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    line-height: 1.35 !important;
    margin-top: 0.12em;
    /* Always reserve 3 lines so long phrases don't push content */
    min-height: calc(1.35em * 3) !important;
    min-height: 3lh !important;
  }

  .about_banner .texttypo p .Typewriter__wrapper {
    display: inline !important;
    line-height: inherit !important;
    margin: 0 !important;
  }

  .about_banner .texttypo .Typewriter__cursor {
    display: inline !important;
    position: relative !important;
    top: 0 !important;
    line-height: inherit !important;
    vertical-align: baseline;
  }

  /* Breathing room above banner title (below fixed mobile navbar) */
  .about_banner {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ------------------------------------------------------------------ */
  /* 0b. CTA buttons — match homepage mobile layout (non-home only)     */
  /*     Homepage keeps its own rules in mobile-home.css unchanged.     */
  /* ------------------------------------------------------------------ */
  body:not(.home-page) .default-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 40px;
    max-width: 100%;
    padding: 0 6px 0 18px;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
    background-color: transparent;
    letter-spacing: 1.5px;
    transform: none;
    -webkit-transform: none;
  }

  body:not(.home-page) .default-button .text {
    position: relative;
    z-index: 3;
    padding: 0 !important;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 1.5px;
    white-space: nowrap;
    opacity: 1;
    transform: none;
    -webkit-transform: none;
  }

  /* Circle sits behind the plus icon on the right */
  body:not(.home-page) .default-button .button-background .left,
  body:not(.home-page) .default-button .button-background .right {
    left: auto;
    right: 6px;
    top: 50%;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }

  body:not(.home-page) .default-button .button-background .left:before,
  body:not(.home-page) .default-button .button-background .right:before {
    width: 28px;
    height: 28px;
    transform: scale(1);
    -webkit-transform: scale(1);
  }

  body:not(.home-page) .default-button .plus-icon {
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0 0 0 10px;
    opacity: 1;
    z-index: 2;
  }

  body:not(.home-page) .default-button .plus-icon:before,
  body:not(.home-page) .default-button .plus-icon:after {
    top: 50%;
    left: 50%;
    width: 9px;
    margin: -0.5px 0 0 -4.5px;
  }

  /* Portfolio list: intentional gap between title and image */
  .portfolio-list .about_banner {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
    margin-bottom: 0 !important;
  }

  .portfolio-list .about_banner .texttypo,
  .portfolio-list .about_banner .texttypo p {
    min-height: 4.2em !important;
  }

  .portfolio-list .img_banner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Tighter space after banner image before first portfolio card */
  .portfolio-list .our-thoughts-perspective {
    padding-top: 24px !important;
  }

  .portfolio-list .our-thoughts-perspective .custom-row {
    padding-top: 0 !important;
  }

  .portfolio-list .porfolio_lising .custom-row > .column-50:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .portfolio-list .img_banner img {
    width: 100% !important;
    height: min(52vw, 320px) !important;
    min-height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Blog listing banner — taller image + matching dark overlay (overlay is 100% of image) */
  body.blog-listing .img_banner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.blog-listing .img_banner > img {
    width: 100% !important;
    height: min(68vw, 400px) !important;
    min-height: 300px;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* CSR page banner — taller image on mobile only */
  body.csr-page .img_banner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.csr-page .img_banner > img {
    width: 100% !important;
    height: min(92vw, 520px) !important;
    min-height: 380px;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  body.csr-page .our-purpose-section.about_section .text-left h2 {
    font-size: 16px !important;
    line-height: 26px !important;
  }

  /* Tighten space after CSR photo grid before Remarkable CTA */
  body.csr-page .our-sub-team-section,
  body.csr-page .our-sub-team-section.team-block {
    padding-top: 0 !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
  }

  /* ------------------------------------------------------------------ */
  /* Services / Capabilities page (body.services-page) — mobile only    */
  /* ------------------------------------------------------------------ */

  /* 1) Taller hero banner */
  body.services-page .img_banner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.services-page .img_banner > img {
    width: 100% !important;
    height: min(92vw, 520px) !important;
    min-height: 380px;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  body.services-page .img_banner .text_box p {
    font-size: 24px !important;
    line-height: 34px !important;
  }

  /* 2) Center "Let's Co-Create" — keep intro h2 left-aligned */
  body.services-page .services-roadmap .content-width {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body.services-page .services-roadmap .content-width > .default-button {
    display: inline-flex !important;
    align-self: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 3) Slide content left-aligned + proper CTAs
     sidebar-scroller forces position:relative on ALL descendants,
     which breaks default-button absolute circle / plus layout. */
  body.services-page #sv .lgt,
  body.services-page #sv .lgt > div,
  body.services-page #sv .lgt h2,
  body.services-page #sv .lgt .tx,
  body.services-page #sv .lgt .tx p,
  body.services-page .app-c.sidebar-scroller p,
  body.services-page .market-research-section .sidebar-scroller h2 {
    text-align: left !important;
  }

  body.services-page #sv .lgt .tx {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.services-page #sv .lgt .bcc {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 8px;
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* Full CTA rebuild inside scroller — match site mobile default-button */
  body.services-page .sidebar-scroller .default-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    height: 40px !important;
    max-width: 100% !important;
    padding: 0 6px 0 18px !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background-color: transparent !important;
    letter-spacing: 1.5px !important;
    transform: none !important;
    -webkit-transform: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    float: none !important;
  }

  body.services-page .sidebar-scroller .default-button .button-background {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
  }

  body.services-page .sidebar-scroller .default-button .button-background .left,
  body.services-page .sidebar-scroller .default-button .button-background .right {
    position: absolute !important;
    left: auto !important;
    right: 6px !important;
    top: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    z-index: 1 !important;
  }

  body.services-page .sidebar-scroller .default-button .button-background .center {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 0 !important;
    height: 100% !important;
  }

  body.services-page .sidebar-scroller .default-button .button-background .left:before,
  body.services-page .sidebar-scroller .default-button .button-background .right:before {
    content: "" !important;
    position: static !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: #e0effd !important;
    transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
  }

  body.services-page .sidebar-scroller .default-button .text {
    position: relative !important;
    z-index: 3 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  /* Keep plus in flex flow (relative) — absolute would collapse the layout */
  body.services-page .sidebar-scroller .default-button .plus-icon {
    position: relative !important;
    flex: none !important;
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 0 0 10px !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }

  body.services-page .sidebar-scroller .default-button .plus-icon:before,
  body.services-page .sidebar-scroller .default-button .plus-icon:after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 9px !important;
    height: 1px !important;
    margin: -0.5px 0 0 -4.5px !important;
    background-color: #141414 !important;
  }

  body.services-page .sidebar-scroller .default-button .plus-icon:after {
    transform: rotate(90deg) !important;
    -webkit-transform: rotate(90deg) !important;
  }

  /* 4) Kill late scrubbed fade + auto-height slides up to 1200px */
  body.services-page #sv .lgt > div {
    opacity: 1 !important;
  }

  body.services-page #sv .lgt {
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 32px 20px 32px 28px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  body.services-page .market-research-section {
    padding: 40px 0 24px !important;
  }

  /* Industries heading — two lines on mobile (all service pages) */
  body.services-page .look-what-industry .header-text h6 br.svc-h6-br {
    display: inline;
  }

  body.services-page .look-what-industry .header-text h6 {
    line-height: 1.35 !important;
  }

  /* Dark overlay covers the image only — no bleed above from padding */
  .img_banner {
    position: relative !important;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0;
  }

  .img_banner > img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
  }

  .img_banner > #expand1 {
    display: none !important;
  }

  .img_banner > .content-width {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    /* Match overlay height to the image, not any padding/extra chrome */
    height: 100% !important;
    max-height: 100%;
    z-index: 3;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .img_banner .text_box {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    /* Keep overlay copy inside the image edges */
    padding: 24px 28px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    line-height: normal;
    pointer-events: auto;
  }

  .img_banner .text_box p {
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Portfolio cards: clear type hierarchy on mobile
     title > description > service tags */
  .portfolio-list .our-thoughts-perspective .cards h3,
  .portfolio-list .porfolio_lising .cards h3 {
    font-size: 22px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    padding: 40px 8px 8px !important;
    margin: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    transform: none !important;
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    background: none !important;
  }

  .portfolio-list .our-thoughts-perspective .cards .card-body {
    padding: 0 8px !important;
    box-sizing: border-box;
  }

  .portfolio-list .our-thoughts-perspective .cards .card-body p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 300 !important;
    letter-spacing: normal !important;
    color: #141414 !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .portfolio-list .our-thoughts-perspective .cards .card-body h6,
  .portfolio-list .our-thoughts-perspective h6 {
    font-size: 11px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
    letter-spacing: 0.4px !important;
    padding: 10px 0 0 !important;
    margin: 0 !important;
    text-align: left !important;
    opacity: 0.85;
  }

  .portfolio-list .our-thoughts-perspective .blog-img {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }



  /* ------------------------------------------------------------------ */

  /* 0b. Site-wide mobile navbar (match homepage) + scroll hide/show     */

  /* ------------------------------------------------------------------ */

  .mobile-header {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000 !important;
    padding: 10px 16px !important;
    box-sizing: border-box;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.96) !important;
    transform: translateY(0);
    transition: transform 0.28s ease;
    will-change: transform;
  }

  .mobile-header.is-hidden {
    transform: translateY(-100%);
    pointer-events: none;
  }

  .section1 .mobile-header .header-row,
  .mobile-header .header-row {
    padding-top: 10px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .section1 .mobile-header .header-row .column-header,
  .mobile-header .header-row .column-header {
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto !important;
  }

  .section1 .mobile-header .header-row .column-header .logo,
  .mobile-header .logo {
    width: auto !important;
    max-width: 120px !important;
    margin: 0 auto !important;
    transform: translateY(-2px);
  }

  .section1 .mobile-header .header-row .column-header .logo img,
  .mobile-header .logo img {
    width: auto !important;
    height: 30px !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .mobile-header #Layer_1,
  .mobile-header .fishleft svg {
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-header .left_icon .menu-toggle i {
    font-size: 22px !important;
    line-height: 1;
  }

  .section1 .mobile-header .header-row .column-header:last-child {
    display: flex !important;
    justify-content: flex-end;
  }

  /* Offset page content for fixed mobile header */
  .section1.inner_page_section {
    padding-top: 52px !important;
  }

  body.home-page .section1 {
    padding-top: 52px;
  }



  /* ------------------------------------------------------------------ */

  /* 1. Hide Great Place to Work + social block in the mobile menu      */

  /* ------------------------------------------------------------------ */

  #overlay .menu-social-box {

    display: none !important;

  }



  /* ------------------------------------------------------------------ */

  /* Overlay layout                                                     */

  /* ------------------------------------------------------------------ */

  /*
   * Desktop animates overlay height 0%→100%. During that grow, the menu
   * (overflow:auto) is taller than the panel, so a scrollbar flashes briefly.
   * Mobile: snap height, fade only; hide menu scrollbars.
   */
  #overlay.overlay {
    transition: opacity 0.35s, visibility 0.35s !important;
    overflow: hidden !important;
  }

  #overlay.overlay.open {
    height: 100% !important;
  }

  /* Lock page scroll while menu is open (class set by mobile-nav.js) */
  body.mobile-menu-open {
    overflow: hidden !important;
  }

  #overlay.overlay.open,

  #overlay.overlay {

    display: flex;

    flex-direction: column;

  }



  #overlay .overlay-menu {

    position: relative !important;

    top: auto !important;

    left: auto !important;

    transform: none !important;

    flex: 1 1 auto;

    display: flex !important;

    flex-direction: column;

    justify-content: flex-start;

    width: 100%;

    max-width: 100%;

    height: 100%;

    padding: 72px 24px 48px;

    box-sizing: border-box;

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    -ms-overflow-style: none;

  }

  #overlay .overlay-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }



  #overlay .overlay-menu .menu-text-rotate {

    display: none;

  }



  #overlay .overlay-menu > ul.menu-root {

    max-width: 100% !important;

    width: 100%;

    margin: 0;

    padding: 0;

    flex: 0 0 auto;

  }



  #overlay .overlay-menu > ul.menu-root > li {

    max-width: 100% !important;

    flex: 100% !important;

    padding: 14px 0 !important;

  }



  #overlay .overlay-menu a {

    font-size: 25px !important;

    line-height: 1 !important;

  }



  #overlay .toggle-close {

    top: 20px !important;

    right: 16px !important;

    z-index: 5;

  }



  /* ------------------------------------------------------------------ */

  /* Hide Tawk chatbot while mobile menu overlay is open                */

  /* ------------------------------------------------------------------ */

  body.mobile-menu-open iframe[src*="tawk.to"],

  body.mobile-menu-open iframe[title*="chat"],

  body.mobile-menu-open div[id^="tawkchat"],

  body.mobile-menu-open div[class*="tawk-"],

  body.mobile-menu-open #tawkchat-container {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

  }



  /* ------------------------------------------------------------------ */

  /* Two-layer Services menu                                            */

  /* ------------------------------------------------------------------ */



  /* Default: hide flyout submenu on mobile (no side panel) */

  #mainnav ul.submenu {

    position: static !important;

    left: auto !important;

    top: auto !important;

    max-width: 100% !important;

    opacity: 0;

    visibility: hidden;

    height: 0;

    overflow: hidden;

    margin: 0;

    padding: 0;

    pointer-events: none;

    /* Kill style.css submenu fade/slide (transition: all 0.3s) */
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    -webkit-animation: none !important;
    animation: none !important;

  }

  /* Submenu links also carry transition: all 0.3s — snap on appear */
  #mainnav ul.submenu > li,
  #mainnav ul.submenu > li > a,
  #mainnav ul.submenu > li > a:after {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    -webkit-animation: none !important;
    animation: none !important;
  }



  /* Layer 2 open: replace root items with submenu list */

  #mainnav.services-layer-open > ul.menu-root > li {

    display: none !important;

  }



  #mainnav.services-layer-open > ul.menu-root > li.has-submenu {

    display: block !important;

    max-width: 100% !important;

    flex: 100% !important;

    padding: 0 !important;
    -webkit-transition: none !important;
    transition: none !important;

  }



  #mainnav.services-layer-open .has-submenu > .menu-link-services {

    display: none !important;

  }



  #mainnav.services-layer-open ul.submenu {

    opacity: 1 !important;

    visibility: visible !important;

    height: auto !important;

    overflow: visible !important;

    pointer-events: auto !important;

    display: block !important;

    -webkit-transition: none !important;
    transition: none !important;
    -webkit-animation: none !important;
    animation: none !important;

  }



  /*

   * Services title row: ← + Services (same size as main menu links)

   * Back text removed — arrow only, sits beside the title.

   */

  #mainnav.services-layer-open .submenu-services-heading {

    display: flex !important;

    align-items: center;

    gap: 10px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.28);

    padding: 10px 0 14px !important;

    margin-bottom: 6px;

    max-width: 100% !important;

    flex: 100% !important;

  }



  #mainnav.services-layer-open .submenu-services-heading a {

    font-size: 22px !important;

    line-height: 1.25 !important;

    font-weight: inherit;

    text-transform: uppercase !important;

    letter-spacing: inherit;

  }



  #mainnav.services-layer-open .submenu-services-heading a.submenu-back {

    flex: 0 0 auto;

    color: #fff !important;

    opacity: 0.85;

    text-decoration: none;

  }



  #mainnav.services-layer-open .submenu-services-heading a.submenu-services-link {

    color: #fff !important;

    opacity: 1;

    flex: 0 1 auto;

  }



  #mainnav.services-layer-open ul.submenu > li {

    max-width: 100% !important;

    flex: 100% !important;

    padding: 13px 0;

  }



  #mainnav.services-layer-open ul.submenu > li:not(.submenu-services-heading) > a {

    font-size: 19px !important;

    line-height: 1.25 !important;

  }

  /* ------------------------------------------------------------------ */
  /* Site-wide mobile footer — match homepage black footer layout       */
  /* Desktop (≥1201px) unchanged. Colors still come from footer-css /   */
  /* section--bg theme rules.                                           */
  /* ------------------------------------------------------------------ */

  /* Logo + GPTW at the top of the footer only (not mixed with CTA) */
  body.footer-css .footer-mobile-brand {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 20px 12px;
    margin: 0;
  }

  body.footer-css .footer-mobile-brand > a {
    display: block;
    flex: 0 1 auto;
    margin-top: 14px;
  }

  body.footer-css .footer-mobile-brand > a img {
    max-width: 140px;
    height: auto;
    display: block;
  }

  /* Pull the badge up past the row's top padding so it meets the footer edge */
  body.footer-css .footer-mobile-gptw {
    flex: 0 0 auto;
    margin-top: -28px;
    align-self: flex-start;
  }

  body.footer-css .footer-mobile-gptw img {
    width: auto;
    max-width: 72px;
    height: auto;
    display: block;
  }

  /* Remarkable CTA — own section above footer (mobile only sizing) */
  .lets-make-thing {
    min-height: 0 !important;
    padding: 40px 20px 48px !important;
    margin: 0 !important;
    z-index: 1 !important;
    position: relative !important;
    display: block !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .lets-make-thing .content-width {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .lets-make-thing h2 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.25 !important;
    margin: 0 0 18px !important;
    padding: 0 8px;
    font-weight: 700;
  }

  .lets-make-thing a {
    font-size: 16px !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    margin: 0 !important;
    padding-bottom: 2px;
  }

  /* Hide duplicate logo / GPTW from desktop markup on white footer pages */
  body.footer-css .site-footer:has(.footer-mobile-brand) > .greatplace-footer {
    display: none !important;
  }

  body.footer-css .site-footer:has(.footer-mobile-brand) .footer-desktop-logo {
    display: none !important;
  }

  body.footer-css .site-footer {
    padding: 0 0 12px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body.footer-css .site-footer .content-width {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
  }


  body.footer-css .site-footer .footer-menu {
    width: 100% !important;
  }

  body.footer-css .site-footer .footer-menu a img {
    max-width: 140px !important;
    height: auto !important;
    display: block !important;
  }

  body.footer-css .site-footer .custom-row.f-row,
  body.footer-css .site-footer .custom-row.gap_row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
  }

  body.footer-css .site-footer .custom-row .column-50,
  body.footer-css .site-footer .col_gap {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Brand line under logo — do not use the old 70px GPTW clearance */
  body.footer-css .site-footer .footer-menu .column-50 > h3 {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  /* Space between Remarkable CTA and footer tagline */
  body.footer-css .site-footer:has(.footer-mobile-brand) .footer-menu .column-50 > h3 {
    margin-top: 28px !important;
  }

  body.footer-css .site-footer .texttypo {
    margin: 10px 0 8px !important;
  }

  body.footer-css .site-footer .texttypo p {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* Social icons: 2 rows × 4 */
  body.footer-css .site-footer .social-menu,
  body.footer-css .site-footer .social-menu.social_footer {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: start !important;
    gap: 14px 18px !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    max-width: 260px !important;
    flex-wrap: unset !important;
  }

  body.footer-css .site-footer .social-menu li {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.footer-css .site-footer .social-menu li a {
    height: 24px !important;
    width: auto !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body.footer-css ul.social-menu.social_footer li a .twitter-x,
  body.footer-css ul.social-menu.social_footer li a .thread-ic {
    height: 16px !important;
    width: 14px !important;
  }

  /* White footer: X + Threads match other social icon weight on mobile */
  body.footer-css .site-footer ul.social-menu.social_footer li a .twitter-x,
  body.footer-css .site-footer ul.social-menu.social_footer li a .thread-ic {
    height: 20px !important;
    width: 18px !important;
  }

  /* Download deck — under socials (footer.php nav-tab + homepage <a>) */
  body.footer-css .site-footer .footer-menu > a,
  body.footer-css .site-footer .footer-deck-download,
  body.footer-css .site-footer .column-50 > .nav-tab {
    position: relative !important;
    display: block !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    clear: both !important;
  }

  body.footer-css .site-footer .footer-menu > a {
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  body.footer-css .site-footer .get-in-touch {
    margin: 0 0 6px !important;
    padding: 0 !important;
  }

  body.footer-css .site-footer .footer-menu .column-50 .get-in-touch h3,
  body.footer-css .site-footer .footer-menu .column-50 .location h3 {
    margin-top: 40px !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
  }

  body.footer-css .site-footer .get-in-touch a {
    display: block !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    word-break: break-word;
  }

  body.footer-css .site-footer .location .nav-tab {
    padding: 2px 0 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  body.footer-css .site-footer .location .tabs li {
    margin: 0 12px 4px 0 !important;
    padding: 0 !important;
  }

  body.footer-css .site-footer .location .tabcontent {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    white-space: normal !important;
    position: relative !important;
  }

  /*
   * White footer location tabs: desktop uses absolute + opacity, which
   * stacks India/Nigeria addresses on top of each other on mobile.
   * Show only the active address in normal document flow.
   */
  body.footer-css .site-footer .location #tabs {
    position: relative !important;
  }

  body.footer-css .site-footer .location .tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0 16px !important;
  }

  body.footer-css .site-footer .location .tabs > li {
    display: contents;
  }

  body.footer-css .site-footer .location .tabs .tab {
    order: 1;
    cursor: pointer;
  }

  body.footer-css .site-footer .location #tabs .tabcontent,
  body.footer-css .site-footer .location #tabs li .tabcontent,
  body.footer-css .site-footer .location #tabs li:hover .tabcontent,
  body.footer-css .site-footer .location #tabs li:focus .tabcontent,
  body.footer-css .site-footer .location #tabs li:active .tabcontent {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: static !important;
    height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
  }

  body.footer-css .site-footer .location #tabs li.active .tabcontent,
  body.footer-css .site-footer .location #tabs li.active:hover .tabcontent,
  body.footer-css .site-footer .location #tabs li.active:focus .tabcontent,
  body.footer-css .site-footer .location #tabs li.active:active .tabcontent {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    flex: 0 0 100% !important;
    order: 2;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    left: auto !important;
    top: auto !important;
    z-index: 1 !important;
  }

  body.footer-css .site-footer .location #tabs,
  body.footer-css .site-footer .location .tabs,
  body.footer-css .site-footer .location .nav-tab {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.footer-css .site-footer .location #tabs .tabcontent p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Room under the address before copyright */
  body.footer-css .site-footer .location .nav-tab {
    padding-bottom: 24px !important;
    min-height: 0 !important;
  }

  body.footer-css .site-footer .copyright {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-top: 28px !important;
    padding-top: 28px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    position: relative !important;
  }

  /* Extra space above Terms & Conditions on white footer mobile */
  body.footer-css .site-footer .copyright {
    margin-top: 40px !important;
    padding-top: 36px !important;
  }

  body.footer-css .site-footer .copyright-text1,
  body.footer-css .site-footer .copyright-text {
    float: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    letter-spacing: 1px !important;
  }

  body.footer-css .site-footer .copyright-text1 {
    order: 1 !important;
    font-size: 0 !important; /* hide "|" separator */
  }

  /* Keep padding after the reset above so Terms isn’t flush to the address */
  body.footer-css .site-footer .copyright-text1 {
    padding-top: 12px !important;
  }

  body.footer-css .site-footer .copyright-text1 a {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  body.footer-css .site-footer .copyright-text1 a:last-child {
    margin-bottom: 0 !important;
  }

  /* White footer: tighter Terms↔Privacy gap, more space after Privacy */
  body.footer-css .site-footer .copyright-text1 a {
    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  body.footer-css .site-footer .copyright-text1 a + a {
    margin-top: 0 !important;
  }

  body.footer-css .site-footer .copyright-text1 a:last-child {
    margin-bottom: 24px !important;
  }

  body.footer-css .site-footer .copyright-text {
    order: 2 !important;
  }

  body.footer-css .site-footer .sandcup-side-logo {
    order: 3 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    line-height: 1.4 !important;
    width: 100% !important;
  }

  /* Homepage: Download link between socials and contact column */
  @media screen and (max-width: 767px) {
    body.home-page .site-footer .footer-menu {
      display: flex !important;
      flex-direction: column !important;
    }

    body.home-page .site-footer .footer-menu > .custom-row.f-row,
    body.home-page .site-footer .footer-menu > .custom-row.gap_row {
      display: contents !important;
    }

    body.home-page .site-footer .footer-menu > .custom-row > .column-50:first-child {
      order: 1;
    }

    body.home-page .site-footer .footer-menu > a {
      order: 2;
      margin-top: 36px !important;
      margin-bottom: 0 !important;
      text-align: left !important;
    }

    body.home-page .site-footer .footer-menu > .custom-row > .column-50.col_gap {
      order: 3;
    }

    body.home-page .site-footer .footer-menu > .media-custom {
      order: 4;
    }

    body.home-page .site-footer .footer-menu > .copyright {
      order: 5;
    }
  }

  @media screen and (min-width: 481px) {
    body.footer-css .site-footer .content-width {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }

    body.footer-css .footer-mobile-brand {
      padding-left: 24px;
      padding-right: 24px;
    }
  }

  /* Tablet band inside mobile shell: 2-col like homepage */
  @media screen and (min-width: 768px) {
    body.footer-css .site-footer .content-width {
      padding-left: 32px !important;
      padding-right: 32px !important;
    }

    body.footer-css .footer-mobile-brand {
      padding-left: 32px;
      padding-right: 32px;
    }

    body.footer-css .site-footer .custom-row.f-row,
    body.footer-css .site-footer .custom-row.gap_row {
      flex-direction: row !important;
      flex-wrap: wrap !important;
    }

    body.footer-css .site-footer .custom-row .column-50 {
      flex: 0 0 48% !important;
      max-width: 48% !important;
    }
  }

  /* ------------------------------------------------------------------ */
  /* Blog listing cards — title over image (match homepage mobile)      */
  /* ------------------------------------------------------------------ */

  body.blog-listing .our-thoughts-perspective {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
  }

  body.blog-listing .our-thoughts-perspective .content-width {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  body.blog-listing .our-thoughts-perspective .custom-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
    padding: 0 !important;
  }

  body.blog-listing .our-thoughts-perspective .custom-row .column-50,
  body.blog-listing .our-thoughts-perspective .custom-row .column-50.pContent,
  body.blog-listing .our-thoughts-perspective .custom-row .column-50.pImage {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body.blog-listing .our-thoughts-perspective .custom-row .column-50:nth-child(2n+2) {
    margin-top: 0 !important;
  }

  /* Significant space after each blog card on mobile */
  body.blog-listing .our-thoughts-perspective .column-50 > a {
    display: block !important;
    margin: 0 0 72px !important;
  }

  body.blog-listing .our-thoughts-perspective .column-50 > a:last-child {
    margin-bottom: 48px !important;
  }

  body.blog-listing .our-thoughts-perspective .cards {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    text-align: center;
  }

  /* Image + title share row 1 so the title sits inside the image bounds */
  body.blog-listing .our-thoughts-perspective .cards .blog-img {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0 !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    position: relative !important;
  }

  body.blog-listing .our-thoughts-perspective .cards .blog-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  body.blog-listing .our-thoughts-perspective .cards .blog-img::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 1 !important;
    pointer-events: none;
    z-index: 1;
  }

  /*
   * The title is markup-wise a child of .blog-img, so it can't be a grid item
   * of .cards. Overlay it on the image instead, or it drops below the photo
   * with the dark ::after overlay behind it.
   */
  body.blog-listing .our-thoughts-perspective .cards .blog-img h3,
  body.blog-listing .our-thoughts-perspective .cards h3 {
    z-index: 2;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 40px 24px !important;
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    font-size: 19px !important;
    line-height: 28px !important;
    text-align: center !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    white-space: normal !important;
  }

  body.blog-listing .our-thoughts-perspective .cards h3 br {
    display: none;
  }

  /* Meta under image — centered on mobile blog listing only */
  body.blog-listing .our-thoughts-perspective .cards .card-body {
    grid-column: 1;
    grid-row: 2;
    padding: 12px 0 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.blog-listing .our-thoughts-perspective .cards .card-body p,
  body.blog-listing .our-thoughts-perspective .cards .card-body p span,
  body.blog-listing .our-thoughts-perspective .cards .card-body h5 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
  }

  body.blog-listing .our-thoughts-perspective .cards .card-body p {
    padding-bottom: 0 !important;
    line-height: 1.4 !important;
  }

  body.blog-listing .our-thoughts-perspective .cards .card-body h5 {
    margin-top: 4px !important;
    line-height: 1.4 !important;
  }

}