/* Mettle Builders Group: global rules Elementor's style panel can't express.
   Colours and fonts are Elementor Variables (--mb-*); component styles are Global Classes (mb-section, mb-h2,
   mb-btn …). Keep this file small: style things in Elementor first. Source of every value: staging's
   site-v2/base.css and components.css. */

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 86px; -webkit-text-size-adjust: 100% }
html, body { margin: 0 }
body { -webkit-font-smoothing: antialiased }
@media (max-width: 960px) { html { scroll-padding-top: 70px } }

/* links inherit their colour, as on staging (a { color: inherit; text-decoration: none }). Hello's reset colours
   links #c36 / #336 on hover; these rules sit at the same specificity, later in the cascade, and below every
   element's own colour (0,2,0). */
a { color: inherit; text-decoration: none }
a:hover, a:active { color: inherit }
:focus-visible { outline: 2px solid var(--mb-stone-deep, #8a7960); outline-offset: 3px }

/* Elementor 4 boxes also carry the classic container class .e-con, which defaults them to width:100%,
   position:relative and min-width:0. Staging's boxes use the CSS defaults, so restore them at the same specificity
   as .e-con (loaded later, so it wins); any width/position set on an element in Elementor still wins.
   The editor keeps Elementor's position/z-index, which its element overlays rely on. */
:where(body) .e-atomic-element { width: auto; min-width: auto }
:where(body:not(.elementor-editor-active)) .e-atomic-element { position: static; z-index: auto }

/* <button> elements converted from staging carry their look in their local styles. Whatever staging leaves unset is
   the browser's own button with staging's `button { font: inherit; color: inherit }`; Hello's reset and the Site
   Settings button look would otherwise apply to every <button>. Specificity 0,1,2: above `.elementor-kit-N button`
   (0,1,1), below every local style (0,2,0). */
body[class*="elementor-kit-"] button:where(.e-atomic-element, .e-button-base) {
  background-color: ButtonFace; color: inherit; border: 2px outset ButtonBorder; border-radius: 0; padding: 1px 6px;
  font: inherit; letter-spacing: normal; text-transform: none; text-decoration: none; white-space: normal; transition: none;
}
/* classic Elementor buttons (form submit): staging's dark button turns slate on hover (kept out of Site Settings,
   where a hover colour would outrank every converted element's own) */
body[class*="elementor-kit-"] .elementor-button:is(:hover, :focus) { background-color: var(--mb-slate, #2f4a62); border-color: var(--mb-slate, #2f4a62); color: var(--mb-paper, #f8f6f1) }

/* Elementor's SVG element renders the <svg> inside a wrapper that is sized by the converter: the drawing fills it */
.elementor .e-svg-base > svg { display: block; width: 100%; height: 100% }

/* utility Global Classes for properties Elementor's style schema has no control for */
.elementor .mb-nowrap { white-space: nowrap }
.elementor .mb-list-none { list-style: none }
.elementor .mb-pe-none { pointer-events: none }

/* ---- keyframes used by converted elements (page CSS / classes name them) ---- */
@keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0) } to { transform: scale(1.14) translate3d(-1.2%, -1%, 0) } }
@keyframes kenburnsOut { from { transform: scale(1.14) translate3d(1.2%, 1%, 0) } to { transform: scale(1) translate3d(0, 0, 0) } }
@keyframes rise { to { opacity: 1; transform: none } }
@keyframes stakeBar { to { transform: scaleX(1) } }
@keyframes icDraw { 0% { stroke-dashoffset: 1 } 45%, 85% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -1 } }
@keyframes icSwing { from { transform: rotate(-9deg) } to { transform: rotate(7deg) } }
@keyframes icTrolley { from { transform: translateX(0) } to { transform: translateX(17px) } }
@keyframes icLight { 0%, 100% { fill-opacity: 0 } 50% { fill-opacity: .45 } }
@keyframes icWave { 0%, 100% { opacity: .15 } 50% { opacity: 1 } }
@keyframes icDrop { 0% { opacity: 0; transform: translateY(-14px) } 14%, 78% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(0) } }
@keyframes icGrow { 0%, 10% { transform: scaleY(.35) } 55%, 90% { transform: scaleY(1) } 100% { transform: scaleY(.35) } }

/* ---- motion (staging: .rise, .js .fade). Each element's delay is its --d custom property (page CSS). ---- */
/* hero text rises in on load */
.elementor .mb-rise { opacity: 0; transform: translateY(26px); animation: rise 1.2s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: var(--d, 0s) }
.rise-done .elementor .mb-rise { animation: none; opacity: 1; transform: none }
/* reveals, only while the script runs (the <html> gets .js in the head) */
.js .elementor .mb-fade { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0s) }
.js .elementor .mb-fade.is-in { opacity: 1; transform: none }
/* the editor shows everything as authored */
.elementor-editor-active .elementor .mb-rise, .elementor-editor-active .elementor .mb-fade { opacity: 1; transform: none; animation: none }

/* ---- open/closed boxes (staging's <details>): FAQ items ---- */
.elementor .mb-details:not(.is-open) > :not(.mb-summary) { display: none !important }
.elementor-editor-active .elementor .mb-details > * { display: revert !important }
.elementor .mb-summary { user-select: none }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
  .elementor .mb-rise, .js .elementor .mb-fade { opacity: 1; transform: none }
}
@media print { .elementor .mb-rise, .js .elementor .mb-fade { opacity: 1 !important; transform: none !important } }

/* thank-you page: one of the three states shows (mettle.js); nothing shows before the script has chosen */
.mb-ty[hidden] { display: none !important; }
.js:not(.ty-ready) .mb-ty { display: none !important; }

/* a heading whose lines rise in one after the other (staging: <h1><span class="rise">…</span>…</h1>): the lines are
   <span>s inside the Heading; each line's delay (--d) is in the page CSS */
.elementor .mb-rise-lines > span { display: block; opacity: 0; transform: translateY(26px); animation: rise 1.2s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: var(--d, 0s) }
.rise-done .elementor .mb-rise-lines > span, .elementor-editor-active .elementor .mb-rise-lines > span { animation: none; opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .elementor .mb-rise-lines > span { animation: none; opacity: 1; transform: none } }
@media print { .elementor .mb-rise-lines > span { opacity: 1 !important; transform: none !important } }

/* sector card slider: no scrollbar (staging: .cards::-webkit-scrollbar) */
.elementor .mb-cards::-webkit-scrollbar { display: none }