/* ===========================================================================
   LAROSA Intelligence - brand override layer
   ---------------------------------------------------------------------------
   Linked in the HEAD, after every theme and Elementor stylesheet this page
   loads, so it is present at first paint and anything declared here still wins
   on equal specificity without !important.

   It used to sit at the end of <body>, which won the cascade just as well but
   meant the browser painted one frame with the theme's styling first - the
   logo appeared at its intrinsic 312x274 and then snapped to 42px. Everything
   this file positions or sizes above the fold has to be in the head.

   If a rule ever needs to beat a stylesheet injected inside <body>, raise its
   specificity (repeat a class) rather than moving this link back down.

   Rule: theme CSS under lib/ is never edited. All visual changes to the
   Unixy base go in this file. Page structure/content changes go in the HTML.

   Section overrides are kept in page order and labelled with their SITEMAP
   index and Elementor id - for example: index.html section 0, id e559198.
   Note: CSS comments do not nest, so never open a second slash-star inside one.
   =========================================================================== */

:root {
  --lr-ink:      #04011C;
  --lr-blue:     #29449C;   /* sampled from the logo artwork */
  --lr-grey:     #3A3A3C;   /* sampled from the logo wordmark */
  --lr-paper:    #ffffff;
  --lr-accent:   #2C46BB;
  --lr-accent-2: #CBD6FF;
  --lr-slot-bg:  #eceef2;
}

/* ---------------------------------------------------------------------------
   Header - LAROSA logo lockup

   Text is set to match the supplied logo artwork, measured from it:
     - both lines are the same relative weight, stem/cap 0.18 => SemiBold 600
     - LAROSA     #3A3A3C, tracking ~0.14em
     - INTELLIGENCE  #29449C, all caps, weight 800 (heavier than the artwork,
       by request), tracking tuned to hold 85% of the wordmark width and
       centred under it (the artwork is centred, not flush)
   Replaces the Unixy wordmark in all 5 header instances. The footer still
   carries the old mark - that is a separate pass.

   Selectors are prefixed with .wgl-logotype-container to clear the theme's
   own ".wgl-logotype-container img" rule.
   --------------------------------------------------------------------------- */

.wgl-logotype-container .lr-logo {
  /* Block-level, not inline-flex: an inline box sits on the parent's text
     baseline, which adds descender leading below it and pushes the lockup
     visibly high inside the header pill. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  line-height: 1;
}

.wgl-logotype-container .lr-logo__mark {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 42px;
  max-height: 42px;
  max-width: none;
  vertical-align: middle;
}

.wgl-logotype-container .lr-logo__type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.wgl-logotype-container .lr-logo__name {
  font-family: Manrope, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
  color: var(--lr-grey);
  white-space: nowrap;
}

.wgl-logotype-container .lr-logo__sub {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.257em;
  margin-right: -0.257em;
  color: var(--lr-blue);
  white-space: nowrap;
}

/* Mobile header bar sits on near-black, rgba(4,1,28,1) */
.wgl-logotype-container .lr-logo--light .lr-logo__name { color: var(--lr-paper); }
.wgl-logotype-container .lr-logo--light .lr-logo__sub  { color: #8FA2E0; }

/* ---------------------------------------------------------------------------
   Artwork not on disk yet - hold the space as a flat block, never a broken icon
   --------------------------------------------------------------------------- */

.lr-img-missing {
  background: var(--lr-slot-bg);
  border-radius: 8px;
  font-size: 0;
  color: transparent;
}

.wgl-logotype-container .lr-logo__mark.lr-img-missing {
  width: 48px;
  height: 42px;
}

.wgl-logotype-container .lr-logo--light .lr-logo__mark.lr-img-missing {
  background: rgba(255, 255, 255, 0.14);
}

/* Five header variants (post-119, -1427, -1841, -3281, -3590) each nudge the
   logo widget up 6px - a fudge for the old inline wordmark, which sat on a text
   baseline. Our lockup is block-level and centres itself, so the nudge only
   pushes it off-centre in the white pill.

   The class is repeated to reach the theme's 4-class specificity without
   naming any single .elementor-NNN wrapper, so this covers every variant. */
.elementor-element.elementor-element-bddd7b2.elementor-element-bddd7b2
  > .elementor-widget-container,
.elementor-element.elementor-element-fc33ab8.elementor-element-fc33ab8
  > .elementor-widget-container {
  margin-top: 0;
}

/* ===========================================================================
   index.html — section 0 `e559198` — hero
   Rocket, bar chart, SEO card and phone mockup removed; the right column is
   now the mark animation (assets/js/larosa-hero.js). The stock avatars and the
   invented "3,5k+ Trusted Clients" count are gone entirely - no unverified
   trust signals in the hero.
   =========================================================================== */

/* Space is reserved on the WIDGET, not on an inner box. The theme's flex chain
   refuses to take this widget's height from its child (it replaced absolutely
   positioned artwork, which never needed to occupy space), so the canvas has to
   fill a widget that already has a height of its own. */
.elementor-element.elementor-element-7ef881f { min-height: 620px; }

/* The mark is sized off the canvas's SHORT side, and it needs a clear band
   outside itself for the halo to fade into - otherwise the scattered points
   meet a canvas edge and draw the box again. At the theme's 39% the column was
   the limiting dimension, so a taller box did nothing. Widening it is what
   actually makes the mark bigger. Class repeated to clear the theme's
   3-class .elementor-NNN rule without naming a variant. */
@media (min-width: 1025px) {
  .elementor-element.elementor-element-b3f77d4.elementor-element-b3f77d4 {
    --width: 49%;
  }
}

.lr-hero-visual {
  position: absolute;
  inset: 0;
}

.lr-hero-visual__stage {
  position: absolute;
  inset: 0;
}

.lr-hero__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1024px) {
  .elementor-element.elementor-element-7ef881f { min-height: 460px; }
}

/* The widget this canvas replaced held absolutely-positioned artwork, so the
   theme never needed it to occupy space. As a flex item with the default
   `flex-shrink: 1` inside a zero-height column container it collapses to 0,
   and the canvas then spills out of the hero over the section below. */
.elementor-element.elementor-element-b3f77d4,
.elementor-element.elementor-element-7ef881f {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  /* Mark first on mobile — directly under the header, above the eyebrow. */
  .elementor-element.elementor-element-b3f77d4 { order: -1; }
  .elementor-element.elementor-element-7ef881f { min-height: 320px; }
}

/* Headline sits on two lines, not three.

   At the theme's 64px the best two-line split ("Prove the program before /
   the machine runs it.") measures 700px against a 567px column, so it cannot
   fit above about 52px. The clamp tracks the column as the viewport narrows -
   the column is a fixed percentage, so a vw-based size keeps the same two-line
   break all the way down to the 1024px stacking point.

   Class repeated to match the theme's 4-class specificity; declared later,
   so it wins. Scoped to desktop, since tablet and mobile stack to full width
   and already break in two on the theme's own sizes. */
@media (min-width: 1025px) {
  .elementor-element.elementor-element-f579732.elementor-element-f579732
    .text-editor_wrapper {
    font-size: clamp(38px, 3.5vw, 50px);
  }
}

/* Tablet keeps the two columns side by side, so the copy column is only ~374px
   and the theme's 38px still breaks the headline over three lines. Scaled with
   vw for the same reason as the desktop rule above. */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.elementor-element-f579732.elementor-element-f579732
    .text-editor_wrapper {
    font-size: 4.3vw;
  }
}

/* ===================================================================
   Home page, section 02 - the cost of testing on the machine.

   The block is the theme's own services section (29d72d5), re-copied
   and re-imaged. These are the only things it needed that the theme
   does not already give it.
   =================================================================== */

