/* ------------------------------------------------------------------
   UI fixes layered over the Elementor output.
   Each block states the bug it addresses. Nothing here changes the
   visual design - only hit areas, loading behaviour and breakpoints.
   ------------------------------------------------------------------ */

/* 1. Menu: the whole item is clickable, not just the word.
      Was: a 71x36 box containing a 35x18 anchor, so the padding was dead
      space and the target failed WCAG 2.5.8. The padding moves onto the
      link itself.
      Not gated on a desktop breakpoint: the widget is configured
      breakpoint_selector:"none", so this horizontal menu renders at every
      width - including 1009px, where an earlier min-width:1025px gate
      left the tablet range unfixed. */
/* Plain link items (Home, Team, FAQ's, Contact): the padding moves off the
   wrapper and onto the anchor, so the whole box is clickable. */
.e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)) .e-n-menu-title {
  padding: 0 !important;
}
.e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)) .e-n-menu-title > a,
.e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)) .e-n-menu-title > .e-n-menu-title-container {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 9px 18px !important;
  box-sizing: border-box;
}

/* Services (has a disclosure arrow): the padding STAYS on the title.
   Moving it onto the inner container inserted that container's 18px right
   padding between the word and the arrow, pushing them 23px apart where
   the original sits at 5px. The title is the hit area here - the click
   handler is on it - so the target is still the full box. */
.e-n-menu-item:has(.e-n-menu-dropdown-icon) .e-n-menu-title {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}
.e-n-menu-item:has(.e-n-menu-dropdown-icon) .e-n-menu-title > .e-n-menu-title-container {
  padding: 0 !important;
}
.e-n-menu-dropdown-icon {
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.e-n-menu-title:focus-visible,
.e-n-menu-title > a:focus-visible,
.e-n-menu-dropdown-icon:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* 1b. Hero scroll performance.
       Elementor's motion-fx wrote three things to the hero on every scroll
       frame, on a ~220k-pixel element:
         filter: blur(var(--blur))  - a changing blur radius forces a full
             re-rasterisation each frame. The single most expensive thing
             you can animate, and the effect only ever reached ~2px.
         transition: transform 1s   - applied to a value rewritten every
             frame, so the transition restarted constantly and the element
             trailed the scroll by up to a second. This was the "lag".
         will-change: auto          - no layer promotion, so each scale
             change repainted into the parent layer.
       The scale is kept (a transform is compositor-cheap); the blur and the
       transform transition go, and the element gets its own layer. */
[data-settings*="motion_fx"] {
  --e-transform-transition-duration: 0ms;
  filter: none !important;
}
/* Layer promotion ONLY on elements that actually scroll-scale.
   A `will-change: transform` / `transform` ancestor becomes the containing
   block for its fixed-position descendants - applying this to every
   motion_fx element made the back-to-top button (which sits inside a
   motion_fx widget of its own) position itself in normal flow instead of
   fixed to the viewport. The scroll button uses motion_fx_opacity, not
   scale, so keying on the scale effect excludes it. */
[data-settings*="motion_fx_scale_effect"] {
  will-change: transform;
  backface-visibility: hidden;
}
[data-settings*="motion_fx_scale_effect"],
[data-settings*="motion_fx_scrolling"] {
  /* keep the opacity fade, drop the transform transition that fights scroll */
  transition-property: opacity !important;
}

/* Scroll-linked effects are exactly what this preference is for. */
@media (prefers-reduced-motion: reduce) {
  [data-settings*="motion_fx"] {
    transform: none !important;
    filter: none !important;
  }
}

/* 2. Mega menu: keep the panel reachable.
      The panel is a descendant of the item, so travelling from the
      title into it never leaves the hover region. This just removes
      any gap that would break the journey. */
.e-n-menu-item > .e-n-menu-content {
  margin-top: 0 !important;
}

/* 3. Carousel: stop the slides animating their artwork in.
      The slides carry `transition: background .7s`. The `background`
      shorthand covers background-image AND background-size, so when each
      image decoded the browser animated it from its intrinsic size down
      to the 296px slide - the "loads in big, then shrinks" lag.
      Transitioning only the properties that actually need it keeps the
      hover effect while making the artwork appear at its final size. */
.e-n-carousel .swiper-slide *,
.e-n-carousel .bdt-element-link,
.elementor-widget-nested-carousel .swiper-slide * {
  transition-property: background-color, border-color, box-shadow, transform;
}

/* 3b. "Our Assessments" carousel — Swiper, unmodified.
       Measured against the live site: overflow hidden, active card
       scale(1.03) and the rest scale(0.9), all at full opacity, near-zero
       gap, sliver left and a clipped card right, counter bottom-right,
       looping. Swiper does all of that because it IS the original.
       Do not re-implement it.

       NO EDGE TREATMENT IS ADDED HERE, deliberately:

       - A ::before/::after gradient overlay was measured at a worst frame of
         1975ms scrolling past this section, against 25ms with it disabled.
         A full-height gradient painted over composited slides forces a large
         repaint every frame.
       - It also caused the visible line: when a card scaled to 0.9 it shrank
         away from the overlay's fixed edge and exposed a strip of background
         between the two.
       - A mask-image on the container replaced it, but could not be
         re-measured (see note below), and the live original has no fade at
         all - its sliver simply meets the container edge.

       So this now matches the original exactly. If a frosted edge is wanted
       later, the mask is the cheaper of the two approaches and is a single
       rule - but it must be profiled with the browser pane VISIBLE, because
       requestAnimationFrame is throttled to ~1 frame per 2s in a hidden
       document and every timing taken that way is meaningless. */

/* Any real <img> in a carousel still gets its box reserved up front. */
.swiper-slide img,
.e-n-carousel img,
.elementor-widget-nested-carousel img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow: hidden;
}
.swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 auto;
}

