/* Elegant Outdoor Living - Design Process Hub Section
   Custom CSS Only | No Framework | No HTML Wrapper
*/

.eolprocesshub26_scope,
.eolprocesshub26_scope * {
  box-sizing: border-box;
}

.eolprocesshub26_scope {
  --eolprocesshub26_primary: #15125D;
  --eolprocesshub26_primary_dark: #090735;
  --eolprocesshub26_white: #FFFFFF;
  --eolprocesshub26_soft: #F8F5EF;
  --eolprocesshub26_cream: #EFE8DA;
  --eolprocesshub26_text: #171827;
  --eolprocesshub26_muted: #6D7282;
  --eolprocesshub26_line: rgba(21, 18, 93, 0.12);
  --eolprocesshub26_shadow: 0 26px 68px rgba(21, 18, 93, 0.10);
  --eolprocesshub26_wrap: min(100% - 36px, 1320px);
  width: 100%;
  position: relative;
  overflow: hidden;
  font-family: "Montserrat", "Inter", Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(21,18,93,0.065), transparent 27%),
    radial-gradient(circle at 90% 22%, rgba(239,232,218,0.70), transparent 24%),
    linear-gradient(180deg, #FFFFFF 0%, var(--eolprocesshub26_soft) 100%);
  padding: clamp(72px, 8vw, 114px) 0;
}

/* When Elementor's classic background contains only a color, remove the
   built-in gradient images so the selected solid color can display. */
.eolprocesshub26_scope.eolprocesshub26_solid_background {
  background-image: none;
}

.eolprocesshub26_scope::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(21,18,93,0.032) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(21,18,93,0.024) 0 1px, transparent 1px 100%);
  background-size: 78px 78px;
  opacity: 0.38;
}

.eolprocesshub26_outer {
  position: relative;
  z-index: 1;
  width: var(--eolprocesshub26_wrap);
  margin: 0 auto;
}

.eolprocesshub26_header {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.52fr);
  gap: clamp(24px, 5vw, 68px);
  align-items: end;
  margin-bottom: clamp(38px, 5vw, 62px);
}

.eolprocesshub26_label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--eolprocesshub26_primary);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eolprocesshub26_label::before {
  content: "";
  width: 38px;
  height: 1px;
  background: var(--eolprocesshub26_primary);
}

.eolprocesshub26_title {
  max-width: 760px;
  margin: 0;
  color: var(--eolprocesshub26_primary);
  font-size: 36px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.045em;
}

.eolprocesshub26_title span {
  color: var(--eolprocesshub26_text);
}

.eolprocesshub26_intro {
  margin: 0;
  color: var(--eolprocesshub26_muted);
  font-size: 15.5px;
  line-height: 1.74;
  font-weight: 500;
}

.eolprocesshub26_board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr) minmax(0, 1fr);
  grid-template-areas:
    "step1 hub step2"
    "step3 hub step4"
    "step5 hub step6";
  gap: 18px;
  align-items: stretch;
}

.eolprocesshub26_board::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(21,18,93,0.18), transparent);
  pointer-events: none;
}

.eolprocesshub26_board::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(21,18,93,0.18), transparent);
  pointer-events: none;
}

.eolprocesshub26_hub {
  grid-area: hub;
  position: relative;
  z-index: 2;
  min-height: 640px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.eolprocesshub26_hub_inner {
  position: relative;
  width: min(100%, 380px);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 38px 32px;
  border-radius: 46px;
  color: var(--eolprocesshub26_white);
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,0.20), transparent 24%),
    radial-gradient(circle at 86% 86%, rgba(255,255,255,0.10), transparent 30%),
    linear-gradient(155deg, var(--eolprocesshub26_primary) 0%, var(--eolprocesshub26_primary_dark) 100%);
  box-shadow: 0 34px 92px rgba(21, 18, 93, 0.24);
  overflow: hidden;
}

.eolprocesshub26_hub_inner::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,0.13);
  pointer-events: none;
}

