/* OLEA Refresh: preserve-mode redesign layer.
   Dials: VARIANCE 4 / MOTION 3 / DENSITY 5.
   Brand palette: gold #F8AF3C + rust #B7482B accents, charcoal #2B2825 dark, cream surfaces (from the OLEA logo), radius system: interactive + media 4px, badges pill. */

/* ---------- 1. Typography ---------- */

.elementor-widget-heading .elementor-heading-title {
  letter-spacing: -0.01em;
}

/* Kept eyebrows (max 1 per 3 sections): legible size, consistent tracking */
.elementor-element-98c9caa p,
.elementor-element-91b9e9b p,
.elementor-element-d7a3851 p,
.elementor-element-1744103 p,
.elementor-element-6d1addf p {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}

/* Services grid card copy: 13px is below comfortable reading size */
.elementor-element-278ab0c .elementor-widget-text-editor p {
  font-size: 14px !important;
}

/* ---------- 2. Header & logo ---------- */

img[src*="OLEA-logo"] {
  max-width: 170px !important;
  height: auto !important;
}

/* Mobile header: logo left, hamburger right on ONE row; CTAs and the
   hover mega-panel are desktop-only. */
@media (max-width: 767px) {
  .elementor-element-d2e2c40 {
    --flex-wrap-mobile: nowrap;
    flex-wrap: nowrap !important;
    align-items: center;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .elementor-element-d2e2c40 > .elementor-element-43fa8a7 {
    --width: auto;
    flex-shrink: 1;
  }

  .elementor-element-d2e2c40 > .elementor-element-306e956 {
    --width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }

  .olea-header-cta,
  .olea-mega-panel {
    display: none !important;
  }

  /* logo: explicit width so the auto-sized column can't collapse it */
  .elementor-element-43fa8a7 img[src*="OLEA-logo"] {
    width: 120px !important;
    max-width: 120px !important;
  }

  .elementor-element-aaaec4c .elementor-heading-title {
    white-space: nowrap;
    font-size: 7px !important;
  }
}

/* Rwanda map SVG has a fixed viewBox width; never let it overflow the page */
[id^="olea-map"] svg {
  max-width: 100%;
  height: auto;
}

/* Team grid (tlp-team): rt-row's negative gutters bleed 5px past the
   viewport on phones; clip them at the widget boundary */
.elementor-widget-rttm-team-grid {
  overflow: hidden;
}

/* Inner-page heroes on phones: cap the huge H1 (long words like
   MANAGEMENT overflow 390px at desktop size), clear the fixed header,
   and drop the 50vh dead space */
@media (max-width: 767px) {
  .elementor-element-abdb769,
  .elementor-element-791c558,
  .elementor-element-0108086,
  .elementor-element-225031b,
  .elementor-element-108e479,
  .elementor-element-83caff0,
  .elementor-element-91036e0 {
    min-height: 0 !important;
    padding-top: 150px !important;
    padding-bottom: 56px !important;
  }

  h1.elementor-heading-title {
    font-size: 34px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }
}

/* Collapse the nav into the hamburger dropdown below the desktop breakpoint.
   HFE renders the toggle but leaves the 700px horizontal menu in flow, which
   drags the whole page wider than the phone viewport. */
@media (max-width: 1024px) {
  .elementor-element-306e956 {
    position: static;
  }

  .elementor-element-c916b59 nav.hfe-dropdown {
    display: none;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 80px !important;
    width: 100% !important;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    z-index: 999;
  }

  .elementor-element-c916b59 nav.hfe-dropdown.menu-is-active,
  .elementor-element-c916b59 nav.hfe-dropdown.hfe-active {
    display: block;
  }

  .elementor-element-c916b59 nav.hfe-dropdown .hfe-nav-menu,
  .elementor-element-c916b59 nav.hfe-dropdown li {
    display: block;
    width: 100%;
  }

  .elementor-element-c916b59 nav.hfe-dropdown li a.hfe-menu-item {
    display: block;
    color: #2b2825 !important;
    padding: 14px 24px;
    border-bottom: 1px solid #f0ebe3;
  }
}

/* ---------- 3. Radius system: 4px interactive + media ---------- */

.elementor-button {
  border-radius: 4px !important;
}

.elementor-widget-image img {
  border-radius: 4px;
}

/* ---------- 4. Hero (centered) + stat counters ---------- */

.elementor-element-a3b637f {
  --justify-content: center;
}

.elementor-element-9f21ab3 img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(26, 11, 5, 0.5);
}

