.elementor-6465 .elementor-element.elementor-element-fq-faq-wrap{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6465 .elementor-element.elementor-element-fq-faq-wrap.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-6465 .elementor-element.elementor-element-fq-acc{width:var( --container-widget-width, 900px );max-width:900px;--container-widget-width:900px;--container-widget-flex-grow:0;}.elementor-6465 .elementor-element.elementor-element-fq-acc.elementor-element{--align-self:center;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-item{border-width:0px;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-item .elementor-tab-content{border-width:0px;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-item .elementor-tab-title.elementor-active{border-width:0px;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title{background-color:#FEFCF4;padding:8px 30px 8px 30px;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon, .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-title{color:#18360D;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon svg{fill:#18360D;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-active .elementor-accordion-icon, .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-active .elementor-accordion-title{color:#FFFFFF;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-active .elementor-accordion-icon svg{fill:#FFFFFF;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-title{font-family:"Merriweather", Sans-serif;font-size:21px;font-weight:400;text-decoration:none;line-height:1.3em;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title .elementor-accordion-icon i:before{color:#18360D;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title .elementor-accordion-icon svg{fill:#18360D;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title.elementor-active .elementor-accordion-icon i:before{color:#18360D;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title.elementor-active .elementor-accordion-icon svg{fill:#18360D;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon{margin-inline-end:20px;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-content{background-color:#FFFFFF;color:#565656;font-family:"DM Sans", Sans-serif;font-size:16px;font-weight:400;padding:10px 30px 0px 30px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-6465 .elementor-element.elementor-element-fq-faq-wrap{--width:100%;}}@media(max-width:1024px){.elementor-6465 .elementor-element.elementor-element-fq-acc{width:100%;max-width:100%;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title{padding:8px 30px 8px 30px;}}@media(max-width:767px){.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-title{font-size:18px;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title{padding:12px 20px 12px 20px;}.elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-content{padding:10px 20px 0px 20px;}}/* Start custom CSS for accordion, class: .elementor-element-fq-acc *//* FAQ accordion (s10-accordion): pill rows, green open row, yellow chevron circle, matching Figma node 16669:754.
   Applies at all breakpoints (was desktop-only, which left the open question white-on-cream on tablet/mobile).
   Scoped to this widget only via the ".elementor-6465 .elementor-element.elementor-element-fq-acc" prefix. */
/* Spacing between rows: Figma gap-[15px] separating the open row+answer from the closed list,
     gap-[10px] between each closed row */
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-item + .elementor-accordion-item {
    margin-top: 10px;
  }
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-item:first-child {
    margin-bottom: 15px;
  }

  /* Row shape + height: Figma rounded-[73px] pill, min h-[60px] on every question row
     (min-height, not a hard height, so the row can grow if a title ever wraps).
     Vertical title_padding is set natively (Style tab: 8px desktop/tablet, 12px mobile) so wrapped questions keep breathing room; single-line rows stay at this 60px min-height. Horizontal padding is 30px (20px mobile). Same rule for active
     and inactive rows. */
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title {
    border-radius: 73px;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 60px;
  }

  /* Actual rendered DOM (verified via REST API) has the icon <span> BEFORE the title <a>,
     so default flex row order puts the icon first/left. Explicit "order" fixes this
     regardless of DOM order: title first visually (order:1) and given flex:1 so it fills
     the row, icon last visually (order:2) at a fixed width so it lands at the true right
     edge - no absolute positioning, no dependency on Elementor's own markup order. */
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title .elementor-accordion-title {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Active/open row fill: Figma bg-[#18360d], applied only while the row is expanded.
     Closed rows keep the native "title_background" (#FEFCF4) set on the Style tab. */
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title.elementor-active {
    background-color: #18360D;
  }

  /* Expand/collapse control: Figma 43x43 circle bg-[#fadf7d] behind the chevron icon,
     present on both open and closed rows. order:2 (paired with the title's order:1 above)
     puts it last in visual flex order regardless of its earlier position in the DOM. */
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background-color: #FADF7D;
    flex-shrink: 0;
    order: 2;
  }

  /* Icon state wrappers: base sizing only, no display set here - display is decided
     explicitly below per state so exactly ONE of closed/opened ever renders. */
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon-closed,
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon-opened {
    position: relative;
    width: 24px;
    height: 24px;
  }

  /* Inactive row: show the closed-state icon only, hide the opened-state one */
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon-closed {
    display: inline-flex;
  }
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon-opened {
    display: none;
  }

  /* Active row: show the opened-state icon only, hide the closed-state one
     (same glyph either way, per Figma - both states use one identical chevron) */
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title.elementor-active .elementor-accordion-icon-closed {
    display: none;
  }
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title.elementor-active .elementor-accordion-icon-opened {
    display: inline-flex;
  }

  /* Icon glyph: reproduces the ACTUAL Figma vector (node icon-park-outline:down inside
     16669:754 - 24x24, single path "M18 9L12 15L6 9", stroke #18360D, stroke-width 2,
     round linecap/linejoin) instead of the Font Awesome "angle-down" SVG Elementor actually
     renders (verified via REST API: <svg class="e-font-icon-svg e-fas-angle-down">).
     Hides that rendered SVG inside whichever wrapper is visible, then paints the exact
     Figma shape as a CSS mask on a pseudo-element, sized 24x24 and centered in the badge. */
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon-closed > *,
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon-opened > * {
    visibility: hidden;
  }
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon-closed::after,
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon-opened::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #18360D;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 9L12 15L6 9' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 9L12 15L6 9' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

/* Mobile: slightly smaller chevron circle so long questions keep more width */
@media (max-width: 767px) {
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon { width: 36px; height: 36px; }
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon-closed, .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-accordion-icon-opened { width: 20px; height: 20px; }
}

/* Spacing refinement 2026-10-08: at 1024px and below keep at least 12px between the question text and the chevron
   (the native icon spacing lands on the outer side of the chevron because CSS re-orders it to the right). */
@media (max-width: 1024px) {
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title { gap: 12px; }
}

/* Spacing refinement 2026-10-08: on mobile cap the corner radius at 28px (approved Tier 1 treatment) so wrapped
   questions are not cut into by a full-height pill curve. */
@media (max-width: 767px) {
  .elementor-6465 .elementor-element.elementor-element-fq-acc .elementor-tab-title { border-radius: 28px; }
}/* End custom CSS */