.elementor-kit-18{--e-global-color-primary:#17211C;--e-global-color-secondary:#0B8F55;--e-global-color-text:#52655B;--e-global-color-accent:#087247;--e-global-color-pbg001:#F6FAF7;--e-global-color-surf001:#FFFFFF;--e-global-color-soft001:#EAF5EE;--e-global-color-bord001:#D8E5DC;--e-global-color-lime001:#A9DC3B;--e-global-typography-primary-font-family:"Samim";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Samim";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Samim";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Samim";--e-global-typography-accent-font-weight:600;}.elementor-kit-18 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */html:lang(fa) { direction: rtl; scroll-behavior: smooth; }
body { overflow-x: clip; background: #F6FAF7; font-family: Samim, sans-serif; }
/* The theme sizes `main.site-main` as content-box `width:100%` plus 10px of
   horizontal padding on some templates (the 404 one), so the box ends up 20px
   wider than the viewport and the page can be panned sideways. Elementor pages
   have padding 0 there, so border-box is a no-op for them. */
#content.site-main { box-sizing: border-box; }
.panje-section,
.panje-site-header,
.panje-site-footer {
  direction: rtl !important;
  text-align: right;
  font-family: Samim, sans-serif;
}
.panje-section *,
.panje-site-header *,
.panje-site-footer * { box-sizing: border-box; }
.panje-section { width: min(100%, 1140px); margin-inline: auto; }
.panje-section .elementor-heading-title,
.panje-section .elementor-widget-text-editor,
.panje-site-footer .elementor-heading-title { text-align: right; }
.panje-section .elementor-widget-text-editor { line-height: 1.88; }
.panje-section-intro { max-width: 790px; }
.panje-section-title .elementor-heading-title {
  font-size: clamp(1.75rem, 3.15vw, 2.7rem);
  line-height: 1.38;
  letter-spacing: -.025em;
}
.panje-section-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: #A9DC3B;
}
.panje-section-lead { font-size: 1rem; line-height: 1.95; }
.panje-kicker {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid #CEE9D6;
  border-radius: 999px;
  background: #F3FBF5;
  color: #087247;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.45;
}
.panje-card {
  min-width: 0;
  border: 1px solid #E2ECE5 !important;
  box-shadow: 0 7px 24px rgba(23, 33, 28, .045);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.panje-card:hover {
  transform: translateY(-5px);
  border-color: #A7D9B7 !important;
  box-shadow: 0 15px 36px rgba(23, 33, 28, .11);
}
.panje-card .elementor-widget-icon { align-self: flex-start; }
.panje-card-icon .elementor-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  background: #EAF5EE;
  color: #0B8F55;
}
.panje-card-title .elementor-heading-title {
  font-size: 1.08rem;
  line-height: 1.55;
}
.panje-card-text { font-size: .93rem; line-height: 1.85; }
.panje-grid-3 > .e-con { width: calc(33.333% - 16px); }
.panje-grid-4 > .e-con { width: calc(25% - 18px); }
.panje-grid-6 > .e-con { width: calc(16.666% - 20px); }
.panje-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 10px;
  background: #EAF5EE;
  color: #087247;
  font-size: .75rem;
  font-weight: 700;
}
.panje-badge-soon { background: #FFF2D1; color: #765907; }
.panje-btn-primary .elementor-button,
.panje-btn-secondary .elementor-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: transform .24s, box-shadow .24s, background-color .24s;
}
.panje-btn-primary .elementor-button {
  background: #0B8F55;
  box-shadow: 0 7px 19px rgba(11, 143, 85, .18);
}
.panje-btn-primary .elementor-button:hover { background: #087247; }
.panje-btn-primary .elementor-button:hover,
.panje-btn-secondary .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 25px rgba(11, 143, 85, .2);
}
.panje-section a:focus-visible,
.panje-site-header a:focus-visible,
.panje-site-footer a:focus-visible,
.panje-section button:focus-visible,
.panje-section input:focus-visible,
.panje-section select:focus-visible,
.panje-section textarea:focus-visible {
  outline: 3px solid #A9DC3B !important;
  outline-offset: 3px;
}

