/*
Theme Name:   Ronghui Elementor Child
Theme URI:    https://longwayotc.com/
Description:  Design system child theme for the Ronghui OEM/ODM enquiry site. Built for
              Hello Elementor + Elementor so every headline, paragraph, image and button
              stays editable in the Elementor editor.
Author:       Ronghui
Template:     hello-elementor
Version:      1.0.0
Text Domain:  ronghui
*/

/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {
  --rh-red: #d84340;
  --rh-red-dark: #bf3836;
  --rh-dark: #232323;
  --rh-dark-2: #2e2e2e;
  --rh-body: #7c7c7c;
  --rh-muted: #a8a8a8;
  --rh-line: #ebebeb;
  --rh-line-warm: #e0d6c8;
  --rh-cream: #f6f2ec;
  --rh-cream-2: #f9f7ef;
  --rh-soft: #f7f7f7;
  --rh-white: #fff;
  --rh-container: 1240px;
  --rh-ease: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The reference site runs on Astra, and some of its page stylesheets colour
   headings and background overlays with Astra's Elementor palette variables.
   Hello Elementor never defines them, so carry the exact same nine values
   across; without them the ported contact hero loses its dark overlay and
   paints its title in the body colour instead of white. */
:root {
  --e-global-color-astglobalcolor0: #000000;
  --e-global-color-astglobalcolor1: #ffffff;
  --e-global-color-astglobalcolor2: #232323;
  --e-global-color-astglobalcolor3: #7c7c7c;
  --e-global-color-astglobalcolor4: #f9f7ef;
  --e-global-color-astglobalcolor5: #ffffff;
  --e-global-color-astglobalcolor6: #f2f5f7;
  --e-global-color-astglobalcolor7: #424242;
  --e-global-color-astglobalcolor8: #000000;
}

/* The reference site scales the root font size down at tablet and phone
   widths, which is what every rem-based value in the ported blocks follows.
   Without it the ported text runs 3–5px larger than the reference below 921px. */
@media (max-width: 921px) {
  html {
    font-size: 91.2%;
  }
}
@media (max-width: 544px) {
  html {
    font-size: 91.2%;
  }
}

/* =========================================================================
   2. Base
   ========================================================================= */

body.elementor-page,
body.rh-site {
  font-family: 'Poppins', 'Noto Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--rh-body);
  background: var(--rh-white);
  /* The reference site inherits an absolute 25.6px line box (Astra's 1.6em on a
     16px body), so children keep that value whatever their own font-size. A
     unitless 1.6 would recompute per element and shrink the ported headings. */
  line-height: 1.6em;
  -webkit-font-smoothing: antialiased;
}

/* Several ported blocks hard-code Poppins, which has no Thai coverage. On the
   Thai site the whole stack is widened so Thai copy renders in Noto Sans Thai
   next to the latin text instead of dropping to a system default. */
body.rh-lang-th,
body.rh-lang-th .elementor-widget-ronghui-block,
body.rh-lang-th .elementor-widget-ronghui-block * {
  font-family: 'Poppins', 'Noto Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Scoped to the native sections only. The 1:1 blocks bring their own typography
   and must inherit from <body> exactly like they do on the reference site. */
.rh-native h1,
.rh-native h2,
.rh-native h3,
.rh-native h4,
.rh-native h5,
.rh-native h6 {
  color: var(--rh-dark);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.rh-native p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--rh-body);
}

.rh-native a {
  text-decoration: none;
}

/* Elementor's boxed container should match the reference grid. */
.rh-site .e-con-boxed > .e-con-inner,
.rh-site .e-con-boxed {
  --container-max-width: var(--rh-container);
}

.rh-site .elementor-widget:not(:last-child) {
  --kit-widget-spacing: 0px;
}

/* Kill the default Elementor widget margins inside our sections. */
.rh-site .rh-clean p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   3. Buttons
   ========================================================================= */

.rh-site .elementor-button,
.rh-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 17px 34px;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background var(--rh-ease), color var(--rh-ease), border-color var(--rh-ease);
}

/* solid dark */
.rh-btn--dark .elementor-button {
  background: var(--rh-dark);
  color: #fff;
  border-color: var(--rh-dark);
}
.rh-btn--dark .elementor-button:hover,
.rh-btn--dark .elementor-button:focus {
  background: var(--rh-red);
  border-color: var(--rh-red);
  color: #fff;
}

/* solid red */
.rh-btn--red .elementor-button {
  background: var(--rh-red);
  color: #fff;
  border-color: var(--rh-red);
}
.rh-btn--red .elementor-button:hover,
.rh-btn--red .elementor-button:focus {
  background: var(--rh-dark);
  border-color: var(--rh-dark);
  color: #fff;
}

/* outline on dark imagery */
.rh-btn--ghost .elementor-button {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
}
.rh-btn--ghost .elementor-button:hover,
.rh-btn--ghost .elementor-button:focus {
  background: #fff;
  border-color: #fff;
  color: var(--rh-dark);
}

/* outline on light */
.rh-btn--outline .elementor-button {
  background: transparent;
  color: var(--rh-dark);
  border-color: var(--rh-dark);
}
.rh-btn--outline .elementor-button:hover,
.rh-btn--outline .elementor-button:focus {
  background: var(--rh-dark);
  border-color: var(--rh-dark);
  color: #fff;
}

/* text link with arrow */
.rh-link .elementor-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--rh-dark);
  letter-spacing: 0.2em;
  font-size: 13px;
}
.rh-link .elementor-button:hover {
  color: var(--rh-red);
}

/* =========================================================================
   4. Section shells
   ========================================================================= */

.rh-section {
  padding: 120px 0;
}
.rh-section--cream {
  background: var(--rh-cream);
}
.rh-section--soft {
  background: var(--rh-cream-2);
}
.rh-section--dark {
  background: var(--rh-dark);
}
.rh-section--tight {
  padding: 90px 0;
}

@media (max-width: 1024px) {
  .rh-section {
    padding: 90px 0;
  }
}
@media (max-width: 640px) {
  .rh-section {
    padding: 64px 0;
  }
}

/* ---- section heading block ---- */
.rh-head {
  max-width: 760px;
  margin-bottom: 64px;
}
.rh-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.rh-head--center .rh-eyebrow {
  justify-content: center;
}

