body,
button,
input,
select,
optgroup,
textarea,
.elementor-widget-container {
    font-family: "Barlow","Barlow Fallback", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Saira Condensed", sans-serif;
}

/* Elementor applies a default 10px padding to every top-level container, which
   insets the header, footer, and full-bleed section bands from the viewport edge.
   These bars carry their own gutter on an inner wrapper, so strip the outer one. */
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con,
.elementor-location-header,
.elementor-location-footer {
    padding-inline: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.elementor-location-single > .e-con,
.elementor-location-single > .e-con > .e-con-inner {
    --container-max-width: 100%;
}

.elementor-location-single > .e-con {
    padding-inline: 0 !important;
    max-width: 100% !important;
}

/* Fold geometry. The hero is sized with calc(100vh - header - stats) so the
   machine lineup always starts exactly at the fold on any viewport height,
   instead of being chased with hand-tuned padding. */
:root {
    /* Fallbacks only — rbg-fold.js measures the real heights on load/resize and
       overwrites these, so editing the header or stats can never desync the fold. */
    --rbg-header-h: 148px;
    --rbg-stats-h: 94px;

    /* Floor for the hero. On short laptops the fold calc would otherwise squeeze
       the hero below the height of the quote form and clip its submit button, so
       the hero never shrinks past the form's natural height. */
    --rbg-hero-min: 620px;
}

@media (max-width: 1024px) {
    :root { --rbg-header-h: 110px; --rbg-stats-h: 220px; }
}

/* Every nested Elementor container carries a default 10px block padding. In the
   header that stacks across the logo / links / CTA wrappers and inflates the bar
   by ~40px. The bands set their own padding, so zero the inherited one. */
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner {
    padding-block: 0;
}

/* Distance from a nav trigger's top edge down to the header's bottom border.
   The trigger is a ~47px flex item centred in a 102px bar, so the panel must be
   pushed past the remaining bar height or it renders on top of the header. */
.s-nav-machines, .s-nav-industries, .s-nav-support { --rbg-submenu-drop: 84px; }

/* Spec bullet lists (.ticks in the mockup). Two things atomic cannot express:
   the orange dash marker is a ::before, and the row separator is a
   bottom-only border -- Elementor emits border-width as one uniform value, so
   the per-side dict was dropped and border-style/color alone gave every row a
   3px box on all four sides (measured). Keyed off the s-li-* / s-ticks-*
   classes the converter generates; the numeric suffix varies per page. */
/* The home page's SN Pro spot list is a bare <ul> styled via  in
   the mockup, so the converter names its rows s-spot-li0..N rather than
   s-li-N -- the s-ticks rule below never matched them and they kept the 3px
   box. Same treatment, different selector. */
[class*="s-spot-li"] {
    position: relative;
    border: 0 !important;
    border-bottom: 1px solid #EDEFF3 !important;
}
[class*="s-spot-li"]:last-of-type { border-bottom: 0 !important; }
[class*="s-spot-li"]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 16px;
    width: 16px;
    height: 3px;
    background: linear-gradient(90deg, #F26722, #FFC42D);
}

[class*="s-ticks-"] > [class*="s-li-"] {
    position: relative;
    border: 0 !important;
    border-bottom: 1px solid #EDEFF3 !important;
}
[class*="s-ticks-"] > [class*="s-li-"]:last-child {
    border-bottom: 0 !important;
}
[class*="s-ticks-"] > [class*="s-li-"]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 16px;
    width: 16px;
    height: 3px;
    background: linear-gradient(90deg, #F26722, #FFC42D);
    transform: skewX(-25deg);
}

/* CTA band layout + copy colour.
   1. The band is a two-column grid (copy | quote form). It defaulted to
      align-items:normal, i.e. stretch, so the short copy column was stretched
      to the form's height (measured 626px against 494px of form) leaving a
      large dead area under the paragraph. Centre the columns instead.
   2. The body copy was set to ink #0B0C0F for contrast. It passes AA (6.61:1
      measured at the deepest orange) but reads muddy black-on-orange. A deep
      warm brown keeps well clear of AA while looking deliberate against the
      gradient rather than like unstyled text. Pure white is NOT an option here:
      it measures 2.96:1 against the gradient's gold end and fails outright. */
/* The home page's band is built by the other generator and is called
   s-quote, not s-cta-N, so it needs naming explicitly or it keeps the old
   ink copy and un-centred columns. */
.elementor [class*="s-cta-"] [class*="-panel"],
.elementor [class*="s-quote"] [class*="-panel"] {
    align-items: center !important;
}
.elementor [class*="s-cta-"] p,
.elementor [class*="s-quote"] > * > p,
.elementor [class*="s-quote"] [class*="-copy"] p {
    color: #3A1400 !important;
}

/* Card image wells need a FIXED height. Without one each well sizes to its own
   photo's aspect ratio, so a row of cards had images of different heights and
   the titles below them did not line up -- measured 198 vs 223px on the
   category pages, and 222 vs 525px on /machines/. The mockup pins the well and
   lets the photo fill it via object-fit:cover (site.css: .m-card .img is 210px,
   .cat-card .img is 230px).
   The well is .rbg-card-img (the class added for the corner badge); the photo
   inside is .s-img-*. Both need the height or the img keeps its intrinsic size. */
.elementor [class*="s-m-card"] .rbg-card-img,
.elementor [class*="s-cat-card"] .rbg-card-img {
    overflow: hidden;
    flex: 0 0 auto;
}
.elementor [class*="s-m-card"] .rbg-card-img { height: 210px !important; }
.elementor [class*="s-cat-card"] .rbg-card-img { height: 230px !important; }

.elementor [class*="s-m-card"] .rbg-card-img > img,
.elementor [class*="s-cat-card"] .rbg-card-img > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

/* Card inner padding. Elementor gives every container a flat 10px inset, so
   card copy sat ~11px from the top and left edge where the mockup allows 26px
   -- text looked jammed into the corner. These are the mockup's own values,
   per card type (measured off the static build, e.g. .cat-card .body is
   26px 26px 30px). Cards WITH an image well keep padding on the copy wrapper
   only, so the photo still reaches the card edge. */
.elementor [class*="s-why-card"],
.elementor [class*="s-step-card"],
.elementor [class*="s-feat-card"],
.elementor [class*="s-app-card"],
.elementor [class*="s-contact-card"] {
    padding: 30px 26px 28px !important;
}

/* Image-topped cards: zero the card's own Elementor 10px inset first, or it
   STACKS with the copy wrapper's padding (measured 37px against the mockup's
   26px). With the card flush, the photo also reaches the card edge and picks up
   its rounded top corners, which matches the mockup. */
.elementor [class*="s-cat-card"],
.elementor [class*="s-m-card"] {
    padding: 0 !important;
}
.elementor [class*="s-cat-card"] > .e-con:last-child,
.elementor [class*="s-m-card"] > .e-con:last-child {
    padding: 26px 26px 30px !important;
}

/* Remove the button skew. The buttons carry transform:skewX(-8deg). On the
   static site an inner <span> counter-skews the label back upright, so only the
   button SHAPE leans; the atomic e-button has no inner span, so the label
   itself was slanted -- reading as italic even after font-style was normalised.
   Since the brief is "no forward lean anywhere", drop the skew rather than
   re-introduce a counter-skew wrapper. Covers the hover state too, which
   re-declares the transform. */
.elementor .btn,
.elementor .e-button-base,
.elementor [class*="s-btn"],
.elementor [class*="-cta"],
.elementor .btn:hover,
.elementor .e-button-base:hover {
    transform: none !important;
}

/* Kill the italic lean site-wide. The client finds the forward slant hurts
   readability on headings and titles.
   This has to be a CSS override rather than a generator change: the italic was
   baked into ~25 element style props across the two generators, so editing them
   would mean regenerating and re-importing all 25 pages. One rule here covers
   every current and future page. The !important is needed because Elementor
   emits font-style as a per-element style prop, which otherwise wins.
   NOTE: the -8deg button/kicker skews are a separate treatment and are left
   alone; if those should go too it is a second, deliberate change. */
.elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6,
.elementor p, .elementor span, .elementor a, .elementor div, .elementor button,
.elementor .e-heading-base, .elementor .e-paragraph-base, .elementor .e-button-base,
.elementor [class^="s-"], .elementor [class*=" s-"] {
    font-style: normal !important;
}

/* Hover bridge. The 10px gap between the header and the detached panel would
   otherwise drop the hover state as the pointer travels down into the menu, so
   an invisible strip spans the gap and keeps the parent hovered.
   Elementor's atomic reset rewrites `height` on .e-con children, so the strip is
   sized with explicit top/bottom offsets instead. */
.s-nav-machines-panel::before,
.s-nav-industries-panel::before,
.s-nav-support-panel::before {
    content: "" !important;
    position: absolute !important;
    top: -14px !important;
    bottom: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    display: block !important;
}

/* Caret sizing. The atomic flexbox reset forces a min-width/height on .e-con, so
   the 7px chevron rendered at 22px until these are pinned. */
.s-nav-machines-caret,
.s-nav-industries-caret,
.s-nav-support-caret {
    width: 6px !important;
    height: 6px !important;
    border-right-width: 1.5px !important;
    border-bottom-width: 1.5px !important;
    border-top-width: 0 !important;
    border-left-width: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
}

/* Caret flips to point up while its panel is open. */
.s-nav-machines:hover .s-nav-machines-caret,
.s-nav-industries:hover .s-nav-industries-caret,
.s-nav-support:hover .s-nav-support-caret {
    transform: rotate(-135deg) !important;
    border-color: #FFC42D !important;
}

/* ---- Dropdown navigation ----
   Atomic v4 has no menu widget, so the submenu panels are real nested elements
   rendered with opacity:0/visibility:hidden. Revealing them needs :hover and
   :focus-within, which the atomic style system cannot express (a hover variant
   only styles the hovered element, not a descendant). These rules key off the
   semantic classes Elementor renders from element_id (s-nav-machines, etc.) --
   NEVER off element IDs, which Elementor regenerates on duplicate/convert. */
/* ---- Machine card: pin the "View Machine" line to the card's bottom edge ----
   The generated cards are <a class="s-m-card-N"> (also s-cat-card-N) holding two
   child containers: an image well and a copy wrapper, BOTH named s-wrap-N. The
   card itself is already display:flex/column, but the copy wrapper is
   flex:0 1 auto, so surplus card height piled up as dead space BELOW the copy
   instead of inside it -- the CTA stopped wherever the description ended.
   Measured gap from card bottom to the bottom of "View Machine":
   33.8 / 32.5 / 10 px across one row (static reference: a uniform 27px).

   The hand-authored home-page cards (s-m-mini, s-cat-sheet, ...) already get
   this right -- their body is flex:1 1 0% with 26px bottom padding, and they
   measure a uniform 36px. So the fix reproduces that known-good shape on the
   generated cards only, and must NOT touch the home page ones.

   Selector note: the copy wrapper cannot be addressed by class -- it shares the
   s-wrap-N name with the image well, and N changes per card. It is addressed
   structurally instead, as the LAST container child of a card, which is stable
   across re-exports. A previous pass guessed at [class*="-card-body"],
   [class*="-card-spec"], [class*="-card-go"] and .e-image-base img; all four
   match zero elements on every page (verified with querySelectorAll), so those
   rules were dead and have been removed rather than layered over. */
[class*="s-m-card-"] > .e-con:last-child,
[class*="s-cat-card-"] > .e-con:last-child {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    padding-bottom: 26px;
}

/* Inside the copy wrapper the description already carries flex:1 1 0%, so it
   absorbs the slack the wrapper now receives and the CTA lands last. The
   auto margin is belt-and-braces for cards whose paragraph is missing. */
[class*="s-m-card-"] > .e-con:last-child > :last-child,
[class*="s-cat-card-"] > .e-con:last-child > :last-child {
    margin-top: auto;
}

/* ---- Standalone photo corners ----
   Every image renders as <img class="e-image-base s-img-N"> -- card images and
   standalone photos share that naming, so class matching cannot separate them
   (which is why the earlier [class*="-img"] > img guess failed: the img IS
   s-img-N, not a child of it). The reliable difference is structural: a
   standalone photo in a split/overview band is a DIRECT child of the section's
   s-grid-N, whereas a card image is wrapped in the card's s-wrap-N image well.
   Card images are therefore left square -- the card already clips them with its
   own 14px radius, and rounding them again leaves pale corner slivers.
   The nav/footer logos are not s-img-N and stay untouched. */
.elementor [class*="s-grid-"] > img[class*="s-img-"] {
    border-radius: 14px;
}

/* Footer: a 3px accent rule across the TOP only, matching the static site.
   Elementor emits border-width as a single uniform value, so this cannot be
   expressed as an element prop -- declaring style+color there without a width
   made the browser default to  on all four sides (an orange box). */
.s-site-footer {
    border-width: 0 !important;
    border-top: 3px solid #F26722 !important;
}

/* Hover bridge. The panel is offset --rbg-submenu-drop below the trigger,
   leaving a measured 36px dead band; a cursor travelling from the label to the
   panel left the wrapper and the panel closed before it could be reached. A
   ::before on the panel spans that band so the pointer never exits the hover
   region. (The static site solves it the same way.) */
.s-nav-machines-panel::before,
.s-nav-industries-panel::before,
.s-nav-support-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--rbg-submenu-drop) + 4px);
}

