.elementor-kit-6{--e-global-color-primary:#183324;--e-global-color-secondary:#E2A63B;--e-global-color-text:#15190F;--e-global-color-accent:#9A6312;--e-global-color-dapaper:#F4F0E8;--e-global-color-dapaperd:#EAE4D7;--e-global-color-daforestd:#0F2218;--e-global-color-damuted:#4E5245;--e-global-color-damutedd:#C9D2C4;--e-global-color-dabody:#3C4036;--e-global-typography-primary-font-family:"Bricolage Grotesque";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1em;--e-global-typography-primary-letter-spacing:-0.03em;--e-global-typography-secondary-font-family:"Instrument Serif";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1em;--e-global-typography-secondary-letter-spacing:0em;--e-global-typography-text-font-family:"Bricolage Grotesque";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.6em;--e-global-typography-text-letter-spacing:0em;--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1.5em;--e-global-typography-accent-letter-spacing:0.14em;background-color:var( --e-global-color-dapaper );color:var( --e-global-color-text );font-family:"Bricolage Grotesque", Sans-serif;font-size:18px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;line-height:1.6em;letter-spacing:0em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.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);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@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 *//* =====================================================================
   Durian Africa — Site Custom CSS (v2)
   Lives in: Elementor → Site Settings → Custom CSS
   Every rule targets a CSS class set in Elementor (Advanced → CSS Classes)
   or Elementor's own widget markup. Content stays editable in the editor.
   Tested on Elementor 4.3.5 + PRO Elements 4.3.2 + Hello Elementor 3.5.1.
   ===================================================================== */


/* ---------- 1. Accent italics inside headings ----------------------------
   Type <em>…</em> inside a Heading title to get the serif italic accent. */
.elementor-heading-title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.da-em-ochre em  { color: #E2A63B; }
.da-em-ochret em { color: #9A6312; }
.da-em-forest em { color: #183324; }
.da-dot          { color: #E2A63B; }


/* ---------- 2. Anchors, fixed header offsets ----------------------------- */
html { scroll-behavior: smooth; }
.da-anchor { scroll-margin-top: 100px; }
/* pages without a full-bleed hero (e.g. Privacy Policy) start below the header */
body:not(.home) main.site-main { padding-top: clamp(110px, 12vw, 140px); }
/* keep the floating header below the WordPress admin bar when logged in */
body.admin-bar .da-header { top: 46px !important; }
@media (min-width: 783px) { body.admin-bar .da-header { top: 46px !important; } }
@media (max-width: 782px) { body.admin-bar .da-header { top: 60px !important; } }


/* ---------- 3. Header ----------------------------------------------------- */
.da-header { pointer-events: none; }
.da-header > * { pointer-events: auto; }
.da-header-bar {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}


/* ---------- 4. Grain texture (replace https://www.durianafrica.org/wp-content/uploads/2026/10/da-grain-160.png after media upload) ------ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: multiply;
  background: url('https://www.durianafrica.org/wp-content/uploads/2026/10/da-grain-160.png') repeat;
}


/* ---------- 5. Pill buttons with the arrow in an Ochre circle ------------
   Elementor's Button widget has no background control for its icon. */
.da-btn-pill .elementor-button-content-wrapper { align-items: center; }
.da-btn-pill .elementor-button-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E2A63B;
}
.da-btn-sm .elementor-button-icon { width: 30px; height: 30px; }
.da-btn-pill .elementor-button-icon svg { width: 14px; height: 14px; fill: #15190F; }


/* ---------- 6. Hero -------------------------------------------------------- */
.da-hero-intro strong { color: #F4F0E8; font-weight: 600; }
.da-btn-ghost .elementor-button {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* the badge rotation is native: Text Path widget → Advanced → Motion Effects → Scrolling Effects → Rotate */


/* ---------- 7. Value-chain marquee ---------------------------------------- */
@keyframes daMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.da-marquee { overflow: hidden; }
.da-marquee-row {
  width: max-content !important;
  max-width: none !important;
  flex-wrap: nowrap !important;
  animation: daMarq 48s linear infinite;
}
.da-marquee-row--rev { animation-duration: 56s; animation-direction: reverse; }
.da-mq-word .elementor-heading-title { white-space: nowrap; }


/* ---------- 8. FMTP expanding panels --------------------------------------
   Desktop priority: mouse hover > keyboard focus > default (Finance).
   Tablet/mobile: panels stack and every panel shows its content. */
.da-fmtp-panel { position: relative; overflow: hidden; cursor: pointer; }
.da-fmtp-panel:focus-visible { outline: 2px solid #E2A63B; outline-offset: 3px; }
.da-fmtp-panel .da-fmtp-media,
.da-fmtp-panel .da-shade { inset: 0; }
.da-fmtp-media { transition: filter .8s ease, transform 1.4s ease; }
.da-fmtp-bottom { display: grid !important; align-items: end; }
.da-fmtp-bottom > * { grid-area: 1 / 1; }
.da-fmtp-label .elementor-heading-title { writing-mode: vertical-rl; transform: rotate(180deg); }
.da-fmtp-letter .elementor-heading-title { transition: color .6s ease; }
.da-glass {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (min-width: 1025px) {
  .da-fmtp-panels > .da-fmtp-panel {
    flex: 1 1 0% !important;
    min-width: 0;
    transition: flex-grow .8s cubic-bezier(.7, 0, .2, 1);
  }
  /* the text block is pinned to the panel's bottom corner so hidden text never stretches a closed panel */
  .da-fmtp-panel .da-fmtp-bottom {
    position: absolute !important;
    left: clamp(24px, 3vw, 40px);
    right: 24px;
    bottom: clamp(24px, 3vw, 40px);
  }
  .da-fmtp-panel .da-fmtp-content { min-width: 440px; }
  .da-fmtp-content { transition: opacity .5s ease, transform .7s ease; }
  .da-fmtp-label   { transition: opacity .4s ease; }

  /* CLOSED look: every panel starts closed */
  .da-fmtp-panel .da-fmtp-media   { filter: grayscale(1) contrast(1.05); transform: scale(1.12); --overlay-opacity: .55; }
  .da-fmtp-panel .da-fmtp-content { opacity: 0; transform: translateY(24px); pointer-events: none; transition-delay: 0s; }
  .da-fmtp-panel .da-fmtp-label   { opacity: 1; }

  /* 1 OPEN: the default panel */
  .da-fmtp-panels > .da-fmtp-panel.da-active { flex-grow: 4.2 !important; }
  .da-fmtp-panels > .da-fmtp-panel.da-active .da-fmtp-media   { filter: none; transform: scale(1.02); --overlay-opacity: .15; }
  .da-fmtp-panels > .da-fmtp-panel.da-active .da-fmtp-content { opacity: 1; transform: none; pointer-events: auto; transition-delay: .35s; }
  .da-fmtp-panels > .da-fmtp-panel.da-active .da-fmtp-label   { opacity: 0; }
  .da-fmtp-panels > .da-fmtp-panel.da-active .da-fmtp-letter .elementor-heading-title { color: #E2A63B; }

  /* 2 CLOSE: anything without keyboard focus while focus is in the row */
  .da-fmtp-panels:focus-within > .da-fmtp-panel:not(:focus-within) { flex-grow: 1 !important; }
  .da-fmtp-panels:focus-within > .da-fmtp-panel:not(:focus-within) .da-fmtp-media   { filter: grayscale(1) contrast(1.05); transform: scale(1.12); --overlay-opacity: .55; }
  .da-fmtp-panels:focus-within > .da-fmtp-panel:not(:focus-within) .da-fmtp-content { opacity: 0; transform: translateY(24px); pointer-events: none; transition-delay: 0s; }
  .da-fmtp-panels:focus-within > .da-fmtp-panel:not(:focus-within) .da-fmtp-label   { opacity: 1; }
  .da-fmtp-panels:focus-within > .da-fmtp-panel:not(:focus-within) .da-fmtp-letter .elementor-heading-title { color: #F4F0E8; }

  /* 3 OPEN: the keyboard-focused panel */
  .da-fmtp-panels:focus-within > .da-fmtp-panel:focus-within { flex-grow: 4.2 !important; }
  .da-fmtp-panels:focus-within > .da-fmtp-panel:focus-within .da-fmtp-media   { filter: none; transform: scale(1.02); --overlay-opacity: .15; }
  .da-fmtp-panels:focus-within > .da-fmtp-panel:focus-within .da-fmtp-content { opacity: 1; transform: none; pointer-events: auto; transition-delay: .35s; }
  .da-fmtp-panels:focus-within > .da-fmtp-panel:focus-within .da-fmtp-label   { opacity: 0; }
  .da-fmtp-panels:focus-within > .da-fmtp-panel:focus-within .da-fmtp-letter .elementor-heading-title { color: #E2A63B; }

  /* 4 CLOSE: anything not under the mouse while the mouse is over the row */
  .da-fmtp-panels:hover > .da-fmtp-panel:not(:hover) { flex-grow: 1 !important; }
  .da-fmtp-panels:hover > .da-fmtp-panel:not(:hover) .da-fmtp-media   { filter: grayscale(1) contrast(1.05); transform: scale(1.12); --overlay-opacity: .55; }
  .da-fmtp-panels:hover > .da-fmtp-panel:not(:hover) .da-fmtp-content { opacity: 0; transform: translateY(24px); pointer-events: none; transition-delay: 0s; }
  .da-fmtp-panels:hover > .da-fmtp-panel:not(:hover) .da-fmtp-label   { opacity: 1; }
  .da-fmtp-panels:hover > .da-fmtp-panel:not(:hover) .da-fmtp-letter .elementor-heading-title { color: #F4F0E8; }

  /* 5 OPEN: the panel under the mouse (wins over everything above) */
  .da-fmtp-panels:hover > .da-fmtp-panel:hover { flex-grow: 4.2 !important; }
  .da-fmtp-panels:hover > .da-fmtp-panel:hover .da-fmtp-media   { filter: none; transform: scale(1.02); --overlay-opacity: .15; }
  .da-fmtp-panels:hover > .da-fmtp-panel:hover .da-fmtp-content { opacity: 1; transform: none; pointer-events: auto; transition-delay: .35s; }
  .da-fmtp-panels:hover > .da-fmtp-panel:hover .da-fmtp-label   { opacity: 0; }
  .da-fmtp-panels:hover > .da-fmtp-panel:hover .da-fmtp-letter .elementor-heading-title { color: #E2A63B; }
}
@media (max-width: 1024px) {
  .da-fmtp-label { display: none; }
  .da-fmtp-panel .da-fmtp-media { --overlay-opacity: .3; }
}


/* ---------- 9. Sticky stacking value-chain cards ---------------------------
   Do NOT use Motion Effects → Sticky on these. Parent containers must keep
   Overflow: Default (not Hidden), or sticky stops working. */
@media (min-width: 768px) {
  .da-stack-card { position: sticky; }
  .da-stack-1 { top: 96px; }
  .da-stack-2 { top: 120px; }
  .da-stack-3 { top: 144px; }
  .da-stack-4 { top: 168px; }
}


/* ---------- 10. "Explore the proposition" accordion as a pill button ------ */
.da-prop .e-n-accordion-item > .e-n-accordion-item-title {
  display: inline-flex !important;
  align-self: flex-start;
  width: auto !important;
  align-items: center;
  cursor: pointer;
}
.da-prop .e-n-accordion-item > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
  display: grid !important;
  place-items: center;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
}
.da-prop .e-n-accordion-item-title-icon span { display: flex; }
.da-prop .e-n-accordion-item-title-icon svg { width: 12px !important; height: 12px !important; }
.da-prop--forest .e-n-accordion-item-title-icon,
.da-prop--ink .e-n-accordion-item-title-icon    { background: #E2A63B; }
.da-prop--forest .e-n-accordion-item-title-icon svg,
.da-prop--ink .e-n-accordion-item-title-icon svg { fill: #15190F; }
.da-prop--ochre .e-n-accordion-item-title-icon  { background: #15190F; }
.da-prop--ochre .e-n-accordion-item-title-icon svg { fill: #E2A63B; }
.da-prop--paper .e-n-accordion-item-title-icon  { background: #183324; }
.da-prop--paper .e-n-accordion-item-title-icon svg { fill: #F4F0E8; }
.da-card-forest .da-prop-box strong,
.da-card-ink .da-prop-box strong   { color: #E2A63B; font-weight: 600; }
.da-card-ochre .da-prop-box strong { color: #15190F; font-weight: 700; }
.da-card-paper .da-prop-box strong { color: #183324; font-weight: 700; }


/* ---------- 11. Roots image band: corner-clip reveal -----------------------
   Progressive enhancement. Browsers without scroll-driven animation show
   the finished state. The zoom uses native Background Motion Effects. */
/* Elementor's background motion-effects layer paints above the overlay; restore the order:
   photo (zooming) → dark gradient → text */
.da-roots-band::before { z-index: 1; }
.da-roots-band > .e-con { z-index: 2; }
@keyframes daReveal {
  from { clip-path: inset(0 4% round 32px); }
  to   { clip-path: inset(0 0 round 0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .da-roots-band { animation: daReveal linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}


/* ---------- 12. Partner pathway tabs (label · title + sub · arrow) -------- */
.da-pathways .e-n-tab-title { width: 100%; text-align: start; }
.da-pathways .e-n-tab-title > .e-n-tab-title-text { flex: 1 1 auto; }
.da-pathways .e-n-tab-title-text {
  display: grid !important;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.da-tab-label { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .12em; opacity: .8; }
.da-tab-main  { display: flex; flex-direction: column; gap: 2px; }
.da-tab-main strong { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.da-tab-sub   { font-size: 15px; opacity: .85; }
.da-tab-arrow { font-size: 22px; line-height: 1; }
@media (max-width: 767px) {
  .da-pathways .e-n-tab-title-text { grid-template-columns: 1fr auto; row-gap: 6px; }
  .da-tab-label { grid-column: 1 / -1; }
}


/* ---------- 13. Enquiry form (Fluent Forms) --------------------------------
   Labels, fields, focus state, button colours and messages are set natively in the
   Fluent Forms widget's Style tab. CSS only does what those controls cannot:
   brand-coloured pill shapes for Fluent's native "Button" radio layout, and the
   Ochre arrow circle on the submit button. Class da-form is on the widget. */
/* Fluent stacks these full width under 768px; keep them as wrapping pills */
.da-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check { display: inline-block !important; width: auto !important; margin: 0 8px 8px 0 !important; }
.da-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
  border: 1px solid rgba(21,25,15,.2) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  background: transparent;
  color: #15190F;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 16px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.da-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover { color: #183324; border-color: #183324 !important; }
.da-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span {
  background: #183324; border-color: #183324 !important; color: #F4F0E8; }
.da-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within span {
  background-color: transparent; outline: 2px solid #183324; outline-offset: 2px; }
.da-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label:focus-within span { background-color: #183324; }
.da-form .ff-btn-submit {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.da-form .ff-btn-submit::after {
  content: "→";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  margin-left: 14px;
  border-radius: 50%;
  background: #E2A63B;
  color: #15190F;
  font-size: 18px;
  line-height: 1;
}
.da-form-note a { color: #183324; text-decoration: underline; text-underline-offset: 3px; }


/* ---------- 14. Reduced motion ------------------------------------------------
   Visitors who ask their device for less motion get a still page:
   no marquee, no spinning badge, no panel animation, and the hero shows
   its fallback image instead of the video. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .da-marquee-row { animation: none !important; }
  .da-fmtp-panel, .da-fmtp-panel *, .da-fmtp-media { transition: none !important; }
  .da-motion-video .elementor-background-video-container { display: none !important; }
}/* End custom CSS */