/* The services block was built around a landscape image; the LAROSA collision
     render is portrait, 1024x1536. Left alone it grew to 674x1011 inside a
     588px column - overflowing sideways and pushing the section from 721px to
     1058px, with the render running across the heading. Capping the height and
     letting the width follow puts it back inside its slot.
     460px rather than the theme's own 674px box, because the two images are
     not packed the same way: the theme's render sits at 81% of its frame with
     air around it, ours goes to 100% edge to edge. At an equal box ours draws
     larger, and much wider - 100% of the frame's width against 66%. Matching
     the theme's apparent size would be 549px; 460 is a deliberate step below
     that, so the copy carries more of the section.

     For future renders: ask for margin in the image and the box sizes behave
     predictably. */
  .elementor-2624 .elementor-element-cb12fcd img {
    max-height: 460px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    display: block;
  }

  /* The icon slot is built for a 14px glyph, and the span that holds it is
     itself 14x14 - so sizing the image alone did nothing, the theme's
     max-width:100% just capped it to the span again. Both have to grow. The
     mark is 154 separate dots, which merge into a smudge at 14px; 26px inside
     the 32px white badge leaves a 3px margin each side and is about as large
     as it goes while still reading as a badge. */
  /* The white badge centres its glyph with 9px of padding on all four sides,
     which makes its content box 14x14 - exactly the theme's own icon size. A
     26px mark overflows that box and lands 3px past the bottom and the right,
     which is what reads as "not centred". And inside it, the mark is 26x22.8 in
     a 26px-tall span, so it hangs at the top of that too.

     Padding cannot centre something larger than the box it leaves, so the badge
     centres by flex instead and keeps its 32x32 size explicitly. The span then
     shrinks to the image, and the whole thing sits dead centre on both axes. */
  .elementor-2624 .elementor-element .wgl-infobox-media_wrapper .wgl-icon.wgl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
  }
  .elementor-2624 .wgl-icon .icon {
    display: block;
    width: 26px;
    height: auto;
    line-height: 0;
  }
  .elementor-2624 .wgl-icon .icon .lr-icon-mark {
    width: 26px;
    height: auto;
    max-width: none;
    display: block;
  }

  /* Phones: the render now shows, so it needs a size of its own. The theme
     pins the layer wrapper to a fixed 270px, which would crop it. */
  @media (max-width: 767px) {
    .elementor-2624 .elementor-element-cb12fcd .img-layer_image-wrapper {
      width: auto;
    }
    .elementor-2624 .elementor-element-cb12fcd img {
      max-height: clamp(220px, 42vh, 340px);
    }
  }

  /* Centring.

     The block's spacing was tuned around the theme's own image and its longer
     copy, and none of it survives the swap: the card is padded 30px at the top
     and 17px at the bottom, the text column carries a flat 104px of top padding
     to push the old heading down, and both the render and the icon badges are
     top-aligned in boxes taller than they are. Measured, the render sat 7px
     above its column and left 74px empty beneath it, and every badge hung 5px
     above the middle of its own line of text.

     Centring each axis rather than padding it holds at any width, and does not
     have to be re-tuned when the copy changes again. Class repeated to outrank
     Elementor's own per-element rules without reaching for !important. */
  .elementor-2624 .elementor-element.elementor-element-1eacfaa.elementor-element-1eacfaa {
    --padding-block-start: 30px;
    --padding-block-end: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .elementor-2624 .elementor-element.elementor-element-d6e206c.elementor-element-d6e206c {
    justify-content: center;
  }
  .elementor-2624 .elementor-element.elementor-element-ce1942f.elementor-element-ce1942f {
    --padding-block-start: 0px;
    padding-top: 0;
    justify-content: center;
  }
  /* The theme pins these rows to the top with a four-class selector of its own
     (.elementor-2624 .elementor-element.elementor-element-db34776
     .wgl-infobox_wrapper), so a three-class rule loses to it. Repeating the
     layout class takes it to five and wins without !important. Below 767px the
     theme already centres them itself. Scoped to this block: written first
     for any .elementor-2624 row, it also centred the Services page's index
     numbers, which the theme sets at the top of each title. */
  .elementor-2624 .elementor-element-29d72d5 .wgl-infobox_wrapper.wgl-layout-left.wgl-layout-left {
    align-items: center;
  }

  /* The theme sets these row titles at line-height 59.94px on an 18px font -
     3.3x - so each row's box is 60px tall around 24px of text, and the glyphs
     sit 8.5px above the box's own middle. Centring the badge against that box
     therefore does not centre it against the text you can actually see.

     A line-height that hugs the text fixes the alignment at source and tightens
     the rows, which were carrying 36px of dead leading each. Class repeated to
     outrank the theme's four-class per-element rule. */
  .elementor-2624 .elementor-element .wgl-infobox_title.wgl-infobox_title {
    line-height: 1.45;
  }

  /* The badge itself was never the problem. The wrapper around it is 47px tall
     for a 32px badge, and because the badge is an inline-block it sits on the
     wrapper's text baseline - flush to the bottom, with all 15px of the slack
     above it. That is what put it 7.5px below the line of text beside it.

     Laying the wrapper out as flex removes the baseline entirely, so it
     collapses to the badge and the row's align-items:center does the rest. */
  .elementor-2624 .elementor-element .wgl-infobox-media_wrapper {
    display: flex;
    align-items: center;
    line-height: 0;
  }
  /* And the actual 15px: the theme puts a margin-top on the span inside the
     wrapper, nudging the icon down to meet a heading taller than ours. That is
     what made the wrapper 47px around a 32px badge and dropped it 7.5px below
     the line of text. With it gone the wrapper collapses onto the badge and the
     row centres properly. */
  .elementor-2624 .elementor-element .wgl-infobox-media_wrapper .media-wrapper.media-wrapper {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* That 15px margin was doing two jobs: nudging the icon down, and spacing the
     rows apart. Removing it fixed the alignment and collapsed the rows onto
     each other, so the spacing is restored here where it belongs - between the
     rows rather than inside one. */
  .elementor-2624 .elementor-element .elementor-widget-wgl-infobox
    + .elementor-widget-wgl-infobox {
    margin-top: 16px;
  }

/* ===================================================================
   Home page, section 03 - what we check.

   The block is the theme's own six-up services grid (499ddf5) from
   homepage-2, re-copied and re-marked. Its icons were a rocket, a
   megaphone and a browser window; they are now flat marks drawn on
   the theme's own 512 grid, because a photoreal render turns to a
   smudge at icon size - we tried it, and it did.
   =================================================================== */

/* The theme draws these at a 36px glyph in an 80px circle, which is sized
     for decoration rather than for reading. These marks carry meaning - a tool
     striking a bar, a bite out of a block, motion against a stop - so they are
     drawn large enough to be read. Class repeated to outrank the theme's own
     four-class per-element rule without !important. */
  .elementor-398 .elementor-element .wgl-infobox-media_wrapper .wgl-icon.wgl-icon {
    font-size: 52px;
    padding: 30px;
  }

  /* Until the six renders exist the slot says which file belongs in it, rather
     than showing a broken-image glyph. larosa.js flags any image whose file is
     not on disk yet. */
  .elementor-398 .lr-check-icon.lr-img-missing {
    border: 1px dashed rgba(41, 68, 156, 0.45);
    border-radius: 6px;
    background: rgba(41, 68, 156, 0.05);
  }

/* ===================================================================
   Home page, section 04 - what we do.

   The theme's own stacking-card block (053b123) from homepage-4, with a
   fourth card cloned onto a new id - the stacking is looked up per id,
   so a duplicate id would have made both copies behave identically.

   The heading is not from this block. On homepage-4 the eyebrow and
   title live in a different top-level section, above the cards, so the
   block on its own arrives with no heading at all.

   The slots were drawn for a floating device mockup - image at 75% of
   its column, pulled 50px above and below the card so it breaks out.
   Photographs cannot do that, so from tablet up they fill the column and
   stay inside the card.
   =================================================================== */

/* post-402.css keys every rule on the element id, so the cloned
     fourth card has no styling of its own until its rules are cloned
     too. */

  .elementor-402 .elementor-element.elementor-element-6b813a3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--border-radius:20px 20px 20px 20px;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}
.elementor-402 .elementor-element.elementor-element-6b813a3:not(.elementor-motion-effects-element-type-background), .elementor-402 .elementor-element.elementor-element-6b813a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("../../lib/media/2026/05/h4-3.webp");background-position:center center;background-size:cover;}
@media(max-width:1200px) {
  .elementor-402 .elementor-element.elementor-element-6b813a3{--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}
}
@media(max-width:767px) {
  .elementor-402 .elementor-element.elementor-element-6b813a3{--margin-top:15px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}
}