/* 4. Accreditations strip.
      Three logos rendered 70px tall, Towergate 41px, and it sat 15px
      lower than the rest because the row was top-aligned. The mixed
      grayscale(0.2) read as a printing fault rather than a choice.
      Normalise the optical size, centre everything, and make the
      desaturation deliberate - full grey, restored on hover. */
/* ── Accreditations & partners, rebuilt ──────────────────────────────
   Was: a 35s infinite CSS marquee of 8 items (4 logos duplicated for the
   loop), pausing on hover, at grayscale(1)/opacity .62, under a 30.6px
   heading while every other section heading on the page is 43.2px.

   Why it is now a static grid, not a moving strip:

   - WCAG 2.2 SC 2.2.2 (Pause, Stop, Hide, Level A). Content that moves
     automatically, starts automatically, runs more than five seconds and
     sits alongside other content needs a pause/stop/hide mechanism.
     A 35s infinite marquee triggers this, and pause-on-hover does not
     satisfy it because it is unreachable by keyboard. Not moving at all
     removes the requirement rather than working around it.

   - Nielsen Norman Group, "Auto-Forwarding Carousels Annoy Users and
     Reduce Visibility" (Nielsen, 2013): auto-advancing content is
     routinely missed, and users want control over pacing.

   - Erik Runyon's carousel interaction data (Notre Dame): around 1% of
     visitors interact with carousel content and roughly 84% of that is
     the first slide. Rotation buys almost nothing even when the content
     is clickable - and these logos are not.

   - Banner blindness (Benway & Lane; NN/g): users filter out moving,
     ad-shaped page furniture. An auto-scrolling logo rail looks like an
     ad unit, which is precisely backwards for a trust signal.

   - Baymard Institute's work on trust seals finds that a badge only
     builds trust if it is *recognised*. grayscale(1) at 0.62 opacity
     works against recognition, so the treatment is now a light
     desaturation that resolves to full colour on hover and focus.

   The 4 duplicate items (loop clones) are removed in ui-fixes.js - they
   also made screen readers announce every accreditation twice. */

.logo-carousel {
  overflow: visible !important;
}
/* The widget's own 40px inline padding was insetting the heading and the
   logo row to 102..1162 while every other band on the page (the
   testimonials row) runs 63..1201. Removing it puts this section on the
   same line as the rest. */