.rh-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rh-eyebrow .elementor-heading-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rh-red);
  margin: 0;
}
.rh-eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 34px;
  height: 2px;
  background: var(--rh-red);
}

.rh-title .elementor-heading-title {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--rh-dark);
  margin: 0;
}
.rh-title--sm .elementor-heading-title {
  font-size: 40px;
  line-height: 1.25;
}
.rh-title--light .elementor-heading-title {
  color: #fff;
}

.rh-sub .elementor-text-editor,
.rh-sub p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--rh-body);
  margin: 0;
}
.rh-sub--light .elementor-text-editor,
.rh-sub--light p {
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
  .rh-title .elementor-heading-title,
  .rh-title--sm .elementor-heading-title {
    font-size: 32px;
  }
  .rh-head {
    margin-bottom: 46px;
  }
}
@media (max-width: 640px) {
  .rh-title .elementor-heading-title,
  .rh-title--sm .elementor-heading-title {
    font-size: 27px;
  }
}

/* =========================================================================
   5. Hero
   ========================================================================= */

.rh-hero {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  background: var(--rh-dark);
}

/* Elementor's flex column would compress the inner wrapper and the hero's
   overflow:hidden would then clip the copy, so let the block grow instead. */
.rh-site .rh-hero {
  display: block !important;
}

.rh-hero > .e-con-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  justify-content: center;
  min-height: 88vh;
  /* Clears the contact strip (42px) plus the navigation (84px). */
  padding: 155px 24px 96px;
  max-width: var(--rh-container);
  margin: 0 auto;
}

/* left-to-right scrim so the headline stays readable over photography */
.rh-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.5) 45%,
    rgba(0, 0, 0, 0.16) 100%
  );
}

/* slow zoom on the Elementor background slideshow */
.rh-hero .elementor-background-slideshow__slide__image {
  animation: rh-kenburns 9s ease forwards;
}
@keyframes rh-kenburns {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

.rh-hero__eyebrow .elementor-heading-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}
.rh-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rh-hero__eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 36px;
  height: 2px;
  background: var(--rh-red);
}

.rh-hero__title .elementor-heading-title {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.12;
  color: #fff;
  max-width: 760px;
  margin: 0;
}

.rh-hero__desc .elementor-text-editor,
.rh-hero__desc p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 580px;
  margin: 0;
}

.rh-hero__actions .elementor-widget-container {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* small trust strip under the hero copy */
.rh-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.rh-hero__fact-num .elementor-heading-title {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.rh-hero__fact-num .elementor-heading-title em {
  font-style: normal;
  color: var(--rh-red);
}
.rh-hero__fact-label .elementor-heading-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 6px 0 0;
}

@media (max-width: 900px) {
  .rh-hero,
  .rh-hero > .e-con-inner {
    min-height: 620px;
  }
  .rh-hero__title .elementor-heading-title {
    font-size: 40px;
  }
  .rh-hero__desc .elementor-text-editor,
  .rh-hero__desc p {
    font-size: 16px;
  }
}
@media (max-width: 640px) {
  .rh-hero,
  .rh-hero > .e-con-inner {
    min-height: 540px;
  }
  .rh-hero > .e-con-inner {
    padding: 110px 20px 72px;
  }
  .rh-hero__title .elementor-heading-title {
    font-size: 32px;
  }
  .rh-hero::after {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.62) 70%,
      rgba(0, 0, 0, 0.4) 100%
    );
  }
  .rh-hero__facts {
    gap: 24px;
  }
}

/* =========================================================================
   6. Page hero (inner pages)
   ========================================================================= */

.rh-page-hero {
  position: relative;
  min-height: 420px;
  background: var(--rh-dark);
  overflow: hidden;
}
.rh-site .rh-page-hero {
  display: block !important;
}
.rh-page-hero > .e-con-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 420px;
  padding: 150px 24px 76px;
  max-width: var(--rh-container);
  margin: 0 auto;
}
.rh-page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.32) 60%, rgba(0, 0, 0, 0.18) 100%);
}
.rh-page-hero__title .elementor-heading-title {
  font-size: 52px;
  font-weight: 600;
  line-height: 1.12;
  color: #fff;
  margin: 0;
}
.rh-page-hero__desc .elementor-text-editor,
.rh-page-hero__desc p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 660px;
  margin: 0;
}

@media (max-width: 900px) {
  .rh-page-hero,
  .rh-page-hero > .e-con-inner {
    min-height: 340px;
  }
  .rh-page-hero__title .elementor-heading-title {
    font-size: 34px;
  }
}

/* breadcrumb-ish eyebrow on light background */
.rh-page-hero__crumb .elementor-heading-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

/* =========================================================================
   7. Card grids
   ========================================================================= */

.rh-grid {
  /* Elementor writes `--display:flex` on containers with three-class
     specificity, so the grid needs to win outright. */
  display: grid !important;
  gap: 28px;
}
/* Elementor containers render an extra `.e-con-inner` wrapper, so the layout has
   to be applied to the wrapper as well as to the container itself. */
.rh-site .rh-grid > .e-con-inner {
  display: grid !important;
  gap: 28px;
  width: 100%;
}
/* When the inner wrapper exists it owns the grid; the outer container must not
   become a grid too, or the columns get divided twice. */
.rh-site .rh-grid:has(> .e-con-inner) {
  display: block !important;
}

.rh-grid--2,
.rh-grid--2 > .e-con-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rh-grid--3,
.rh-grid--3 > .e-con-inner {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rh-grid--4,
.rh-grid--4 > .e-con-inner {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199px) {
  .rh-grid--4,
  .rh-grid--4 > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rh-grid--3,
  .rh-grid--3 > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .rh-grid--2,
  .rh-grid--2 > .e-con-inner,
  .rh-grid--3,
  .rh-grid--3 > .e-con-inner,
  .rh-grid--4,
  .rh-grid--4 > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 7a. product / capability card ---- */
.rh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rh-line);
  overflow: hidden;
  transition: transform var(--rh-ease), box-shadow var(--rh-ease), border-color var(--rh-ease);
}
.rh-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rh-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rh-ease);
}
.rh-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -26px rgba(35, 35, 35, 0.35);
  border-color: transparent;
}
.rh-card:hover::after {
  transform: scaleX(1);
}