/* Hover bridge -- on the WRAPPER, never on the panel. A closed panel is
   visibility:hidden, so its ::before cannot receive hover either (tried it; the
   panel still closed). The panel sits 84px below the top of a 48px trigger,
   leaving a measured 36px dead band, and without a bridge the cursor exits the
   wrapper on the way down and :hover goes false. Pointer-active only while the
   wrapper is hovered, so it never swallows clicks meant for the hero below. */
.s-nav-machines,
.s-nav-industries,
.s-nav-support { position: relative; }

.s-nav-machines::after,
.s-nav-industries::after,
.s-nav-support::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -14px;
    right: -14px;
    height: 44px;
    pointer-events: none;
}
.s-nav-machines:hover::after,
.s-nav-industries:hover::after,
.s-nav-support:hover::after { pointer-events: auto; }

/* Hidden by default. Elementor's atomic style system silently DROPS 
   and  -- neither appears anywhere in the generated CSS, on any
   page -- so the panel's hide state cannot come from the element tree and has
   to be declared here, next to the rule that reveals it. Without this the
   panels rendered permanently open, and clicking a trigger left them stuck
   because :focus-within kept them lit after navigation. */
.s-nav-machines-panel,
.s-nav-industries-panel,
.s-nav-support-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.s-nav-machines-panel:hover,
.s-nav-industries-panel:hover,
.s-nav-support-panel:hover,
.s-nav-machines:hover  .s-nav-machines-panel,
.s-nav-machines:focus-within  .s-nav-machines-panel,
.s-nav-industries:hover .s-nav-industries-panel,
.s-nav-industries:focus-within .s-nav-industries-panel,
.s-nav-support:hover .s-nav-support-panel,
.s-nav-support:focus-within .s-nav-support-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Keep the caret/label lit while its panel is open. */
.s-nav-machines:hover .s-nav-machines-label,
.s-nav-industries:hover .s-nav-industries-label,
.s-nav-support:hover .s-nav-support-label {
    color: #FFC42D;
}

