
html,body{overflow-x:clip!important}

.elementor-widget-glowie_ritual_flow_clean,
.elementor-widget-glowie_ritual_flow_clean>.elementor-widget-container{
  width:100%!important;
  max-width:none!important;
  overflow:visible!important
}

.grfc-section{
  --grfc-screen-width:100%;
  --grfc-breakout:0px;
  --grfc-circle-lift:3px;
  width:var(--grfc-screen-width);
  max-width:none;
  position:relative;
  left:var(--grfc-breakout);
  margin:0;
  padding:36px 0 30px;
  min-height:300px;
  overflow:hidden;
  box-sizing:border-box;
  background:#123425;
  font-family:Manrope,Arial,sans-serif;
  isolation:isolate
}
.grfc-section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 5%,rgba(255,255,255,.018),transparent 32%),
    linear-gradient(90deg,rgba(4,24,16,.10),transparent 17%,transparent 83%,rgba(4,24,16,.10))
}

.grfc-inner{
  width:calc(100% - 48px);
  max-width:1180px;
  margin:0 auto;
  position:relative;
  z-index:3
}
.grfc-heading{text-align:center;margin-bottom:22px}
.grfc-eyebrow{
  color:#D9CFAE;
  font-size:10px;
  line-height:1;
  letter-spacing:.18em;
  font-weight:850;
  margin-bottom:10px
}
.grfc-title{
  margin:0;
  color:#F7F2E8;
  font-family:Prata,Georgia,serif;
  font-size:42px;
  line-height:1.04;
  letter-spacing:-.02em;
  font-weight:400
}

.grfc-flow{
  width:min(960px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(130px,1fr) minmax(90px,130px) minmax(130px,1fr) minmax(90px,130px) minmax(130px,1fr) minmax(90px,130px) minmax(130px,1fr);
  align-items:center;
  gap:12px
}

.grfc-step{
  --grfc-step-accent:#B7A578;
  text-align:center;
  min-width:0
}
.grfc-circle{
  width:76px;
  height:76px;
  border-radius:50%;
  border:1px solid var(--grfc-step-accent);
  margin:0 auto 7px;
  display:grid;
  place-items:center;
  position:relative;
  background:rgba(7,34,24,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.08);
  animation:grfcCircleBreath 3.6s ease-in-out infinite;
  will-change:transform,box-shadow
}
.grfc-step[data-step="2"] .grfc-circle{animation-delay:-.9s}
.grfc-step[data-step="3"] .grfc-circle{animation-delay:-1.8s}
.grfc-step[data-step="4"] .grfc-circle{animation-delay:-2.7s}
.grfc-circle i{
  position:absolute;
  inset:6px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--grfc-step-accent) 30%,transparent);
  animation:grfcInnerBreath 3.6s ease-in-out infinite
}
.grfc-circle span{
  position:relative;
  z-index:2;
  font-family:Prata,Georgia,serif;
  color:#F7F2E8;
  font-size:23px
}
@keyframes grfcCircleBreath{
  0%,100%{
    transform:translateY(0) scale(1);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.08)
  }
  50%{
    transform:translateY(calc(var(--grfc-circle-lift) * -1)) scale(1.02);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.03),
      0 0 0 5px color-mix(in srgb,var(--grfc-step-accent) 6%,transparent),
      0 11px 26px rgba(0,0,0,.11)
  }
}
@keyframes grfcInnerBreath{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(.93);opacity:.95}
}
.grfc-step-title{
  color:#F7F2E8;
  font-family:Prata,Georgia,serif;
  font-size:21px;
  line-height:1.04;
  font-weight:400
}
.grfc-step-text{
  color:#DDD7CA;
  font-size:12px;
  line-height:1.27;
  font-weight:520;
  margin-top:4px
}