.elementor-element-52e2b5f .logowrap-content-width {
  padding-inline: 0 !important;
}
.logo-track {
  /* A grid, not a flex row: equal cells give every accreditation the same
     footprint regardless of how wide its wordmark happens to be. */
  animation: none !important;
  transform: none !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center !important;
  justify-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  /* spans the full section width on desktop, as the other bands do */
  max-width: none;
  margin-inline: 0;
}
.logo-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 84px;
  padding: 0 !important;
}
.logo-item img,
.logo-item img.logo-towergate,
.logo-item img[class^="logo-"] {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;  /* was `fill`, which distorts off-ratio logos */
  /* Recognition over decoration. Baymard's trust-seal work finds a badge
     only builds trust if it is recognised, so the desaturation is light
     and resolves to full colour on hover/focus. */
  filter: grayscale(0.6) !important;
  opacity: 0.9;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Optical sizing, not a single height cap.
   Capping every mark at the same HEIGHT makes a wide wordmark far bigger
   on the page than a squarish one: measured at a 60px cap, Towergate
   occupied 195x60 while HCPC occupied 88x60 - more than double the area,
   which is why Towergate read as the headline logo. Heights are now tuned
   by aspect ratio so the four occupy comparable area. */
.logo-item img[src*="towergate"] {          /* 3.26:1 - widest */
  max-height: 50px !important;
}
.logo-item img[src*="bps-v2"] {             /* 2.41:1 */
  max-height: 62px !important;
}
.logo-item img[src*="dbs-gray"] {           /* 1.77:1 */
  max-height: 72px !important;
}
.logo-item img[src*="hcpc"] {               /* 1.47:1 - squarest */
  max-height: 74px !important;
}
.logo-item:hover img,
.logo-item a:focus-visible img {
  filter: grayscale(0) !important;
  opacity: 1;
}
/* Stay on ONE ROW through desktop and tablet - the logos shrink with the
   viewport rather than wrapping. Wrapping to 2x2 at 900px was too eager:
   there is plenty of room for four across on a tablet.
   The caps are clamped so each mark scales down smoothly; the ratios
   between them are preserved so the optical balance holds at every size. */
.logo-item img[src*="towergate"] { max-height: clamp(30px, 4.2vw, 50px) !important; }
.logo-item img[src*="bps-v2"]    { max-height: clamp(37px, 5.2vw, 62px) !important; }
.logo-item img[src*="dbs-gray"]  { max-height: clamp(43px, 6.0vw, 72px) !important; }
.logo-item img[src*="hcpc"]      { max-height: clamp(44px, 6.2vw, 74px) !important; }
.logo-track {
  gap: clamp(0.75rem, 2.5vw, 2rem);
}
.logo-item {
  min-height: clamp(52px, 7vw, 84px);
}

/* Only genuine phone widths go two-up, where four across would make each
   mark unreadable. */
@media (max-width: 600px) {
  .logo-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 5vw, 2.25rem);
    max-width: 460px;
    margin-inline: auto;
  }
  .logo-item {
    min-height: 76px;
  }
  .logo-item img[src*="towergate"] { max-height: 42px !important; }
  .logo-item img[src*="bps-v2"]    { max-height: 52px !important; }
  .logo-item img[src*="dbs-gray"]  { max-height: 60px !important; }
  .logo-item img[src*="hcpc"]      { max-height: 62px !important; }
}
/* Heading matched to the 43.2px used by every other section, and the
   container widened to the same bounds as the testimonials section. */
.elementor-element-52e2b5f h2.elementor-heading-title {
  font-size: 43.2px !important;
  line-height: 1.15;
}
/* Match the testimonials band exactly. The accreditations row sits in an
   .e-con-inner capped at min(100%, 1140px) while the testimonials band caps
   at 1300px, so the two only lined up by coincidence below ~1300px viewport
   and visibly diverged above it (measured at 1600px: 222..1362 vs
   142..1442). */
.e-con-inner:has(> .elementor-element-52e2b5f) {
  max-width: 1300px !important;
}
.elementor-element-52e2b5f > .e-con-inner {
  max-width: 1300px !important;
}
/* The testimonials band puts its inset on the SECTION via Elementor's own
   custom properties (--padding-left/right: 7%), with zero padding on the
   inner. The accreditations section had neither, which is why it ran wider
   than the testimonials at every width and had no padding at all on small
   screens. Mirroring the same properties makes the two bands track each
   other at every breakpoint instead of being hand-matched per width. */
.elementor-element-3d9060f {
  --padding-left: 7%;
  --padding-right: 7%;
}
@media (max-width: 767px) {
  .elementor-element-52e2b5f h2.elementor-heading-title {
    font-size: clamp(1.75rem, 7vw, 2.7rem) !important;
  }
}