/* The panels are absolutely positioned; nothing in the header stack may clip them. */
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.s-site-header,
.s-navbar,
.s-navbar-in,
.s-nav-links {
    overflow: visible;
}

@media (max-width: 960px) {
    .s-nav-machines-panel,
    .s-nav-industries-panel,
    .s-nav-support-panel { display: none; }
}

/* Breathing room between each field's label and its input. */
.elementor-field-group > label.elementor-field-label {
    margin-bottom: 7px;
    display: block;
}

/* Elementor's "sm" form fields render at 40px, under the 44px touch minimum
   (WCAG 2.5.5 / Apple HIG). 16px text also stops iOS auto-zooming on focus. */
.elementor-field-group .elementor-field-textual {
    min-height: 44px;
    font-size: 16px;
}

.elementor-field-group textarea.elementor-field-textual {
    min-height: 84px;
}

.elementor-field-group .elementor-field-textual:focus-visible {
    outline: 3px solid #FFC42D;
    outline-offset: 2px;
}

/* Hello Elementor renders the skip link at 1x1 and never restores it on focus,
   so keyboard users get an invisible, unusable control. Restore it on focus. */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
    /* Elementor's frontend.min.css pins .screen-reader-text to 1px at top:-10000em
       and loads after this rule, so the focus restoration must be !important. */
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    overflow: visible !important;
    white-space: normal !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    padding: 12px 20px;
    background: #FFC42D;
    color: #0B0C0F;
    font-family: "Barlow","Barlow Fallback", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    z-index: 100000;
}

/* Orange corner badge on machine / category cards ("COMPACT", "ENCLOSED", ...).
   Elementor atomic can express the badge's gradient, colour and type as element
   props, but NOT the absolute placement over the photo, so the converter emits
   two stable hook classes -- .rbg-card-img on the photo frame and .rbg-card-tag
   on the label -- and the placement lives here. The hooks are deliberately real
   class names, not the generated s-<eid> ids: those ids come from a global
   counter and renumber on every regeneration.
   Straight rectangular badge -- no skewX and no italic, matching the
   site-wide removal of the forward lean. */
.elementor .rbg-card-img {
    position: relative !important;
}
.elementor .rbg-card-tag {
    position: absolute !important;
    top: 14px !important;
    left: -6px !important;
    z-index: 2 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    font-style: normal !important;
}
/*# sourceURL=hello-elementor-theme-style-inline-css */