.eolprocesshub26_hub_inner::after {
  content: "";
  position: absolute;
  right: -72px;
  bottom: -58px;
  width: 205px;
  height: 205px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

.eolprocesshub26_hub_top,
.eolprocesshub26_hub_bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.eolprocesshub26_hub_kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eolprocesshub26_hub_number {
  display: block;
  margin: 42px 0 18px;
  color: var(--eolprocesshub26_white);
  font-size: clamp(72px, 7.1vw, 96px);
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.07em;
}

.eolprocesshub26_hub_title {
  margin: 0 auto;
  max-width: 280px;
  color: var(--eolprocesshub26_white);
  font-size: 22px;
  line-height: 1.16;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.eolprocesshub26_hub_text {
  margin: 0 auto;
  max-width: 286px;
  color: rgba(255,255,255,0.74);
  font-size: 13px;
  line-height: 1.68;
  font-weight: 500;
}

.eolprocesshub26_step {
  position: relative;
  z-index: 2;
  min-height: 196px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 24px;
  border-radius: 32px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(21,18,93,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.76) inset;
  overflow: hidden;
  transition:
    transform 0.78s cubic-bezier(.16,.82,.22,1),
    border-color 0.72s ease,
    box-shadow 0.78s ease;
}

.eolprocesshub26_step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 8%, rgba(21,18,93,0.075), transparent 30%),
    linear-gradient(135deg, #FFFFFF 0%, #FBFAF7 48%, #F0E8DA 100%);
  clip-path: circle(0% at 100% 0%);
  transition: clip-path 1.38s cubic-bezier(.16,.82,.22,1);
}

.eolprocesshub26_step::after {
  content: "";
  position: absolute;
  inset: auto 22px 0 22px;
  z-index: 3;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, rgba(21,18,93,0.18), var(--eolprocesshub26_primary), rgba(21,18,93,0.18));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.96s cubic-bezier(.16,.82,.22,1);
}

.eolprocesshub26_step:hover {
  transform: translateY(-5px);
  border-color: rgba(21,18,93,0.20);
  box-shadow: var(--eolprocesshub26_shadow);
}

.eolprocesshub26_step:hover::before {
  clip-path: circle(150% at 100% 0%);
}

.eolprocesshub26_step:hover::after {
  transform: scaleX(1);
}

.eolprocesshub26_step:nth-child(1) {
  grid-area: step1;
}

.eolprocesshub26_step:nth-child(2) {
  grid-area: step2;
}

.eolprocesshub26_step:nth-child(3) {
  grid-area: step3;
}

.eolprocesshub26_step:nth-child(4) {
  grid-area: step4;
}

.eolprocesshub26_step:nth-child(5) {
  grid-area: step5;
}

.eolprocesshub26_step:nth-child(6) {
  grid-area: step6;
}

.eolprocesshub26_step > * {
  position: relative;
  z-index: 2;
}

.eolprocesshub26_step_badge {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 23px;
  color: var(--eolprocesshub26_primary);
  background: rgba(21,18,93,0.07);
  border: 1px solid rgba(21,18,93,0.10);
  transition:
    color 0.72s ease,
    background 0.72s ease,
    transform 0.82s cubic-bezier(.16,.82,.22,1);
}

.eolprocesshub26_step:hover .eolprocesshub26_step_badge {
  color: var(--eolprocesshub26_white);
  background: var(--eolprocesshub26_primary);
  transform: rotate(-4deg);
}

.eolprocesshub26_step_badge svg {
  width: 27px;
  height: 27px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eolprocesshub26_step_meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: rgba(21,18,93,0.54);
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eolprocesshub26_step_meta::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(21,18,93,0.20);
}

.eolprocesshub26_step_title {
  margin: 0 0 8px;
  color: var(--eolprocesshub26_primary);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.025em;
}

.eolprocesshub26_step_text {
  margin: 0;
  color: var(--eolprocesshub26_muted);
  font-size: 13.7px;
  line-height: 1.64;
  font-weight: 500;
}

.eolprocesshub26_footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}

.eolprocesshub26_footer_note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--eolprocesshub26_primary);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(21,18,93,0.10);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 650;
}

.eolprocesshub26_footer_note::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: var(--eolprocesshub26_primary);
}