/* Counter numbers scale fluidly so $350M+ never escapes its box */
.elementor-element-6a76a28 .elementor-counter-number-wrapper {
  font-size: clamp(30px, 2.9vw, 46px) !important;
  line-height: 1.15 !important;
  justify-content: center;
  white-space: nowrap;
}

/* ---------- 5. The OLEA Difference: cards retired, hairline rhythm ---------- */

.elementor-element-1acc4a8,
.elementor-element-deb5242,
.elementor-element-7ffea70 {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-top: 1px solid #d1d5db !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 28px !important;
}

/* ---------- 6. Testimonials: one featured + two compact ---------- */

.elementor-element-8e057fa {
  align-items: stretch;
}

.elementor-element-7ba811b {
  flex: 1.6 1 0;
}

.elementor-element-4cc3496,
.elementor-element-6556b7f {
  flex: 1 1 0;
}

.elementor-element-7ba811b .elementor-widget-text-editor p {
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* ---------- 6b. Forms: brand-align WPForms + Astra defaults ---------- */

.wpforms-container {
  --wpforms-button-background-color: #f8af3c;
  --wpforms-button-text-color: #2B2825;
  --wpforms-field-border-radius: 4px;
  --wpforms-button-border-radius: 4px;
}

.wpforms-form input[type="submit"]:hover,
.wpforms-form button[type="submit"]:hover {
  background-color: #b7482b !important;
  color: #fbf7f2 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: #b7482b !important;
}

/* ---------- 7. Anchors & focus ---------- */

[id] {
  scroll-margin-top: 110px;
}

.elementor-button:focus-visible,
a:focus-visible {
  outline: 2px solid #B7482B;
  outline-offset: 2px;
}

/* ---------- 8. Motion layer (MOTION_INTENSITY 3, reduced-motion safe) ---------- */

.elementor-button {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .elementor-button:hover {
    transform: translateY(-1px);
  }

  .elementor-button:active {
    transform: translateY(0) scale(0.98);
  }

  /* Services cards lift on hover, shadow tinted to the accent */
  .elementor-element-278ab0c > .e-con-inner > div,
  .elementor-element-278ab0c > div {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .elementor-element-278ab0c > .e-con-inner > div:hover,
  .elementor-element-278ab0c > div:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(43, 40, 37, 0.14);
  }

  /* Scroll reveal: applied by JS only, so no content is hidden without it */
  .olea-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--olea-i, 0) * 70ms);
  }

  .olea-reveal.olea-inview {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 9. Mobile collapse for multi-column rows ---------- */

@media (max-width: 767px) {
  .elementor-element-96dd4af,
  .elementor-element-80717c8,
  .elementor-element-49435ac,
  .elementor-element-278ab0c,
  .elementor-element-6a76a28 {
    flex-direction: column;
  }
}

/* ---------- 10b. Side-by-side solution cards (Insurance / Industries) ---------- */

/* Cards stack when there is no room for two grids side by side */
@media (max-width: 1150px) {
  .olea-duo {
    flex-wrap: wrap;
  }

  .olea-duo > .e-con-inner > .olea-duo-card,
  .olea-duo > .olea-duo-card {
    --width: 100%;
  }
}

/* Item columns loosen up on small screens */
@media (max-width: 640px) {
  .olea-duo-grid > .e-con-inner > .e-con,
  .olea-duo-grid > .e-con {
    --width: calc(33.333% - 15px) !important;
  }
}

/* Phones: full-bleed cards, tighter padding, smaller labels, roomier rows */
@media (max-width: 480px) {
  .olea-duo {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .olea-duo-card {
    padding: 28px 14px 32px !important;
  }

  .olea-duo-grid {
    row-gap: 30px !important;
  }

  .olea-duo-grid > .e-con-inner > .e-con,
  .olea-duo-grid > .e-con {
    --width: calc(50% - 11px) !important;
    min-height: 0 !important;
  }

  .olea-duo-grid .elementor-heading-title {
    font-size: 12px !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
  }
}

/* Icon motion: staggered idle float on the wrapper, springy pop + gold shift
   on item hover (wrapper floats, icon pops, so the transforms don't fight). */
@media (prefers-reduced-motion: no-preference) {
  .olea-icon-motion .elementor-icon-wrapper {
    animation: olea-icon-float 5s ease-in-out infinite;
  }

  .olea-icon-motion .e-con:nth-child(2n) .elementor-icon-wrapper {
    animation-delay: -1.6s;
  }

  .olea-icon-motion .e-con:nth-child(3n) .elementor-icon-wrapper {
    animation-delay: -3.2s;
  }

  .olea-icon-motion .e-con:nth-child(5n) .elementor-icon-wrapper {
    animation-delay: -4.2s;
  }

  .olea-icon-motion .elementor-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
      color 0.3s ease;
  }

  .olea-icon-motion .e-con:hover .elementor-icon {
    transform: translateY(-5px) scale(1.15) rotate(-5deg);
    color: var(--e-global-color-accent);
    fill: var(--e-global-color-accent);
  }

  @keyframes olea-icon-float {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-4px);
    }
  }
}

