.wc4-sec, .wc4-sec *{ box-sizing:border-box; }
.wc4-sec :where(h2,h3,p){ margin:0; }
.wc4-sec a{ text-decoration:none; }

.wc4-full{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

.wc4-sec{
  /* Theme-aware vars (solid only) */
  --page-bg: var(--td_body_bg, var(--td_background_color, #0B1220));
  --text: #fff;
  --muted: var(--td_text_color_secondary, rgba(249,250,251,.72));
  --accent: var(--td_theme_color, var(--td_theme_color_main, #0A7674));

  /* No gradients: solid background slightly lifted */
  --bg: color-mix(in srgb, var(--page-bg) 86%, white 14%);
  --card: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.08);

  background: var(--wc4-custom-bg, var(--bg));
  padding: 76px 0 82px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

@supports not (color: color-mix(in srgb, red 50%, white)){
  .wc4-sec{ --bg:#101A2B; }
}

.wc4-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 16px;
}

.wc4-head{ text-align:center; margin-bottom: 28px; }
.wc4-title{ color:var(--text); font-size: 42px; font-weight: 1000; line-height: 1.15; }
.wc4-sub{ margin: 10px auto 0; max-width: 780px; color:var(--muted); font-size: 15.6px; font-weight: 750; line-height: 2; }

.wc4-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1120px){
  .wc4-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .wc4-grid{ grid-template-columns: 1fr; gap: 14px; }
  .wc4-title{ font-size: 32px; }
  .wc4-sub{ font-size: 14.8px; }
}

.wc4-item{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 20px 18px 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.26);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.wc4-item:hover{
  transform: translateY(-3px);
  border-color: rgba(10,118,116,.38);
  box-shadow: 0 22px 60px rgba(0,0,0,.32);
}

.wc4-line{ display:flex; align-items:center; gap: 10px; margin-bottom: 10px; }

.wc4-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 54px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke2);
  color: var(--accent);
  font-weight: 1000;
  font-size: 16px;
  letter-spacing: .6px;
  flex: 0 0 auto;
}

.wc4-h{ color: var(--text); font-size: 17px; font-weight: 1000; line-height: 1.45; }
.wc4-p{ color: var(--muted); font-size: 14px; font-weight: 750; line-height: 1.95; }

.wc4-cta{ text-align:center; margin-top: 28px; }
.wc4-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--accent);
  color:#fff;
  font-weight: 1000;
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
  transition: transform .16s ease, filter .16s ease;
}
.wc4-btn:hover{ transform: translateY(-2px); filter: brightness(1.03); }

@media (prefers-reduced-motion: reduce){
  .wc4-item, .wc4-btn{ transition:none !important; }
  .wc4-item:hover, .wc4-btn:hover{ transform:none; }
}


/* END WC4 */


/* =========================================================
   SW5 – Portfolio by Service Type (Theme-aware)
   - Desktop cols controlled via CSS var --sw5-cols (1..5)
   ========================================================= */