/* one complete botanical composition with two branches */
.grfc-botanical{
  position:absolute;
  top:0;
  bottom:0;
  width:280px;
  height:100%;
  color:#1A4A36;
  opacity:.30;
  z-index:0;
  pointer-events:none
}
.grfc-left{left:0}
.grfc-right{right:0}
.grfc-botanical svg{width:100%;height:100%;display:block}
.grfc-botanical .stem,
.grfc-botanical .branch,
.grfc-botanical .vein{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round
}
.grfc-botanical .branch{opacity:.65}
.grfc-botanical .leaf{fill:currentColor;opacity:.48}
.grfc-botanical .vein{opacity:.32}

/* hand drawn loop arrow */
.grfc-connector{
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-17px)
}
.grfc-arrow{
  --grfc-arrow:#B8A577;
  --grfc-glow:#E5D39A;
  width:100%;
  max-width:125px;
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 0 2px rgba(229,211,154,.08))
}
.grfc-arrow-base{
  fill:none;
  stroke:var(--grfc-arrow);
  stroke-width:2.1;
  stroke-linecap:round;
  opacity:.88
}
.grfc-arrow-light{
  fill:none;
  stroke:var(--grfc-glow);
  stroke-width:2.9;
  stroke-linecap:round;
  stroke-dasharray:22 210;
  stroke-dashoffset:235;
  filter:url(#grfcGlow);
  opacity:.92;
  animation:grfcArrowFlow 1.8s linear infinite;
  will-change:stroke-dashoffset
}
.grfc-head{
  fill:color-mix(in srgb,var(--grfc-arrow) 18%,transparent);
  stroke:var(--grfc-arrow);
  stroke-width:1.8;
  stroke-linejoin:round
}
@keyframes grfcArrowFlow{
  from{stroke-dashoffset:235}
  to{stroke-dashoffset:0}
}

@media(hover:hover) and (pointer:fine){
  .grfc-step:hover .grfc-circle{
    animation-play-state:paused;
    transform:translateY(-6px) scale(1.065)!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.03),
      0 0 0 7px color-mix(in srgb,var(--grfc-step-accent) 8%,transparent),
      0 12px 28px rgba(0,0,0,.13)
  }
  .grfc-step:hover + .grfc-connector .grfc-arrow{
    transform:translateX(3px) scale(1.02);
    transition:transform .3s ease
  }
  .grfc-step:hover + .grfc-connector .grfc-arrow-light{
    animation-duration:1s!important
  }
}

@media(max-width:1024px){
  .grfc-inner{width:calc(100% - 32px)}
  .grfc-flow{
    grid-template-columns:minmax(110px,1fr) 80px minmax(110px,1fr) 80px minmax(110px,1fr) 80px minmax(110px,1fr)
  }
}

@media(max-width:767px){
  .grfc-section{width:100%!important;left:0!important}
  .grfc-inner{width:calc(100% - 18px)}
  .grfc-title{font-size:27px}
  .grfc-flow{
    width:100%;
    grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);
    gap:4px
  }
  .grfc-circle{width:56px;height:56px}
  .grfc-circle span{font-size:16px}
  .grfc-step-title{font-size:15px}
  .grfc-step-text{font-size:9px}
  .grfc-arrow{max-width:28px}
  .grfc-connector{transform:translateY(-14px)}
  .grfc-botanical{width:120px;opacity:.15}
}

@media(max-width:430px){
  .grfc-flow{
    grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr)
  }
  .grfc-arrow{max-width:18px}
  .grfc-step-title{font-size:13px}
  .grfc-step-text{font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  .grfc-circle,.grfc-circle i,.grfc-arrow-light{animation:none!important}
}


/* =========================================================
   v1.1.0 MOBILE REBUILD — FULL WIDTH + READABLE 4-STEP FLOW
   ========================================================= */