/* ---------- 10c. About page redesign ---------- */

@media (max-width: 1000px) {
  .olea-group-row {
    flex-wrap: wrap;
  }

  .olea-group-row > .e-con-inner > .e-con,
  .olea-group-row > .e-con {
    --width: 100%;
  }
}

@media (max-width: 900px) {
  .olea-about-cards,
  .olea-3ts-row {
    flex-wrap: wrap;
  }

  .olea-about-cards > .e-con-inner > .e-con,
  .olea-about-cards > .e-con,
  .olea-3ts-row > .e-con-inner > .e-con,
  .olea-3ts-row > .e-con {
    --width: 100%;
    border-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* ---------- 10d. Team section (editorial split, layered photo) ---------- */

.olea-team-photo {
  position: relative;
  overflow: hidden;
}

/* faint ring motif in the corner, echoing the About values banner */
.olea-team-photo::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: url("/wp-content/uploads/2026/07/olea-ring-pattern.png") center / contain no-repeat;
  opacity: 0.25;
  pointer-events: none;
}

.olea-team-frame {
  position: relative;
}

/* offset gold frame behind the photo */
.olea-team-frame::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 26px;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(248, 175, 60, 0.55);
  border-radius: 8px;
  pointer-events: none;
}

.olea-team-frame .elementor-widget-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}

.olea-team-badge {
  position: absolute;
  top: -16px;
  left: 30px;
  z-index: 2;
  width: auto !important;
}

@media (max-width: 1000px) {
  .olea-team-photo {
    flex-wrap: wrap;
  }

  .olea-team-photo > .e-con-inner > .e-con,
  .olea-team-photo > .e-con {
    --width: 100%;
  }

  .olea-team-frame::before {
    top: 14px;
    left: 14px;
  }
}

/* ---------- 10e. Insurance page: advice timeline + policy grid ---------- */

.olea-advice-row {
  position: relative;
}

/* connector line running through the icon circles */
.olea-advice-row::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 46px;
  height: 3px;
  background: #b7482b;
}

.olea-advice-circle {
  position: relative;
  z-index: 1;
}