.rh-card__media {
  overflow: hidden;
  background: var(--rh-soft);
  aspect-ratio: 1 / 1;
}
.rh-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.rh-card:hover .rh-card__media img {
  transform: scale(1.06);
}
.rh-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 30px;
}
.rh-card__title .elementor-heading-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rh-dark);
  margin: 0 0 12px;
}
.rh-card__desc .elementor-text-editor,
.rh-card__desc p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--rh-body);
  margin: 0;
}
.rh-card__link {
  margin-top: auto;
  padding-top: 20px;
}
.rh-card__link .elementor-button {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--rh-red);
}
.rh-card__link .elementor-button:hover {
  color: var(--rh-dark);
}

/* whole-card clickable: place a transparent link over the card */
.rh-card--linked .rh-card__link a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
}

/* ---- 7b. dark call-to-action card that closes a grid ---- */
.rh-cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--rh-dark);
  padding: 36px 30px;
  overflow: hidden;
  transition: background var(--rh-ease), transform var(--rh-ease), box-shadow var(--rh-ease);
}
.rh-cta-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rh-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rh-ease);
}
.rh-cta-card:hover {
  background: var(--rh-dark-2);
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -26px rgba(35, 35, 35, 0.5);
}
.rh-cta-card:hover::after {
  transform: scaleX(1);
}
.rh-cta-card__title .elementor-heading-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.rh-cta-card__desc .elementor-text-editor,
.rh-cta-card__desc p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 26px;
}
.rh-cta-card .elementor-button {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: #fff;
}
.rh-cta-card .elementor-button:hover {
  color: var(--rh-red);
}

/* ---- 7c. plain feature card (icon + title + text) ---- */
.rh-feature {
  height: 100%;
  background: #fff;
  border: 1px solid var(--rh-line);
  padding: 38px 32px 40px;
  transition: transform var(--rh-ease), box-shadow var(--rh-ease), border-color var(--rh-ease);
}
.rh-feature:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(35, 35, 35, 0.3);
}
.rh-feature__num .elementor-heading-title {
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rh-line);
  margin: 0;
}
.rh-feature__title .elementor-heading-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--rh-dark);
  margin: 0 0 12px;
}
.rh-feature__desc .elementor-text-editor,
.rh-feature__desc p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--rh-body);
  margin: 0;
}
.rh-feature__icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.rh-feature__rule {
  width: 28px;
  height: 3px;
  background: var(--rh-red);
}

/* =========================================================================
   8. Stats row
   ========================================================================= */

.rh-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rh-line);
}
.rh-site .rh-stats > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}
.rh-site .rh-stats:has(> .e-con-inner) {
  display: block !important;
}
.rh-stats .rh-stat {
  padding: 34px 28px 30px;
  border-right: 1px solid var(--rh-line);
  transition: background var(--rh-ease);
}
.rh-stats .rh-stat:last-child {
  border-right: 0;
}
.rh-stats .rh-stat:hover {
  background: #fafafa;
}
.rh-stat__num .elementor-heading-title {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--rh-dark);
  margin: 0;
}
.rh-stat__num .elementor-heading-title em {
  font-style: normal;
  color: var(--rh-red);
  font-size: 30px;
  margin-left: 2px;
}
.rh-stat__label .elementor-heading-title {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rh-body);
}

@media (max-width: 1024px) {
  .rh-stats,
  .rh-site .rh-stats > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rh-stats .rh-stat:nth-child(2n) {
    border-right: 0;
  }
  .rh-stats .rh-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--rh-line);
  }
}
@media (max-width: 560px) {
  .rh-stats,
  .rh-site .rh-stats > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .rh-stats .rh-stat {
    border-right: 0;
    border-bottom: 1px solid var(--rh-line);
  }
  .rh-stat__num .elementor-heading-title {
    font-size: 32px;
  }
}

/* variant used on dark backgrounds */
.rh-stats--dark {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.rh-stats--dark .rh-stat {
  border-right-color: rgba(255, 255, 255, 0.14);
}
.rh-stats--dark .rh-stat:hover {
  background: rgba(255, 255, 255, 0.04);
}
.rh-stats--dark .rh-stat__num .elementor-heading-title {
  color: #fff;
}
.rh-stats--dark .rh-stat__label .elementor-heading-title {
  color: rgba(255, 255, 255, 0.65);
}

/* =========================================================================
   9. Split section (text + media)
   ========================================================================= */

.rh-split__title .elementor-heading-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.2px;
  color: var(--rh-dark);
  margin: 0;
}
.rh-split__intro .elementor-text-editor,
.rh-split__intro p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--rh-body);
  margin: 0;
}
.rh-split__intro p + p {
  margin-top: 14px;
}
.rh-split__intro strong {
  color: var(--rh-dark);
  font-weight: 600;
}

.rh-media-main,
.rh-media-sub {
  overflow: hidden;
  background: #f4f4f4;
}
.rh-media-main img,
.rh-media-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rh-media-main {
  aspect-ratio: 4 / 3.2;
  max-height: 460px;
}
.rh-media-sub {
  width: 46%;
  aspect-ratio: 4 / 3;
  border: 6px solid #fff;
}
.rh-split__media .rh-media-main,
.rh-split__media .rh-media-sub {
  width: 100%;
}
.rh-split__media img {
  max-height: 460px;
}

/* small red stat chip that overlaps a photo */
.rh-chip {
  background: var(--rh-red);
  padding: 16px 22px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.rh-chip__num .elementor-heading-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.rh-chip__label .elementor-heading-title {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

@media (max-width: 1024px) {
  .rh-split__title .elementor-heading-title {
    font-size: 32px;
  }
}

/* =========================================================================
   10. Check list
   ========================================================================= */

.rh-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
}
.rh-site .rh-list > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
  width: 100%;
}
.rh-site .rh-list:has(> .e-con-inner) {
  display: block !important;
}
.rh-list--1 {
  grid-template-columns: minmax(0, 1fr);
}
.rh-list__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rh-list__item::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  background: var(--rh-red);
}
.rh-list__item .elementor-heading-title,
.rh-list__item p {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--rh-dark);
  margin: 0;
}

@media (max-width: 620px) {
  .rh-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   11. Logo wall
   ========================================================================= */

.rh-logo-wall .elementor-image-gallery .gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
}
.rh-logo-wall .gallery-item {
  margin: 0;
}
.rh-logo-wall .gallery-item img {
  width: 100%;
  height: 116px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--rh-line);
  padding: 22px 26px;
  transition: border-color var(--rh-ease), transform var(--rh-ease);
}
.rh-logo-wall .gallery-item img:hover {
  border-color: var(--rh-red);
  transform: translateY(-4px);
}