/* 4c. Hero card at in-between widths (768-1200px).
       Two separate problems here, and my first pass made one of them worse.

       THE OVERLAP: the copy runs across the mother and boy. The live
       original does this too at 1075px, so it is not a regression - but it
       is wrong, and my earlier padding fix pushed the text from x=84 to
       x=170 while narrowing its column, which made the collision worse.
       The copy is now capped so it ends before the artwork begins.

       THE SPACING: the original has no inline padding on the hero inner at
       these widths, which is what "no spacing" referred to. Kept, but much
       smaller than my first attempt so it does not eat the text column. */
@media (min-width: 768px) and (max-width: 1200px) {
  .elementor-element-c3eead9 > .e-con-inner {
    padding-block: clamp(1.5rem, 3vw, 2.5rem) !important;
    padding-inline: clamp(0.5rem, 1.2vw, 1rem) !important;
    row-gap: clamp(0.5rem, 1.2vw, 1rem);
  }
  /* Text column stops clear of the figures.
     Targeted at the column element itself (elementor-element-106b01b) with
     !important, because Elementor styles it through a three-class selector
     (.elementor-2465 .elementor-element.elementor-element-106b01b) that
     outranks a descendant rule. */
  .elementor-element.elementor-element-106b01b {
    max-width: 46% !important;
  }
  .elementor-element-c3eead9 h1 {
    margin-bottom: 0.3em;
  }
}
/* Below 768 the artwork sits under the copy rather than beside it, so the
   column can use the full width again. */
@media (max-width: 767px) {
  .elementor-element.elementor-element-106b01b {
    max-width: 100% !important;
  }
}

/* 4c-note. Vertical centring was tried and reverted.
       Measured 285-312px between the bottom of the copy and the bottom of
       the card at 800-900px, which looked like dead space. It is not: that
       area is the illustration. Centring the copy vertically moved it over
       the figure and made it worse, so the original top-left placement
       stands. Left here so the next person doesn't re-investigate it. */

/* 4d. Footer contact block.
       At 800-900px the email sat 13px lower than the phone number because the
       columns were baseline-aligned with unequal icon heights, so the two
       ran into each other as the row tightened. */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
footer .elementor-icon-list-items,
.elementor-location-footer .e-con-inner {
  align-items: start;
}
@media (min-width: 768px) and (max-width: 1100px) {
  .elementor-location-footer .e-con-inner > .e-con,
  .elementor-location-footer .elementor-widget-icon-box {
    min-width: 0;
  }
  .elementor-location-footer a[href^="mailto:"],
  .elementor-location-footer a[href^="tel:"] {
    overflow-wrap: anywhere;
    display: inline-block;
    max-width: 100%;
  }
}

/* 4e. Contact page.
       The H1 markup reads "Contact Us" but CSS uppercased it, so the page
       shouted while every other page title is sentence case. And its
       back-link was a plain text link where the service pages use a bordered
       pill with an icon. Rather than re-styling it to look similar, the
       actual service-page widget (bdt-advanced-button, id 74a6969) has been
       transplanted into the contact page markup, so it is literally the same
       component with the same classes and the same stylesheet. */
.elementor-element-c1fe92a .elementor-heading-title {
  text-transform: none !important;
}
/* 4b. Testimonial carousel arrows.
       They are parked outside their container (right:-60px, left:-10px),
       which is fine on a wide screen but pushed the document 9px past the
       viewport around 1000-1200px. Pull them to the container edge only
       where there isn't room for the overhang. */
@media (max-width: 1200px) {
  .bdt-navigation-next.bdt-slidenav-next {
    right: 0 !important;
  }
  .bdt-navigation-prev,
  .bdt-slidenav-previous {
    left: 0 !important;
  }
}