@media(max-width:767px){

  /* TRUE EDGE-TO-EDGE SECTION: no boxed card feeling */
  .grfc-section{
    width:100vw !important;
    max-width:100vw !important;
    left:50% !important;
    right:auto !important;
    margin-left:-50vw !important;
    margin-right:0 !important;
    padding-top:30px !important;
    padding-bottom:30px !important;
    min-height:auto !important;
    overflow:hidden !important;
    border-radius:0 !important;
  }

  .elementor-widget-glowie_ritual_flow_clean,
  .elementor-widget-glowie_ritual_flow_clean > .elementor-widget-container{
    width:100% !important;
    max-width:none !important;
    overflow:visible !important;
  }

  .grfc-inner{
    width:100% !important;
    max-width:none !important;
    padding-left:14px !important;
    padding-right:14px !important;
    box-sizing:border-box !important;
  }

  /* HEADING: keep the phrase visually together, not broken word-by-word */
  .grfc-heading{
    margin-bottom:24px !important;
    padding:0 6px !important;
  }

  .grfc-eyebrow{
    font-size:10px !important;
    line-height:1.1 !important;
    letter-spacing:.15em !important;
    margin-bottom:10px !important;
    white-space:nowrap !important;
  }

  .grfc-title{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    font-size:27px !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
  }

  /* 4 columns remain on one row, but each step gets more useful text width */
  .grfc-flow{
    width:100% !important;
    max-width:none !important;
    display:grid !important;
    grid-template-columns:
      minmax(0,1fr) 34px
      minmax(0,1fr) 34px
      minmax(0,1fr) 34px
      minmax(0,1fr) !important;
    gap:4px !important;
    align-items:start !important;
    margin:0 !important;
  }

  .grfc-step{
    min-width:0 !important;
    width:100% !important;
    padding:0 1px !important;
  }

  /* circles remain readable and interactive */
  .grfc-circle{
    width:60px !important;
    height:60px !important;
    margin:0 auto 8px !important;
  }

  .grfc-circle span{
    font-size:18px !important;
  }

  /* arrows much larger and more visible on mobile */
  .grfc-connector{
    width:34px !important;
    min-width:34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transform:translateY(10px) !important;
    overflow:visible !important;
  }

  .grfc-arrow{
    width:46px !important;
    max-width:46px !important;
    min-width:46px !important;
    overflow:visible !important;
    transform:scale(1.05) !important;
  }

  .grfc-arrow-base{
    stroke-width:2.7 !important;
    opacity:.96 !important;
  }

  .grfc-arrow-light{
    stroke-width:3.4 !important;
    opacity:1 !important;
  }

  .grfc-head{
    stroke-width:2.2 !important;
  }

  /* text is larger and does not wrap every word */
  .grfc-step-title{
    font-size:16px !important;
    line-height:1.08 !important;
    margin-top:0 !important;
    white-space:nowrap !important;
  }

  .grfc-step-text{
    width:100% !important;
    max-width:88px !important;
    margin:5px auto 0 !important;
    font-size:10.5px !important;
    line-height:1.24 !important;
    font-weight:600 !important;
    letter-spacing:-.01em !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  /* full side botanical artwork without making section feel boxed */
  .grfc-botanical{
    width:150px !important;
    opacity:.13 !important;
    top:0 !important;
    bottom:0 !important;
    height:100% !important;
  }

  .grfc-left{left:-35px !important}
  .grfc-right{right:-35px !important}
}

@media(max-width:520px){
  .grfc-inner{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .grfc-title{
    font-size:25px !important;
  }

  .grfc-flow{
    grid-template-columns:
      minmax(0,1fr) 28px
      minmax(0,1fr) 28px
      minmax(0,1fr) 28px
      minmax(0,1fr) !important;
    gap:2px !important;
  }

  .grfc-connector{
    width:28px !important;
    min-width:28px !important;
  }

  .grfc-arrow{
    width:40px !important;
    max-width:40px !important;
    min-width:40px !important;
  }

  .grfc-step-text{
    max-width:78px !important;
    font-size:10px !important;
  }
}

@media(max-width:430px){
  .grfc-title{
    font-size:23px !important;
    white-space:nowrap !important;
  }

  .grfc-circle{
    width:56px !important;
    height:56px !important;
  }

  .grfc-circle span{
    font-size:17px !important;
  }

  .grfc-step-title{
    font-size:15px !important;
  }

  .grfc-step-text{
    max-width:74px !important;
    font-size:9.7px !important;
    line-height:1.22 !important;
  }

  .grfc-arrow{
    width:36px !important;
    max-width:36px !important;
    min-width:36px !important;
  }
}