@media (max-width: 1024px) {
  .rh-logo-wall .elementor-image-gallery .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .rh-logo-wall .elementor-image-gallery .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rh-logo-wall .gallery-item img {
    height: 92px;
    padding: 14px;
  }
}

/* certificate document cards */
.rh-docs .elementor-image-gallery .gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.rh-docs .gallery-item {
  margin: 0;
  background: #fff;
  border: 1px solid var(--rh-line);
  padding: 20px;
  transition: border-color var(--rh-ease), box-shadow var(--rh-ease), transform var(--rh-ease);
}
.rh-docs .gallery-item:hover {
  border-color: var(--rh-red);
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -28px rgba(35, 35, 35, 0.4);
}
.rh-docs .gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #fff;
}
@media (max-width: 1024px) {
  .rh-docs .elementor-image-gallery .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .rh-docs .elementor-image-gallery .gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   12. Process steps
   ========================================================================= */

.rh-steps {
  counter-reset: rh-step;
}
.rh-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--rh-line);
  padding: 40px 34px 44px;
  transition: transform var(--rh-ease), box-shadow var(--rh-ease);
}
.rh-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rh-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rh-ease);
}
.rh-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -26px rgba(35, 35, 35, 0.3);
}
.rh-step:hover::before {
  transform: scaleX(1);
}
.rh-step__num .elementor-heading-title {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rh-line);
  margin: 0;
}
.rh-step__rule {
  width: 28px;
  height: 3px;
  background: var(--rh-red);
  margin: 18px 0 22px;
}
.rh-step__title .elementor-heading-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--rh-dark);
  margin: 0 0 12px;
}
.rh-step__desc .elementor-text-editor,
.rh-step__desc p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--rh-body);
  margin: 0;
}

/* =========================================================================
   13. FAQ
   ========================================================================= */

.rh-faq .elementor-accordion-item {
  border: 1px solid var(--rh-line);
  border-bottom: 0;
  background: #fff;
}
.rh-faq .elementor-accordion-item:last-child {
  border-bottom: 1px solid var(--rh-line);
}
.rh-faq .elementor-tab-title {
  padding: 22px 26px;
  font-size: 16px;
  font-weight: 600;
  color: var(--rh-dark);
  transition: color var(--rh-ease), background var(--rh-ease);
}
.rh-faq .elementor-tab-title a {
  color: inherit;
}
.rh-faq .elementor-tab-title.elementor-active {
  color: var(--rh-red);
  background: #fff;
}
.rh-faq .elementor-tab-content {
  border-top: 1px solid var(--rh-line);
  padding: 22px 26px 26px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--rh-body);
}
.rh-faq .elementor-accordion-icon {
  color: var(--rh-red);
}

/* =========================================================================
   14. Forms
   ========================================================================= */

.rh-form .fluentform,
.rh-form form {
  font-family: inherit;
}
.rh-form .ff-el-input--label label,
.rh-form label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rh-dark);
}
.rh-form input[type='text'],
.rh-form input[type='email'],
.rh-form input[type='tel'],
.rh-form input[type='url'],
.rh-form select,
.rh-form textarea,
.rh-form .ff-el-form-control {
  width: 100%;
  background: #fff;
  border: 1px solid var(--rh-line) !important;
  border-radius: 0 !important;
  padding: 15px 18px !important;
  font-size: 15px;
  color: var(--rh-dark);
  box-shadow: none !important;
  transition: border-color var(--rh-ease);
}
.rh-form input:focus,
.rh-form select:focus,
.rh-form textarea:focus,
.rh-form .ff-el-form-control:focus {
  border-color: var(--rh-red) !important;
  outline: none;
}
.rh-form ::placeholder {
  color: #b5b5b5;
}
.rh-form .ff-btn-submit,
.rh-form button[type='submit'],
.rh-form input[type='submit'] {
  background: var(--rh-red);
  border: 1px solid var(--rh-red);
  border-radius: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 17px 40px;
  cursor: pointer;
  transition: background var(--rh-ease), border-color var(--rh-ease);
}
.rh-form .ff-btn-submit:hover,
.rh-form button[type='submit']:hover {
  background: var(--rh-dark);
  border-color: var(--rh-dark);
}

/* =========================================================================
   15. Footer
   ========================================================================= */

.rh-footer {
  background: var(--rh-dark);
  color: #bcbcbc;
}
.rh-footer .e-con-inner {
  padding-top: 76px;
  padding-bottom: 48px;
}
.rh-footer__company .elementor-heading-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
  color: #fff;
  margin: 0;
}
.rh-footer__tag .elementor-text-editor,
.rh-footer__tag p {
  font-size: 13px;
  line-height: 1.8;
  color: #aaa;
  margin: 0;
}
.rh-footer__title .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 22px;
}
.rh-footer__title .elementor-heading-title::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--rh-red);
}
.rh-footer__list ul,
.rh-footer__list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.rh-footer__list .elementor-icon-list-item,
.rh-footer__list li {
  font-size: 14px;
}
.rh-footer__list a {
  color: #bcbcbc;
  transition: color var(--rh-ease);
}
.rh-footer__list a:hover {
  color: #fff;
}
.rh-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.rh-footer__bottom p,
.rh-footer__bottom .elementor-text-editor {
  font-size: 13px;
  color: #8f8f8f;
  margin: 0;
}
.rh-footer__contact-label .elementor-heading-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #aaa;
  margin: 0 0 3px;
}
.rh-footer__contact-text .elementor-heading-title,
.rh-footer__contact-text a {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
}
.rh-footer__contact-text a:hover {
  color: var(--rh-red);
}

/* =========================================================================
   16. Header
   ========================================================================= */

.rh-header {
  background: #fff;
  border-bottom: 1px solid var(--rh-line);
  transition: background var(--rh-ease), box-shadow var(--rh-ease);
}
.rh-header .e-con-inner {
  min-height: 84px;
}
.rh-header--transparent {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.rh-header--sticky {
  position: sticky;
  top: 0;
  z-index: 999;
}
.rh-header--scrolled {
  background: #fff;
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.45);
  border-bottom-color: transparent;
}