/* 5. Small-screen overflow guards.
      Long unbroken strings (emails, phone numbers) and wide media were
      pushing the viewport sideways below ~420px. */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }
  img,
  video,
  iframe,
  table {
    max-width: 100%;
    height: auto;
  }
  a[href^="mailto:"],
  a[href^="tel:"] {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Tap targets: bring inline contact links up to a usable size. */
  .elementor-icon-list-item > a,
  a[href^="mailto:"],
  a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* 7. Tap targets that failed WCAG 2.5.8 at every width.
      Measured at 375px: "[read more]" was 86x15, the process button
      217x23, and the skip link 1x1. The read-more padding is cancelled
      by an equal negative margin, so the hit area grows without moving
      any text. */
.bdt_read_more {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.6rem;
}
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-xs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* The skip link exists but collapses to 1x1, so keyboard users get no
   visible target. Reveal it properly when focused. */
.skip-link.screen-reader-text:focus,
.skip-link:focus-visible {
  position: fixed !important;
  top: 0.5rem;
  left: 0.5rem;
  width: auto !important;
  height: auto !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  padding: 0.5rem 1rem;
  clip: auto !important;
  clip-path: none !important;
  background: #fff;
  color: #212529;
  border: 2px solid currentColor;
  border-radius: 4px;
  z-index: 100000;
  text-decoration: underline;
}

/* 6. Respect reduced-motion for the Elementor entrance animations. */
@media (prefers-reduced-motion: reduce) {
  .animated,
  [data-settings*="animation"] {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* The accreditations widget was capped at 653px inside an 1140px container,
   so the section read narrower than every other band on the page (the
   testimonials row spans the full 1138px). Let it fill its container; the
   heading and the logo row both sit inside this wrapper, so they stay
   aligned with each other. */
.elementor-element-52e2b5f,
.elementor-element-52e2b5f .logowrap-container,
.elementor-element-52e2b5f .logowrap-content-width,
.elementor-element-52e2b5f .logo-carousel,
.elementor-element-52e2b5f .elementor-widget-html {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Lenis smooth scroll: required stylesheet ─────────────────────────
   Lenis needs these rules to work; without them it initialises but never
   actually takes over the wheel (isSmooth stays false). Kept here rather
   than as another request. The `data-lenis-prevent` rule is what lets the
   assessments carousel keep its own horizontal scrolling. */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}


/* ── Accreditations band: matched to the testimonials band ────────────
   Derived from measuring the testimonials section, not guessed:
     1600px -> tes 142..1442 : max-width 1300px binds and centres
      900px -> tes  44..840  : 44/885  = 5% inline padding
      390px -> tes  27..363  : 27/390  = 7% inline padding
   Elementor's own rule for this section is
   `.elementor-2491 .elementor-element.elementor-element-3d9060f` - three
   classes - so an equal-specificity override loses. Hence !important. */
.elementor-element.elementor-element-3d9060f {
  padding-inline: 5% !important;
}
.elementor-element.elementor-element-3d9060f > .e-con-inner {
  max-width: 1300px !important;
  margin-inline: auto !important;
}
@media (max-width: 767px) {
  .elementor-element.elementor-element-3d9060f {
    padding-inline: 7% !important;
  }
}

/* ── Carousel edge fade ───────────────────────────────────────────────
   A mask on the container, not an overlay element.

   The site originally did this with 60px white gradients on
   .e-n-carousel::before / ::after. Two problems with that construction,
   both of which were reported:

   1. THE LINE. An overlay's inner edge is pinned at a fixed x, but the
      cards scale (0.9 at rest, 1.03 active). Once a card's edge sits past
      where the gradient has already gone transparent, that edge shows as a
      hard vertical line. A mask cannot do this: it fades the cards
      themselves, so an edge inside the fade region fades out with it.

   2. COST. A full-height gradient painted over composited, transforming
      slides forces a large repaint every frame - measured at a 1975ms
      worst frame, against 25ms with it disabled.

   The mask is asymmetric on purpose: wider on the left where a deliberate
   sliver of the previous card sits, narrower on the right where a card is
   only just clipped. */
.e-n-carousel {
  --ca-fade-l: clamp(32px, 5.5%, 88px);
  --ca-fade-r: clamp(20px, 3.5%, 56px);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    rgba(0, 0, 0, 0.35) calc(var(--ca-fade-l) * 0.45),
    #000 var(--ca-fade-l),
    #000 calc(100% - var(--ca-fade-r)),
    rgba(0, 0, 0, 0.35) calc(100% - var(--ca-fade-r) * 0.45),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    rgba(0, 0, 0, 0.35) calc(var(--ca-fade-l) * 0.45),
    #000 var(--ca-fade-l),
    #000 calc(100% - var(--ca-fade-r)),
    rgba(0, 0, 0, 0.35) calc(100% - var(--ca-fade-r) * 0.45),
    transparent 100%
  );
}
/* The theme's own overlay gradients stay off - the mask replaces them. */
.e-n-carousel::before,
.e-n-carousel::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 600px) {
  /* barely any peek at phone widths, so the fade is only a soft trim */
  .e-n-carousel {
    --ca-fade-l: 18px;
    --ca-fade-r: 14px;
  }
}

/* ── Spacing fixes, measured at 871px ─────────────────────────────────

   1. HERO: the buttons sat flush against the copy above them. The heading
      widget ends at y=500 and the button row starts at y=500 - a zero gap.
   2. ABOUT US: the title and its standfirst OVERLAPPED by 7px (title bottom
      3268, subtitle top 3261).
   3. ABOUT US: "We look forward to supporting you on your journey." read as
      centred. It is not centre-aligned - its widget is only 292px wide and
      sits at x=326, while the paragraphs around it are 496px wide starting
      at x=180. It was a narrow box, not a text alignment.
   ------------------------------------------------------------------- */

/* 1. Hero standfirst overflows its own widget box, so whatever follows
      lands on top of the last line. Measured: the widget reports 519..569
      while its H2 actually renders 519..586 - 17px of overflow. Letting it
      size to its content, plus a gap before the buttons. */
.elementor-element.elementor-element-d4ef4ea {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.elementor-element.elementor-element-d4ef4ea > .elementor-widget-container,
.elementor-element.elementor-element-d4ef4ea h2 {
  height: auto !important;
  min-height: 0 !important;
}
@media (max-width: 1200px) {
  .elementor-element.elementor-element-d4ef4ea {
    margin-top: clamp(0.75rem, 1.6vw, 1.25rem) !important;
    margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem) !important;
  }
}

/* 2. Separate the About Us title from its standfirst. They were overlapping
      by 7px. Padding rather than margin, so it cannot margin-collapse
      against the heading above it. */
.elementor-element.elementor-element-31eba2b {
  margin-top: 0 !important;
  padding-top: 1.4rem !important;
}

/* 3. Put the closing line on the same measure as the paragraphs above it. */
.elementor-element.elementor-element-e52feb9 {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  align-self: stretch;
}
.elementor-element.elementor-element-e52feb9 * {
  text-align: left !important;
}

/* ── Mega menu: the panel must never sit on top of the nav row ─────────
   The panel's resting position is `top: 0`, i.e. exactly over the menu
   titles. It only drops below them when Elementor's rule matches:

     .e-n-menu:not([data-layout=dropdown]):not(.content-above)
       .e-active.e-n-menu-content { top: 100% }

   which needs `.e-active` on the OUTER .e-n-menu-content. Separately, the
   contents are revealed by `.e-n-menu-content > .e-con:not(.e-active)
   {display:none}`, which keys off the INNER element. So the two classes
   have to move together.

   When a double-toggle left the inner active and the outer not, the panel
   rendered its contents while still parked at top:0 — covering HOME, TEAM,
   SERVICES, FAQ'S and CONTACT entirely. That is the "the menu words
   disappear" bug.

   A previous fix policed the classes with `:has(> .e-con.e-active)`. That
   still reproduced in Edge, because it inherits both of Elementor's fragile
   assumptions: that the inner container is a DIRECT child matching `.e-con`,
   and that some class combination is reliably present. Neither holds in the
   sticky-header clone.

   So don't police the state - remove the failure entirely. The panel has no
   reason to ever sit at top:0: it is display:none/zero-height when closed, so
   its closed position is invisible either way. Pinning it below the title row
   PERMANENTLY means no class combination, in any browser, can put it back on
   top of the menu words. `top:100%` resolves against the title row, which is
   the panel's containing block, so this is exactly "immediately below the
   nav". */
.e-n-menu:not([data-layout="dropdown"]):not(.content-above) .e-n-menu-content {
  top: 100% !important;
  bottom: auto !important;
}
/* And the titles always paint above the panel, so they can never be hidden
   by it even mid-transition. */
.e-n-menu-title {
  position: relative;
  z-index: 2;
}