/* Below 768px the card stacks - copy on top, photograph underneath -
     so the photo is a block in its own right with nothing to emerge from,
     and it is rounded on all four corners like the card around it. */
  .elementor-402 .elementor-element img[src*="assets/img/svc-"] {
    border-radius: 20px;
    display: block;
    height: auto;
  }

  /* Side by side, the left edge goes square where the copy ends, so the
     photograph reads as sliding out from behind the white card rather
     than sitting on it as a separate tile. The right side keeps the card
     own 20px so the two corners agree.

     The theme built these slots for a floating device mockup: the image
     sits at 75% of its column and is pulled 50px above and below the card
     so it breaks out of it. A photograph cannot do that - it just hangs
     out of the white panel. So from tablet up the photo fills its column
     and stays inside the card, which is also what lets the square left
     edge meet the copy. */
  @media (min-width: 768px) {
    .elementor-402 .elementor-element-6a3b6a6,
    .elementor-402 .elementor-element-95aebad,
    .elementor-402 .elementor-element-9b99372 {
      margin-top: 0;
      margin-bottom: 0;
    }
    .elementor-402 .elementor-element img[src*="assets/img/svc-"] {
      border-radius: 0 20px 20px 0;
      width: 100%;
    }
  }

  /* The four image columns came out 595, 550, 592 and 592 wide - the
     theme gives card 2 a narrower one, so its photograph sat visibly
     smaller than the rest. Sharing the space left by the fixed text panel
     makes all four identical at any width.

     Desktop band ONLY. Unscoped, this also fired at tablet, where the text
     column is not fixed - the two columns competed and the image collapsed
     from 373px to 187px. The theme own tablet and mobile rules were never
     broken; they just have to be left alone. */
  @media (min-width: 1201px) {
    .elementor-402 .elementor-element-6a3b6a6,
    .elementor-402 .elementor-element-95aebad,
    .elementor-402 .elementor-element-9b99372 {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
    }
  }

  /* larosa.css already styles .lr-img-missing and wins on size, so the
     empty slot collapsed to 3x2px. Two classes plus the element beats
     it. */
  .elementor-402 .elementor-element img.lr-img-missing {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 1px dashed rgba(41, 68, 156, 0.45);
    border-radius: 8px;
    background: rgba(41, 68, 156, 0.05);
  }

  /* The last card ended flush against the next section. The stack carries a
     42px spacer at its head but nothing at its foot, and the section below
     opens with a full-bleed band, so the two met at a 0px gap. The theme
     spaces this page with spacer widgets rather than section padding; this is
     the same idea applied to the container we already own. Class repeated to
     match the theme own three-class per-element rule without !important. */
  .elementor-402 .elementor-element-053b123.elementor-element-053b123 {
    padding-bottom: clamp(64px, 8vw, 120px);
  }

/* Above the layered breakpoint that padding is doing a second job: it is the
   only room the LAST card has to hold in.

   A pinned card is out of the document flow, so the section below slides up
   underneath it and the only thing holding the two apart is this gap. That ties
   the last card's hold to the gap - it can be about 23px longer, no more,
   however the rest is tuned. At the old 120px the last card held for 117px
   against 2982px for the first: it flicked past instead of landing, which is
   what read as the wrong animation. 640px fixed the animation and left 640px of
   empty page behind it.

   340px is the settled trade: the last card holds 257px, which is enough to
   land, and the gap still reads as spacing rather than a void. The end offset
   that goes with it is "bottom top+=360" on all six cards in index.html. Move
   the two together, and re-measure afterwards - the clearance between the last
   card and the next section is +83px here, and it must stay positive.

   Below 1201px the theme switches the stacking off, so the small value stays. */
@media (min-width: 1201px) {
  .elementor-402 .elementor-element-053b123.elementor-element-053b123 {
    padding-bottom: 340px;
  }
}

/* ===================================================================
   Side panel - the render at its foot.

   The theme shipped abstract glass lenses. These are the same glass
   language and the same tumbling-disc composition, but the discs are
   machined parts - flanges and spacer rings with bores, bolt circles
   and a keyway - so the panel says something about the company.

   Selector matched to post-3456.css exactly, including the :not(),
   and wins on order rather than on weight. larosa.css sits in
   assets/css/, so the file is one level up in assets/img/.
   =================================================================== */

/* Nothing at all until the panel has been opened.

   The panel is always in the page, off to one side, so a background on it is
   fetched on every visit whether or not anyone opens it - 90KB, and Lighthouse
   costed it at 580ms of the mobile load for a picture nobody had asked to see.
   Setting `none` here covers the theme's own sidepanel_bg.webp too: without
   it, suppressing ours would simply let the theme's load in its place.

   #side-panel takes .side-panel_active on the first open and keeps it after
   closing, so the render arrives the moment it is wanted and stays for the
   rest of the visit. */
.elementor-3456 .elementor-element.elementor-element-f01316a:not(.elementor-motion-effects-element-type-background),
.elementor-3456 .elementor-element.elementor-element-f01316a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: none;

  /* The theme sizes this `contain`, which on a full-height panel means the
     render is as tall as the panel is wide - 373px in a 460px panel. The panel
     content does not shrink with the window, so on a short laptop screen the
     render rose to y=447 while Call Us sat at 429 and Mail Us at 517: straight
     across both rows, with the phone number and the address reading over glass.

     Tying the height to the viewport instead keeps it clear of the text. The
     min() caps it at the same 373px it takes today, so a tall screen is
     unchanged and only short ones scale it down. The social pills carry their
     own solid background, so the render passing behind them still reads. */
  background-size: auto min(373px, 28vh);
}

.side-panel_active .elementor-3456 .elementor-element.elementor-element-f01316a:not(.elementor-motion-effects-element-type-background),
.side-panel_active .elementor-3456 .elementor-element.elementor-element-f01316a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("../img/sidepanel-flanges.webp");
}

/* ===================================================================
   Contacts mega menu.

   The panel was built for three columns - contacts 25%, a Get in touch
   form 33.3%, and the map 33.3% - inside a fixed 1250px box. With the
   form gone the two survivors covered barely half of it and the panel
   read as mostly empty air.

   Shrinking the box alone did not work: those widths are percentages of
   the box, so both columns shrank with it and the address broke to one
   word a line. The box comes down to 760px AND the columns go back to
   the absolute sizes they were designed at.

   Scoped to the breakpoint the theme itself uses for these widths -
   below 768px the mega menu is a stacked drawer and the columns are
   auto, which is already right.


   post-1361.css is linked in the BODY, far below larosa.css in the head,
   so an identical selector loses on order. The element class is repeated
   to outweigh it rather than reaching for !important. */

@media (min-width: 768px) {
  .elementor-1361 .elementor-element.elementor-element-383f5ff7.elementor-element-383f5ff7 { --width: 300px; }
  .elementor-1361 .elementor-element.elementor-element-48ee6ed.elementor-element-48ee6ed { --width: 400px; }
}

/* The LAROSA mark is a single flat blue, #29449C. On the footer navy
   (#132679) that is almost invisible, so on dark grounds it is driven to
   white. brightness(0) flattens it to black whatever its colour, invert(1)
   lifts that to white - which works because the mark is one colour and the
   rest of the file is transparent.

   This also reaches the mobile header bar, the other place --light is used;
   it sits on near-black, where the blue mark had the same problem. */
.wgl-logotype-container .lr-logo--light .lr-logo__mark {
  filter: brightness(0) invert(1);
}

/* ===================================================================
   Footer - logo size and link colour.
   =================================================================== */

/* The email sat at the theme global link colour, rgb(4,1,28) - near-black
   on a navy panel, the one unreadable line in the footer.

   Pinning it white fixed the resting state and broke the hover: these cards
   turn white when hovered and the theme drops their text to rgb(59,59,59),
   so a permanently white link vanished instead. The paragraph around it
   already switches correctly in both states, so the anchor just follows it.
   No hover rule of our own, and nothing that can fall out of step with
   whatever element the theme hangs its own hover on.

   One more thing had to go with it. The anchor carries its own
   `transition: color 0.3s`, so once its colour was inherited it was easing
   toward a value that was itself still easing - two transitions stacked, and
   the email visibly lagged the "Mail Us" above it. The title animates from a
   single `all 0.4s` on its own element, and the paragraph has no transition
   at all: it tracks its parent's animated colour frame by frame. Dropping the
   anchor's transition puts it in that same group, so all three now change
   together on the one 0.4s the card provides. */
.elementor-element-01e585c .wgl-infobox-content a,
.elementor-element-01e585c .wgl-infobox-content a:hover,
.elementor-element-01e585c .wgl-infobox-content a:focus {
  color: inherit;
  transition: none;
}

/* The lockup came in at the shared 42px mark height, which is sized for
   the header pill and reads small in the open space of a footer. Scaled
   up about 1.5x, all three parts together so the proportions hold - the
   letter-spacing compensations are in em and follow on their own. */
.elementor-element-01e585c .wgl-logotype-container .lr-logo { gap: 16px; }
.elementor-element-01e585c .wgl-logotype-container .lr-logo__mark {
  height: 62px;
  max-height: 62px;
}
.elementor-element-01e585c .wgl-logotype-container .lr-logo__name { font-size: 29px; }
.elementor-element-01e585c .wgl-logotype-container .lr-logo__sub  { font-size: 13px; }

/* The address wrapped to two lines while Mail Us and Call Us sat on one,
   so that card read taller than its neighbours. It was not short of room:
   the theme caps .wgl-infobox-content at max-width 190px while the column
   beside it offers 232px, and the line needs 225px. Releasing the cap lets
   the flex parent bound it instead.

   The competing rule is three classes and loads after larosa.css, so an
   equal selector lost. Four classes takes it without !important. */
.elementor-element-01e585c .wgl-infobox_wrapper .wgl-infobox-content.wgl-infobox-content {
  max-width: none;
}

