/* =============================================================
   How It Works: premium / editorial refinement
   Scoped under .hiw-section to avoid clashing with site styles.
   ============================================================= */

.hiw-section {
  background: var(--white, #fff);
  padding: var(--band-y, 44px) 0 clamp(24px, 3vw, 40px);
  position: relative;
}

.hiw-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 44px);
}

/* ---------- Top: header ---------- */
.hiw-top {
  display: block;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}

.hiw-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-800, #1f3a23);
  margin-bottom: 28px;
}

/* Editorial headline: matches site heading family (Bricolage Grotesque) */
.hiw-headline {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--sage-800, #1f3a23);
  margin: 0;
  text-wrap: balance;
}
.hiw-headline-hand {
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--clay-500);
  letter-spacing: 0;
}

/* ---------- CTA block (right): inline, no card ---------- */
.hiw-cta {
  align-self: end;
  padding-bottom: 4px;
}

.hiw-cta-head {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.1rem, 0.8vw + 0.8rem, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--sage-800, #1f3a23);
  margin: 0 0 18px;
  text-wrap: balance;
}

.hiw-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--clay-500, #c7541f);
  color: var(--cream-50, #fbf8f1);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  letter-spacing: 0;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease),
              transform var(--dur-fast, 160ms) var(--ease-out, ease),
              box-shadow var(--dur-fast, 160ms) var(--ease-out, ease);
  box-shadow: 0 14px 28px -14px rgba(199, 84, 31, 0.55),
              0 4px 10px -6px rgba(199, 84, 31, 0.4);
}

.hiw-cta-btn:hover {
  background: var(--clay-600, #a44318);
  color: var(--cream-50, #fbf8f1);
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -14px rgba(199, 84, 31, 0.6),
              0 6px 14px -6px rgba(199, 84, 31, 0.45);
  text-decoration: none;
}

.hiw-cta-btn svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-base, 240ms) var(--ease-spring, ease);
}

.hiw-cta-btn:hover svg { transform: translateX(3px); }

.hiw-cta-helper {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--sage-800, #1f3a23);
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hiw-cta-helper svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--sage-700, #2f5535);
}

