/* wg-responsive.css · v1 (2026-11-02)
   Mobile and tablet fixes from the Nov 2026 homepage audit (homepage 22486, site header 22740).
   Enqueued site-wide from functions.php (Barba keeps child stylesheets across transitions; the header
   is on every page). Every rule sits in a max-width media query, so desktop (1025px and up) is untouched.
   Selectors are scoped by Elementor element ID and carry one class more than Elementor's own rule for the
   same element, so they still win after a Barba visit appends post-22486.css below this file. */

/* Mobile responsiveness – Phase 1 – Nov 2026 */

@media (max-width: 767px){

  /* ── C1 · Overlapping lines ──
     Both paragraphs take their mobile line-height from Elementor's `font: var(--text-h4)` shorthand (32px),
     then a larger font-size on top: 11.5vw (44.85px at 390) and 18vw (70.2px). Unitless line-height so it
     follows the size; letter-spacing -4px was set for the 70px size and closes up the smaller one. */
  /* aa67fed "Digital Precision, Caribbean Soul": same size as today at 390px, capped */
  .elementor-22486 .elementor-element.elementor-element-aa67fed.elementor-widget.elementor-widget-petextwrapper p{
    font-size: clamp(36px, 11.5vw, 48px) !important; /* beats Elementor's 11.5vw !important; px because the root size is 14px */
    line-height: 1.05;
  }
  /* 5e5a550 "For over two decades…": the sentence under it, sized as a lead paragraph */
  .elementor-22486 .elementor-element.elementor-element-5e5a550.elementor-widget.elementor-widget-petextwrapper p{
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.15;
    letter-spacing: 0;
  }

  /* ── C2 · Headings cut off on the right ──
     2edc2ba "Built for Caribbean Growth" and e41423f "Ready for You, Right Now." have pe-core's
     .white--space--no--wrap (nowrap on .text-wrapper), so one 600px line runs off a 350px column.
     pe-core splits these into words with GSAP SplitText (autoSplit: true), which re-splits when the
     width changes, so wrapping is safe. Each pair (with 23446d3 / 8da44ec above it) gets one size. */
  .elementor-22486 .elementor-element.elementor-element-2edc2ba .text-wrapper,
  .elementor-22486 .elementor-element.elementor-element-e41423f .text-wrapper{
    white-space: normal;
    max-width: 100%;
  }
  .elementor-22486 .elementor-element.elementor-element-23446d3.elementor-widget.elementor-widget-petextwrapper p,
  .elementor-22486 .elementor-element.elementor-element-2edc2ba.elementor-widget.elementor-widget-petextwrapper p,
  .elementor-22486 .elementor-element.elementor-element-8da44ec.elementor-widget.elementor-widget-petextwrapper p,
  .elementor-22486 .elementor-element.elementor-element-e41423f.elementor-widget.elementor-widget-petextwrapper p{
    font-size: clamp(36px, 12.5vw, 48px);
    line-height: 1.1;
  }

  /* ── A · Hero 7cdfbf5 on phones: tagline → headline → buttons → "Trusted by" + logos ──
     Supersedes the phone rule at the end of wg-home.css H4 (it assumed 6e810ba sat above the text).
     The text still starts below the face in the video/poster (46% of the hero's height, see H4). */
  /* A1 · Elementor's mobile Order: Start (--order: -99999) → DOM order, and pushed to the hero's foot */
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-6e810ba.e-con{
    --order: 0;
    --margin-top: auto;
  }
  /* A2 · tagline above the headline (Elementor mobile: column-reverse); first block starts 16px below the face.
     46vh holds while the hero is one screen tall. On short phones the content (about 440–500px below the
     tagline) makes the hero taller than the screen, the cover-fitted video grows with it and the face moves
     down, so the margin never goes below 400px there. svh (user, 2026-11-02), with vh first as the fallback. */
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-895d765.e-con{
    --flex-direction: column;
    --margin-top: max(calc(46vh - 4px), 400px);
    --margin-top: max(calc(46svh - 4px), 400px);
  }
  /* A3 · decorative "://webgold" outline (67c3307) hidden; "Trusted by organisations including:" (7b26024) shown */
  .elementor-22486 .elementor-element.elementor-element-6e810ba > .elementor-element-680c3e2.e-con{
    --margin-top: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
  }
  .elementor-22486 .elementor-element.elementor-element-680c3e2 > .elementor-element-67c3307.elementor-widget{
    display: none;
  }
  .elementor-22486 .elementor-element.elementor-element-680c3e2 > .elementor-element-7b26024.elementor-widget{
    display: block;
  }
  /* A4 · buttons straight after the headline: the button row's 65px mobile top margin goes */
  .elementor-22486 .elementor-element.elementor-element-154889d > .elementor-element-386e0c7.e-con{
    --margin-top: 0px;
  }

  /* B4 · cart 37f8f4a: a 44×44 circle (was 45×43), so the Menu circle matches it exactly */
  .elementor-22740 .elementor-element.elementor-element-364af39 > .elementor-element-37f8f4a.e-con{
    --width: 44px;
    --height: 44px;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    justify-content: center;
    flex: 0 0 auto;
  }
}