.rh-header__logo img {
  max-height: 44px;
  width: auto;
}

.rh-nav .elementor-nav-menu > li > a,
.rh-nav ul.elementor-nav-menu > li.menu-item > a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--rh-dark);
  padding: 10px 0;
}
.rh-nav ul.elementor-nav-menu > li.menu-item > a:hover,
.rh-nav ul.elementor-nav-menu > li.current-menu-item > a {
  color: var(--rh-red);
}
.rh-nav ul.elementor-nav-menu > li.menu-item {
  margin: 0 16px;
}

/* submenu panel */
.rh-nav ul.elementor-nav-menu--dropdown,
.rh-nav .elementor-nav-menu .sub-menu {
  background: #fff;
  border: 1px solid var(--rh-line);
  box-shadow: 0 24px 44px -28px rgba(35, 35, 35, 0.4);
  min-width: 260px;
}
.rh-nav .elementor-nav-menu .sub-menu li a {
  font-size: 14px;
  color: var(--rh-dark);
  padding: 11px 20px;
  border-bottom: 1px solid #f4f4f4;
}
.rh-nav .elementor-nav-menu .sub-menu li a:hover {
  background: #fafafa;
  color: var(--rh-red);
}

/* language switcher */
.rh-lang-drop {
  position: relative;
}
.rh-lang-drop__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--rh-dark);
  transition: color var(--rh-ease);
}
.rh-lang-drop__toggle:hover {
  color: var(--rh-red);
}
.rh-lang-drop__toggle img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  display: block;
  border-radius: 1px;
}
.rh-lang-drop__caret {
  color: #2e9e4f;
  transition: transform 0.25s ease;
}
.rh-lang-drop.is-open .rh-lang-drop__caret {
  transform: rotate(90deg);
}

.rh-lang-drop__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1200;
  min-width: 180px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #f7f7f7;
  border: 1px solid var(--rh-line);
  box-shadow: 0 24px 44px -28px rgba(35, 35, 35, 0.45);
}
.rh-lang-drop__menu[hidden] {
  display: none !important;
}

.rh-lang-drop__item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--rh-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--rh-ease), color var(--rh-ease);
}
.rh-lang-drop__item a img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  display: block;
  border-radius: 1px;
}
.rh-lang-drop__item a:hover {
  background: #fff;
  color: var(--rh-red);
}
.rh-lang-drop__item.is-current a {
  color: #9a9a9a;
  cursor: default;
}
.rh-lang-drop__item.is-current a:hover {
  background: transparent;
  color: #9a9a9a;
}

/* dark context (footer) */
.rh-lang-drop--dark .rh-lang-drop__toggle {
  color: rgba(255, 255, 255, 0.85);
}
.rh-lang-drop--dark .rh-lang-drop__toggle:hover {
  color: #fff;
}
.rh-lang-drop--dark .rh-lang-drop__menu {
  background: #2e2e2e;
  border-color: rgba(255, 255, 255, 0.14);
  left: auto;
  right: 0;
}
.rh-lang-drop--dark .rh-lang-drop__item a {
  color: rgba(255, 255, 255, 0.85);
}
.rh-lang-drop--dark .rh-lang-drop__item a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.rh-lang-drop--dark .rh-lang-drop__item.is-current a,
.rh-lang-drop--dark .rh-lang-drop__item.is-current a:hover {
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
}

.rh-lang {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Polylang prints bare <li> items without a wrapping list, so style both. */
.rh-lang li {
  list-style: none;
  margin: 0;
}
.rh-lang ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rh-lang li a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rh-dark);
  padding: 6px 6px;
  transition: color var(--rh-ease);
}
.rh-lang li a:hover,
.rh-lang li.current-lang > a {
  color: var(--rh-red);
}
.rh-lang img {
  width: 17px;
  height: 12px;
  object-fit: cover;
  display: block;
  border-radius: 1px;
}
.rh-lang--dark li a {
  color: rgba(255, 255, 255, 0.8);
}
.rh-lang--dark li a:hover,
.rh-lang--dark li.current-lang > a {
  color: #fff;
}

/* mobile toggle drawn with CSS on top of Elementor's nav widget */
.rh-nav .elementor-menu-toggle {
  border: 1px solid var(--rh-line);
  border-radius: 0;
  color: var(--rh-dark);
}
.rh-nav .elementor-menu-toggle:hover {
  background: var(--rh-dark);
  color: #fff;
}

/* =========================================================================
   17. Utilities
   ========================================================================= */

.rh-bg-cream {
  background: var(--rh-cream);
}
.rh-bg-soft {
  background: var(--rh-soft);
}
.rh-bg-dark {
  background: var(--rh-dark);
}
.rh-flex-1 {
  flex: 1;
}
.rh-mt-0 {
  margin-top: 0 !important;
}
.rh-mb-0 {
  margin-bottom: 0 !important;
}
.rh-divider {
  height: 1px;
  background: var(--rh-line);
  border: 0;
}
.rh-quote {
  border-left: 3px solid var(--rh-red);
  padding: 4px 0 4px 24px;
}
.rh-quote .elementor-text-editor,
.rh-quote p {
  font-size: 19px;
  line-height: 1.7;
  color: var(--rh-dark);
  font-style: italic;
}

/* sticky bottom enquiry bar (mobile) */
.rh-mobile-cta {
  display: none;
}

/* =========================================================================
   18. Spacers, split layout behaviour, misc
   ========================================================================= */

/* used through Elementor HTML widgets as an explicit vertical rhythm break */
.rh-gap-lg {
  height: 72px;
}
.rh-gap-md {
  height: 48px;
}
.rh-gap-sm {
  height: 28px;
}
@media (max-width: 900px) {
  .rh-gap-lg {
    height: 48px;
  }
}

/* product category anchors scroll clear of the sticky header */
.rh-anchor {
  scroll-margin-top: 110px;
}

/* Any in-page target has to clear the pinned navigation. */
.rh-site :target {
  scroll-margin-top: 120px;
}

/* the two-column split stacks on tablet */
@media (max-width: 1024px) {
  .rh-split > .rh-split__text,
  .rh-split > .rh-split__media {
    width: 100% !important;
  }
  .rh-split__media {
    max-width: 640px;
  }
  .rh-split__title .elementor-heading-title {
    font-size: 30px;
  }
}