/* captions bottom-align so circles sit on one line regardless of text length */
.olea-advice-cap {
  min-height: 118px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (max-width: 1000px) {
  .olea-advice-row {
    flex-wrap: wrap;
    justify-content: center !important;
  }

  .olea-advice-row::after {
    display: none;
  }

  .olea-advice-row > .e-con-inner > .e-con,
  .olea-advice-row > .e-con {
    --width: calc(33.333% - 11px);
  }

  .olea-advice-cap {
    min-height: 0;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .olea-advice-row > .e-con-inner > .e-con,
  .olea-advice-row > .e-con {
    --width: calc(50% - 8px);
  }
}

@media (max-width: 1000px) {
  .olea-policy-grid > .e-con-inner > .e-con,
  .olea-policy-grid > .e-con {
    --width: calc(50% - 12px);
  }
}

@media (max-width: 560px) {
  .olea-policy-grid > .e-con-inner > .e-con,
  .olea-policy-grid > .e-con {
    --width: 100%;
  }
}

/* Elementor drops the --width var for these editor-authored tiles; own it here */
.olea-sector-grid > .e-con-inner > .e-con,
.olea-sector-grid > .e-con {
  --width: calc(25% - 12px);
}

@media (max-width: 1024px) {
  .olea-sector-grid > .e-con-inner > .e-con,
  .olea-sector-grid > .e-con {
    --width: calc(33.333% - 11px) !important;
  }
}

@media (max-width: 700px) {
  .olea-sector-grid > .e-con-inner > .e-con,
  .olea-sector-grid > .e-con {
    --width: calc(50% - 8px) !important;
  }
}

@media (max-width: 480px) {
  .olea-sector-grid > .e-con-inner > .e-con,
  .olea-sector-grid > .e-con {
    --width: 100% !important;
  }
}

/* ---------- 11. Client logo orbit (They Trust Us) ---------- */

/* The orbit's children are all absolutely positioned, so the widget has no
   intrinsic size; force it (and the orbit) to span the container. */
.elementor-element-8e057fa .elementor-widget-html,
.elementor-element-8e057fa .elementor-widget-shortcode {
  width: 100%;
}

.elementor-element-8e057fa .elementor-widget-html .elementor-widget-container,
.elementor-element-8e057fa .elementor-widget-shortcode .elementor-widget-container {
  width: 100%;
}

.olea-orbit {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  aspect-ratio: 1.9 / 1;
  overflow: hidden;
}

.olea-orbit-ring {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(183, 72, 43, 0.22);
  border-radius: 50%;
  pointer-events: none;
}

.olea-orbit-ring:nth-child(4) {
  background: rgba(248, 175, 60, 0.12);
  border-color: rgba(248, 175, 60, 0.5);
}

.olea-orbit-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(43, 40, 37, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.olea-orbit-badge:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 14px 30px rgba(43, 40, 37, 0.2);
  z-index: 5;
}

.olea-orbit-badge img {
  max-width: 70%;
  max-height: 58%;
  object-fit: contain;
  border-radius: 0;
}

.olea-orbit-center {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 12px 0 4px;
}

.olea-orbit-center img {
  max-height: 40px;
  width: auto;
  border-radius: 0;
}

@media (max-width: 900px) {
  .olea-orbit-badge {
    width: 60px;
    height: 60px;
  }
}

/* Small screens: orbit becomes a simple centered logo grid */
@media (max-width: 640px) {
  .olea-orbit {
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding: 8px 0;
  }

  .olea-orbit-badge {
    position: static;
    transform: none;
    width: 64px;
    height: 64px;
  }

  .olea-orbit-badge:hover {
    transform: scale(1.08);
  }

  .olea-orbit-ring,
  .olea-orbit-center {
    display: none;
  }
}

/* ---------- 10. Newsletter signup (footer strip, dark surface) ---------- */

.olea-newsletter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 460px;
}

.olea-newsletter input[type="email"] {
  flex: 1 1 220px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: 400 14px/1.4 "Open Sans", sans-serif;
}

.olea-newsletter input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.olea-newsletter input[type="email"]:focus {
  outline: none;
  border-color: #f8af3c;
}

.olea-newsletter button {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  background: #f8af3c;
  color: #2B2825;
  font: 700 10px/1.4 Montserrat, sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease;
}

.olea-newsletter button:hover {
  background: #e09d2f;
}

.olea-newsletter button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.olea-hp {
  position: absolute !important;
  left: -9999px !important;
}

.olea-newsletter-msg {
  flex-basis: 100%;
  margin: 4px 0 0;
  min-height: 1.2em;
  font-size: 13px;
  color: #f8af3c;
}

.olea-newsletter-msg.error {
  color: #ff8a7a;
}