/* ---------- Steps row ---------- */
/* Flow path: dashed bridges anchored to each step's icon, 1 → 2 → 3 → 4 */
.hiw-steps-wrap {
  position: relative;
}
.hiw-step:not(.is-featured) .hiw-step-icon { position: relative; }
.hiw-step:not(.is-featured) .hiw-step-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  width: 180px;
  height: 2px;
  margin-top: -1px;
  background: repeating-linear-gradient(90deg, var(--sage-400, #9AB68E) 0 9px, transparent 9px 18px);
}
.hiw-step.is-featured + .hiw-step .hiw-step-icon::before { width: 100px; }

.hiw-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* In-card CTA button (lives inside step 01) */
.hiw-step-cta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  padding: 11px 20px;
  background: var(--clay-500, #c7541f);
  color: var(--cream-50, #fbf8f1);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
  letter-spacing: 0;
  margin-top: 4px;
  transition: background var(--dur-fast, 160ms) var(--ease-out, ease),
              transform var(--dur-fast, 160ms) var(--ease-out, ease),
              box-shadow var(--dur-fast, 160ms) var(--ease-out, ease);
  box-shadow: 0 12px 24px -14px rgba(199, 84, 31, 0.55),
              0 3px 8px -4px rgba(199, 84, 31, 0.35);
}
.hiw-step-cta:hover {
  background: var(--clay-600, #a44318);
  color: var(--cream-50, #fbf8f1);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -14px rgba(199, 84, 31, 0.6),
              0 5px 12px -4px rgba(199, 84, 31, 0.4);
  text-decoration: none;
}
.hiw-step-cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-base, 240ms) var(--ease-spring, ease);
}
.hiw-step-cta:hover svg { transform: translateX(3px); }

/* ---------- Step card ---------- */
.hiw-step {
  background: var(--cream-100, #f5efe3);
  border: 0;
  border-radius: 24px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 12px 24px -18px rgba(45,58,35,0.18);
  transition: transform var(--dur-base, 240ms) var(--ease-out, ease),
              box-shadow var(--dur-base, 240ms) var(--ease-out, ease);
  position: relative;
}

/* Card 1 is the featured/colored card; steps 2–4 are containerless and
   sit tighter, centered against the featured card's row. */
.hiw-step:nth-child(1) { border-radius: 80px 24px 80px 24px; }
.hiw-step:not(.is-featured) {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 84px 4px 0;
  gap: 10px;
}
.hiw-step:not(.is-featured) .hiw-step-head { gap: 10px; }
.hiw-step:not(.is-featured) .hiw-step-icon { width: 44px; height: 44px; }
.hiw-step:not(.is-featured) .hiw-step-icon svg { width: 19px; height: 19px; }
.hiw-step:not(.is-featured) .hiw-step-num { font-size: 26px; }
.hiw-step:not(.is-featured) .hiw-step-detail { padding-top: 10px; color: var(--ink-700, #4a4a45); }
.hiw-step:not(.is-featured):hover { box-shadow: none; transform: none; }

.hiw-step-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Script-style step numbers: Caveat to match other hand accents */
.hiw-step-num {
  font-family: var(--font-hand);
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--clay-500, #c7541f);
  letter-spacing: 0;
}

/* Pale peach circle with terracotta line icon */
.hiw-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--clay-100, #fbe7d8);
  color: var(--clay-500, #c7541f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hiw-step-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.hiw-step h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.25;
  color: var(--sage-800);
  margin: 4px 0 0;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.hiw-step p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-700, #4a4a45);
}

.hiw-step-detail {
  margin-top: auto;
  padding-top: 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--clay-500, #c7541f);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

.hiw-step-detail svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--clay-500, #c7541f);
}

/* Featured (first) card border radius stays organic like the rest */
.hiw-step.is-featured {
  background: var(--sky-100, #E3EEF3);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    0 28px 48px -24px rgba(46, 78, 95, 0.32),
    0 12px 22px -12px rgba(24, 38, 47, 0.12);
  transform: translateY(-2px);
  animation: hiw-featured-pulse 2.6s ease-in-out infinite;
}
@keyframes hiw-featured-pulse {
  0%   { transform: translateY(-2px) scale(1); box-shadow: 0 28px 48px -24px rgba(46, 78, 95, 0.32), 0 12px 22px -12px rgba(24, 38, 47, 0.12), 0 0 0 0 rgba(94, 147, 172, 0.5); }
  50%  { transform: translateY(-10px) scale(1.03); box-shadow: 0 44px 70px -26px rgba(46, 78, 95, 0.4), 0 20px 32px -14px rgba(24, 38, 47, 0.16), 0 0 0 12px rgba(94, 147, 172, 0.16); }
  100% { transform: translateY(-2px) scale(1); box-shadow: 0 28px 48px -24px rgba(46, 78, 95, 0.32), 0 12px 22px -12px rgba(24, 38, 47, 0.12), 0 0 0 22px rgba(94, 147, 172, 0); }
}
.hiw-step.is-featured:hover { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hiw-step.is-featured { animation: none; }
}

.hiw-step.is-featured:hover {
  transform: translateY(-5px);
  box-shadow:
    0 36px 56px -24px rgba(46, 78, 95, 0.38),
    0 16px 28px -12px rgba(24, 38, 47, 0.16);
}

.hiw-step.is-featured .hiw-step-num {
  color: var(--clay-500, #c7541f);
}

.hiw-step.is-featured .hiw-step-head {
  align-items: center;
}

/* White badge with clay icon */
.hiw-step.is-featured .hiw-step-icon {
  background: var(--white, #fff);
  color: var(--clay-500, #c7541f);
  width: 58px;
  height: 58px;
}

.hiw-step.is-featured .hiw-step-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

.hiw-step.is-featured h3 {
  color: var(--sage-800);
  text-align: center;
  margin-top: 6px;
}

.hiw-step.is-featured p {
  color: var(--ink-700);
  text-align: center;
}

.hiw-step.is-featured .hiw-step-detail {
  color: var(--fg-2, #4a4a44);
  justify-content: center;
  text-align: center;
}

.hiw-step.is-featured .hiw-step-detail svg {
  color: var(--sky-500, #5E93AC);
}

/* ---------- Centered (third) card variant ---------- */
.hiw-step.is-centered .hiw-step-head {
  align-items: center;
}
.hiw-step.is-centered h3 {
  text-align: center;
  margin-top: 6px;
}
.hiw-step.is-centered p {
  text-align: center;
}
.hiw-step.is-centered .hiw-step-detail {
  justify-content: center;
  text-align: center;
}

/* ---------- Bottom info strip: narrow capsule, sage-tinted ---------- */
.hiw-strip {
  margin: clamp(40px, 5vw, 64px) auto 0;
  background: var(--sage-100, #e0e7d7);
  border: 1px solid rgba(108, 138, 110, 0.18);
  border-radius: 18px;
  padding: 18px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: left;
  font-size: 12.5px;
  color: var(--sage-800, #1f3a23);
  max-width: 760px;
  box-shadow: 0 1px 2px rgba(31, 42, 35, 0.03);
}

.hiw-strip-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(31, 58, 35, 0.1);
  color: var(--sage-800, #1f3a23);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hiw-strip-icon svg {
  width: 13px;
  height: 13px;
}

/* =============================================================
   Responsive: mobile / tablet
   ============================================================= */

@media (max-width: 980px) {
  .hiw-step .hiw-step-icon { display: none; }
  .hiw-cta { padding-bottom: 0; }
  .hiw-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hiw-connector { display: none; }  .hiw-step {
    padding: 24px 22px 22px;
  }
  .hiw-step:not(.is-featured) { padding: 6px 4px 12px; }
  .hiw-step:not(.is-featured) + .hiw-step:not(.is-featured) { border-top: 1px solid var(--border-default); padding-top: 20px; }
  .hiw-step.is-featured { transform: none; }
  .hiw-strip {
    padding: 14px 18px;
    line-height: 1.45;
  }
}

@media (max-width: 520px) {
  .hiw-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 22px;
    font-size: 13px;
  }
  .hiw-step-cta {
    width: 100%;
    justify-content: center;
  }
  .hiw-step h3 { font-size: 18px; }
}


/* ===== Override: open numbered steps, matching the Tempe/Scottsdale plan rows ===== */
.hiw-steps{max-width:1040px;margin:clamp(30px,3.4vw,44px) auto 0;gap:clamp(18px,2.2vw,28px)}
.hiw-steps::before{content:"";position:absolute;top:27px;left:11%;right:11%;height:2px;background:repeating-linear-gradient(90deg,var(--sage-300,#B1C9A5) 0 9px,transparent 9px 18px);z-index:0}
.hiw-steps-wrap .hiw-step, .hiw-steps-wrap .hiw-step.is-featured{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 10px;transform:none;animation:none;gap:10px}
.hiw-steps-wrap .hiw-step.is-featured:hover, .hiw-steps-wrap .hiw-step:hover{transform:none;box-shadow:none;background:transparent}
.hiw-step .hiw-step-icon{display:none}
.hiw-step:not(.is-featured) .hiw-step-icon::before{display:none}
.hiw-step .hiw-step-head, .hiw-step.is-featured .hiw-step-head{align-items:center}
.hiw-step .hiw-step-num{width:54px;height:54px;border-radius:50%;background:var(--sage-500,#7E9E74);color:var(--cream-50,#fbf8f1);font-family:var(--font-heading);font-weight:700;font-size:18px;display:grid;place-items:center;margin:0 auto;position:relative;z-index:1;box-shadow:0 0 0 6px var(--white,#fff)}
.hiw-step.is-featured .hiw-step-num{color:var(--cream-50,#fbf8f1)}
.hiw-step:nth-child(1) .hiw-step-num{background:var(--clay-400,#D97854);width:62px;height:62px;font-size:20px;margin-top:-4px;box-shadow:0 0 0 7px var(--white,#fff),0 0 0 9px var(--clay-400,#D97854)}
.hiw-step:nth-child(3) .hiw-step-num{background:var(--sage-600,#637F5C)}
.hiw-step:nth-child(4) .hiw-step-num{background:var(--sage-700,#4B6347)}
.hiw-step h3, .hiw-step.is-featured h3{text-align:center;margin-top:8px}
.hiw-step p, .hiw-step.is-featured p{text-align:center;margin:0 auto;max-width:26ch}
.hiw-step .hiw-step-detail, .hiw-step.is-featured .hiw-step-detail{margin-top:0;padding-top:8px;justify-content:center;text-align:center;color:var(--ink-700,#4a4a45)}
.hiw-step-cta{margin-top:8px}
@media (max-width:980px){
  .hiw-steps::before{display:none}
  .hiw-steps{grid-template-columns:1fr;gap:30px}
  .hiw-steps-wrap .hiw-step:not(.is-featured){padding:0 10px}
  .hiw-step:not(.is-featured) + .hiw-step:not(.is-featured){border-top:0;padding-top:0}
  .hiw-step .hiw-step-num{display:grid}
  .hiw-step:nth-child(1) .hiw-step-num{margin-top:0}
}