/* The end mill replacing the rocket. The rocket was 412x472 - almost square -
   and the theme sizes this image by WIDTH, at 50% of its natural size. The
   end mill is 770x1449, half as wide as it is tall, so the same width rule
   would have made it half as tall again as the band it sits in. Driven by
   height instead, so it occupies the slot the rocket did whatever the file's
   proportions.

   post-396.css pins this image at width:206px with a four-class selector,
   which is why height alone squashed it - the ring is half as tall again as
   it is wide, and it was being forced into the old rocket box. Matched at
   the same weight plus the attribute so width:auto wins and the file keeps
   its own proportions.

   The hover shift is on the IMAGE, not the wrapper. The wrapper carries the
   scroll parallax, whose transform is rewritten by script on every scroll -
   anything CSS put there would be wiped a frame later. Two elements, two
   transforms, neither fighting the other. */

.elementor-396 .elementor-element.elementor-element-c9d4e8e .elementor-repeater-item-39970f9 img[src*=cta-ring] {
  width: auto;
  height: clamp(170px, 15vw, 260px);
  max-width: 100%;
  /* At full size the ring sat 28px into the heading below it. Lifted with a
     margin rather than a transform: transform is spoken for twice over here -
     the wrapper is driven by the scroll parallax, the image by the hover. */
  margin-top: -44px;
  /* The theme marks this whole parallax layer pointer-events:none so the
     decoration cannot swallow clicks or text selection. Nothing can be
     hovered through that, so the image opts itself back in - a child may
     re-enable pointer events even where the parent has switched them off. */
  pointer-events: auto;
  /* Eased back a little so the wordmark reads through the ring body, not
     only through the bore. Low enough to soften it, high enough to keep the
     deep blue in the teeth - below about 0.8 the whole thing goes grey. */
  opacity: 0.85;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.elementor-396 .elementor-element.elementor-element-c9d4e8e .elementor-repeater-item-39970f9 img[src*=cta-ring]:hover {
  transform: translateX(-12px);
}

/* Someone who has asked their system for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .elementor-396 .elementor-element.elementor-element-c9d4e8e .elementor-repeater-item-39970f9 img[src*=cta-ring] {
    transition: none;
  }
  .elementor-396 .elementor-element.elementor-element-c9d4e8e .elementor-repeater-item-39970f9 img[src*=cta-ring]:hover {
    transform: none;
  }
}

/* post-396.css parks this layer at top:11%, which was fine for a tall thin
   rocket but drops a wide ring straight onto the heading below. Raised, and
   only `top` is touched - the parallax script owns `transform` on this same
   element and rewrites it on every scroll. Five classes to clear the theme
   four. */
.elementor-396 .elementor-element.elementor-element-c9d4e8e .elementor-repeater-item-39970f9.elementor-repeater-item-39970f9 {
  top: 2%;
}

/* ===================================================================
   Home page, section 05 - how an engagement runs.

   The theme block carries three numbered steps; the delivery model has
   four. Each step sits in its OWN column container - the columns are
   what make the row - so the fourth is a clone of a whole column, not
   of a widget. The columns carry --width:50% and shrink to share the
   row, so three at 390px became four at 292px on their own.

   Two things do not come with a cloned id and had to be given back:
   the divider line, which the MIDDLE column draws from borders on both
   of its sides, and the crosshair marks, which the parallax script
   builds at runtime from one settings entry per column.
   =================================================================== */

/* post-396.css keys the column width, the 290px step width and the
     gradient wash on the element ids, so the cloned fourth column and
     its step have no styling of their own until these come with them. */
.elementor-396 .elementor-element.elementor-element-8b70df4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#FFFFFF33;--border-color:#FFFFFF33;--padding-top:65px;--padding-bottom:65px;--padding-left:30px;--padding-right:30px;}
.elementor-396 .elementor-element.elementor-element-8b70df4 .elementor-repeater-item-d436283{top:-15px;left:15px;display:flex;justify-content:flex-end;min-height:100%;align-items:flex-start;z-index:-1;}
.elementor-396 .elementor-element.elementor-element-8b70df4 .elementor-repeater-item-d436283 img{width:29px;}
.elementor-396 .elementor-element.elementor-element-8b70df4 .elementor-repeater-item-c1b22f1{top:15px;left:15px;display:flex;justify-content:flex-end;min-height:100%;align-items:flex-end;z-index:-1;}
.elementor-396 .elementor-element.elementor-element-8b70df4 .elementor-repeater-item-c1b22f1 img{width:29px;}
@media(min-width:768px) {
  .elementor-396 .elementor-element.elementor-element-8b70df4{--width:50%;}
}
.elementor-396 .elementor-element.elementor-element-a0a5600 .wgl-infobox_bg_wrapper::before{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF00 0%, #2C46BB 100px);}
.elementor-396 .elementor-element.elementor-element-a0a5600{width:var( --container-widget-width, 290px );max-width:290px;--container-widget-width:290px;--container-widget-flex-grow:0;z-index:1;}
.elementor-396 .elementor-element.elementor-element-a0a5600.elementor-element{--align-self:center;}
.elementor-396 .elementor-element.elementor-element-a0a5600 .wgl-infobox_wrapper{justify-content:flex-start;align-items:flex-start;}
.elementor-396 .elementor-element.elementor-element-a0a5600 .content_wrapper{padding:77px 0px 0px 0px;}
.elementor-396 .elementor-element.elementor-element-a0a5600 .wgl-infobox_title{font-size:30px;font-weight:600;line-height:1.25em;color:#FFFFFF;}
.elementor-396 .elementor-element.elementor-element-a0a5600 .wgl-infobox_bg_text{font-size:128px;font-weight:800;line-height:0.8em;letter-spacing:-0.05em;text-align:center;-webkit-text-stroke-width:0.3px;margin:0 auto auto auto;--pos-y:0px;z-index:-2;color:#FFFFFF00;--ib-icon-clr-first:#FFFFFF00;-webkit-text-stroke-color:#FFFFFF;}
.elementor-396 .elementor-element.elementor-element-a0a5600 .elementor-widget-container:hover .wgl-infobox_bg_text{color:#FFFFFF;--ib-icon-clr-first:#FFFFFF;}
.elementor-396 .elementor-element.elementor-element-a0a5600 .wgl-infobox-content{font-size:14px;font-weight:500;line-height:2em;letter-spacing:0px;padding:12px 0px 0px 0px;color:#FFFFFF;}
.elementor-396 .elementor-element.elementor-element-a0a5600 .elementor-widget-container,

                     .elementor-396 .elementor-element.elementor-element-a0a5600 .wgl-infobox_bg_wrapper{transition:0.4s;}
@media(max-width:1200px) {
  .elementor-396 .elementor-element.elementor-element-a0a5600 .wgl-infobox_title{font-size:26px;}
}

  /* The middle column carries a border on BOTH sides, and those two lines are
     what draws the dividers in a three-column row. A fourth column inherits
     neither, so the gap between 03 and 04 had no line at all. The clone takes
     a left border of its own, in the theme's own colour. */
  .elementor-396 .elementor-element.elementor-element-8b70df4 {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #FFFFFF33;
  }

/* The four steps sit in one row down to 768px and stack one per row below it.
   A vertical divider only means anything between two columns; once they are
   stacked it is a line running down the side of a card for no reason - down
   the left of 04, and down both sides of 02, which carries the pair the theme
   draws its own dividers with.

   Only the sides go. The top borders stay: side by side they are one rail
   across the row, stacked they separate one step from the next, and both
   readings are right. */
@media (max-width: 767px) {
  .elementor-396 .elementor-element.elementor-element-c124ce1,
  .elementor-396 .elementor-element.elementor-element-8b70df4 {
    border-left-width: 0;
    border-right-width: 0;
    --border-left-width: 0px;
    --border-right-width: 0px;
  }
}

/* ===================================================================
   Home page, section 06 - why LAROSA.

   The theme striped-services block from homepage-2, which is the one
   list shape this page does not already use. It replaced the
   testimonials block whole, rather than having its widgets swapped:
   the floating "Incredible results" bubbles belong to that block shell
   and survived a widget-level swap, and the striped rows collapse
   outside the container homepage-2 gives them.

   The heading was lifted separately and arrived without three things
   its old block gave it: a centred width-capped container, a 500px
   width cap of its own to remove, and the 136px spacer above it.
   =================================================================== */

/* The heading was lifted out of the block being retired, so it
     arrived without the centred, width-capped container that block
     wrapped it in. Same container width the rest of the page uses. */
  .lr-why-head {
    max-width: 1170px;
    margin: 0 auto;
    /* The heading sat between two spacer widgets in the block it came
       from: 136px above it and 34px below. Lifting the widget alone
       left both behind, which is why it rode high. The top one is put
       back here; the bottom one is not needed, because the block below
       opens with a spacer of its own worth about 78px. */
    padding: 136px 15px 0;
    text-align: center;
  }
  .lr-why-head .dblh__title-wrapper,
  .lr-why-head .dblh__subtitle {
    text-align: center;
  }

  /* The widget carried its own 500px cap, sized for the narrow column
     it used to sit in, which broke the line into three. Released to
     the container width. */
  .lr-why-head .elementor-element-d378ded.elementor-element-d378ded {
    max-width: none;
    width: 100%;
  }

  /* The spacer stepped down to 90px below 1200px; this follows it. */
  @media (max-width: 1200px) {
    .lr-why-head { padding-top: 90px; }
    .elementor-398 .elementor-element.elementor-element-3551bb7 { --spacer-size: 26px; }
  }

  /* The block opens with a 124px spacer, sized for a section that had
     no heading of its own above it. With the heading now sitting there
     it left the title stranded well clear of the row, so it comes down
     to a normal heading-to-content gap. (60px below 1200px, above.) */
  .elementor-398 .elementor-element.elementor-element-3551bb7 { --spacer-size: 40px; }

  /* The copy is absolutely positioned straight over the artwork with
     nothing between them - the theme got away with it because its own
     renders happened to leave that corner empty. Ours do not, and the
     lens in card three sat right across the sentence. A scrim fades the
     panel colour in behind the text and out again before it reaches the
     subject, so the artwork is untouched where it actually shows.

     It goes on the text wrapper, NOT on .service-image::after. That
     pseudo is already the theme's own machinery - a solid #CBD6FF wash
     it fades from opacity 0 to 1 to turn the open card pale - so
     borrowing it broke the light state and, at z-index -1, sat behind
     the artwork doing nothing anyway. The wrapper is free, sits above
     the image already, and is exactly the box the copy occupies. */
  .wgl-striped .wgl-striped_wrapper {
    background: linear-gradient(to right,
      rgba(19, 38, 121, 0.92) 0%,
      rgba(19, 38, 121, 0.86) 46%,
      rgba(19, 38, 121, 0.45) 74%,
      rgba(19, 38, 121, 0) 96%);
  }

  /* The open card is the pale one and its text is dark, so the same
     scrim in reverse. */
  .wgl-striped.active .wgl-striped_wrapper {
    background: linear-gradient(to right,
      rgba(214, 223, 255, 0.94) 0%,
      rgba(214, 223, 255, 0.88) 46%,
      rgba(214, 223, 255, 0.48) 74%,
      rgba(214, 223, 255, 0) 96%);
  }

/* Removing the news grid took its spacing with it, and the cards ended up
   flush against the call-to-action band below - a 0px gap, edge to edge.
   Same value section 04 uses at its foot, so the page keeps one rhythm.
   Scoped to this widget id rather than to .elementor-398, which also wraps
   section 03. */
.elementor-398 .elementor-element.elementor-element-d6262a2 {
  margin-bottom: clamp(64px, 8vw, 120px);
}

/* ===================================================================
   Home page, section 07 - who this is for.

   The theme carousel, kept as it was: six slots for the six
   application environments in the engineer brief. Only the words and
   the icons changed.

   Icons are Lucide (MIT), inlined rather than linked - no CDN request,
   nothing to break if that CDN moves. Source files in _proto/icons/.
   =================================================================== */

/* Swiper sizes every slide to its own content, so a single title
     wrapping to a second line made that one card 42px taller than the
     other five. The copy is now cut to fit on one line each, but that
     is an argument about character counts and it will not survive the
     next edit - so the slides are stretched to a common height as
     well, and the row stays level whatever the words do later. */
  .wgl-cases .swiper-wrapper { align-items: stretch; }
  .wgl-cases .case_items { height: auto; }

  /* The theme fills any svg in this button with currentColor, which
     turned each line icon into a solid blob - a crosshair became a
     dot, a box became a hexagon. The fill="none" on the icons is a
     presentation attribute, and any CSS rule beats one, so it has to
     be said in CSS to hold. */
  .wgl-cases .case_items svg,
  .wgl-cases .case_items svg * {
    fill: none;
    stroke: currentColor;
  }

/* ===================================================================
   Home page, section 04 - the fifth and sixth services.

   Technical enablement and Simulation integration, cloned from the
   last card onto ids of their own because post-402.css keys width,
   radius and the background panel on the id.

   The stacking settings changed for every card at the same time, not
   just these two: the stack closed at the .vertical-scroll-end
   wrapper centre, and cards five and six start past that point, which
   gave them a zero-length range and no animation at all. It now closes
   at the wrapper bottom. Those settings live in index.html, in the
   lr-layered-cards script.
   =================================================================== */

/* post-402.css keys width, radius and the background panel on the
     element id, so a cloned card has none of them until its rules are
     cloned too. */
.elementor-402 .elementor-element.elementor-element-6b813a4{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--border-radius:20px 20px 20px 20px;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}
.elementor-402 .elementor-element.elementor-element-6b813a4:not(.elementor-motion-effects-element-type-background), .elementor-402 .elementor-element.elementor-element-6b813a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("../../lib/media/2026/05/h4-3.webp");background-position:center center;background-size:cover;}
@media(max-width:1200px) {
  .elementor-402 .elementor-element.elementor-element-6b813a4{--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}
}
@media(max-width:767px) {
  .elementor-402 .elementor-element.elementor-element-6b813a4{--margin-top:15px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}
}
.elementor-402 .elementor-element.elementor-element-6b813a5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--border-radius:20px 20px 20px 20px;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}
.elementor-402 .elementor-element.elementor-element-6b813a5:not(.elementor-motion-effects-element-type-background), .elementor-402 .elementor-element.elementor-element-6b813a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("../../lib/media/2026/05/h4-3.webp");background-position:center center;background-size:cover;}
@media(max-width:1200px) {
  .elementor-402 .elementor-element.elementor-element-6b813a5{--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}
}
@media(max-width:767px) {
  .elementor-402 .elementor-element.elementor-element-6b813a5{--margin-top:15px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}
}

  /* The two new photographs are not on disk yet - hold the slot as a
     flat block rather than a broken-image glyph. */
  .elementor-402 .elementor-element img.lr-img-missing {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    border: 1px dashed rgba(41, 68, 156, 0.45);
    border-radius: 20px;
    background: rgba(41, 68, 156, 0.05);
  }

/* ===================================================================
   Lucide line icons in sections 02 and 03.

   The theme fills any svg in an icon slot with currentColor, which turns
   a stroke-drawn icon into a solid blob. fill="none" on the icon itself
   is a presentation attribute and any CSS rule beats one, so it has to
   be said here to hold - the same trap that caught section 07.

   Section 02's bullets were the LAROSA logo mark repeated three times.
   The svg keeps that element's .lr-icon-mark class so it inherits the
   sizing already written for it.
   =================================================================== */

.elementor-element-29d72d5 .wgl-icon svg,
.elementor-element-29d72d5 .wgl-icon svg *,
.elementor-element-499ddf5 .wgl-icon svg,
.elementor-element-499ddf5 .wgl-icon svg * {
  fill: none;
  stroke: currentColor;
}

/* ===================================================================
   Lucide line icons in section 04, and the #contact target.

   Same treatment as sections 02, 03 and 07: the theme fills any svg in
   an icon slot with currentColor, which turns a stroke-drawn icon into
   a solid blob, and fill="none" on the icon is only a presentation
   attribute - any CSS rule beats one.

   scroll-margin-top on the footer keeps the sticky header from covering
   the top of it when a #contact link jumps there.
   =================================================================== */

.elementor-402 .wgl-icon svg,
.elementor-402 .wgl-icon svg * {
  fill: none;
  stroke: currentColor;
}

.elementor-element-01e585c {
  scroll-margin-top: 96px;
}

/* ===================================================================
   The faint line that swept past while scrolling.

   The sticky header hides itself with opacity:0 and translateY(-100px)
   but stays visibility:visible, and the bar inside it carries
   box-shadow: 0 5px 17px rgba(0,0,0,0.15).

   Mid-transition the bar is drawn at partial opacity - and because the
   bar is white on a white page, the only part of it that registers is
   the shadow. That is the line: a header you cannot see, dragging a
   shadow you can, once on the way down and once on the way up.

   Taking it out of the paint entirely while it is inactive removes the
   artifact. The fade IN survives, because sticky_active is added before
   the opacity transition starts; only the fade OUT becomes immediate,
   which is how most sticky headers behave anyway.
   =================================================================== */

.wgl-sticky-header:not(.sticky_active) {
  visibility: hidden;
}

/* ===================================================================
   Mobile - the ring gear in the call-to-action band.

   The parallax script writes an inline transform on the wrapper that
   drifts it sideways as you scroll. The offset is proportional to
   scroll, not to viewport width, so what reads as a gentle drift at
   1700px shoves the ring 126px off the right edge of a 375px screen,
   clipped and colliding with the heading.

   !important is deliberate and is the only thing that works here: the
   competing value is an inline style written by script, and no amount
   of selector specificity beats an inline declaration. Everywhere else
   in this file specificity is raised instead.
   =================================================================== */

@media (max-width: 767px) {
  .elementor-element-c9d4e8e .extended-parallax {
    transform: none !important;
  }

  .elementor-396 .elementor-element.elementor-element-c9d4e8e
    .elementor-repeater-item-39970f9 img[src*=cta-ring] {
    height: 112px;
  }
}

/* The wordmark behind the ring is set at a flat 300px, which renders about
   1009px wide - it was cut off at both edges on anything narrower than a
   desktop, reading as "LAROS" on a phone and on a tablet alike.

   min() rather than a breakpoint: the word is ~3.9x its font size with its letter-spacing, so 22vw
   keeps it inside any viewport, and the 300px ceiling means desktop is
   untouched. One rule instead of a rule per device. */
.elementor-396 .elementor-element.elementor-element-302989d .dblh__title-wrapper {
  font-size: min(300px, 22vw);
}

/* ===================================================================
   Home page, section 09 - frequently asked questions.

   The theme's own wgl-toggle-accordion widget, lifted from faq.html.
   Its base styling (142 rules in main.css) and both JS handlers are
   already on this page, so the widget needed no new dependencies - only
   these per-element rules, which came from the FAQ page's post-598.css.

   Two changes were made carrying them over. The source page's wrapper
   selector is dropped and the element class repeated instead, so the
   rules win on specificity without !important and without depending on
   which elementor-NNN wrapper the section sits inside. And the demo's
   fixed 675px width became 100 percent, since here the accordion sits in
   a full-width section under a centred heading rather than in a narrow
   column beside an image.
   =================================================================== */

.elementor-element-37abcb6.elementor-element-37abcb6 {width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_panel {overflow:hidden;--acc-delimiter-size:1px;background-color:#FFFFFF;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_title {order:1;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_icon {align-self:flex-start;--icon-size:16px;margin:6px 23px 0px 0px;color:#2C46BB;--wgl-icon-rotate:0deg;--wgl-icon-scale-y:1;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_panel-inner {width:100%;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_panel:first-child::before {border-top:unset !important;}
body[data-elementor-device-mode="desktop"] .elementor-element-37abcb6.elementor-element-37abcb6.disable-rotation-yes .media-wrapper,

 body[data-elementor-device-mode="tablet"] .elementor-element-37abcb6.elementor-element-37abcb6.disable-rotation-tablet-yes .media-wrapper,

 body[data-elementor-device-mode="mobile"] .elementor-element-37abcb6.elementor-element-37abcb6.disable-rotation-mobile-yes .media-wrapper {border-top:unset !important;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_panel::before {--acc-delimiter-color:rgba( 4,1,28,0.15 );}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_panel:last-child::before {--acc-delimiter-color-last:rgba( 4,1,28,0.15 );}
.elementor-element-37abcb6.elementor-element-37abcb6.delimiter-paint-top-yes .wgl-accordion_panel.active::before,

 .elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_panel.active + .wgl-accordion_panel::before {--acc-delimiter-color:#2C46BB;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_panel.active:last-child::before {--acc-delimiter-color-last:#2C46BB;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_header {font-size:20px;font-weight:500;letter-spacing:0em;color:#04011C;padding:22px 0px 22px 0px;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_title-prefix {position:relative;top:0;left:0;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_panel:hover .wgl-accordion_icon {--wgl-icon-scale-y:1;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_panel.active .wgl-accordion_icon {--wgl-icon-scale-y:-1;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_content {font-size:15px;line-height:1.867em;padding:0px 0px 21px 40px;margin:-9px 0px 0px 0px;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_header {padding:18px 0px 18px 0px;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_icon {margin:6px 20px 0px 0px;}
.elementor-element-37abcb6.elementor-element-37abcb6 .wgl-accordion_content {padding:0px 0px 15px 0px;}

/* Elementor drives container layout from custom properties, not from the
   class list: `.e-con > .e-con-inner` takes `display: var(--display)`. A
   container that declares no --display resolves that to an invalid value,
   the inner falls back to `display: inline`, and an inline box ignores
   max-width - which is why this section first rendered edge to edge while
   every other section stopped at 1200px. Declaring the same properties the
   theme writes for its own boxed containers is what fixes it. */
.elementor-element-a7f31c4 {
  --display: flex;
  --flex-direction: column;
  --container-widget-width: 100%;
  /* Top padding is deliberately much smaller than the bottom. The section
     above already ends with a bottom margin of its own (added when the why-us
     cards sat too close to what followed), so a matching 110px here stacked
     with it and left roughly 230px of blank page above the heading. The space
     below still needs the full value - nothing underneath is providing it. */
  --padding-top: clamp(16px, 2vw, 32px);
  --padding-bottom: clamp(64px, 7vw, 110px);
  /* 15px, not 0: the inner is capped at 1200px so the sides never matter on a
     wide screen, but below that cap the container runs full width and zero
     padding puts the answer text hard against the viewport edge on a phone.
     15px is what the rest of the page uses - the cards measure 345 in a 375
     viewport - so the FAQ lines up with everything above it. */
  --padding-left: 15px;
  --padding-right: 15px;
}

/* The heading sits centred above the list, matching sections 05 and 06. */
.elementor-element-b5c209d .wgl-double-heading {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* Held to a comfortable measure: a question set running the full 1200px is
   hard to scan, and the answers turn into single long lines.

   This targets the accordion's own id rather than the widget wrapper on
   purpose. Elementor ships `.e-con.e-con > .e-con-inner > .elementor-widget
   { max-width: 100% }` at four classes, which outranks any two-class rule on
   the wrapper - the first attempt here set 880px on the wrapper and lost
   silently. The id is both stronger and stable: the theme writes it. */
#wgl-accordion-37abcb6 {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* ===================================================================
   Home page, section 06 - the 01..04 step numbers.

   These are outline-only text: the fill is transparent and the glyph is
   drawn entirely by -webkit-text-stroke. The theme sets that stroke to
   0.3px, which is narrower than one device pixel on an ordinary 1x
   laptop screen - the browser rounds it away and the numbers simply are
   not there. They only appeared on hover, because hover swaps the fill
   to solid white. On a 2x screen 0.3px survives, which is why this was
   invisible during earlier checks on a retina display.

   A hairline is the intent, so the width is pinned to one DEVICE pixel
   rather than one CSS pixel: 1px at 1x, 0.5px at 2x. Same visual weight
   everywhere, and never below the threshold where it disappears.
   post-396.css sets the 0.3px at four classes, so two repeats of the
   element class was not enough to beat it - this uses four, which wins
   on weight rather than on which file happens to load last.
   =================================================================== */

.elementor-element-6777ad3.elementor-element-6777ad3.elementor-element-6777ad3.elementor-element-6777ad3 .wgl-infobox_bg_text,
.elementor-element-3a54873.elementor-element-3a54873.elementor-element-3a54873.elementor-element-3a54873 .wgl-infobox_bg_text,
.elementor-element-a0a5599.elementor-element-a0a5599.elementor-element-a0a5599.elementor-element-a0a5599 .wgl-infobox_bg_text,
.elementor-element-a0a5600.elementor-element-a0a5600.elementor-element-a0a5600.elementor-element-a0a5600 .wgl-infobox_bg_text {
  -webkit-text-stroke-width: 1px;
}

@media (min-resolution: 2dppx) {
  .elementor-element-6777ad3.elementor-element-6777ad3.elementor-element-6777ad3.elementor-element-6777ad3 .wgl-infobox_bg_text,
  .elementor-element-3a54873.elementor-element-3a54873.elementor-element-3a54873.elementor-element-3a54873 .wgl-infobox_bg_text,
  .elementor-element-a0a5599.elementor-element-a0a5599.elementor-element-a0a5599.elementor-element-a0a5599 .wgl-infobox_bg_text,
  .elementor-element-a0a5600.elementor-element-a0a5600.elementor-element-a0a5600.elementor-element-a0a5600 .wgl-infobox_bg_text {
    -webkit-text-stroke-width: 0.5px;
  }
}

/* ===================================================================
   Contacts map - a picture that links out, not an embed.

   The mega-menu used to carry three Google Maps iframes, one per header
   variant, all of them 0x0 and hidden until the menu is opened - and all
   three loaded Google's script at page load anyway. That is what put the
   gen_204 telemetry beacons and the CSP eval report in the console.

   A still image inside a link does the same job for a visitor: it shows
   where LAROSA is, and clicking opens the real map in Google's own app,
   which is where anyone wanting directions was going to end up. No
   third-party code runs here at all.

   The image slot is 369x394 in the menu, so the artwork is specified at
   740x790 - twice that, for a high-DPI screen. Until the file exists,
   .lr-img-missing (declared near the top of this file) holds the space as
   a flat block rather than showing a broken-image icon.
   =================================================================== */

.lr-map {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  line-height: 0;
  text-decoration: none;
  background: var(--lr-slot-bg);
}

.lr-map__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lr-map:hover .lr-map__img,
.lr-map:focus-visible .lr-map__img {
  transform: scale(1.04);
}

.lr-map:focus-visible {
  outline: 2px solid var(--lr-accent);
  outline-offset: 3px;
}

/* While the artwork is missing the slot would collapse to the cue's height,
   because an image with no file contributes nothing. The declared 740x790
   gives it an aspect ratio to hold instead. */
.lr-map__img.lr-img-missing {
  aspect-ratio: 740 / 790;
  min-height: 180px;
}

/* ===================================================================
   Mobile - a header you can still reach.

   Below 1200px the theme switches its own sticky header off. The first
   thing wglStickyInit's init() does in theme-addons.js is:

       if (m_width >= jQuery(window).prop("clientWidth")) {
           $stickyHeader.removeClass('sticky_active');
           return;
       }

   where m_width is body[data-mobile-width], which is 1200. So on a phone
   .wgl-sticky-header never activates and the only header is the real one
   - position:absolute at the top of the document, which scrolls away and
   never comes back. On a page 12,000px tall that leaves the menu button
   unreachable unless you scroll the whole way back to the top, which is
   exactly what it felt like.

   The theme's own provision for this is a .wgl-mobile-header carrying
   .wgl-sticky-element. This export's mobile header does not have that
   class, and adding it would not help: that element holds the drawer,
   not the visible bar.

   So the bar pins itself here. .wgl-site-header is the bar - logo and
   hamburger - and .wgl-mobile-header, which holds the drawer, is its
   sibling, so fixing the bar leaves the drawer's own fixed positioning
   untouched. The behaviour then matches the desktop sticky header: out
   of the way while you read downwards, back the moment you scroll up.
   larosa.js toggles the class; every pixel of the movement is here.
   =================================================================== */

@media (max-width: 1200px) {
  .wgl-theme-header .wgl-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* 1, not the 99 the theme writes here. z-index is inert on a static
       element, so that 99 did nothing until the bar became fixed - and then
       it beat the drawer, which is trapped at level 2 by .mobile_nav_wrapper
       (position:relative, z-index:2) whatever its own 999 says. The white
       logo pill painted over the open menu.

       What the bar needs is to clear the page, and it already does: the
       whole of .wgl-theme-header is absolute at z-index 99, so anything in
       here outranks the page regardless. Within that, 1 keeps the bar above
       nothing in particular and below the drawer - which is the whole
       requirement. Ordering it by state instead would mean the pill
       reappearing over the drawer for the length of the close animation. */
    z-index: 1;
  }

  /* -118%, not -100%: the pill sits inset from the bar's top edge and
     casts a shadow below itself, and both have to clear the screen. */
  body.lr-header-away .wgl-theme-header .wgl-site-header {
    transform: translateY(-118%);
  }

  /* The drawer covers the bar completely, so there is nothing to hide and
     nothing to animate; holding the transform still keeps the two from
     arguing if the menu is opened mid-scroll. */
  body.mobile_switch_on .wgl-theme-header .wgl-site-header {
    transform: none;
  }
}

@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
  .wgl-theme-header .wgl-site-header {
    transition: none;
  }
}

/* ===================================================================
   The striped rows - three renders that were arriving far too early.

   Each row's artwork is a CSS background, and a CSS background is
   fetched as soon as its element is in the render tree. These three
   are 639KB together, they sit two thirds of the way down the page,
   and they were competing for bandwidth with the hero on every visit.
   Nothing native defers a background: loading="lazy" is an attribute
   of <img>, and this is not an img.

   So the background is withheld until the section is close enough to
   matter, and larosa.js adds .lr-bg-loaded when it comes within a
   screen of the viewport. By the time anyone has scrolled that far the
   picture is long since there; on a visit that never reaches this
   section it is never fetched at all.

   Written as :not() on the section rather than as a rule that sets the
   image, so the theme's own declaration stays the single source of
   what the picture is. This only decides when it is allowed to load.
   =================================================================== */

.elementor-398 .elementor-element.elementor-element-d6262a2:not(.lr-bg-loaded) .elementor-repeater-item-9c80bef .service-image .image,
.elementor-398 .elementor-element.elementor-element-d6262a2:not(.lr-bg-loaded) .elementor-repeater-item-95704c0 .service-image .image,
.elementor-398 .elementor-element.elementor-element-d6262a2:not(.lr-bg-loaded) .elementor-repeater-item-92f83e2 .service-image .image {
  background-image: none;
}


/* ===================================================================
   Section titles: h3 -> h2, and the styling that has to follow them.

   The page ran h1 (the hero) straight to h3 for every section title,
   which is a skipped level - a screen reader announcing the outline
   reports a missing rank, and Lighthouse flags it. The titles are the
   sections of the page, one level below the page's own name, so h2 is
   what they should have been.

   The theme's base heading declarations name the tags explicitly
   (h1, h2, h3 ... in one selector list), and this page had no h2 at all
   when the stylesheet was pruned, so the h2 half of those lists was
   dropped as dead weight. Correct at the time; wrong the moment an h2
   appeared. These two declarations are what the h3 was getting - a
   reset margin and the heading ink - restored for the new tag.

   The white titles on the blue sections are unaffected: that colour is
   set on the span inside, not on the wrapper.
   =================================================================== */

h2.dblh__title-wrapper {
  margin: 0;
  color: #04011C;
}

/* ===================================================================
   The highlight glow stopped at the card's edge.

   The "how it works" section is a boxed container: the blue card is the
   inner box, inset from the section by the gutter, and the section runs
   the full width of the page. The theme's dynamic highlight - a 929px
   radial wash under a 78px blur - is positioned against the section,
   not the card, so it painted across the gutter as well. On a white
   page that reads as a pale blue strip running down beside the card,
   which is what it looked like: a bar of colour outside the rounded
   corner with nothing to explain it.

   The glow now takes the same box as the card. Width is the smaller of
   the container's content width and what is left after the padding,
   which is exactly how Elementor sizes .e-con-inner, so the two track
   each other at every breakpoint - padding-driven on a narrow screen,
   content-width-driven on a wide one. Centred with auto margins rather
   than a transform, because a transform here would be overwritten the
   moment the highlight script decides to move the layer itself.

   The clipping is a clip-path, not overflow. The layer starts 66% of the
   way down (the theme's top: 66%), and the wash is centred in it, so it
   rises above the layer's own top edge; overflow: hidden cut it off
   there, and the glow showed a hard horizontal edge across the middle
   of the card, just under the step titles. The clip-path trims only
   what lies outside the card: nothing at the top (-100vh), the sides
   exactly, and at the bottom the 66% of the layer that hangs below the
   card, with the card's 20px radius on those two corners.
   =================================================================== */

.elementor-element-a0f0d54 .wgl-dynamic-highlights-js {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: min(var(--content-width, 1500px),
             calc(100% - var(--padding-left, 15px) - var(--padding-right, 15px)));
  clip-path: inset(-100vh 0 66% 0 round 0 0 20px 20px);
}


/* ===================================================================
   About page (about.html)

   Built from theme blocks in their own wrappers: EL-31 scroll gallery and
   the intro from the theme's about-us page (408), EL-18 counters and EL-10
   cards from the elements page (410), EL-34 timeline (1691), and the home
   page's closing section (396). Every rule here is scoped to
   body.lr-page-about, because elements.html carries the same 410 ids and
   has to keep showing the blocks exactly as the theme ships them.
   =================================================================== */

/* EL-18 counters. In the catalogue this row sits between heading blocks
   that carry its spacing; here it follows the intro directly and would
   touch the button above and the blue band below. The theme's own about
   page gives a single row in that position (its logo strip) 110px above
   and 135px below - the same rhythm here, scaled down on narrow screens. */
.lr-page-about .elementor-410 .elementor-element.elementor-element-4ef98ab.elementor-element-4ef98ab {
  --margin-top: clamp(60px, 7.6vw, 110px);
  --margin-bottom: clamp(70px, 9.4vw, 135px);
}

/* EL-10 second row. The theme's renders are a pie chart, a magnifier and a
   cloud - SEO symbols. Swapped for LAROSA's own glass renders, recut onto
   the theme's 560x456 canvas: flanges for supply, end mills for service
   and spare parts, the collision render for simulation. */
.lr-page-about .elementor-410 .elementor-element.elementor-element-b1c9f9d.elementor-element-b1c9f9d .wgl-infobox_bg_wrapper::before {
  background-image: url("../img/about/about-card-supply.webp?v=9dfca937");
}
.lr-page-about .elementor-410 .elementor-element.elementor-element-4affe5c.elementor-element-4affe5c .wgl-infobox_bg_wrapper::before {
  background-image: url("../img/about/about-card-service.webp?v=e38948e4");
}
.lr-page-about .elementor-410 .elementor-element.elementor-element-9c1aa1d.elementor-element-9c1aa1d .wgl-infobox_bg_wrapper::before {
  background-image: url("../img/about/about-card-simulation.webp?v=8ecefd60");
}


/* ===================================================================
   Home, "What we check" heading (398 / 04324ef).

   At the theme's 700px the two sentences broke over three lines, leaving
   "hit." alone on the last. Each sentence now gets its own line (a <br> in
   the markup) and the box is widened to hold the longer one: 846px at the
   desktop 48px, 740px at the tablet 42px. Below that, balance keeps the
   wrapped second sentence even instead of stranding a word.
   =================================================================== */
.elementor-398 .elementor-element.elementor-element-04324ef.elementor-element-04324ef {
  --container-widget-width: 880px;
  width: var(--container-widget-width, 880px);
  max-width: 100%;
}
@media (max-width: 1200px) {
  .elementor-398 .elementor-element.elementor-element-04324ef.elementor-element-04324ef {
    --container-widget-width: 760px;
    width: var(--container-widget-width, 760px);
  }
}
.elementor-398 .elementor-element-04324ef .dblh__title-wrapper {
  text-wrap: balance;
}


/* ===================================================================
   Contact page (contact.html), built from the theme's Contacts page (406).

   The theme's map widget (b2adb42) framed a Google Maps iframe 480px tall
   with 20px corners, 300px on phones. The static map (map-larosa-wide.webp,
   drawn from OpenStreetMap) takes the same box; object-fit keeps the pin -
   drawn at the image's horizontal centre - in view at every width.
   =================================================================== */
.lr-page-contact .elementor-406 .elementor-element-b2adb42 .lr-map {
  border-radius: 20px;
}
.lr-page-contact .elementor-406 .elementor-element-b2adb42 .lr-map__img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
@media (max-width: 767px) {
  .lr-page-contact .elementor-406 .elementor-element-b2adb42 .lr-map__img {
    height: 300px;
  }
}

/* The form opens the visitor's email app; this line confirms it did. */
.lr-page-contact .lr-form-note {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}
.lr-page-contact .lr-form-note a {
  color: inherit;
  text-decoration: underline;
}


/* ===================================================================
   Footer legal links, every page: "Privacy Policy  Terms & Conditions"
   after the copyright line. Own line on phones.
   =================================================================== */
.lr-legal-links {
  display: inline-block;
  margin-left: 0.6em;
}
.lr-legal-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.lr-legal-links a:hover,
.lr-legal-links a:focus-visible {
  text-decoration-color: currentColor;
}
.lr-legal-links a + a {
  margin-left: 1.1em;
}
@media (max-width: 767px) {
  .lr-legal-links {
    display: block;
    margin: 6px 0 0;
  }
}

/* ===================================================================
   Legal pages (privacy.html, terms.html): the theme's single-post frame.
   =================================================================== */
.lr-page-legal .elementor-503 h2[id] {
  scroll-margin-top: 120px;
}
.lr-page-legal .lr-legal-updated {
  font-size: 14px;
  color: #6b6f86;
}
/* The banner widget carried the theme's logo; ours is the LAROSA mark, which
   is blue artwork - white on the banner's navy, as in the footer. */
.lr-page-legal .lr-banner-mark {
  filter: brightness(0) invert(1);
  width: auto;
}
/* Each clause heading needs air above it: in the theme's post the heading
   widget follows an image, here it follows a paragraph. */
.lr-page-legal .elementor-503 .elementor-widget-heading {
  margin-top: 28px;
}
/* On phones the theme drops the sidebar below the article, so the contents
   list would arrive after the text it indexes. Hidden there; the contact
   banner stays. */
@media (max-width: 767px) {
  .lr-page-legal .lr-legal-toc {
    display: none;
  }
}

/* Contact page scrolling strip (f3c2d8a). The theme fades its edges with a
   radial mask on the section, and a mask clips everything outside the box.
   The box was exactly one line tall - fine for the theme's "ai-driven seo
   solutions", which has no descenders, but it cut the tails off the p and g
   of "program". Padding makes the masked box tall enough for them. */
.lr-page-contact .elementor-406 .elementor-element.elementor-element-f3c2d8a.elementor-element-f3c2d8a {
  --padding-top: 24px;
  --padding-bottom: 24px;
}

/* ===================================================================
   Services page (lr-page-services).
   =================================================================== */

/* The situation circles (EL-08, 2e2df92). The theme lays four in one row;
   six fit it only at about 190px, too small for the render and two lines of
   text, so they sit in two rows of three at the theme's own circle size
   (about 300px), the row narrowed to 900px to keep them there. The row is
   told to wrap: left to the theme it stays on one line and flex squeezes
   all six into it, whatever width they ask for. Five classes
   against the theme's three. Below 1025px the theme's own widths take over
   (two to a row), which suits six. */
@media (min-width: 1025px) {
  .lr-page-services .elementor-410 .elementor-element.elementor-element-51cefeb.elementor-element-51cefeb {
    --flex-wrap: wrap;
    max-width: 900px;
    margin-inline: auto;
    row-gap: 12px;
  }
  .lr-page-services .elementor-410 .elementor-element.lr-floor.lr-floor {
    --container-widget-width: 33.333%;
    width: 33.333%;
    max-width: 33.333%;
  }
}
/* Phones: the theme stacks the circles one to a line, which for six is
   over a thousand pixels of circles. Two to a row instead, the render and
   text stepped down to fit a circle half the width of the screen. */
@media (max-width: 767px) {
  .lr-page-services .elementor-410 .elementor-element.elementor-element-51cefeb.elementor-element-51cefeb {
    --flex-direction: row;
    --flex-wrap: wrap;
    --justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .lr-page-services .elementor-410 .elementor-element.lr-floor.lr-floor {
    --container-widget-width: 50%;
    width: 50%;
    max-width: 50%;
  }
  .lr-page-services .elementor-410 .elementor-element.lr-floor.lr-floor .wgl-widget__button {
    padding: 0 10px 14px;
    font-size: 13px;
    line-height: 1.4em;
  }
  .lr-page-services .elementor-410 .elementor-element.lr-floor.lr-floor .wgl-image-box_img img {
    max-width: 58px;
  }
  .lr-page-services .elementor-410 .elementor-element.lr-floor.lr-floor .wgl-widget__button .button__content {
    --wgl-icon-gap: 6px;
  }
  .lr-page-services .lr-floor .lr-floor-svc {
    margin-top: 3px;
    font-size: 11px;
  }
}
.lr-page-services .lr-floor .button__text {
  text-wrap: balance;
}

/* Which service the situation leads to, under it in the theme blue. */
.lr-page-services .lr-floor-svc {
  display: block;
  margin-top: 6px;
  color: #2C46BB;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

/* No line of copy on this page ends on a single word ("...not from /
   zero.", "...ahead of the first / run"). Headings are balanced instead, so
   a two-line title splits evenly rather than leaving one word under it. */
.lr-page-services .wgl-infobox-content p,
.lr-page-services .lr-svc-points li,
.lr-page-services .text-editor p,
.lr-page-services .elementor-widget-text-editor p,
.lr-page-services .wgl-accordion_content p {
  text-wrap: pretty;
}
.lr-page-services .wgl-tabs_content .wgl-infobox_title,
.lr-page-services .elementor-element-4b3b270 .wgl-infobox_title,
.lr-page-services .dblh__title-wrapper,
.lr-page-services .dblh__title-wrapper .dblh__title,
.lr-page-services .wgl-accordion_title {
  text-wrap: balance;
}

/* The circles jump to the tabs; this keeps the tab row clear of the
   sticky header when they land. */
.lr-page-services #service-details {
  scroll-margin-top: 110px;
}

/* Tab panels: what each service covers, then what comes back. The tick is
   the same glyph the "one model" block uses for its two points. */
.lr-page-services .lr-svc-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.lr-page-services .lr-svc-points li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 26px;
  line-height: 1.6;
}
.lr-page-services .lr-svc-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 14px;
  height: 11px;
  background: #2C46BB;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M4.5196 11L0 6.38623L1.29508 5.06417L4.5196 8.35587L12.7049 0L14 1.32206L4.5196 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M4.5196 11L0 6.38623L1.29508 5.06417L4.5196 8.35587L12.7049 0L14 1.32206L4.5196 11Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lr-page-services .lr-svc-returns {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(39, 39, 39, 0.15);
}
.lr-page-services .lr-svc-returns strong {
  display: block;
  margin-bottom: 2px;
  color: #2C46BB;
  font-weight: 600;
}

/* Services page scrolling strip (d4fcd44): the Contact strip's descender
   fix, for the same reason - "engineering" and "Integration" lose the
   tails of their g's to the section's radial mask without it. */
.lr-page-services .elementor-2624 .elementor-element.elementor-element-d4fcd44.elementor-element-d4fcd44 {
  --padding-top: 24px;
  --padding-bottom: 24px;
}