/* Individual service detail pages — shared styling and readable technical layout. */
.service-detail-hero { position: relative; overflow: hidden; padding: clamp(74px, 10vw, 124px) 0 76px; border-bottom: 1px solid rgba(148,195,220,.15); }
.service-detail-hero .container { position: relative; z-index: 2; }
.service-detail-hero h1 { max-width: 980px; margin: 14px 0 22px; color: #f2f9fc; font: 800 clamp(2.55rem, 6.2vw, 5.45rem)/.98 "Space Grotesk", Inter, sans-serif; letter-spacing: -.055em; }
.service-detail-hero h1 span { color: #5fe3ff; }
.service-detail-hero .service-lead { max-width: 820px; color: #b2c5d0; font-size: clamp(1rem, 1.65vw, 1.16rem); line-height: 1.8; }
.service-detail-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.service-detail-chips span { display: inline-flex; padding: 8px 12px; border: 1px solid rgba(95,227,255,.2); border-radius: 999px; color: #d1e3eb; background: rgba(95,227,255,.045); font-size: .72rem; font-weight: 750; }
.service-detail-section { padding: clamp(54px, 7vw, 82px) 0; border-bottom: 1px solid rgba(148,195,220,.09); }
.service-detail-section .section-title { color: #edf7fb; font: 800 clamp(1.8rem, 4vw, 3.1rem)/1.08 "Space Grotesk", Inter, sans-serif; letter-spacing: -.04em; max-width: 850px; }
.service-detail-intro { max-width: 820px; color: #a8bdc9; line-height: 1.8; margin: 18px 0 0; }
.service-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 30px; }
.service-detail-card { min-width: 0; padding: 22px; border: 1px solid rgba(148,195,220,.15); border-radius: 17px; background: linear-gradient(145deg, rgba(12,28,42,.82), rgba(4,12,20,.77)); }
.service-detail-card .service-card-kicker { color: #5fe3ff; font: 800 .65rem/1.3 "Space Grotesk", Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.service-detail-card h3 { margin: 11px 0 10px; color: #eaf5fa; font-size: 1.05rem; line-height: 1.3; }
.service-detail-card p { margin: 0; color: #9fb5c1; font-size: .88rem; line-height: 1.7; }
.service-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px 22px; padding: 0; margin: 26px 0 0; list-style: none; }
.service-detail-list li { position: relative; padding: 12px 14px 12px 38px; border: 1px solid rgba(148,195,220,.12); border-radius: 12px; background: rgba(255,255,255,.025); color: #c5d6df; line-height: 1.55; }
.service-detail-list li::before { content: "✓"; position: absolute; left: 14px; top: 11px; color: #54d889; font-weight: 900; }
.service-detail-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.service-detail-note { margin-top: 18px; color: #8199a8; font-size: .8rem; line-height: 1.6; }
@media (max-width: 820px) { .service-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .service-detail-grid, .service-detail-list { grid-template-columns: minmax(0,1fr); } .service-detail-card { padding: 19px; } }


/* Premium service detail imagery using existing GeoProcess Consulting asset library. */
.service-detail-hero-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr); align-items:center; gap:clamp(28px,5vw,72px); }
.service-detail-hero-copy { min-width:0; }
.service-detail-hero-art { min-width:0; margin:0; padding:12px; border:1px solid rgba(148,195,220,.18); border-radius:22px; background:linear-gradient(145deg,rgba(12,30,45,.86),rgba(4,12,20,.9)); box-shadow:0 28px 90px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035); }
.service-art-topline { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 7px 13px;color:#7894a4;font:800 .58rem/1.3 "Space Grotesk",sans-serif;letter-spacing:.12em; }
.service-art-live { display:flex;align-items:center;gap:7px;color:#8fe6c2;white-space:nowrap; }
.service-art-live i { width:6px;height:6px;border-radius:50%;background:#54d889;box-shadow:0 0 12px rgba(84,216,137,.45); }
.service-art-image { position:relative;aspect-ratio:1.08 / 1;overflow:hidden;border-radius:15px;border:1px solid rgba(95,227,255,.13);background:#06111d; }
.service-art-image img { display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.05); }
.service-art-image::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,10,17,.02) 24%,rgba(3,10,17,.76) 100%),linear-gradient(90deg,rgba(3,10,17,.1),transparent 50%,rgba(3,10,17,.08)); }
.service-art-tag { position:absolute;z-index:1;left:14px;right:14px;bottom:15px;padding:8px 10px;border:1px solid rgba(95,227,255,.23);border-radius:8px;background:rgba(5,16,27,.72);color:#d9f5fb;font:800 .57rem/1.4 "Space Grotesk",sans-serif;letter-spacing:.07em; }
.service-art-corner { position:absolute;z-index:1;display:block;width:18px;height:18px;border-color:rgba(95,227,255,.76);border-style:solid;pointer-events:none; }
.service-art-corner-a { top:13px;left:13px;border-width:1px 0 0 1px; }
.service-art-corner-b { top:13px;right:13px;border-width:1px 1px 0 0; }
.service-detail-hero-art figcaption { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:15px 7px 5px; }
.service-detail-hero-art figcaption span { flex:0 0 auto;color:#5fe3ff;font:800 .55rem/1.5 "Space Grotesk",sans-serif;letter-spacing:.09em; }
.service-detail-hero-art figcaption strong { max-width:255px;color:#eaf6fb;font:700 .82rem/1.45 "Space Grotesk",sans-serif;text-align:right; }
.service-detail-showcase { padding:clamp(44px,6vw,72px) 0;border-bottom:1px solid rgba(148,195,220,.09); }
.service-showcase-heading { display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:12px 0 25px; }
.service-showcase-heading .section-title { max-width:700px; }
.service-showcase-heading p { max-width:420px;margin:0;color:#94aebc;font-size:.87rem;line-height:1.7; }
.service-detail-gallery { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px; }
.service-gallery-card { min-width:0;margin:0;overflow:hidden;border:1px solid rgba(148,195,220,.15);border-radius:17px;background:linear-gradient(145deg,rgba(12,28,42,.82),rgba(4,12,20,.86)); }
.service-gallery-image { aspect-ratio:1.85 / 1;overflow:hidden;background:#071522; }
.service-gallery-image img { display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.72,.22,1); }
.service-gallery-card:hover .service-gallery-image img { transform:scale(1.025); }
.service-gallery-card figcaption { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:15px 17px 17px; }
.service-gallery-card figcaption span { color:#5fe3ff;font:800 .55rem/1.5 "Space Grotesk",sans-serif;letter-spacing:.1em; }
.service-gallery-card figcaption strong { max-width:64%;color:#e0edf3;font:650 .82rem/1.5 "Space Grotesk",sans-serif;text-align:right; }
@media(max-width:900px) { .service-detail-hero-layout { grid-template-columns:minmax(0,1fr); } .service-detail-hero-art { max-width:650px; } .service-art-image { aspect-ratio:1.6 / 1; } }
@media(max-width:680px) { .service-showcase-heading { display:block; } .service-showcase-heading p { margin-top:12px; } .service-detail-gallery { grid-template-columns:1fr; } .service-gallery-image { aspect-ratio:1.55 / 1; } .service-gallery-card figcaption { display:block; } .service-gallery-card figcaption strong { display:block;max-width:none;margin-top:5px;text-align:left; } .service-detail-hero-art figcaption { display:block; } .service-detail-hero-art figcaption strong { display:block;max-width:none;margin-top:5px;text-align:left; } }
@media(prefers-reduced-motion:reduce) { .service-gallery-image img { transition:none; } .service-gallery-card:hover .service-gallery-image img { transform:none; } }


/* Image-fit correction: show the entire source artwork; do not crop labels, map edges or CAD details. */
.service-art-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(95,227,255,.13);
  background: #07131d;
  aspect-ratio: 16 / 10;
}
.service-art-image--lidar { aspect-ratio: 1600 / 680; }
.service-art-image--photogrammetry { aspect-ratio: 1226 / 782; }
.service-art-image--gis { aspect-ratio: 2048 / 1448; }
.service-art-image--webgis { aspect-ratio: 1918 / 914; }
.service-art-image--cad { aspect-ratio: 813 / 377; }
.service-art-image--bim { aspect-ratio: 640 / 400; }
.service-art-image--mobile { aspect-ratio: 1859 / 730; }
.service-art-image--3d { aspect-ratio: 916 / 915; }
.service-art-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  filter: none !important;
  background: #07131d;
}
.service-art-image::after { content: none !important; display: none !important; }
.service-art-tag { display: none !important; }
.service-art-corner { pointer-events: none; }
.service-gallery-image { display: grid; place-items: center; background: #07131d; }
.service-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  background: #07131d;
}
/* Anchor destinations remain visible below the sticky header. */
#faqs, #contact, #project-enquiry { scroll-margin-top: 108px; }


/* Practical service knowledge sections — editorial hierarchy, restrained glass panels. */
.service-knowledge-section { padding: clamp(48px, 6.5vw, 82px) 0; border-bottom: 1px solid rgba(148,195,220,.12); }
.service-knowledge-heading { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(260px,.88fr); align-items:end; gap:clamp(20px,4vw,58px); margin: 12px 0 28px; }
.service-knowledge-heading .section-title { margin:0; }
.service-knowledge-heading > p { max-width:560px; margin:0; color:#a8bdc9; line-height:1.8; font-size:.95rem; }
.service-knowledge-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.service-knowledge-card { min-width:0; padding:clamp(18px,2.2vw,27px); border:1px solid rgba(95,227,255,.16); border-radius:18px; background:linear-gradient(145deg,rgba(13,31,46,.86),rgba(4,12,20,.82)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.service-knowledge-index { display:block; margin-bottom:16px; color:#5fe3ff; font:800 .64rem/1.4 "Space Grotesk",Inter,sans-serif; letter-spacing:.12em; }
.service-knowledge-card h3 { margin:0 0 11px; color:#edf8fc; font:750 clamp(1.08rem,1.5vw,1.3rem)/1.25 "Space Grotesk",Inter,sans-serif; letter-spacing:-.025em; }
.service-knowledge-card p { margin:0; color:#a9beca; font-size:.9rem; line-height:1.75; }
.service-knowledge-card ul { margin:15px 0 0; padding-left:18px; color:#c6d7df; font-size:.82rem; line-height:1.65; }
.service-knowledge-card li+li { margin-top:7px; }
.service-knowledge-callout { margin-top:19px; padding:20px 22px; border-left:3px solid #5fe3ff; border-radius:0 14px 14px 0; background:rgba(95,227,255,.055); }
.service-knowledge-callout strong { color:#eaf9ff; font:750 .93rem/1.5 "Space Grotesk",Inter,sans-serif; }
.service-knowledge-callout p { margin:7px 0 0; color:#a9beca; line-height:1.75; font-size:.9rem; }
.service-knowledge-sources { margin-top:18px; color:#829dad; font-size:.78rem; line-height:1.8; }
.service-knowledge-sources span { color:#b9d0dc; font-weight:800; }
.service-knowledge-sources a { color:#75dfff; text-decoration:underline; text-decoration-color:rgba(117,223,255,.35); text-underline-offset:3px; }
.service-related-links { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:22px; }
.service-related-links strong { width:100%; margin-bottom:2px; color:#a8bdc9; font:800 .64rem/1.5 "Space Grotesk",Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.service-related-links a { display:inline-flex; padding:9px 12px; border:1px solid rgba(148,195,220,.18); border-radius:999px; color:#d5eaf2; background:rgba(255,255,255,.025); font-size:.78rem; text-decoration:none; transition:background .2s,border-color .2s,color .2s; }
.service-related-links a:hover,.service-related-links a:focus-visible { border-color:rgba(95,227,255,.5); color:#fff; background:rgba(95,227,255,.09); }
@media(max-width:820px) { .service-knowledge-heading { grid-template-columns:1fr; align-items:start; } .service-knowledge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .service-knowledge-grid,.service-knowledge-grid--three { grid-template-columns:1fr; } .service-knowledge-card { padding:20px; } .service-knowledge-callout { padding:17px; } }