/* ── B · Header 22740 on phones: one row, 5px outer + 6px inner padding, about 66px tall (user, 2026-11-02) ──
   From 360px: the row needs 300px (logo 146 + actions 154), more than a 320px phone has, so narrower
   screens keep today's wrapping instead of scrolling sideways. */
@media (min-width: 360px) and (max-width: 767px){
  /* B1 */
  .elementor-22740 .elementor-element.elementor-element-dfc6542.e-con{
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  /* B2 · logo */
  .elementor-22740 .elementor-element.elementor-element-dfc6542 > .elementor-element-dec0edb.e-con{
    --width: auto;
    --padding-top: 6px;
    --padding-bottom: 6px;
    --padding-left: 10px;
    --padding-right: 10px;
  }
  /* B3 · actions (switcher, cart, Menu): 6px inner padding keeps the bar at 66px (user, 2026-11-02) */
  .elementor-22740 .elementor-element.elementor-element-dfc6542 > .elementor-element-364af39.e-con{
    --width: auto;
    --padding-top: 6px;
    --padding-bottom: 6px;
    --padding-left: 6px;
    --padding-right: 6px;
    flex: 0 0 auto;
  }
}

/* C2-t · the same two headings at 768–1024px (64px there) still run 36–57px off-screen at 768: wrap only, size unchanged */
@media (min-width: 768px) and (max-width: 1024px){
  .elementor-22486 .elementor-element.elementor-element-2edc2ba .text-wrapper,
  .elementor-22486 .elementor-element.elementor-element-e41423f .text-wrapper{
    white-space: normal;
    max-width: 100%;
  }
}

/* B4 / B5 · Menu pill b3e9f20 → icon-only 44×44 circle on phones and tablets (it only shows at 1024px and below).
   The "Menu" label stays in the markup and the accessibility tree; font-size 0 hides it visually without
   display: none. The click target (.pe--pop--button) fills the whole circle. */
@media (max-width: 1024px){
  .elementor-22740 .elementor-element.elementor-element-364af39 > .elementor-element-b3e9f20.e-con{
    --width: 44px;
    --height: 44px;
    --min-height: 44px;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    flex: 0 0 auto;
  }
  .elementor-22740 .elementor-element.elementor-element-c4f0a31 .pe--pop--button{
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }
}

/* Mobile responsiveness – Phase 2 – Nov 2026 */

@media (max-width: 767px){

  /* ── E1 · Tagline "DIGITAL TRANSFORMATION • AI STRATEGY • GROWTH" (2ea0fa9) over the video ──
     It was gradient text, #9DE0ED → #24595B: the dark end measured 1.6:1 on the video behind it, the light end
     3.4:1 where her shirt is lightest. Now the gradient's light teal, solid, on a soft dark band behind the whole
     text block (tagline + headline), which also lifts the headline. */
  .elementor-22486 .elementor-element.elementor-element-2ea0fa9.elementor-widget .customized--word{
    background-image: none;
    color: #9DE0ED;
    -webkit-text-fill-color: #9DE0ED;
    animation: none;
  }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-895d765.e-con{
    isolation: isolate;
  }
  .elementor-22486 .elementor-element.elementor-element-7cdfbf5 > .elementor-element-895d765.e-con::before{
    content: '';
    position: absolute;
    inset: -40px -10px -24px;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    mix-blend-mode: normal;
    border-radius: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 28%, rgba(0, 0, 0, .5) 78%, rgba(0, 0, 0, 0) 100%);
  }

  /* ── E2 · The stray "GO" is the end of a client logo ("…& TOBAGO") in the moving logo strip ba6d4fe ──
     The strip doesn't clip, so a logo leaving the screen is cut by the screen edge. Clip it to the strip and fade
     both ends over 22% (about one logo width), so logos fade in and out instead of showing fragments. */
  .elementor-22486 .elementor-element.elementor-element-ba6d4fe.elementor-widget{
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
  }

  /* ── E3 · ", then deliberate Execution.": the comma after the underlined "Technology" ──
     The underlined words are inline-blocks, and a line may break between an inline-block and the comma that
     follows it (at 375–379px wide the comma started the last line). As plain inline spans the word and its
     comma stay together; the underline (::after) still sits under the word. */
  .elementor-22486 .elementor-element.elementor-element-73ec010.elementor-widget .underlined{
    display: inline;
  }

  /* ── E5 · 12px between "Digital Precision, Caribbean Soul" and the sentence under it (5e5a550) ── */
  .elementor-22486 .elementor-element.elementor-element-5e5a550.elementor-widget{
    margin-top: 12px;
  }

  /* ── F · Intercom chat launcher: 44×44 (was 48), clear of the home indicator ──
     Intercom's own element, so it can't be scoped by an Elementor ID; this class is Intercom's lightweight
     launcher only. env() is 0 until the viewport meta has viewport-fit=cover; it costs nothing until then. */
  body .intercom-lightweight-app-launcher{
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  body .intercom-lightweight-app-launcher-icon{
    width: 44px;
    height: 44px;
  }

  /* ── G1 · Blog cards (46c110e): title and date row 24px apart instead of 500px-tall cards ──
     pe-core gives image-less cards min-height: 500px with the title and meta pushed to opposite ends. */
  .elementor-22486 .elementor-element.elementor-element-46c110e.elementor-widget.post_details_flex--styled .pe--single--post--details.pe--styled--object{
    min-height: 0;
    row-gap: 24px;
  }

  /* ── G2 · 250px gap between "Ready for You, Right Now." and "Popular Solutions" (0b1d8e4 mobile margin) ── */
  .elementor-22486 .elementor-element.elementor-element-74bdf63 > .elementor-element-0b1d8e4.e-con{
    --margin-top: 64px;
  }

  /* ── H · "Popular Solutions" slider (16e4764): captions sit on the bottom of the dark product card ──
     Name, price and "Coming soon" were #0F0F0F on the card's near-black (about 1.1:1); cream reads at 15:1+. */
  .elementor-22486 .elementor-element.elementor-element-16e4764.elementor-widget .zeyna--product--meta{
    --mainColor: #FAF8F5;
    color: #FAF8F5;
  }
}

/* ── E4 · Gold mode, phones up to 550px: the header logo was missing ──
   pe-core swaps to .mobile-logo at 550px and below and, in gold mode, hides the orange mobile logo while
   expecting a gold mobile variant this site doesn't have. Show the regular logo block instead: its gold
   wordmark (secondary__logo) is already in the markup and pe-core shows it in gold mode. */
@media (max-width: 550px){
  body.layout--switched .elementor-22740 .elementor-element-f21979e .site-logo{
    display: block;
  }
  body.layout--switched .elementor-22740 .elementor-element-f21979e .mobile-logo{
    display: none;
  }
}