@media (max-width: 1180px) {
  .eolprocesshub26_board {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hub hub"
      "step1 step2"
      "step3 step4"
      "step5 step6";
  }

  .eolprocesshub26_board::before,
  .eolprocesshub26_board::after {
    display: none;
  }

  .eolprocesshub26_hub {
    min-height: auto;
    padding: 0;
  }

  .eolprocesshub26_hub_inner {
    width: 100%;
    min-height: auto;
    border-radius: 34px;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
  }

  .eolprocesshub26_hub_inner::before {
    border-radius: 24px;
  }

  .eolprocesshub26_hub_top,
  .eolprocesshub26_hub_bottom {
    text-align: left;
  }

  .eolprocesshub26_hub_number {
    margin: 24px 0 12px;
    font-size: 76px;
  }

  .eolprocesshub26_hub_title,
  .eolprocesshub26_hub_text {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 980px) {
  .eolprocesshub26_header {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .eolprocesshub26_scope {
    --eolprocesshub26_wrap: min(100% - 24px, 1320px);
    padding: 62px 0;
  }

  .eolprocesshub26_title {
    font-size: clamp(32px, 9vw, 42px);
    line-height: 1.08;
  }

  .eolprocesshub26_intro {
    font-size: 15px;
    line-height: 1.7;
  }

  .eolprocesshub26_board {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hub"
      "step1"
      "step2"
      "step3"
      "step4"
      "step5"
      "step6";
    gap: 14px;
  }

  .eolprocesshub26_hub_inner {
    border-radius: 28px;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 22px;
  }

  .eolprocesshub26_hub_inner::before {
    inset: 12px;
    border-radius: 20px;
  }

  .eolprocesshub26_hub_top,
  .eolprocesshub26_hub_bottom {
    text-align: center;
  }

  .eolprocesshub26_hub_number {
    margin: 26px 0 12px;
    font-size: 66px;
  }

  .eolprocesshub26_hub_title {
    max-width: 260px;
    font-size: 20px;
    line-height: 1.18;
  }

  .eolprocesshub26_hub_text {
    max-width: 280px;
    font-size: 12.8px;
  }

  .eolprocesshub26_step {
    min-height: auto;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
    border-radius: 24px;
  }

  .eolprocesshub26_step:hover {
    transform: none;
  }

  .eolprocesshub26_step:hover .eolprocesshub26_step_badge {
    transform: none;
  }

  .eolprocesshub26_step_badge {
    width: 50px;
    height: 50px;
    border-radius: 18px;
  }

  .eolprocesshub26_step_badge svg {
    width: 23px;
    height: 23px;
  }

  .eolprocesshub26_footer {
    justify-content: flex-start;
  }

  .eolprocesshub26_footer_note {
    width: 100%;
    align-items: flex-start;
    min-height: auto;
    padding: 15px 16px;
    border-radius: 18px;
  }
}

@media (max-width: 420px) {
  .eolprocesshub26_label {
    font-size: 10px;
  }

  .eolprocesshub26_label::before {
    width: 28px;
  }

  .eolprocesshub26_step {
    grid-template-columns: 1fr;
  }

  .eolprocesshub26_step_title {
    font-size: 18px;
  }

  .eolprocesshub26_hub_kicker {
    font-size: 9px;
    letter-spacing: 0.09em;
  }

  .eolprocesshub26_hub_number {
    font-size: 58px;
  }
}

/* Highlight underline: always visible in the same hand-drawn brush style. */
.eolprocesshub26_title span {
  display: inline-block;
  position: relative;
  text-decoration: none !important;
}

.eolprocesshub26_title .eolprocesshub26_highlight_underline {
  display: block;
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: -16px;
  width: calc(100% - 2px);
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 120' preserveAspectRatio='none'%3E%3Cpath d='M18 88 C96 61 202 39 330 24 C482 6 647 5 784 13 C875 18 948 29 989 43 C943 37 890 35 826 36 C663 38 510 46 369 59 C238 72 126 90 34 106 C27 102 21 96 18 88 Z' fill='black'/%3E%3Cpath d='M48 108 C107 91 164 80 231 71 C178 84 123 99 66 116 Z' fill='black'/%3E%3Cpath d='M113 101 C176 85 248 75 319 67 C250 82 190 95 132 111 Z' fill='black'/%3E%3Cpath d='M205 91 C259 80 319 72 379 66 C328 78 275 88 220 99 Z' fill='black'/%3E%3Cpath d='M873 39 C919 38 958 41 994 49 C961 47 930 49 899 54 Z' fill='black'/%3E%3Cpath d='M922 52 C951 51 975 54 997 60 C974 58 952 59 932 63 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 120' preserveAspectRatio='none'%3E%3Cpath d='M18 88 C96 61 202 39 330 24 C482 6 647 5 784 13 C875 18 948 29 989 43 C943 37 890 35 826 36 C663 38 510 46 369 59 C238 72 126 90 34 106 C27 102 21 96 18 88 Z' fill='black'/%3E%3Cpath d='M48 108 C107 91 164 80 231 71 C178 84 123 99 66 116 Z' fill='black'/%3E%3Cpath d='M113 101 C176 85 248 75 319 67 C250 82 190 95 132 111 Z' fill='black'/%3E%3Cpath d='M205 91 C259 80 319 72 379 66 C328 78 275 88 220 99 Z' fill='black'/%3E%3Cpath d='M873 39 C919 38 958 41 994 49 C961 47 930 49 899 54 Z' fill='black'/%3E%3Cpath d='M922 52 C951 51 975 54 997 60 C974 58 952 59 932 63 Z' fill='black'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
  border-radius: 0;
  pointer-events: none;
  z-index: 2;
}