/* contact page sidebar */
.rh-contact-aside .rh-contact-row + .rh-contact-row {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--rh-line);
}
.rh-contact-aside .rh-footer__contact-text .elementor-heading-title {
  color: var(--rh-dark);
}
@media (max-width: 1024px) {
  .rh-contact-aside {
    width: 100% !important;
  }
}

/* small button variant used in the header and footer */
.rh-btn--sm .elementor-button {
  padding: 13px 24px;
  font-size: 12px;
  letter-spacing: 0.16em;
}

/* mode cards on the solutions page */
.rh-feature--mode .rh-feature__num .elementor-heading-title {
  font-size: 40px;
  letter-spacing: 0.06em;
  color: var(--rh-red);
  margin-bottom: 6px;
}
.rh-feature--mode .rh-list {
  margin-top: 22px;
}

/* fallback menu when a Polylang translation of the menu is missing */
.rh-nav-fallback {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rh-nav-fallback a {
  color: var(--rh-dark);
  font-size: 14px;
}

/* scroll reveal used by assets/site.js */
.rh-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.rh-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Elementor's own gallery markup sometimes keeps default margins */
.rh-site .elementor-image-gallery .gallery-item {
  float: none;
}

/* keep long tables/forms from overflowing on phones */
.rh-site img {
  max-width: 100%;
}

/* =========================================================================
   21. Market news grid (rendered by the [rh_posts] shortcode)
   ========================================================================= */

.rh-news .rh-news__grid {
  display: grid !important;
  gap: 30px;
}
.rh-news__empty {
  text-align: center;
  color: var(--rh-body);
}

.rh-news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rh-line);
  overflow: hidden;
  transition: transform var(--rh-ease), box-shadow var(--rh-ease), border-color var(--rh-ease);
}
.rh-news-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 24px 46px -28px rgba(35, 35, 35, 0.38);
}
.rh-news-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--rh-soft);
}
.rh-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.rh-news-card:hover .rh-news-card__media img {
  transform: scale(1.06);
}
.rh-news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 30px;
}
.rh-news-card__date {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rh-red);
}
.rh-news-card__title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rh-dark);
}
.rh-news-card__title a {
  color: inherit;
  transition: color var(--rh-ease);
}
.rh-news-card__title a:hover {
  color: var(--rh-red);
}
.rh-news-card__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--rh-body);
}

/* regulation market cards reuse the feature card */
.rh-feature--market .rh-feature__title .elementor-heading-title {
  font-size: 18px;
}
.rh-feature--market .rh-list {
  margin-top: 20px;
  gap: 12px;
}
.rh-feature--market .rh-list__item .elementor-heading-title {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--rh-body);
}

/* =========================================================================
   22. Single post
   ========================================================================= */

.rh-single {
  max-width: 820px;
  margin: 0 auto;
  padding: 120px 24px 96px;
}
.rh-single__meta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rh-red);
  margin-bottom: 16px;
}
.rh-single__title {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.18;
  color: var(--rh-dark);
  margin: 0 0 28px;
}
.rh-single__body {
  font-size: 17px;
  line-height: 1.85;
  color: var(--rh-body);
}
.rh-single__body h2 {
  font-size: 26px;
  color: var(--rh-dark);
  margin: 44px 0 16px;
}
.rh-single__body h3 {
  font-size: 21px;
  color: var(--rh-dark);
  margin: 34px 0 14px;
}
.rh-single__body img {
  height: auto;
  margin: 28px 0;
}
.rh-single__body a {
  color: var(--rh-red);
}
@media (max-width: 640px) {
  .rh-single {
    padding: 90px 20px 64px;
  }
  .rh-single__title {
    font-size: 28px;
  }
}

/* =========================================================================
   19. Theme header (over the dark hero band)
   ========================================================================= */

.rh-site-header {
  /* Sticky on every inner page so the navigation stays reachable while
     scrolling. The home page overrides this below (see --transparent). */
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--rh-line);
  transition: box-shadow var(--rh-ease), border-color var(--rh-ease);
}

/* The contact strip and the navigation move together: on the home page the
   whole stack floats over the hero, everywhere else it sits in the flow. */
.rh-header-stack {
  /* No box of its own, so the sticky nav below is bounded by <body> and keeps
     sticking all the way down the page rather than only for 126px. */
  display: contents;
  z-index: 900;
}
.rh-header-stack--float {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Once the contact strip has scrolled past, lift the bar off the page. */
.rh-site-header:not(.rh-site-header--transparent).is-scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 14px 34px -26px rgba(0, 0, 0, 0.45);
}

/* Keep the sticky bar clear of the WordPress admin toolbar. */
.admin-bar .rh-site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .rh-site-header {
    top: 46px;
  }
}

/* ---- contact strip ---- */
.rh-topbar {
  background: var(--rh-dark);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}
.rh-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 42px;
}
.rh-topbar__contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 26px;
}
.rh-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--rh-ease);
}
.rh-topbar__item:hover {
  color: #fff;
}
.rh-topbar__icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--rh-red);
}
/* Hairline between the contact details and the language switcher. */
.rh-topbar__divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
}
.rh-topbar .rh-lang-drop {
  position: relative;
}
.rh-topbar .rh-lang-drop__toggle {
  padding: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
}
.rh-topbar .rh-lang-drop__toggle:hover {
  color: #fff;
}
.rh-topbar .rh-lang-drop__menu {
  top: calc(100% + 11px);
}

@media (max-width: 1099px) {
  /* The switcher already lives in the slide-in panel at these widths. */
  .rh-topbar .rh-lang-drop {
    display: none;
  }
}
@media (max-width: 640px) {
  .rh-topbar {
    font-size: 12px;
  }
  .rh-topbar__inner {
    min-height: 38px;
    padding: 0 16px;
  }
  .rh-topbar__contacts {
    gap: 16px;
  }
  .rh-topbar__icon {
    width: 13px;
    height: 13px;
  }
}

.rh-site-header--transparent {
  /* Positioned by .rh-header-stack--float rather than absolutely itself, so the
     contact strip and the nav stay stacked together. */
  position: relative;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.rh-site-header--transparent.is-scrolled,
.rh-site-header--transparent.rh-header--scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom-color: transparent;
  box-shadow: 0 14px 34px -26px rgba(0, 0, 0, 0.5);
  animation: rh-header-drop 0.28s ease;
}

