/* Services Overview page — scoped under .svc-page
   Body class: .svc-services
   Library: notech_subtheme.services_overview
*/

/* full-width override */
.svc-services .header-title { display: none !important; }
.svc-services .container.container-bg,
.svc-services #content > .container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.svc-page {
  --ink:  #0b1623;
  --nv1:  #0f1e31;
  --nv2:  #152840;
  --am:   #e8a830;
  --amk:  #c48820;
  --am-x: rgba(232,168,48,0.11);
  --sl:   #2e6da4;
  --sl-x: rgba(46,109,164,0.10);
  --sl-b: rgba(46,109,164,0.22);
  --mu:   #5a6f88;
  --lgt:  #f2f5f9;
  --bd:   #dce4ef;
  --tx:   #1e2d42;
  --wh:   #ffffff;
}
.svc-page *, .svc-page *::before, .svc-page *::after { box-sizing: border-box; }
.svc-page { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--tx); line-height: 1.6; }

.svc-page .wrap { max-width: 1160px; margin: 0 auto; padding: 0 36px; }
.svc-page .eyebrow { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--am); margin-bottom: 12px; }
.svc-page .eyebrow.sl { color: var(--sl); }

/* HERO */
.svc-page .hero { background: var(--ink); padding: 72px 0 64px; position: relative; overflow: hidden; }
.svc-page .hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 700px 500px at 80% 0%, rgba(232,168,48,0.06) 0%, transparent 65%), radial-gradient(ellipse 400px 300px at 10% 100%, rgba(46,109,164,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.svc-page .hero-inner { position: relative; z-index: 1; }
.svc-page .hero h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; line-height: 1.08; color: var(--wh); letter-spacing: -0.02em; text-wrap: balance; margin-bottom: 18px; max-width: 680px; }
.svc-page .hero h1 span { color: var(--am); }
.svc-page .hero p { color: rgba(255,255,255,0.6); font-size: 1.05rem; max-width: 560px; margin-bottom: 28px; line-height: 1.7; }

.svc-page .hero-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-page .hnav-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 6px; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.svc-page .hnav-link.am { background: var(--am-x); border: 1px solid rgba(232,168,48,0.35); color: var(--am); }
.svc-page .hnav-link.am:hover { background: rgba(232,168,48,0.2); }
.svc-page .hnav-link.sl { background: var(--sl-x); border: 1px solid rgba(46,109,164,0.3); color: #7bbde4; }
.svc-page .hnav-link.sl:hover { background: var(--sl-b); }
.svc-page .hnav-link.wh { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.65); }
.svc-page .hnav-link.wh:hover { background: rgba(255,255,255,0.1); }
.svc-page .hnav-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.svc-page .hnav-dot.am { background: var(--am); }
.svc-page .hnav-dot.sl { background: #7bbde4; }

/* SITUATION FINDER */
.svc-page .finder { background: var(--wh); border-bottom: 1px solid var(--bd); padding: 52px 0; }
.svc-page .finder-intro { text-align: center; margin-bottom: 36px; }
.svc-page .finder-intro h2 { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.svc-page .finder-intro p  { font-size: 0.88rem; color: var(--mu); margin-top: 4px; }
.svc-page .finder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc-page .finder-card { border: 1.5px solid var(--bd); border-radius: 10px; padding: 22px 22px 18px; cursor: pointer; text-decoration: none; display: block; transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; }
.svc-page .finder-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.07); }
.svc-page .finder-card.am:hover { border-color: var(--am); }
.svc-page .finder-card.sl:hover { border-color: var(--sl); }
.svc-page .finder-card.mx:hover { border-color: var(--am); }
.svc-page .finder-situation { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.svc-page .finder-situation.am { color: var(--am); }
.svc-page .finder-situation.sl { color: var(--sl); }
.svc-page .finder-situation.mx { color: var(--am); }
.svc-page .finder-card h3 { font-size: 0.95rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; line-height: 1.3; text-wrap: balance; }
.svc-page .finder-card p  { font-size: 0.82rem; color: var(--mu); line-height: 1.55; }
.svc-page .finder-services { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.svc-page .fsvc { font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.svc-page .fsvc.am { background: var(--am-x); color: var(--amk); }
.svc-page .fsvc.sl { background: var(--sl-x); color: var(--sl); }

/* SERVICE GROUPS */
.svc-page .svc-group { padding: 72px 0; }
.svc-page .svc-group.lgt { background: var(--lgt); }
.svc-page .svc-group.wht { background: var(--wh); }
.svc-page .group-hd { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid var(--bd); }
.svc-page .group-hd-left h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; color: var(--ink); text-wrap: balance; }
.svc-page .group-hd-left p { color: var(--mu); font-size: 0.9rem; margin-top: 6px; max-width: 520px; }
.svc-page .group-count { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mu); white-space: nowrap; }

.svc-page .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.svc-page .svc-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--bd); display: flex; flex-direction: column; transition: box-shadow 0.18s, transform 0.18s; }
.svc-page .svc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.1); }
.svc-page .svc-card-head { padding: 24px 24px 20px; border-bottom: 1px solid var(--bd); }
.svc-page .svc-card.am-card .svc-card-head { background: var(--ink); border-bottom-color: rgba(255,255,255,0.07); }
.svc-page .svc-card.sl-card .svc-card-head { background: var(--nv2); border-bottom-color: rgba(255,255,255,0.07); }
.svc-page .svc-card.wh-card .svc-card-head { background: var(--wh); }
.svc-page .svc-icon { font-size: 26px; margin-bottom: 12px; display: block; }
.svc-page .svc-name { font-size: 1.05rem; font-weight: 800; line-height: 1.2; text-wrap: balance; margin-bottom: 6px; }
.svc-page .svc-card.am-card .svc-name { color: var(--wh); }
.svc-page .svc-card.sl-card .svc-name { color: var(--wh); }
.svc-page .svc-card.wh-card .svc-name { color: var(--ink); }
.svc-page .svc-pitch { font-size: 0.8rem; line-height: 1.55; }
.svc-page .svc-card.am-card .svc-pitch { color: rgba(255,255,255,0.55); }
.svc-page .svc-card.sl-card .svc-pitch { color: rgba(255,255,255,0.5); }
.svc-page .svc-card.wh-card .svc-pitch { color: var(--mu); }

