/* ═══════════════════════════════════════════════════════════════════════════
   PROCESSING-SERVICES PAGES — page-group rules
   2026 design system — Geomage Website (www.geomage.com)

   Loaded ALONGSIDE main.css by the five service pages:
     /services/                              frontend/services.html
     /onshore-seismic-processing/            frontend/onshore-seismic-processing.html
     /marine-seismic-processing/             frontend/marine-seismic-processing.html
     /multifocusing-time-and-depth-imaging/  frontend/multifocusing-imaging-service.html
     /fault-fracture-detection/              frontend/fault-fracture-detection.html

   Only what the design-system components do NOT already provide lives here:

     · .hero margin-top reset — these five pages carry no .subnav, so the
       component's 116px header+subnav offset has to come back to 70px
       (same override pages/home.css writes, same reason).
     · .svc-nav*     — the service switcher rail that replaces the legacy
                       jQuery thumbnail slider (4 thumbnails + labels).
     · .svc-compare* — the before / after figure pair that replaces the legacy
                       twentytwenty drag handle. Same two images, same labels
                       ("Before" / "After" were the plugin's own), no jQuery.
     · .svc-split    — capabilities layout: full-width comparison figure with the
                       bullet list beneath it.
     · .svc-list     — capability bullets outside a card, two columns
                       (components/mod-cards .mod__features is card-scoped:
                       12.5px and margin-top:auto).
     · .svc-prose    — long-form editorial prose (components/section-head
                       .intro__text is centred, which does not read at 5
                       paragraphs).
     · .svc-rel*     — the "related solutions" link cards.
     · .svc-more     — the "Learn more …" link that stretches over a .mod card.
     · .svc-band     — white section background for the prose band.
     · .svc-nb       — no-break wrapper for "g-Platform" inside long headlines.
     · .cta__note a  — components/cta.css never expected a link in the small
                       print; these pages put "← Back to all services" there.

   Everything else on these pages is a component: .hero (+ .hero__inner--narrow),
   .section-head / .eyebrow, .modules__grid / .mod, .cta, and the header/footer
   includes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO OFFSET (no subnav on these pages) ──────────────────────────────── */
.hero { margin-top: 70px; }
/* Anchor targets clear the fixed header only (header-2026.css assumes +subnav).
   `article[id]` too: on /services/ the rail jumps to the four .mod cards, which
   header-2026.css's `section[id]` rule does not reach. */
section[id],
article[id] { scroll-margin-top: 86px; }
@media (max-width: 720px) {
  section[id],
  article[id] { scroll-margin-top: 76px; }
}

/* ── SERVICE SWITCHER RAIL ───────────────────────────────────────────────── */
.svc-nav { background: var(--bg-white); border-bottom: 1px solid var(--border); padding: 26px 0 30px; }
.svc-nav .eyebrow { margin-bottom: 16px; }
.svc-nav__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.svc-nav__item {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.svc-nav__item:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.svc-nav__item img { width: 100%; height: 104px; object-fit: cover; object-position: center; display: block; background: #0d1117; }
.svc-nav__t { padding: 11px 14px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--text-dark); }
.svc-nav__item:hover .svc-nav__t { color: var(--orange); }
.svc-nav__item--current { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange-border); }
.svc-nav__item--current .svc-nav__t { color: var(--orange); }