/* Full-width layered hero. Both photos remain editable Image widgets. */
.panje-hero {
  width: 100% !important;
  max-width: none !important;
  overflow: clip;
}
.panje-hero > .e-con-inner { width: 100%; max-width: none !important; }
.panje-hero-stage {
  position: relative;
  isolation: isolate;
  min-height: clamp(610px, 65vw, 760px);
  width: 100%;
  overflow: hidden;
  background: #244333;
}
.panje-hero-layer {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
}
.panje-hero-layer .elementor-widget-container,
.panje-hero-layer img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}
.panje-hero-layer img { display: block; object-fit: cover; object-position: center 48%; }
.panje-hero-copy {
  position: absolute !important;
  z-index: 3;
  top: 50%;
  right: max(26px, calc((100vw - 1140px) / 2));
  transform: translateY(-50%);
  width: min(470px, 42vw);
  padding: clamp(24px, 3vw, 38px) !important;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 60px rgba(8, 34, 20, .22);
}
.panje-hero-title .elementor-heading-title {
  font-size: clamp(2.35rem, 3.7vw, 3.95rem);
  line-height: 1.28;
  letter-spacing: -.035em;
}
.panje-hero-lead { font-size: .98rem; line-height: 1.95; }
.panje-hero-note { font-weight: 600; color: #0B8F55; }
.panje-actions { flex-wrap: nowrap !important; gap: 10px !important; }
.panje-actions .elementor-button { white-space: nowrap; }
.panje-bento {
  position: relative;
  z-index: 4;
  width: min(calc(100% - 40px), 1140px);
  /* Positive spacing: the row used to be pulled up over the hero photo, which
     read as glued to it. */
  margin: 34px auto 52px;
  gap: 18px !important;
}
.panje-bento > .e-con { width: calc(25% - 14px); }
.panje-bento .panje-card { min-height: 190px; }

/* Interior page composition. */
.panje-about-hero { width: min(100%, 1320px); }
.panje-about-hero .panje-hero-grid {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 38px !important;
}
.panje-about-hero .panje-hero-copy {
  position: static !important;
  flex: 0 0 42%;
  width: 42%;
  padding: 0 !important;
  transform: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.panje-about-hero .panje-hero-visual { flex: 1 1 58%; width: 58%; min-width: 0; }
.panje-about-image,
.panje-about-image .elementor-widget-container { width: 100% !important; }
.panje-about-image img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: clamp(440px, 43vw, 560px);
  object-fit: cover;
  object-position: 68% center;
  border-radius: 28px;
  box-shadow: 0 24px 56px rgba(23, 33, 28, .14);
}
.panje-about-hero .panje-hero-title .elementor-heading-title { font-size: clamp(2.2rem, 3.6vw, 3.5rem); }
.panje-values > .e-con:nth-child(4),
.panje-values > .e-con:nth-child(5) { width: calc(50% - 12px); }
.panje-soft-section,
.panje-warning-section,
.panje-final-cta {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(11, 143, 85, .06);
}
.panje-soft-section::before,
.panje-final-cta::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  inset-inline-end: -130px;
  top: -135px;
  border: 1px solid rgba(11, 143, 85, .12);
  border-radius: 50%;
  pointer-events: none;
}
.panje-dark-section { box-shadow: 0 20px 54px rgba(23, 33, 28, .14); }
.panje-dark-section .elementor-heading-title,
.panje-dark-section .panje-highlight-copy,
.panje-dark-section .panje-section-lead,
.panje-dark-section .panje-science-line { color: #fff !important; }
.panje-dark-section .panje-card {
  background: #243329 !important;
  border-color: #3C5544 !important;
  box-shadow: none;
}
.panje-dark-section .panje-card .elementor-heading-title { color: #fff !important; }
.panje-dark-section .panje-card-text { color: #D8E5DC; }
.panje-science-line { direction: ltr; text-align: center !important; font-size: clamp(1.05rem, 2.2vw, 1.5rem); }
.panje-highlight-copy { font-size: 1.15rem; font-weight: 700; color: #087247; }
.panje-audience-grid .panje-card-featured { background: #EAF5EE !important; }
.panje-accordion .elementor-tab-title { font-weight: 700; }
.panje-accordion .elementor-tab-content { line-height: 1.9; }
.panje-counter-number { font-size: clamp(3rem, 6vw, 5rem); font-weight: 700; color: #0B8F55; }
.panje-counter-label { text-align: center; font-weight: 600; }
.panje-form input,
.panje-form textarea,
.panje-form select { min-height: 46px; font-family: Samim, sans-serif; }
.panje-form textarea { min-height: 130px; }
.panje-form .elementor-button { min-height: 48px; }
.panje-contact-info-pending { display: none !important; }

/* Shared header and complete footer. */
.panje-site-header {
  /* The collapse is one motion, not several. Every property that changes when
     the header shrinks shares this duration and this easing curve, so the
     logo, wordmark, links and button all start and finish together - what
     makes a collapsing header look cheap is usually per-element timings that
     disagree, not the timing itself.

     The curve is the standard decelerate one: it leaves gently, is fastest in
     the first third and settles without any overshoot. A fast-out quint was
     tried first and measured at ~80% of the 40px travel inside the first
     120ms, which reads as a snap rather than as smooth. */
  --panje-hdr-dur: 380ms;
  --panje-hdr-ease: cubic-bezier(.4, 0, .2, 1);
  position: sticky;
  top: 0;
  z-index: 999;
  padding-block: 13px !important;
  padding-inline: max(22px, calc((100vw - 1140px) / 2)) !important;
  border-bottom: 1px solid #E5EDE7;
  box-shadow: 0 8px 28px rgba(23, 33, 28, .055);
  background: rgba(255,255,255,.97) !important;
  transition:
    padding-block var(--panje-hdr-dur) var(--panje-hdr-ease),
    background-color var(--panje-hdr-dur) var(--panje-hdr-ease),
    border-color var(--panje-hdr-dur) var(--panje-hdr-ease),
    box-shadow var(--panje-hdr-dur) var(--panje-hdr-ease);
}
.admin-bar .panje-site-header { top: 32px; }
.panje-brand { width: auto; min-width: 0; flex: 0 0 auto; flex-wrap: nowrap !important; }
.panje-brand .panje-logo {
  width: 66px !important;
  flex: 0 0 66px;
  transition:
    width var(--panje-hdr-dur) var(--panje-hdr-ease),
    flex-basis var(--panje-hdr-dur) var(--panje-hdr-ease);
}
.panje-logo img {
  display: block;
  width: auto;
  max-height: 62px;
  object-fit: contain;
  transition: max-height var(--panje-hdr-dur) var(--panje-hdr-ease);
}
.panje-brand-name { width: auto !important; white-space: nowrap; }
.panje-brand-name .elementor-heading-title,
.panje-brand-name .elementor-heading-title a {
  color: #17211C !important;
  font-family: Samim, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: font-size var(--panje-hdr-dur) var(--panje-hdr-ease);
}
.panje-nav-close-wrap { display: none; }
.panje-main-nav { margin-inline: auto; }
.panje-main-nav .elementor-nav-menu--main .elementor-item {
  font-family: Samim, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  transition:
    font-size var(--panje-hdr-dur) var(--panje-hdr-ease),
    color var(--panje-hdr-dur) var(--panje-hdr-ease);
}
.panje-header-cta .elementor-button {
  font-family: Samim, sans-serif;
  font-size: .9rem;
  padding-block: 10px !important;
  transition:
    min-height var(--panje-hdr-dur) var(--panje-hdr-ease),
    padding var(--panje-hdr-dur) var(--panje-hdr-ease),
    font-size var(--panje-hdr-dur) var(--panje-hdr-ease),
    box-shadow var(--panje-hdr-dur) var(--panje-hdr-ease);
}
.panje-site-footer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden;
  padding-block: 44px 0 !important;
  background: #17211C !important;
}
.panje-site-footer > .e-con-inner { width: min(calc(100% - 40px), 1140px); max-width: 1140px !important; margin: auto; }
.panje-site-footer > .panje-footer-cta,
.panje-site-footer > .panje-footer-grid,
.panje-site-footer > .panje-footer-bottom {
  width: min(calc(100% - 40px), 1140px) !important;
  margin-inline: auto !important;
}
.panje-footer-cta {
  width: 100%;
  padding: 30px 34px !important;
  border: 1px solid rgba(169, 220, 59, .24);
  border-radius: 22px;
  background: linear-gradient(110deg, #203B2B, #214A34);
  box-shadow: 0 18px 45px rgba(0,0,0,.13);
}
.panje-footer-cta-copy { flex: 1 1 auto; }
.panje-footer-kicker { color: #BDE8C8; font-size: .85rem; font-weight: 700; }
.panje-footer-kicker .panje-footer-eyebrow { color: #BDE8C8 !important; }
.panje-footer-cta-title .elementor-heading-title {
  color: #fff !important;
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  line-height: 1.4;
}
.panje-footer-cta-text { color: #D7E7DC !important; }
.panje-footer-cta-button { flex: none; }
.panje-footer-grid {
  display: flex;
  gap: 54px !important;
  padding: 52px 8px 42px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.panje-footer-brand { flex: 1.4; min-width: 0; }
.panje-footer-links { flex: .75; min-width: 0; }
/* The mark reads as an app icon, so it is a circle here rather than the rounded
   square the header uses. */
.panje-footer-logo {
  width: 74px !important;
  height: 74px;
  padding: 0 !important;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(169, 220, 59, .32);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}
.panje-footer-logo img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 50%;
}
.panje-site-footer .elementor-heading-title { color: #fff !important; }
.panje-footer-title .elementor-heading-title { font-size: 1rem; }
.panje-footer-copy,
.panje-footer-company,
.panje-footer-copyright,
.panje-footer-bottom-note { color: #C5D6CA !important; font-size: .9rem; }
.panje-footer-copy { max-width: 390px; line-height: 2; }
.panje-footer-link .elementor-button {
  display: inline-flex;
  width: auto;
  min-height: 28px;
  justify-content: flex-start;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #D7E7DC !important;
  font-size: .9rem;
}
.panje-footer-link .elementor-button:hover { color: #A9DC3B !important; transform: translateX(-3px); }
.panje-footer-bottom { width: 100%; padding: 16px 8px 22px; align-items: center; }
.panje-footer-bottom .elementor-widget { width: auto; }

@media (max-width: 1024px) {
  .panje-grid-3 > .e-con,
  .panje-grid-4 > .e-con { width: calc(50% - 12px); }
  .panje-grid-6 > .e-con { width: calc(33.333% - 16px); }
  .panje-bento { margin: 30px auto 44px; }
  .panje-bento > .e-con { width: calc(50% - 9px); }
  .panje-hero-copy { width: min(445px, 49vw); right: 24px; }
  .panje-hero-title .elementor-heading-title { font-size: clamp(2.25rem, 4.5vw, 3.1rem); }
  .panje-about-hero .panje-hero-grid { gap: 28px !important; }
  .panje-about-hero .panje-hero-copy { flex-basis: 44%; width: 44%; }
  .panje-about-hero .panje-hero-visual { flex-basis: 56%; width: 56%; }
  .panje-header-cta { display: none; }
  .panje-site-header { padding-inline: 24px !important; }
  .admin-bar .panje-site-header { top: 46px; }
  .panje-footer-grid { gap: 30px !important; }
  body.panje-nav-open { overflow: hidden !important; }
  .panje-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(10,25,16,.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  body.panje-nav-open .panje-nav-overlay { opacity: 1; pointer-events: auto; }
  .panje-site-header { background: #fff !important; }
  .panje-main-nav { width: auto !important; flex: 0 0 auto; margin-inline: 0 !important; }
  .panje-site-header .elementor-menu-toggle {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D8E5DC;
    border-radius: 12px;
    background: #EAF5EE !important;
    color: #087247 !important;
  }
  .panje-site-header .elementor-nav-menu--dropdown {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(86vw, 360px) !important;
    height: 100dvh !important;
    max-height: none !important;
    display: block !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1001;
    padding: 27px 17px 32px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: -18px 0 55px rgba(5,20,11,.19);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(105%);
    transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .24s, visibility .32s;
  }
  .panje-site-header .elementor-nav-menu--dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }
  .panje-site-header .elementor-nav-menu--dropdown::before {
    content: "پنجه";
    display: block;
    height: 70px;
    margin: 0 3px 19px;
    padding: 6px 2px 20px;
    border-bottom: 1px solid #E4EEE7;
    color: #17211C;
    font: 700 1.45rem/1.6 Samim, sans-serif;
  }
  .panje-site-header .elementor-nav-menu--dropdown .elementor-item {
    min-height: 50px;
    margin-block: 3px;
    padding: 11px 16px;
    border-radius: 11px;
    background: transparent;
    color: #17211C;
    font: 600 .98rem/1.65 Samim, sans-serif;
  }
  .panje-site-header .elementor-nav-menu--dropdown .elementor-item:hover,
  .panje-site-header .elementor-nav-menu--dropdown .elementor-item:focus-visible,
  .panje-site-header .elementor-nav-menu--dropdown .elementor-item-active {
    background: #EAF5EE;
    color: #087247;
  }
  .panje-site-header .elementor-nav-menu--dropdown li:last-child .elementor-item {
    justify-content: center;
    margin-top: 22px;
    background: #0B8F55;
    box-shadow: 0 8px 18px rgba(11,143,85,.18);
    color: #fff;
  }
  .panje-nav-close-wrap {
    display: block !important;
    position: fixed !important;
    top: 19px;
    right: calc(min(86vw, 360px) - 62px);
    z-index: 1003;
    width: 42px !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  body.panje-nav-open .panje-nav-close-wrap { opacity: 1; pointer-events: auto; }
  .panje-nav-close {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #D8E5DC;
    border-radius: 11px;
    background: #F6FAF7;
    color: #17211C;
    font: 400 1.8rem/1 Samim, sans-serif;
    cursor: pointer;
  }
  .panje-nav-close:focus-visible { outline: 3px solid #A9DC3B; outline-offset: 2px; }
  .admin-bar .panje-site-header .elementor-nav-menu--dropdown { top: 32px !important; height: calc(100dvh - 32px) !important; }
  .admin-bar .panje-nav-close-wrap { top: 51px; }
}
@media (max-width: 767px) {
  .panje-section { width: 100%; max-width: none; padding-inline: 20px !important; }
  .panje-section-title .elementor-heading-title { font-size: 1.8rem; }
  .panje-grid-3 > .e-con,
  .panje-grid-4 > .e-con,
  .panje-grid-6 > .e-con { width: 100%; }
  .panje-values > .e-con:nth-child(4),
  .panje-values > .e-con:nth-child(5) { width: 100%; }
  .panje-hero { padding: 0 !important; }
  .panje-hero-stage {
    min-height: 0;
    padding-top: min(78vw, 390px);
    overflow: visible;
    background: #F6FAF7;
  }
  .panje-hero-layer { inset: 0 0 auto; height: min(86vw, 420px); overflow: hidden; }
  .panje-hero-layer img { object-position: 34% center; }
  .panje-hero-copy {
    position: relative !important;
    z-index: 3;
    top: auto;
    right: auto;
    width: calc(100% - 28px);
    margin: 0 auto;
    padding: 23px 21px !important;
    transform: none;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(23,33,28,.1);
  }
  .panje-hero-title .elementor-heading-title { font-size: clamp(2rem, 8.2vw, 2.7rem); }
  .panje-actions { flex-direction: column !important; width: 100%; }
  .panje-actions .elementor-widget-button,
  .panje-actions .elementor-button { width: 100%; }
  .panje-bento { width: calc(100% - 28px); margin: 26px auto 40px; }
  .panje-bento > .e-con { width: calc(50% - 9px); }
  .panje-bento .panje-card { min-height: 0; }
  .panje-about-hero .panje-hero-grid { flex-direction: column !important; gap: 25px !important; }
  .panje-about-hero .panje-hero-copy,
  .panje-about-hero .panje-hero-visual { width: 100%; flex-basis: auto; }
  .panje-about-hero .panje-hero-visual { padding: 0 !important; }
  .panje-about-image { width: 100% !important; }
  .panje-about-image .elementor-widget-container,
  .panje-about-image img { width: 100% !important; }
  .panje-about-image img { height: min(86vw, 440px); border-radius: 20px; }
  .panje-card:hover { transform: none; }
  .panje-site-header { padding-inline: 16px !important; }
  .admin-bar .panje-site-header .elementor-nav-menu--dropdown { top: 46px !important; height: calc(100dvh - 46px) !important; }
  .admin-bar .panje-nav-close-wrap { top: 65px; }
  .panje-form .elementor-field-group { width: 100% !important; }
  .panje-site-footer { padding-inline: 0 !important; }
  .panje-site-footer > .e-con-inner { width: calc(100% - 32px); }
  .panje-footer-cta { flex-direction: column !important; align-items: stretch !important; padding: 25px 22px !important; }
  .panje-footer-cta-button,
  .panje-footer-cta-button .elementor-button { width: 100%; }
  .panje-footer-grid { flex-direction: column !important; gap: 28px !important; padding: 36px 4px 32px; }
  .panje-footer-brand,
  .panje-footer-links { width: 100%; flex: auto; }
  .panje-footer-bottom { flex-direction: column !important; align-items: flex-start; gap: 6px !important; }
}
@media (max-width: 430px) {
  .panje-bento > .e-con { width: 100%; }
  .panje-hero-copy { width: calc(100% - 22px); }
  .panje-card { padding: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:lang(fa) { scroll-behavior: auto; }
  .panje-card,
  .panje-btn-primary .elementor-button,
  .panje-btn-secondary .elementor-button { transition: none !important; transform: none !important; }
  .elementor-invisible { visibility: visible !important; animation: none !important; }
  .panje-nav-overlay,
  .panje-site-header .elementor-nav-menu--dropdown,
  .panje-nav-close-wrap { transition: none !important; }
}

/* Panje compact sticky header - 2026-10-08. */
/* Collapsed state. The class itself is toggled by panje-site-interactions.php;
   every rule below only changes values that the transitions declared above
   already animate, so nothing snaps. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
}
.admin-bar .elementor-location-header { top: 32px; }
.panje-site-header { backdrop-filter: none; }
.panje-site-header.panje-header-scrolled {
  padding-block: 3px !important;
  border-bottom-color: #E4EEE8;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(23, 33, 28, .1);
}
.panje-site-header.panje-header-scrolled .panje-brand .panje-logo {
  width: 44px !important;
  flex-basis: 44px;
}
.panje-site-header.panje-header-scrolled .panje-logo img { max-height: 42px; }
.panje-site-header.panje-header-scrolled .panje-brand-name .elementor-heading-title,
.panje-site-header.panje-header-scrolled .panje-brand-name .elementor-heading-title a { font-size: 1.13rem; }
.panje-site-header.panje-header-scrolled .panje-main-nav .elementor-nav-menu--main .elementor-item { font-size: .87rem; }
.panje-site-header.panje-header-scrolled .panje-header-cta .elementor-button {
  min-height: 40px;
  padding-block: 6px !important;
  font-size: .85rem;
  box-shadow: 0 6px 16px rgba(11, 143, 85, .16);
}
@media (max-width: 1024px) {
  .admin-bar .elementor-location-header { top: 46px; }
  .panje-site-header .elementor-menu-toggle {
    transition:
      width var(--panje-hdr-dur) var(--panje-hdr-ease),
      height var(--panje-hdr-dur) var(--panje-hdr-ease);
  }
  .panje-site-header.panje-header-scrolled .elementor-menu-toggle {
    width: 42px;
    height: 42px;
  }
}
@media (max-width: 767px) {
  .panje-site-header { padding-block: 10px !important; }
  .panje-brand .panje-logo { width: 56px !important; flex: 0 0 56px; }
  .panje-logo img { max-height: 52px; }
  .panje-brand-name .elementor-heading-title,
  .panje-brand-name .elementor-heading-title a { font-size: 1.22rem; }
  .panje-site-header.panje-header-scrolled { padding-block: 3px !important; }
  .panje-site-header.panje-header-scrolled .panje-brand .panje-logo {
    width: 40px !important;
    flex-basis: 40px;
  }
  .panje-site-header.panje-header-scrolled .panje-logo img { max-height: 38px; }
  .panje-site-header.panje-header-scrolled .panje-brand-name .elementor-heading-title,
  .panje-site-header.panje-header-scrolled .panje-brand-name .elementor-heading-title a { font-size: 1.05rem; }
}

/* ==========================================================================
   Panje - capacity panel (waitlist), process rail, about and contact
   additions. Appended rather than folded into the rules above so the new
   blocks stay readable and easy to revert.
   ========================================================================== */

/* --- Shared small parts ---------------------------------------------------- */
.panje-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid #CDE8D9;
  border-radius: 999px;
  background: #F3FBF5;
  color: #0B6B41;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.6;
}
.panje-chip .elementor-icon { width: 17px; height: 17px; }

/* --- "پنجه چطور کار می‌کند؟" - six numbered nodes on a rail ---------------- */
.panje-flow-wrap { position: relative; }
.panje-flow { position: relative; gap: 12px !important; }
.panje-flow::before {
  content: "";
  position: absolute;
  top: 0;
  /* Same reason as the origin rail: an explicit width, not just insets. */
  left: 7%;
  width: 86%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to left, rgba(11, 143, 85, .3), #A9DC3B);
  pointer-events: none;
}
.panje-step-card {
  height: 100%;
  text-align: center;
  padding: 0 13px 22px !important;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FBF9 100%) !important;
}
.panje-step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: -31px auto 15px;
  border-radius: 50%;
  background: #0B8F55;
  box-shadow: 0 0 0 7px #F6FAF7, 0 10px 22px rgba(11, 143, 85, .24);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s;
}
/* Elementor puts the number inside its own title span, so the type has to be
   set there rather than on the heading element. */
.panje-step-num .elementor-heading-title {
  margin: 0;
  color: #fff;
  font: 700 1.3rem/1 Samim, sans-serif;
}
.panje-step-card:hover .panje-step-num {
  transform: translateY(-3px) scale(1.06);
  background: #087247;
}
.panje-step-title {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.6;
  color: #17211C;
}
.panje-step-text {
  margin-top: 7px;
  font-size: .82rem;
  line-height: 1.85;
  color: #4C5F54;
}
.panje-flow-outcome {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 17px 22px;
  border: 1px solid #CDE8D9;
  border-radius: 16px;
  background: linear-gradient(110deg, #EAF5EE, #F7FBF9);
  font-size: .95rem;
  line-height: 1.8;
}
.panje-flow-outcome .panje-flow-outcome-label {
  flex: none;
  font-weight: 700;
  color: #087247;
}

/* --- Waitlist: capacity panel --------------------------------------------- */
.panje-capacity {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(22px, 3.4vw, 40px) !important;
  border: 1px solid #D9E9DE;
  border-radius: 26px;
  background: linear-gradient(140deg, #FFFFFF 0%, #F3FAF5 62%, #EAF5EE 100%);
  box-shadow: 0 22px 54px rgba(23, 33, 28, .09);
}
.panje-capacity::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  inset-inline-end: -150px;
  bottom: -190px;
  border-radius: 50%;
  border: 1px solid rgba(11, 143, 85, .12);
  pointer-events: none;
}
.panje-ring {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(126px, 15vw, 164px);
  height: clamp(126px, 15vw, 164px);
  border-radius: 50%;
  background: conic-gradient(from -90deg, #0B8F55 var(--panje-fill, 0%), #E4EFE8 0);
}
.panje-ring::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #E4EFE8;
}
.panje-ring-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1.3;
}
.panje-ring-value {
  display: block;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 700;
  color: #0B8F55;
}
.panje-ring-label {
  display: block;
  margin-top: 3px;
  font-size: .74rem;
  font-weight: 600;
  color: #52655B;
}
.panje-capacity-main { flex: 1 1 320px; min-width: 0; }
.panje-capacity-count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.panje-capacity-number {
  font-size: clamp(2.6rem, 6vw, 4.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #087247;
}
.panje-capacity-of {
  font-size: .95rem;
  font-weight: 600;
  color: #52655B;
}
.panje-capacity-text {
  margin-top: 8px;
  font-size: .93rem;
  line-height: 1.9;
  color: #40544A;
}
.panje-bar {
  position: relative;
  height: 11px;
  margin-top: 18px;
  border-radius: 999px;
  background: #E4EFE8;
  overflow: hidden;
}
.panje-bar > span {
  display: block;
  height: 100%;
  width: var(--panje-fill, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #0B8F55 0%, #57B981 55%, #A9DC3B 100%);
  box-shadow: 0 0 10px rgba(11, 143, 85, .28);
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}
.panje-capacity-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: .85rem;
  font-weight: 600;
  color: #52655B;
}
.panje-capacity-foot .panje-remaining { color: #0B8F55; }
.panje-full-note {
  margin-top: 14px;
  padding: 13px 17px;
  border: 1px solid #F2D9A8;
  border-radius: 14px;
  background: #FDF6E7;
  color: #7A5A12;
  font-size: .88rem;
  line-height: 1.8;
}
.panje-full-note[hidden] { display: none; }

/* --- About: mission panel and origin timeline ----------------------------- */
.panje-mission-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3.4vw, 42px) !important;
  border-radius: 26px;
  background: linear-gradient(135deg, #1E3A2B 0%, #27523B 55%, #2F6A48 100%);
  color: #EAF5EE;
  box-shadow: 0 24px 58px rgba(23, 33, 28, .18);
}
.panje-mission-lead {
  position: relative;
  z-index: 1;
  font-size: clamp(1.08rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.85;
  color: #fff;
}
.panje-mission-text {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-size: .95rem;
  line-height: 2;
  color: #CFE6D8;
}
.panje-mission-quote {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  padding-inline-start: 16px;
  border-inline-start: 3px solid #A9DC3B;
  font-size: .95rem;
  line-height: 2;
  color: #EAF5EE;
}
/* Flex, not grid: Elementor emits display:flex for every container in its own
   per-page stylesheet, which loads after this kit, so a grid declaration here
   loses the cascade. Child widths are set explicitly for the same reason the
   rest of the site uses .panje-grid-N > .e-con. */
.panje-origin {
  position: relative;
  flex-wrap: wrap;
  gap: 16px !important;
  margin-top: 26px;
}
.panje-origin > .e-con { width: calc(33.333% - 11px); }
/* Explicit edges AND an explicit width. With only the logical inset shorthand
   Chrome resolved this absolutely-positioned pseudo's width from the
   containing block instead of from the insets, so the rail stuck out of the
   section by ~150px and made the whole page pan sideways on desktop. */
.panje-origin::before {
  content: "";
  position: absolute;
  top: 43px;
  left: 16%;
  width: 68%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #CDE8D9 0 8px, transparent 8px 15px);
  pointer-events: none;
}
.panje-origin > .e-con { position: relative; z-index: 1; }
.panje-origin-card {
  height: 100%;
  padding: 24px 20px 22px !important;
  border: 1px solid #E2ECE5;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(23, 33, 28, .05);
}
.panje-origin-step {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #EAF5EE;
  color: #087247;
  font: 700 1rem/1 Samim, sans-serif;
}
.panje-origin-card .elementor-heading-title { font-size: 1.05rem; }
.panje-origin-text {
  margin-top: 8px;
  font-size: .88rem;
  line-height: 1.9;
  color: #4C5F54;
}

/* --- Contact -------------------------------------------------------------- */
.panje-contact-hero { position: relative; overflow: hidden; }
.panje-contact-layout {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px) !important;
}
.panje-contact-intro { flex: 1 1 320px; min-width: 0; }
.panje-contact-visual {
  position: relative;
  flex: 0 1 400px;
  min-width: 0;
  padding: 26px !important;
  border-radius: 26px;
  background: linear-gradient(140deg, #1E3A2B, #2F6A48);
  box-shadow: 0 24px 58px rgba(23, 33, 28, .2);
}
.panje-contact-visual::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  inset-inline-end: -110px;
  top: -120px;
  border-radius: 50%;
  border: 1px solid rgba(169, 220, 59, .3);
  pointer-events: none;
}
.panje-contact-visual .elementor-heading-title { color: #fff !important; }
.panje-contact-visual-text {
  position: relative;
  z-index: 1;
  font-size: .9rem;
  line-height: 1.95;
  color: #CFE6D8 !important;
}
.panje-contact-route {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 15px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  color: #EAF5EE;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.7;
}
.panje-contact-route .elementor-icon { flex: none; color: #A9DC3B; }
.panje-contact-card {
  padding: clamp(22px, 3.2vw, 38px) !important;
  border: 1px solid #E2ECE5;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(23, 33, 28, .07);
}
.panje-contact-card .panje-form { margin-top: 20px; }
.panje-form-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #E4EFE8;
  border-radius: 14px;
  background: #F6FAF7;
  font-size: .84rem;
  line-height: 1.85;
  color: #52655B;
}
.panje-form-note .elementor-icon { flex: none; margin-top: 3px; color: #0B8F55; }
.panje-expect { gap: 16px !important; flex-wrap: wrap; }
.panje-expect > .e-con { width: calc(33.333% - 11px); }
.panje-expect-card {
  height: 100%;
  padding: 22px 20px !important;
  border: 1px solid #E2ECE5;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23, 33, 28, .05);
}
.panje-expect-card .elementor-heading-title { font-size: 1.02rem; }
.panje-expect-text {
  margin-top: 7px;
  font-size: .87rem;
  line-height: 1.9;
  color: #4C5F54;
}
.panje-expect-step {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 13px;
  border-radius: 11px;
  background: #0B8F55;
  color: #fff;
  font: 700 .95rem/1 Samim, sans-serif;
}
.panje-contact-tile {
  height: 100%;
  padding: 24px 22px !important;
  border: 1px solid #E2ECE5;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFFFF, #F7FBF9);
  box-shadow: 0 12px 32px rgba(23, 33, 28, .05);
}
.panje-contact-tile .elementor-heading-title { font-size: 1.04rem; }
.panje-contact-tile-text {
  margin-top: 8px;
  font-size: .89rem;
  line-height: 1.9;
  color: #4C5F54;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .panje-capacity { flex-direction: column !important; align-items: flex-start; }
  .panje-origin > .e-con { width: calc(50% - 8px); }
  .panje-origin::before { display: none; }
  .panje-contact-layout { flex-direction: column !important; align-items: stretch; }
  .panje-contact-visual { flex: 1 1 auto; }
  .panje-expect > .e-con { width: 100%; }
  .panje-flow::before { left: 4%; width: 92%; }
}
@media (max-width: 767px) {
  /* The six rail nodes stack into one vertical timeline, rail turned. */
  .panje-flow { gap: 14px !important; }
  .panje-flow::before {
    inset-inline: auto;
    top: 26px;
    bottom: 26px;
    inset-inline-start: 31px;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, #CDE8D9 0 8px, transparent 8px 15px);
  }
  .panje-step-card {
    display: grid;
    grid-template-columns: 62px 1fr;
    align-items: start;
    gap: 0 14px;
    padding: 0 14px 18px !important;
    text-align: right;
  }
  .panje-step-num {
    grid-row: span 3;
    margin: 18px 0 0;
  }
  .panje-step-title,
  .panje-step-text { grid-column: 2; }
  .panje-step-title { padding-top: 20px; }
  .panje-step-text { margin-top: 5px; }
  .panje-flow-outcome { flex-wrap: wrap; align-items: baseline; padding: 15px 17px; }
  .panje-origin > .e-con { width: 100%; }
  .panje-capacity { padding: 22px 18px !important; }
  .panje-ring { align-self: center; }
  .panje-contact-card,
  .panje-contact-visual { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .panje-step-num,
  .panje-bar > span { transition: none !important; }
  /* The header still collapses - that is structural, not decoration - it just
     arrives instantly instead of animating. */
  .panje-site-header,
  .panje-site-header *,
  .panje-brand .panje-logo,
  .panje-logo img,
  .panje-brand-name .elementor-heading-title,
  .panje-main-nav .elementor-nav-menu--main .elementor-item,
  .panje-header-cta .elementor-button,
  .panje-site-header .elementor-menu-toggle { transition: none !important; }
}

/* ==== Panje: two-colour palette layer ==== */
/* =====================================================================
   Panje: two-colour palette layer (site-wide, kit scope)

   Green stays the default ground and the only primary action. This block
   adds the deep-green dark register and the warm amber secondary, so a
   long page stops reading as one white sheet.

   Contrast is the whole constraint here. Warm and deep green both FAIL
   with the default body grey, so every pairing below was checked:
     warm_ink  #5A3D0C on warm      #F0A93B -> 4.96:1  PASS
     white     #FFFFFF on warm_deep #B4540B -> 4.98:1  PASS
     white     #FFFFFF on deep      #123D2A -> 12.16:1 PASS
     body      #52655B on warm_soft #FDF1DC -> 5.57:1  PASS
   Do not pair dark grey with warm, or white with warm. Both fail.
   ===================================================================== */

body {
  background:
    radial-gradient(1100px 620px at 88% -6%, rgba(11, 143, 85, .07), transparent 62%),
    radial-gradient(880px 520px at 4% 4%, rgba(240, 169, 59, .07), transparent 58%),
    #F6FAF7;
}

/* =====================================================================
   Grid rhythm
   ---------------------------------------------------------------------
   The site lays its rows out with flex and sets each child's width by
   hand:
     .panje-grid-3 > .e-con { width: calc(33.333% - 16px) }
     .panje-grid-4 > .e-con { width: calc(25%    - 18px) }
     .panje-grid-6 > .e-con { width: calc(16.666% - 20px) }
   Those subtractions are the gaps, written into the widths: 48px over
   two gaps, 72px over three, 120px over five. All of them assume a 24px
   gap. No container ever declared one, so the gaps were 0 while the
   widths still gave up space for them. Every row therefore fell short
   by 48, 72 or 120px and the cards sat flush against each other.

   Declaring the gap the arithmetic was written for makes each row close
   flush at 100%:
     3 x (33.333% - 16px) + 2 x 24 = 100%
     4 x (25%    - 18px) + 3 x 24 = 100%
     6 x (16.666% - 20px) + 5 x 24 = 100%
   The tablet and phone widths assume the same 24px, so one declaration
   repairs all three breakpoints.

   !important is required, not tidy: Elementor writes these containers
   as display:var(--display) with --display:flex and loads its own
   per-page stylesheet after this kit.
   ===================================================================== */

.panje-grid-3,
.panje-grid-4,
.panje-grid-6 {
  gap: 24px !important;
}

/* The flow row is the one exception: six discs need the tighter 12px so
   the rail reads as a connector and not as a divider. Restated after the
   rule above so the exception actually wins. */
.panje-flow {
  gap: 12px !important;
}

/* =====================================================================
   Cascade repair
   ---------------------------------------------------------------------
   Elementor emits a widget-scoped rule for every button, of the shape
     .elementor-67 .elementor-element.elementor-element-XXXX .elementor-button
   which is four classes deep, and its per-page stylesheet loads AFTER this
   kit. A kit rule written against a class such as
   .panje-btn-primary .elementor-button is only two deep, so Elementor always
   won, whatever order the rules were written in. That is why the primary
   button stayed #0B8F55 with white text at 4.14:1 instead of accent_deep.

   Raising the .elementor-kit-18 to four classes ties it, and the kit loading first
   then loses. The buttons are fixed here because they are cheap to target.
   Icons cannot be fixed from the kit at all: Elementor's stacked-icon rule
   is five classes deep, so those repairs are page-scoped instead.
   ===================================================================== */

/* Secondary button: amber fill with warm ink. 6.02:1. */
.elementor-element.panje-btn-secondary .elementor-button {
  background: #F0A93B;
  color: #4A3108;
  border-color: #F0A93B;
}

/* Primary button: accent_deep, not accent. White on accent is 4.14:1 and
   fails; white on accent_deep is 5.99:1 and passes. */
.elementor-element.panje-btn-primary .elementor-button {
  background: #087247;
  border-color: #087247;
  color: #fff;
  box-shadow: 0 7px 19px rgba(8, 114, 71, .2);
}

/* --- More green, at the rhythm level ------------------------------- */
.panje-soft-section {
  background: linear-gradient(180deg, #EAF5EE 0%, #E3F1E9 100%) !important;
}

.panje-tint-section {
  background: linear-gradient(180deg, #F1F8F4 0%, #E9F4EE 100%) !important;
}

.panje-section-intro .panje-kicker,
.panje-kicker {
  background: #E7F4EC;
  border-color: #C3E3D1;
  color: #0A6E42;
}

/* The soft section's corner circle reads better in deep green now. */
.panje-soft-section::before,
.panje-final-cta::before { border-color: rgba(11, 143, 85, .16); }

/* --- The deep-green register --------------------------------------- */
.panje-deep-section {
  background:
    radial-gradient(900px 460px at 84% 0%, rgba(240, 169, 59, .16), transparent 60%),
    linear-gradient(165deg, #17452F 0%, #123D2A 52%, #0E3222 100%) !important;
  box-shadow: 0 24px 58px rgba(18, 61, 42, .28);
}

.panje-deep-section .elementor-heading-title,
.panje-deep-section .panje-section-lead,
.panje-deep-section .panje-highlight-copy { color: #fff !important; }

.panje-deep-section .panje-section-lead { color: #D3E7DB !important; }

.panje-deep-section .panje-kicker {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #FFD98A;
}

.panje-deep-section .panje-card {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: none;
  backdrop-filter: blur(2px);
}

.panje-deep-section .panje-card .elementor-heading-title { color: #fff !important; }

.panje-deep-section .panje-card-text { color: #C9DED3; }

.panje-deep-section .panje-card:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(240, 169, 59, .5) !important;
}

/* The science line is the one warm accent inside the dark register. */
.panje-deep-section .panje-science-line { color: #FFC773 !important; }

/* --- The warm secondary -------------------------------------------- */
.panje-warm-section {
  background: linear-gradient(165deg, #FDF1DC 0%, #FBE9CC 100%) !important;
}

.panje-warm-section .panje-kicker {
  background: #FFFFFF;
  border-color: #EBC98A;
  color: #8A4B06;
}

.panje-warm-section .panje-card {
  background: rgba(255, 255, 255, .78) !important;
  border-color: #EBC98A !important;
  box-shadow: 0 8px 26px rgba(138, 75, 6, .07);
}

.panje-warm-section .panje-card:hover {
  border-color: #D9A24A !important;
  box-shadow: 0 16px 40px rgba(138, 75, 6, .13);
}

.panje-warm-section .panje-card-title .elementor-heading-title { color: #5A3D0C; }

/* Warm chips. Glyph uses warm_deep on warm_soft, never the reverse. */
.panje-chip-warm .elementor-icon {
  background: #FDF1DC !important;
  color: #B4540B !important;
}

/* Badges. Dark text on warm, never the reverse. */
.panje-badge-warm {
  background: #F0A93B;
  color: #4A3108;
}

.panje-badge-soon {
  background: #F0A93B;
  color: #4A3108;
}

/* Secondary button. The primary stays green everywhere. */
.panje-btn-secondary .elementor-button {
  background: #F0A93B;
  color: #4A3108;
  box-shadow: 0 7px 19px rgba(180, 84, 11, .2);
}

.panje-btn-secondary .elementor-button:hover { background: #E09A22; }

/* --- Progress fills end warm --------------------------------------- */
.panje-bar > span {
  background: linear-gradient(90deg, #0B8F55 0%, #2FA86C 48%, #F0A93B 100%);
}

/* --- Focus ring, on every ground ----------------------------------- */
.panje-section a:focus-visible,
.panje-site-footer a:focus-visible,
.panje-site-header a:focus-visible,
.panje-section button:focus-visible,
.panje-section input:focus-visible,
.panje-section select:focus-visible,
.panje-section textarea:focus-visible {
  outline: 3px solid #B4540B !important;
  outline-offset: 3px;
}

.panje-deep-section a:focus-visible,
.panje-deep-section button:focus-visible { outline-color: #FFC773 !important; }

@media (prefers-reduced-motion: reduce) {
  .panje-card,
  .panje-card-icon .elementor-icon,
  .panje-btn-secondary .elementor-button { transition: none !important; }
}
/* --- Aliases: wire the new register onto the classes already in use --- */

/* The site's dark section is the deep-green register; it was set to a
   near-black #17211C in the editor, which is why the page still read
   light overall. */
.panje-dark-section {
  background:
    radial-gradient(900px 460px at 84% 0%, rgba(240, 169, 59, .16), transparent 60%),
    linear-gradient(165deg, #17452F 0%, #123D2A 52%, #0E3222 100%) !important;
  box-shadow: 0 24px 58px rgba(18, 61, 42, .28);
}

.panje-dark-section .panje-card {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: none;
}

.panje-dark-section .panje-card .elementor-heading-title { color: #fff !important; }

.panje-dark-section .panje-card-text { color: #C9DED3; }

.panje-dark-section .panje-card:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(240, 169, 59, .5) !important;
}

.panje-dark-section .panje-section-lead { color: #D3E7DB !important; }

.panje-dark-section .panje-kicker {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #FFD98A;
}

.panje-dark-section .panje-science-line { color: #FFC773 !important; }

/* The warning section is already a warm ground in the editor (#FFF9E8).
   Bring it onto the warm token so the family is explicit. */
.panje-warning-section {
  background: linear-gradient(170deg, #FDF1DC 0%, #FBE9CC 100%) !important;
}

.panje-warning-section .panje-kicker {
  background: #FFFFFF;
  border-color: #EBC98A;
  color: #8A4B06;
}

.panje-warning-section .elementor-heading-title { color: #4A3108; }

/* Flow step numbers take the warm family on every third disc, so the
   six-across row reads as a sequence instead of one repeated green. */
.panje-flow > .e-con:nth-child(3n + 2) .panje-step-num {
  background: #B4540B;
  box-shadow: 0 0 0 7px #F6FAF7, 0 10px 22px rgba(180, 84, 11, .26);
}

.panje-flow > .e-con:nth-child(3n + 2) .panje-step-num .elementor-heading-title { color: #fff; }

.panje-flow > .e-con:nth-child(3n + 2) .panje-step-card:hover .panje-step-num { background: #D2750F; }

/* The rail runs right to left, matching RTL reading order: it starts
   solid at the right (step 1) and resolves into the warm accent at the
   left (the last step). It used to start faint and end solid, which
   pointed the sequence the wrong way. The lime it replaced failed
   contrast against the ground anyway. */
.panje-flow::before {
  background: linear-gradient(to left, #0B8F55 0%, #2FA86C 52%, #F0A93B 100%);
}

/* White on #0B8F55 is 4.14:1 and fails AA. The flow discs and the
   capacity bar carry white numerals, so the disc moves to accent_deep. */
.panje-step-num { background: #087247; }

.panje-step-num:hover { background: #0A6E42; }

/* ==== Panje consistency repair 2026-10-08 ==== */
/* One green icon-chip family across marketing cards. */
html body .elementor[data-elementor-id] .panje-grid-3 > .e-con:nth-child(n) .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon,
html body .elementor[data-elementor-id] .panje-grid-4 > .e-con:nth-child(n) .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon,
html body .elementor[data-elementor-id] .panje-grid-6 > .e-con:nth-child(n) .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon,
html body .elementor[data-elementor-id] .panje-card > .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon {
  background-color: #EAF5EE !important;
  color: #087247 !important;
}
html body .elementor[data-elementor-id] .panje-grid-3 > .e-con:nth-child(n) .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon svg,
html body .elementor[data-elementor-id] .panje-grid-4 > .e-con:nth-child(n) .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon svg,
html body .elementor[data-elementor-id] .panje-grid-6 > .e-con:nth-child(n) .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon svg,
html body .elementor[data-elementor-id] .panje-card > .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon svg {
  fill: #087247 !important;
}
.panje-grid-3,
.panje-grid-4,
.panje-grid-6 {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
.panje-grid-3 > .e-con,
.panje-grid-4 > .e-con,
.panje-grid-6 > .e-con {
  min-height: 0 !important;
  align-self: stretch !important;
}
.panje-grid-3 > .e-con.panje-card,
.panje-grid-4 > .e-con.panje-card,
.panje-grid-6 > .e-con.panje-card {
  height: auto !important;
}
.elementor-44 .panje-expect {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px !important;
  align-items: start !important;
}
.elementor-44 .panje-expect > .e-con,
.elementor-44 .panje-expect-card {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}
@media (max-width: 1024px) {
  .elementor-44 .panje-expect {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) {
  .panje-site-footer .panje-footer-brand {
    align-items: center !important;
    text-align: center;
  }
  .panje-site-footer .panje-footer-logo {
    margin-inline: auto !important;
    align-self: center !important;
  }
  .panje-site-footer .panje-footer-logo img {
    transform: translateY(3px) scale(.98) !important;
    transform-origin: center center;
  }
}
/* ==== End Panje consistency repair 2026-10-08 ==== */

/* ==== Panje follow-up visual repair 2026-10-08 ==== */
/* Icon background is set on both the Elementor widget and its inner chip. */
html body .elementor .elementor-element.panje-card-icon.elementor-widget-icon,
html body .elementor .elementor-element.panje-card-icon.elementor-widget-icon .elementor-widget-container {
  background: transparent !important;
}
html body .elementor .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon {
  display: inline-grid !important;
  place-items: center;
  width: 42px !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #EAF5EE !important;
  color: #087247 !important;
}
html body .elementor .elementor-element.panje-card-icon.elementor-view-stacked .elementor-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: #087247 !important;
}

/* Give the home "behind Panje" section a definite green ground. */
.elementor-67 .elementor-element.elementor-element-e44d66f.panje-dark-section {
  background: linear-gradient(150deg, #087247 0%, #123D2A 68%, #123D2A 100%) !important;
  background-color: #123D2A !important;
}

/* Footer columns and spacing. */
.panje-site-footer .panje-footer-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .9fr);
  align-items: start !important;
  gap: 40px !important;
  padding: 44px 8px 36px;
}
.panje-site-footer .panje-footer-grid > .e-con {
  width: auto !important;
  min-width: 0;
  flex: none !important;
}
.panje-site-footer .panje-footer-brand {
  align-items: flex-start;
  gap: 12px !important;
}
.panje-site-footer .panje-footer-company {
  margin-top: 0 !important;
}
.panje-site-footer .panje-footer-company p,
.panje-site-footer .panje-footer-bottom p {
  margin: 0;
}
.panje-site-footer .panje-footer-links {
  align-items: flex-start !important;
  gap: 10px !important;
}
.panje-site-footer .panje-footer-title {
  margin-bottom: 6px;
}
.panje-site-footer .panje-footer-links .elementor-button {
  line-height: 1.8;
}
.panje-site-footer .panje-footer-links img {
  display: block;
  max-width: 88px;
  max-height: 88px;
  object-fit: contain;
}
.panje-site-footer .panje-footer-bottom {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}
@media (max-width: 767px) {
  .panje-site-footer .panje-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px !important;
    row-gap: 28px !important;
    padding: 34px 4px 30px;
  }
  .panje-site-footer .panje-footer-brand {
    grid-column: 1 / -1;
    align-items: center !important;
    text-align: center;
  }
  .panje-site-footer .panje-footer-logo {
    margin-inline: auto !important;
    align-self: center !important;
  }
  .panje-site-footer .panje-footer-logo img {
    transform: translateY(3px) scale(.98) !important;
    transform-origin: center center;
  }
  .panje-site-footer .panje-footer-copy,
  .panje-site-footer .panje-footer-company,
  .panje-site-footer .panje-footer-brand .elementor-widget-text-editor {
    max-width: 36ch;
    margin-inline: auto;
    text-align: center !important;
  }
  .panje-site-footer .panje-footer-bottom {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center;
    gap: 6px !important;
  }
  .panje-site-footer .panje-footer-bottom .elementor-widget,
  .panje-site-footer .panje-footer-bottom .elementor-widget-text-editor {
    text-align: center !important;
  }
}
/* ==== End Panje follow-up visual repair 2026-10-08 ==== */

/* ==== Panje home card row 2026-10-08 ==== */
/* Four introductory cards should close as one row. */
.elementor-67 .panje-bento {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px !important;
  align-items: stretch !important;
}
.elementor-67 .panje-bento > .e-con {
  width: auto !important;
  min-width: 0;
  height: auto !important;
}
@media (max-width: 1024px) {
  .elementor-67 .panje-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .elementor-67 .panje-bento { grid-template-columns: minmax(0, 1fr); }
}
/* ==== End Panje home card row 2026-10-08 ==== *//* End custom CSS */