/* ══ /website-designing/ — Process + "How Your Website Directly Drives Revenue" (light) ══ */
.wq { position: relative; padding: 80px 0; background: #fff; }
.wq-head { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.wq-head--l { text-align: left; margin: 0 0 28px; }
.wq .subtitle_text { display: block; font-size: 18px; font-weight: 600; color: #f26629 !important; margin-bottom: 7px; }
.wq .wq-title { display: block; font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #3c4858 !important; margin: 0 0 12px; }
.wq-hl { color: #f26629; }
.wq-sub { font-size: 18px; line-height: 1.667em; color: #5a6475; margin: 0; }
.wq p { font-size: 16px; line-height: 1.667em; color: #5a6475; margin: 0; }
.wq h3 { font-size: 20px; line-height: 1.4; font-weight: 700; color: #3c4858; margin: 0 0 8px; }
.wq img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ─── process stepper + split impact ─── */
.wq-p3 { background: linear-gradient(180deg, #f7f8fb 0%, #fff 100%); }
.wq-p3-box { max-width: 1120px; margin: 0 auto; padding: 34px 40px 40px; border-radius: 26px; background: #fff; border: 1px solid #eceff4; box-shadow: 0 24px 60px rgba(23,59,90,.07); }
.wq-p3-bar { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 34px; }
.wq-p3-bar::before, .wq-p3-fill { content: ''; position: absolute; top: 21px; left: 8.33%; height: 2px; background: #eceff4; }
.wq-p3-bar::before { right: 8.33%; }
.wq-p3-fill { z-index: 1; width: 0; max-width: 83.34%; background: #f26629; transition: width .5s ease; }
.wq-p3-btn { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px; border: 0; background: none; cursor: pointer; text-align: center; }
.wq-p3-btn b { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #8590a2; background: #fff; border: 2px solid #eceff4; transition: all .3s; }
.wq-p3-btn span { font-size: 14px; font-weight: 600; line-height: 1.35; color: #8590a2; transition: color .3s; }
.wq-p3-btn.is-done b { color: #f26629; border-color: #f26629; }
.wq-p3-btn.is-on b { color: #fff; background: #f26629; border-color: #f26629; box-shadow: 0 0 0 6px rgba(242,102,41,.15); }
.wq-p3-btn.is-on span { color: #3c4858; }
.wq-p3-pan { display: none; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; padding: 30px; border-radius: 20px; background: #f7f8fb; }
.wq-p3-pan.is-on { display: grid; animation: wqIn .45s ease both; }
@keyframes wqIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wq-p3-img { width: 220px; height: 220px; padding: 18px; border-radius: 24px; background: #fff; }
.wq-p3-k { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #f26629; }
.wq-p3-pan h3 { font-size: 26px; }
.wq-p3-pan p { font-size: 17px; max-width: 620px; }

.wq-i3-grid { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
.wq-i3-side { position: sticky; top: 110px; }
.wq-i3-note { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: #3c4858; }
.wq-i3-note b { font-size: 40px; font-weight: 900; line-height: 1; color: #f26629; }
.wq-i3-note span { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.8); }
.wq-i3-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wq-i3-c { display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 22px; background: #f7f8fb; border: 1px solid transparent; transition: all .3s; }
.wq-i3-c:hover { background: #fff; border-color: #ffd0b8; box-shadow: 0 18px 38px rgba(23,59,90,.08); }
.wq-i3-img { width: 64px; height: 64px; padding: 6px; border-radius: 16px; background: #fff; }

@media (max-width: 991px) {
  .wq .wq-title { font-size: 30px !important; line-height: 40px !important; }
  .wq-i3-grid { grid-template-columns: 1fr; gap: 36px; } .wq-i3-side { position: static; }
  .wq-p3-box { padding: 26px; } .wq-p3-btn span { display: none; } .wq-p3-pan { grid-template-columns: 160px 1fr; gap: 28px; } .wq-p3-img { width: 160px; height: 160px; }
}
@media (max-width: 576px) {
  .wq { padding: 60px 0; } .wq-head { margin-bottom: 30px; } .wq .wq-title { font-size: 22px !important; line-height: 32px !important; }
  .wq-sub, .wq .subtitle_text { font-size: 16px; } .wq h3, .wq-p3-pan h3 { font-size: 19px; }
  .wq-i3-list { grid-template-columns: 1fr; } .wq-i3-c { padding: 24px 20px; }
  .wq-p3-box { padding: 20px 14px; } .wq-p3-btn b { width: 36px; height: 36px; font-size: 12px; } .wq-p3-bar::before, .wq-p3-fill { top: 17px; }
  .wq-p3-pan { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; } .wq-p3-img { width: 110px; height: 110px; } .wq-p3-pan p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .wq-p3-pan.is-on { animation: none; } .wq-p3-fill { transition: none; } }