.svc-page .svc-card-body { padding: 18px 24px 20px; background: var(--wh); flex: 1; display: flex; flex-direction: column; }
.svc-page .svc-bullets { list-style: none; flex: 1; }
.svc-page .svc-bullets li { font-size: 0.81rem; color: var(--tx); padding: 5px 0 5px 14px; position: relative; border-bottom: 1px solid var(--lgt); }
.svc-page .svc-bullets li:last-child { border-bottom: none; }
.svc-page .svc-bullets li::before { content: ''; position: absolute; left: 0; top: 52%; width: 5px; height: 5px; border-radius: 50%; transform: translateY(-50%); }
.svc-page .am-card .svc-bullets li::before { background: var(--am); }
.svc-page .sl-card .svc-bullets li::before { background: var(--sl); }
.svc-page .wh-card .svc-bullets li::before { background: var(--mu); }
.svc-page .svc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.svc-page .am-card .svc-link { color: var(--am); }
.svc-page .sl-card .svc-link { color: var(--sl); }
.svc-page .wh-card .svc-link { color: var(--ink); }
.svc-page .svc-link::after { content: '→'; }

/* ALWAYS INCLUDED */
.svc-page .always-sec { background: var(--nv1); padding: 64px 0; }
.svc-page .always-hd { text-align: center; margin-bottom: 44px; }
.svc-page .always-hd h2 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; color: var(--wh); text-wrap: balance; }
.svc-page .always-hd p  { color: rgba(255,255,255,0.5); margin-top: 8px; font-size: 0.92rem; max-width: 480px; margin-left: auto; margin-right: auto; }
.svc-page .always-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.svc-page .always-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; padding: 20px 18px; }
.svc-page .ai-icon { font-size: 22px; margin-bottom: 10px; display: block; }
.svc-page .always-item h3 { font-size: 0.88rem; font-weight: 700; color: var(--wh); margin-bottom: 5px; }
.svc-page .always-item p  { font-size: 0.78rem; color: rgba(255,255,255,0.42); line-height: 1.55; }

/* CTA */
.svc-page .cta-sec { background: var(--am); padding: 64px 36px; text-align: center; }
.svc-page .cta-sec h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); font-weight: 900; color: var(--ink); margin-bottom: 10px; text-wrap: balance; letter-spacing: -0.01em; }
.svc-page .cta-sec p  { color: rgba(11,22,35,0.6); max-width: 460px; margin: 0 auto 28px; font-size: 0.97rem; }
.svc-page .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.svc-page .btn-ink  { padding: 13px 28px; background: var(--ink); color: var(--wh); border-radius: 7px; font-weight: 700; font-size: 0.9rem; text-decoration: none; display: inline-block; }
.svc-page .btn-out  { padding: 13px 28px; background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 7px; font-weight: 700; font-size: 0.9rem; text-decoration: none; display: inline-block; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .svc-page .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-page .finder-grid { grid-template-columns: 1fr; }
  .svc-page .always-grid { grid-template-columns: 1fr 1fr; }
  .svc-page .group-hd { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 600px) {
  .svc-page .svc-grid { grid-template-columns: 1fr; }
  .svc-page .always-grid { grid-template-columns: 1fr; }
  .svc-page .wrap { padding: 0 18px; }
  .svc-page .hero-nav { flex-direction: column; }
}