/* =====================================================================
   Static-HTML runtime — shared base
   Emitted by scripts/elementor_to_html/convert.py. Brand-agnostic:
   it carries NO colours and NO type ramp. Everything brand-specific is
   emitted into <slug>.css from the Elementor source.

   Layers:
     1. reset
     2. layout primitives (.sec / .stack / .grid)
     3. components (button, chip, icon-box, icon-list, FAQ, counter)
     4. reveal-on-scroll (replaces Elementor entrance animations)
     5. reduced-motion
   ===================================================================== */

/* ---- 1. reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
  padding: 0;
}
/* Heading sizes come from the converted styles, which land on the widget
   wrapper and are INHERITED by the tag. Without this reset the UA's
   `h1{font-size:2em}` multiplies that inherited size — a 46px heading renders
   at 92px — so every heading must start neutral. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}
button {
  font: inherit;
}

/* ---- 2. layout primitives ---- */
.sec {
  position: relative;
  width: 100%;
}
.sec > * {
  position: relative;
  z-index: 1;
}
/* Elementor's own container rule is `.e-con{--width:100%;width:var(--width)}` — a
   container is FULL WIDTH by default and only narrows when a boxed width or an
   explicit element width says so. Without this, a container sitting in a centred
   flex column shrank to its content here while filling the band in the builder, so
   the same JSON rendered two different layouts. */
.ct {
  position: relative;
  min-width: 0;
  width: 100%;
}
.stack {
  display: flex;
  flex-direction: column;
}
.grid {
  display: grid;
  min-width: 0;
}
.grid > * {
  min-width: 0;
}
/* Elementor flex children default to full width (guide §71) — mirrored here
   so a converted layout matches what the builder actually rendered. */
.stack > * {
  max-width: 100%;
}

/* ---- 3. components ---- */
.btn-wrap {
  display: flex;
}
.btn-wrap.align-left {
  justify-content: flex-start;
}
.btn-wrap.align-center {
  justify-content: center;
}
.btn-wrap.align-right {
  justify-content: flex-end;
}
.btn-wrap.align-justify {
  justify-content: stretch;
}
.btn-wrap.align-justify .btn {
  width: 100%;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}
.btn > span {
  position: relative;
  z-index: 1;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.icon-svg {
  width: 1em;
  height: 1em;
  display: block;
  fill: currentColor;
}

.ibox {
  position: relative;
  display: flex;
  gap: 14px;
}
.ibox.pos-top {
  flex-direction: column;
  align-items: flex-start;
}
.ibox.pos-left {
  flex-direction: row;
  align-items: flex-start;
}
.ibox.pos-right {
  flex-direction: row-reverse;
  align-items: flex-start;
}
.ibox.ta-center {
  text-align: center;
}
.ibox.ta-center.pos-top {
  align-items: center;
}
.ibox.ta-right {
  text-align: right;
}
.ibox-media {
  flex-shrink: 0;
  display: inline-flex;
}
.ibox-body {
  min-width: 0;
}
.ibox-title {
  font-weight: 600;
}
.ibox-desc > :last-child {
  margin-bottom: 0;
}

.icon-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.icon-list > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* No vertical nudge here: a blanket margin fights whatever per-element rule
   actually centres the glyph on its first text line, and a fixed em offset drifts
   as soon as the type size changes. Alignment belongs to the element that knows
   both the icon size and the text's line-height. */
.icon-list .li-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.icon-list.inline {
  flex-direction: row;
  flex-wrap: wrap;
}

.faq {
  display: flex;
  flex-direction: column;
}
.faq-item {
  overflow: hidden;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-icon {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-icon .i-close {
  display: none;
}
.faq-item[open] .faq-icon .i-open {
  display: none;
}
.faq-item[open] .faq-icon .i-close {
  display: inline-flex;
}
.faq-a > :last-child {
  margin-bottom: 0;
}

.divider {
  display: flex;
  align-items: center;
  width: 100%;
}
.divider-line {
  flex: 1;
  border-top-style: solid;
}
.spacer {
  width: 100%;
}
.embed {
  min-width: 0;
}
.img-wrap {
  min-width: 0;
}
.img-wrap.align-center img {
  margin-inline: auto;
}
.img-wrap.align-right img {
  margin-inline-start: auto;
}

.counter-num-wrap {
  display: inline-flex;
  align-items: baseline;
}

/* ---- 4. reveal-on-scroll ----
   main.js adds .revealed when the element enters the viewport, then removes
   data-reveal once the animation ends so hover transforms behave normally.
   With no JS at all, nothing is ever hidden. */
html.js [data-reveal] {
  opacity: 0;
}
html.js.reveal-fallback:not(.js-ready) [data-reveal] {
  opacity: 1 !important;
}
html.js .revealed[data-reveal] {
  animation: reveal-up 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--rd, 0ms);
}
html.js .revealed[data-reveal="left"] {
  animation-name: reveal-left;
}
html.js .revealed[data-reveal="right"] {
  animation-name: reveal-right;
}
html.js .revealed[data-reveal="down"] {
  animation-name: reveal-down;
}
html.js .revealed[data-reveal="zoom"] {
  animation-name: reveal-zoom;
}
html.js .revealed[data-reveal="fade"] {
  animation-name: reveal-fade;
}
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes reveal-down {
  from {
    opacity: 0;
    transform: translate3d(0, -36px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes reveal-left {
  from {
    opacity: 0;
    transform: translate3d(-36px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes reveal-right {
  from {
    opacity: 0;
    transform: translate3d(36px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes reveal-zoom {
  from {
    opacity: 0;
    transform: scale3d(0.88, 0.88, 1);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes reveal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- 5. reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html.js [data-reveal] {
    opacity: 1;
  }
}