@keyframes rh-header-drop {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.rh-site-header__inner {
  display: flex;
  align-items: center;
  /* Fluid: the header breathes on a wide monitor and tightens on a laptop
     instead of holding one fixed spacing until it suddenly collapses. */
  gap: clamp(14px, 1.5vw, 30px);
  /* The navigation now carries nine items plus a language switcher and a CTA,
     which does not fit the 1240px content grid. The header gets its own,
     wider ceiling so nothing is pushed off-screen. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 84px;
}

.rh-site-header__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.rh-logo-img {
  height: 42px;
  width: auto;
}
.rh-site-header--transparent .rh-logo-img {
  /* the white wordmark reads better on photography */
  filter: none;
}

.rh-site-header__nav {
  flex: 1 1 auto;
  min-width: 0;
  /* No overflow clipping here: it would cut off the Products dropdown. The
     fluid sizing above keeps the menu inside its box from 1200px up, and below
     that the slide-in panel takes over entirely. */
  display: flex;
  justify-content: center;
}

/* ---- primary menu ---- */
.rh-menu,
.rh-menu ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  /* The item padding already provides the spacing; a gap here is what pushes
     the last item out of the viewport at 1280px. */
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rh-menu > li {
  position: relative;
}
.rh-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px clamp(5px, 0.66vw, 11px);
  font-size: clamp(11.5px, 0.9vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--rh-dark);
  white-space: nowrap;
  transition: color var(--rh-ease);
}

.rh-menu > li:first-child > a {
  padding-left: 0;
}
.rh-site-header--transparent .rh-menu > li > a {
  color: rgba(255, 255, 255, 0.92);
}
.rh-site-header--transparent.is-scrolled .rh-menu > li > a,
.rh-site-header--transparent.rh-header--scrolled .rh-menu > li > a {
  color: var(--rh-dark);
}
.rh-menu > li > a:hover,
.rh-menu > li.current-menu-item > a,
.rh-menu > li.current-menu-ancestor > a {
  color: var(--rh-red);
}
.rh-menu > li.menu-item-has-children > a::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
}

/* dropdown */
.rh-menu .sub-menu {
  position: absolute;
  /* The nav is centred inside an 84px header, so a plain 100% would drop the
     panel over the header's own bottom edge. */
  top: calc(100% + 17px);
  left: 0;
  z-index: 20;
  display: block;
  min-width: 268px;
  padding: 10px 0;
  background: #fff;
  border: 1px solid var(--rh-line);
  border-top: 3px solid var(--rh-red);
  box-shadow: 0 26px 46px -30px rgba(35, 35, 35, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.rh-menu > li:hover > .sub-menu,
.rh-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rh-menu .sub-menu li {
  display: block;
}
.rh-menu .sub-menu a {
  display: block;
  padding: 11px 22px;
  font-size: 14px;
  color: var(--rh-dark);
  border-bottom: 1px solid #f4f4f4;
  transition: background var(--rh-ease), color var(--rh-ease);
}
.rh-menu .sub-menu li:last-child a {
  border-bottom: 0;
}
.rh-menu .sub-menu a:hover {
  background: #fafafa;
  color: var(--rh-red);
}

/* ---- header actions ---- */
.rh-site-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.rh-site-header--transparent .rh-lang li a {
  color: rgba(255, 255, 255, 0.85);
}
.rh-site-header--transparent .rh-lang li a:hover,
.rh-site-header--transparent .rh-lang li.current-lang > a {
  color: #fff;
}
.rh-site-header--transparent.is-scrolled .rh-lang li a,
.rh-site-header--transparent.rh-header--scrolled .rh-lang li a {
  color: var(--rh-dark);
}
.rh-site-header--transparent.is-scrolled .rh-lang li a:hover,
.rh-site-header--transparent.rh-header--scrolled .rh-lang li.current-lang > a {
  color: var(--rh-red);
}

.rh-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px clamp(13px, 1.4vw, 24px);
  background: var(--rh-red);
  border: 1px solid var(--rh-red);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--rh-ease), border-color var(--rh-ease);
}
.rh-header-cta:hover {
  background: var(--rh-dark);
  border-color: var(--rh-dark);
  color: #fff;
}
.rh-header-cta--sm {
  padding: 12px 22px;
}
.rh-header-cta--block {
  display: flex;
  width: 100%;
}

/* ---- mobile ---- */
.rh-site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  cursor: pointer;
}
.rh-site-header__toggle span {
  display: block;
  height: 2px;
  background: currentColor;
  color: var(--rh-dark);
}
.rh-site-header--transparent:not(.is-scrolled):not(.rh-header--scrolled) .rh-site-header__toggle {
  border-color: rgba(255, 255, 255, 0.45);
}
.rh-site-header--transparent:not(.is-scrolled):not(.rh-header--scrolled) .rh-site-header__toggle span {
  background: #fff;
}

.rh-mobile-nav {
  display: none;
  padding: 12px 24px 26px;
  background: #fff;
  border-top: 1px solid var(--rh-line);
}
.rh-mobile-nav[hidden] {
  display: none !important;
}
.rh-mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rh-mobile-menu li {
  border-bottom: 1px solid var(--rh-line);
}
.rh-mobile-menu a {
  display: block;
  padding: 15px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--rh-dark);
}
.rh-mobile-menu .sub-menu {
  padding-left: 16px;
  list-style: none;
}
.rh-mobile-menu .sub-menu a {
  font-size: 14px;
  font-weight: 400;
  color: var(--rh-body);
}
.rh-mobile-nav__foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
}

/* Nine items plus the switched and CTA need roughly 1400px of header; below
   that the slide-in panel takes over rather than letting anything overflow. */
/* Measured: with the fluid sizing above — and the language switcher now living
   in the contact strip rather than the nav — the full navigation fits from
   1150px up (0px clipped, ~29px gap). Below that the slide-in panel takes over. */
@media (max-width: 1149px) {
  .rh-site-header__nav,
  .rh-site-header__actions {
    display: none;
  }
  .rh-site-header__toggle {
    display: flex;
    margin-left: auto;
  }
  .rh-mobile-nav {
    display: block;
  }
  .rh-mobile-nav[hidden] {
    display: none !important;
  }
}

/* =========================================================================
   20. Theme footer
   ========================================================================= */

/* Backdrop for the ported reference footer block, which is transparent by
   design and expects the theme footer to paint the dark band behind it. */
