/* =========================================================
   GeoTech Design Consultants — Service pages (pro design)
   Scope: body.svc-pro  (all 7 service pages)
   ========================================================= */
body.svc-pro { --n: #001659; --n2: #0a2a7a; --o: #ff5e14; --o2: #ff8a4d; --ink: #4a5468; --line: #e1e6f0; counter-reset: svpsec svpcap; }
.svp-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 2000; background: linear-gradient(90deg, var(--o), var(--o2)); transition: width .1s linear; }

/* ---------- HERO ---------- */
.svp-hero { position: relative; overflow: hidden; color: #fff; padding: 4.2rem 0 5.2rem;
    background: radial-gradient(1200px 500px at 85% -10%, rgba(255,94,20,.28), transparent 60%), linear-gradient(135deg, #00103f 0%, #001659 45%, #0a2a7a 100%); }
.svp-hero::before { content: ""; position: absolute; inset: -10%; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 48px 48px; animation: svpGrid 30s linear infinite;
    -webkit-mask: radial-gradient(ellipse at 30% 40%, #000 0, transparent 75%); mask: radial-gradient(ellipse at 30% 40%, #000 0, transparent 75%); }
@keyframes svpGrid { to { transform: translate(48px, 48px); } }
.svp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 54px; background: #fff; clip-path: polygon(0 100%, 100% 100%, 100% 0, 62% 70%, 0 20%); }
.svp-hero .container { position: relative; z-index: 2; }
.svp-crumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; color: #aebbe6; margin-bottom: 1.4rem; padding: 0; list-style: none; }
.svp-crumb a { color: #d5dcf0; text-decoration: none; } .svp-crumb a:hover { color: var(--o2); }
.svp-crumb li + li::before { content: "/"; margin-right: .5rem; color: #6f82c4; }
.svp-crumb li:last-child { color: var(--o2); font-weight: 600; }
.svp-tag { display: inline-flex; align-items: center; gap: .6rem; background: rgba(255,94,20,.16); border: 1px solid rgba(255,138,77,.5); color: #ffb08a; border-radius: 40px; padding: .38rem 1rem; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem; }
.svp-tag i { color: var(--o2); }
.svp-hero h1 { color: #fff; font-weight: 700; line-height: 1.12; font-size: clamp(2rem, 4.2vw, 3.3rem); margin-bottom: 1rem; }
.svp-hero h1 .hl { color: var(--o2); }
.svp-sub { color: var(--o2); font-size: 1.25rem; font-weight: 500; margin-bottom: .9rem; }
.svp-lead { color: #d5dcf0; font-size: 1.06rem; line-height: 1.75; max-width: 640px; margin-bottom: 1.4rem; text-align: left; }
.svp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.svp-chips span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 40px; padding: .38rem .9rem; font-size: .84rem; font-weight: 500; backdrop-filter: blur(4px); }
.svp-chips span::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--o2); margin-right: .45rem; font-size: .7rem; }
.svp-btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.svp-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.7rem; border-radius: 6px; font-weight: 700; text-decoration: none; transition: .25s; }
.svp-btn.pri { background: var(--o); color: #fff; box-shadow: 0 12px 28px rgba(255,94,20,.4); } .svp-btn.pri:hover { background: #fff; color: var(--n); transform: translateY(-3px); }
.svp-btn.gho { border: 2px solid rgba(255,255,255,.55); color: #fff; } .svp-btn.gho:hover { background: #fff; color: var(--n); }
.svp-media { position: relative; padding: 0 0 1.6rem 1.6rem; }
.svp-media::before { content: ""; position: absolute; left: 0; top: 1.6rem; right: 1.6rem; bottom: 0; border: 2px solid rgba(255,138,77,.7); }
.svp-media::after { content: ""; position: absolute; right: -14px; top: -14px; width: 130px; height: 130px; background-image: radial-gradient(var(--o2) 1.6px, transparent 1.7px); background-size: 15px 15px; opacity: .6; }
.svp-media img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4/3.4; object-fit: cover;
    clip-path: polygon(0 0, calc(100% - 52px) 0, 100% 52px, 100% 100%, 52px 100%, 0 calc(100% - 52px)); box-shadow: 0 30px 60px rgba(0,0,0,.4); animation: svpFloat 7s ease-in-out infinite; }
@keyframes svpFloat { 50% { transform: translateY(-8px); } }
.svp-badge { position: absolute; z-index: 3; left: -4px; bottom: 0; background: #fff; color: var(--n); border-radius: 8px; padding: .85rem 1.2rem; display: flex; align-items: center; gap: .8rem; box-shadow: 0 18px 40px rgba(0,0,0,.35); border-left: 4px solid var(--o); max-width: 92%; }
.svp-badge i { width: 40px; height: 40px; border-radius: 8px; background: var(--n); color: #fff; display: flex; align-items: center; justify-content: center; }
.svp-badge b { display: block; line-height: 1.2; font-size: .98rem; } .svp-badge small { color: #6c7a99; font-size: .76rem; }

/* ---------- STICKY "ON THIS PAGE" NAV ---------- */
.svp-nav { position: sticky; z-index: 900; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,22,89,.06); }
.svp-nav .container { display: flex; align-items: center; gap: 1rem; }
.svp-nav-lbl { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--o); white-space: nowrap; }
.svp-nav-list { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 0; }
.svp-nav-list::-webkit-scrollbar { display: none; }
.svp-nav-list a { white-space: nowrap; font-size: .88rem; font-weight: 600; color: var(--n); text-decoration: none; padding: .45rem .95rem; border-radius: 40px; transition: .2s; }
.svp-nav-list a:hover { background: #eef2fb; }
.svp-nav-list a.on { background: var(--n); color: #fff; }

/* ---------- SECTIONS ---------- */
body.svc-pro .container-fluid.py-5 { position: relative; overflow: hidden; scroll-margin-top: 150px; }
body.svc-pro .container-fluid.bg-light { background: linear-gradient(180deg, #f3f6fc, #eaeff9) !important; }
body.svc-pro .container-fluid.bg-light::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(0,22,89,.12) 1.2px, transparent 1.4px); background-size: 28px 28px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 60%, #000); mask: linear-gradient(90deg, transparent, #000 60%, #000); }
body.svc-pro .gu-wrap { position: relative; max-width: 1140px; }
body.svc-pro .gu-wrap, body.svc-pro .gu-wrap p { font-size: 1.04rem; }
body.svc-pro .gu-wrap p.gu-just { color: var(--ink); line-height: 1.85; }
body.svc-pro .gu-wrap > p.gu-just:first-child, body.svc-pro .gu-h2 + p.gu-just { font-size: 1.14rem; color: #2c3752; border-left: 4px solid var(--o); padding-left: 1.2rem; }
body.svc-pro .gu-wrap strong { color: var(--n); }

body.svc-pro .gu-h2 { counter-increment: svpsec; position: relative; padding: .2rem 0 1.1rem 5.4rem; margin-bottom: 1.6rem; font-size: clamp(1.55rem, 2.8vw, 2.25rem); line-height: 1.22; min-height: 4.4rem; display: flex; align-items: center; }
body.svc-pro .gu-h2::before { content: counter(svpsec, decimal-leading-zero); position: absolute; left: 0; top: 50%; transform: translateY(-58%); font-size: 4.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 2px rgba(255,94,20,.55); }
body.svc-pro .gu-h2::after { left: 5.4rem; width: 70px; }
body.svc-pro .gu-h3 { display: flex; align-items: center; gap: .8rem; font-size: 1.12rem; margin: 2.2rem 0 1.2rem; }
body.svc-pro .gu-h3::before { content: ""; width: 34px; height: 4px; border-radius: 4px; background: var(--o); }

/* capability cards */
body.svc-pro .gu-caps { counter-reset: svpcap; }
body.svc-pro .gu-cap { counter-increment: svpcap; position: relative; padding: 1.5rem 1.4rem 1.3rem 1.4rem; border: 1px solid var(--line); border-top: 0; border-radius: 14px; overflow: hidden; background: #fff; transition: .3s; }
body.svc-pro .gu-cap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--o), var(--o2)); }
body.svc-pro .gu-cap::after { content: counter(svpcap, decimal-leading-zero); position: absolute; right: 1rem; top: .5rem; font-size: 2.6rem; font-weight: 800; color: rgba(0,22,89,.06); line-height: 1; }
body.svc-pro .gu-cap:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0,22,89,.16); border-color: #cdd6ea; }
body.svc-pro .gu-cap .svp-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--n), var(--n2)); color: #fff; font-size: 1.05rem; margin-bottom: .9rem; transition: .3s; box-shadow: 0 10px 20px rgba(0,22,89,.25); }
body.svc-pro .gu-cap:hover .svp-ic { background: linear-gradient(135deg, var(--o), var(--o2)); transform: rotate(-8deg) scale(1.08); }
body.svc-pro .gu-cap h6 { font-size: 1.04rem; padding-right: 2.4rem; }
body.svc-pro .gu-cap p { font-size: .95rem; }

/* grouped lists */
body.svc-pro .gu-group { position: relative; border-radius: 16px; padding: 1.7rem 1.6rem; background: linear-gradient(160deg, #001659, #0a2a7a); overflow: hidden; box-shadow: 0 18px 40px rgba(0,22,89,.2); transition: .3s; }
body.svc-pro .gu-group::after { content: ""; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,94,20,.2); }
body.svc-pro .gu-group:hover { transform: translateY(-6px); }
body.svc-pro .gu-group h6 { position: relative; z-index: 1; font-size: 1.05rem; padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 2px solid rgba(255,138,77,.5); }
body.svc-pro .gu-group ul { position: relative; z-index: 1; }

/* timeline steps */
body.svc-pro .gu-steps { position: relative; gap: 1.2rem; padding-left: 0; counter-reset: none; }
body.svc-pro .gu-steps::before { content: ""; position: absolute; left: 31px; top: 20px; bottom: 20px; width: 3px; background: linear-gradient(var(--o), rgba(0,22,89,.15)); border-radius: 3px; }
body.svc-pro .gu-step { position: relative; margin-left: 78px; border-radius: 14px; border: 1px solid var(--line); padding: 1.3rem 1.5rem; transition: .3s; }
body.svc-pro .gu-step:hover { transform: translateX(8px); box-shadow: 0 18px 38px rgba(0,22,89,.14); border-color: #cdd6ea; }
body.svc-pro .gu-step .n { position: absolute; left: -78px; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; min-width: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--n), var(--n2)); border: 5px solid #fff; box-shadow: 0 0 0 2px var(--o), 0 12px 24px rgba(0,22,89,.25); z-index: 1; transition: .3s; }
body.svc-pro .gu-step:hover .n { background: linear-gradient(135deg, var(--o), var(--o2)); }
body.svc-pro .gu-step h6 { font-size: 1.06rem; }

/* area cards */
body.svc-pro .gu-area { border-radius: 16px; border: 1px solid var(--line); border-top: 0; padding: 2rem 1.9rem 1.6rem; overflow: hidden; z-index: 0; transition: .35s; }
body.svc-pro .gu-area::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, #001659, #0a2a7a); transform: translateY(101%); transition: transform .45s ease; }
body.svc-pro .gu-area:hover::before { transform: none; }
body.svc-pro .gu-area:hover h3, body.svc-pro .gu-area:hover .gu-area-go { color: #fff; } body.svc-pro .gu-area:hover p { color: #d5dcf0; } body.svc-pro .gu-area:hover .gu-area-n { color: rgba(255,255,255,.2); }
body.svc-pro .gu-area-n { font-size: 3.2rem; font-weight: 800; }

/* callouts */
body.svc-pro .gu-wrap p.gu-close, body.svc-pro .sv-out { position: relative; background: linear-gradient(135deg, #fff4ee, #fff); border: 1px solid #ffd9c4; border-left: 5px solid var(--o); border-radius: 12px; padding: 1.3rem 1.5rem 1.3rem 3.6rem; box-shadow: 0 10px 26px rgba(255,94,20,.1); color: #2c3752; }
body.svc-pro .gu-wrap p.gu-close::before { content: "\f10d"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 1.2rem; top: 1.2rem; color: var(--o); font-size: 1.3rem; }
body.svc-pro .gu-sub { border-radius: 16px; border: 1px solid var(--line); border-top: 4px solid var(--o); padding: 2rem; box-shadow: 0 14px 34px rgba(0,22,89,.08); }
body.svc-pro .gu-cols li { padding-left: 1.5rem; }

/* feasibility / design components */
body.svc-pro .gu-lens, body.svc-pro .gu-cover, body.svc-pro .gu-deliv, body.svc-pro .gu-abc, body.svc-pro .gu-vert { transition: .3s; }
body.svc-pro .gu-cover:hover, body.svc-pro .gu-deliv:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0,22,89,.15); }
body.svc-pro .gu-abc { border-radius: 18px; } body.svc-pro .gu-abc:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(0,22,89,.16); }
body.svc-pro .gu-vert:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(0,22,89,.15); }
body.svc-pro .gu-lens { border-radius: 18px; }
body.svc-pro .gu-eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
body.svc-pro .gu-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--o); }
body.svc-pro .display-6, body.svc-pro .gu-sp-intro h2 { font-weight: 700; }

/* slope / geo (sv-*) pages */
body.svc-pro .sv-intro { background: #fff; }
body.svc-pro .sv-stage { position: relative; overflow: hidden; }
body.svc-pro .sv-stage .sv-stage-head .no { font-size: 0; display: inline-flex; align-items: baseline; gap: .6rem; }
body.svc-pro .sv-stage .sv-stage-head .no small { font-size: .78rem; letter-spacing: .18em; color: var(--o); }
body.svc-pro .sv-stage .sv-stage-head .no { font-weight: 800; }
body.svc-pro .sv-stage:not(.alt) { background: #fff; }
body.svc-pro .sv-stage.alt { background: linear-gradient(180deg, #f3f6fc, #eaeff9); }
body.svc-pro .sv-stage h2.t { position: relative; padding-bottom: .9rem; } body.svc-pro .sv-stage h2.t::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background: var(--o); border-radius: 4px; }
body.svc-pro .sv-box { border-radius: 16px; border: 1px solid var(--line); border-top: 4px solid var(--o); box-shadow: 0 14px 34px rgba(0,22,89,.08); transition: .3s; }
body.svc-pro .sv-box:hover { box-shadow: 0 22px 46px rgba(0,22,89,.14); }
body.svc-pro .sv-stage img { border-radius: 16px; box-shadow: 0 22px 46px rgba(0,22,89,.18); }
body.svc-pro .sv-index a { border-radius: 14px; transition: .3s; } body.svc-pro .sv-index a:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,22,89,.16); }
body.svc-pro .sv-sectors-strip span { transition: .2s; }

/* ---------- CTA band ---------- */
.svp-cta { position: relative; overflow: hidden; color: #fff; padding: 4.2rem 0; background: linear-gradient(120deg, #001659, #0a2a7a 60%, #14409e); }
.svp-cta::before { content: ""; position: absolute; right: -120px; top: -140px; width: 440px; height: 440px; border-radius: 50%; background: rgba(255,94,20,.22); animation: svpPulse 8s ease-in-out infinite alternate; }
.svp-cta::after { content: ""; position: absolute; left: -80px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; border: 50px solid rgba(255,255,255,.05); }
@keyframes svpPulse { to { transform: scale(1.18); } }
.svp-cta .container { position: relative; z-index: 1; }
.svp-cta h2 { color: #fff; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .6rem; }
.svp-cta p { color: #d5dcf0; margin: 0; max-width: 620px; font-size: 1.05rem; }
.svp-cta .eb { color: var(--o2); letter-spacing: .18em; font-size: .8rem; text-transform: uppercase; font-weight: 700; display: block; margin-bottom: .6rem; }
.svp-cta-side { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
.svp-cta-side .svp-btn { white-space: nowrap; }
.svp-cta-contact { color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.2rem; border-radius: 6px; border: 2px solid rgba(255,255,255,.35); }
.svp-cta-contact:hover { background: rgba(255,255,255,.12); color: #fff; }

/* other-services cards */
body.svc-pro .sector-card { border: 1px solid var(--line); border-radius: 14px !important; box-shadow: 0 8px 24px rgba(0,22,89,.07); transition: .3s; position: relative; overflow: hidden; }
body.svc-pro .sector-card::after { content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: auto; color: var(--o); opacity: 0; transform: translateX(-8px); transition: .3s; }
body.svc-pro .sector-card:hover { transform: translateY(-6px); border-color: var(--o); box-shadow: 0 20px 40px rgba(0,22,89,.15); }
body.svc-pro .sector-card:hover::after { opacity: 1; transform: none; }

/* scroll reveal (class added by JS only) */
.svp-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.svp-rv.in { opacity: 1; transform: none; }

@media (max-width: 991px) {
    .svp-hero { padding: 3rem 0 4rem; } .svp-media { margin-top: 1.5rem; padding-left: 1rem; }
    .svp-cta-side { justify-content: flex-start; margin-top: 1.4rem; }
    body.svc-pro .gu-h2 { padding-left: 4rem; } body.svc-pro .gu-h2::before { font-size: 3.4rem; } body.svc-pro .gu-h2::after { left: 4rem; }
}
@media (max-width: 575px) {
    .svp-nav-lbl { display: none; }
    body.svc-pro .gu-steps::before { left: 21px; } body.svc-pro .gu-step { margin-left: 56px; padding: 1.1rem; } body.svc-pro .gu-step .n { left: -56px; width: 46px; height: 46px; font-size: 1rem; }
    body.svc-pro .gu-h2 { padding-left: 3.2rem; } body.svc-pro .gu-h2::before { font-size: 2.6rem; } body.svc-pro .gu-h2::after { left: 3.2rem; }
    .svp-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .svp-hero::before, .svp-media img, .svp-cta::before { animation: none !important; } .svp-rv { opacity: 1; transform: none; transition: none; } }