/* ── BEFORE / AFTER FIGURE PAIR ──────────────────────────────────────────── */
.svc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.svc-compare__half {
  position: relative; overflow: hidden; background: #0d1117;
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
/* Natural aspect: seismic sections must not be cropped where they are the
   evidence. The two images of a pair share an aspect ratio on every page, so
   the halves line up without a forced box. */
.svc-compare__half img { width: 100%; height: auto; display: block; }
.svc-compare__label {
  position: absolute; top: 9px; left: 9px; z-index: 1;
  font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(10, 18, 35, .78); padding: 3px 9px; border-radius: 100px;
}
.svc-compare__half--after .svc-compare__label { background: var(--orange); }

/* Inside a .mod card the pair replaces the single media strip. */
.mod__media--compare { height: auto; }
.mod__media--compare .svc-compare { gap: 0; }
.mod__media--compare .svc-compare__half { border: none; border-radius: 0; border-right: 1px solid var(--border); }
.mod__media--compare .svc-compare__half:last-child { border-right: none; }
/* In the card the pair is a teaser, so it crops to one uniform strip across the
   grid row; the uncropped pair lives on the service's own page. */
.mod__media--compare .svc-compare__half img { height: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center; }

/* ── CAPABILITIES (full-width comparison, bullets beneath) ───────────────── */
/* On these four pages the before/after pair IS the content, so the figure takes
   the whole container rather than sharing the row with the bullets: ~567px per
   seismic panel at 1440px (the legacy twentytwenty slider showed ~648px), where
   a figure-beside-list split left only ~340px per panel. */
.svc-split { display: grid; grid-template-columns: 1fr; gap: 34px; }

/* Two columns so no capability line runs the full 1144px container measure.
   Multi-column, not a 2-col grid: a grid flows row-wise (1|2 / 3|4 / 5), so
   reading down the left column skips items. `columns` flows top-to-bottom,
   which is the order the list is written in. */
.svc-list { list-style: none; columns: 2; column-gap: 44px; }
.svc-list li {
  display: flex; align-items: flex-start; gap: 11px; break-inside: avoid;
  font-size: 14px; line-height: 1.65; color: var(--text);
}
.svc-list li + li { margin-top: 13px; }
.svc-list li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0; margin-top: 8px;
}

/* Product names must not break at their hyphen: "g-Platform" wrapping as
   "g-" / "Platform" mid-headline reads as a typo. */
.svc-nb { white-space: nowrap; }

/* ── EDITORIAL PROSE BAND ────────────────────────────────────────────────── */
.svc-band { background: var(--bg-white); }
.svc-prose { max-width: 840px; margin: 0 auto; }
.svc-prose p { font-size: 15.5px; line-height: 1.85; color: var(--text); }
.svc-prose p + p { margin-top: 18px; }
.svc-prose strong { color: var(--text-dark); font-weight: 600; }

/* ── RELATED-SOLUTION LINK CARDS ─────────────────────────────────────────── */
.svc-rel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-rel {
  display: block; text-decoration: none;
  background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 22px 24px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.svc-rel:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.svc-rel__t {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  color: var(--text-dark); line-height: 1.25; margin-bottom: 8px;
}
.svc-rel:hover .svc-rel__t { color: var(--orange); }
.svc-rel__t svg { width: 13px; height: 13px; stroke: var(--orange); fill: none; stroke-width: 2.5; flex-shrink: 0; }
.svc-rel__d { display: block; font-size: 12.5px; line-height: 1.6; color: var(--text); }

/* ── BACK LINK IN THE CTA'S SMALL PRINT ──────────────────────────────────── */
/* components/cta.css styles .cta__note but never expected a link inside it. */
.cta__note a { color: rgba(255, 255, 255, .55); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.cta__note a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); }

/* ── "LEARN MORE" LINK ON A MODULE CARD ──────────────────────────────────── */
/* The card's flex spacer is the link, not the feature list: one of the four
   service cards carries paragraphs instead of bullets, and the links only line
   up across a grid row if the bottom element is the one that absorbs the slack.
   (components/mod-cards.css puts `margin-top:auto` on .mod__features.) */
.mod__features { margin-top: 0; margin-bottom: 18px; }
/* .mod is position:relative, so the pseudo-element makes the whole card the
   click target while the visible affordance stays a text link. */
.svc-more {
  display: flex; align-items: center; gap: 6px; width: 100%;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none;
  transition: gap .18s var(--ease);
}
.svc-more:hover { gap: 10px; }
.svc-more::after { content: ''; position: absolute; inset: 0; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .svc-nav__grid { grid-template-columns: repeat(2, 1fr); }
  .svc-split { gap: 28px; }
  .svc-list { columns: 1; }
  .svc-rel__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .hero { margin-top: 60px; }
  .svc-nav__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc-nav__item img { height: 84px; }
  .svc-compare { grid-template-columns: 1fr; }
  .mod__media--compare .svc-compare__half { border-right: none; border-bottom: 1px solid var(--border); }
  .mod__media--compare .svc-compare__half:last-child { border-bottom: none; }
  .svc-rel__grid { grid-template-columns: 1fr; }
  .svc-prose p { font-size: 15px; }
}

@media (max-width: 480px) {
  /* These pages' CTA labels ("Download g-Platform free trial") are longer than
     the concept's, and components/hero.css puts two of them side by side with
     `flex:1` below 720px — at phone width that breaks the product name across
     lines. Full-width stacked buttons instead. */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; justify-content: center; }
}