.rh-footer-bg {
  background: var(--rh-dark);
  /* Matches the reference theme's footer container padding, which is what makes
     the ported footer block land on the same width. */
  padding: 55px 35px 0;
}
.rh-footer-below {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 0;
}
.rh-footer-social {
  display: flex;
  align-items: center;
  gap: 0;
}
/* The reference site renders each profile as a white square with a dark glyph
   rather than a coloured icon on the dark band. */
.rh-footer-social__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 10px;
  background: #fff;
  color: var(--rh-dark);
  transition: background var(--rh-ease), color var(--rh-ease);
}
.rh-footer-social__item:hover {
  background: var(--rh-red);
  color: #fff;
}
.rh-footer-copy {
  margin: 0;
  font-size: 16px;
  color: #fff;
}
@media (max-width: 640px) {
  .rh-footer-bg {
    padding: 36px 16px 0;
  }
  .rh-footer-below {
    padding: 20px 8px;
    justify-content: center;
  }
  .rh-footer-copy {
    font-size: 14px;
    text-align: center;
  }
}

.rh-site-footer {
  background: var(--rh-dark);
  color: #bcbcbc;
}
.rh-site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 44px;
  max-width: var(--rh-container);
  margin: 0 auto;
  padding: 76px 24px 48px;
}
.rh-site-footer__brand .rh-logo-img {
  height: 40px;
  margin-bottom: 18px;
}
.rh-site-footer__company {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
  color: #fff;
}
.rh-site-footer__blurb {
  margin: 18px 0 24px;
  font-size: 13px;
  line-height: 1.8;
  color: #aaa;
  max-width: 280px;
}
.rh-site-footer__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.rh-site-footer__title::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--rh-red);
}
.rh-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.rh-footer-menu a {
  font-size: 14px;
  color: #bcbcbc;
  transition: color var(--rh-ease);
}
.rh-footer-menu a:hover {
  color: #fff;
}
.rh-site-footer__row + .rh-site-footer__row {
  margin-top: 14px;
}
.rh-site-footer__label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 3px;
}
.rh-site-footer__value {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  color: #fff;
}
.rh-site-footer__value a {
  color: #fff;
}
.rh-site-footer__value a:hover {
  color: var(--rh-red);
}
.rh-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: var(--rh-container);
  margin: 0 auto;
  padding: 24px 24px 33px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.rh-site-footer__bottom p {
  margin: 0;
  font-size: 13px;
  color: #8f8f8f;
}

@media (max-width: 1199px) {
  .rh-site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
}
@media (max-width: 640px) {
  .rh-site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 56px 20px 36px;
  }
  .rh-site-footer__bottom {
    padding: 20px 20px 28px;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 767px) {
  .rh-mobile-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: var(--rh-dark);
  }
  .rh-mobile-cta .elementor-button {
    flex: 1;
    border: 0;
    padding: 16px 10px;
    font-size: 12px;
  }
  .rh-mobile-cta .elementor-button--whatsapp {
    background: #25d366;
  }
}

/* =========================================================================
   23. Contact page typography

   Every other page is assembled from the ported .lw-* blocks, which carry
   their own headings sizes in reference.css. The contact page is the one page
   built from the reference site's own Elementor widgets, so its headings fall
   back to the theme scale and came out two steps small and in the body grey.

   Astra's heading scale, copied value for value from the reference site's
   inline theme CSS, including both of its responsive steps.
   ========================================================================= */

.lw-block--contact h1,
.lw-block--contact h2,
.lw-block--contact h3,
.lw-block--contact h4,
.lw-block--contact h5,
.lw-block--contact h6 {
  font-family: 'Poppins', 'Noto Sans Thai', sans-serif;
  font-weight: 600;
  color: var(--e-global-color-astglobalcolor2);
}

.lw-block--contact h1 { font-size: 5.625rem; line-height: 1.4em; }
.lw-block--contact h2 { font-size: 2.875rem; line-height: 1.3em; }
.lw-block--contact h3 { font-size: 2.25rem;  line-height: 1.3em; }
.lw-block--contact h4 { font-size: 1.75rem;  line-height: 1.2em; }
.lw-block--contact h5 { font-size: 1.375rem; line-height: 1.2em; }
.lw-block--contact h6 { font-size: 1.125rem; line-height: 1.25em; }

/* The reference runs this page's two columns through Elementor's boxed
   container at 1200px wide, not the 1240px the ported .lw-* sections use.
   Matching it keeps the columns at the same x as the reference. */
.lw-block--contact .e-con-boxed {
  --container-max-width: 1200px;
}

@media (max-width: 921px) {
  .lw-block--contact h1 { font-size: 3.75rem; }
  .lw-block--contact h2 { font-size: 2.25rem; }
  .lw-block--contact h3 { font-size: 1.875rem; }
  .lw-block--contact h4 { font-size: 1.375rem; }
  .lw-block--contact h5 { font-size: 1.125rem; }
  .lw-block--contact h6 { font-size: 1rem; }
}

@media (max-width: 544px) {
  .lw-block--contact h1 { font-size: 2.5rem; }
  .lw-block--contact h2 { font-size: 2rem; }
  .lw-block--contact h3 { font-size: 1.625rem; }
  .lw-block--contact h4 { font-size: 1.25rem; }
}

/* ==== lw-nav-l3 START (third-level flyout for PRODUCTS) ==== */
/* 三级面板：从二级项右侧展开，避免铺平成一长列 */
.rh-menu .sub-menu li { position: relative; }
.rh-menu .sub-menu .sub-menu {
  top: -13px;
  left: calc(100% + 2px);
  min-width: 262px;
  border-top: 3px solid var(--rh-red);
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.rh-menu .sub-menu > li:hover > .sub-menu,
.rh-menu .sub-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 有三级项的二级项右侧给一个小箭头 */
.rh-menu .sub-menu > li.menu-item-has-children > a { padding-right: 40px; }
.rh-menu .sub-menu > li.menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
/* 屏幕较窄时改到左侧展开，避免出屏 */
@media (max-width: 1280px) {
  .rh-menu .sub-menu .sub-menu { left: auto; right: calc(100% + 2px); }
}
/* 小屏走移动菜单，三级直接缩进显示 */
.rh-mobile-menu .sub-menu .sub-menu { padding-left: 16px; }
/* ==== lw-nav-l3 END ==== */