/* Service detail pages (International-Maintenance.php and the rest of the Services menu).
   Replaces the flat brand-page.css treatment these used to share with partner pages.

   Why a separate file: brand pages are a catalogue — logo, blurb, product shots in a
   sticky grid. Service pages are a story: what the service is, proof it works, what it
   covers, what happens next. The old shared layout left the left column ending halfway
   down a tall sticky gallery, so every service page had a large empty gutter.

   Visual language is deliberately borrowed from the homepage (corporate-home.css): the
   same animated navy hero, the same teal stat numbers, the same numbered step cards and
   dark closing CTA — so a service page reads as part of the site rather than a
   differently-themed island. */

/* ============================================================
   HERO — dark, matching the homepage's animated gradient
   ============================================================ */
.q-svc-hero {
  position: relative;
  background: linear-gradient(120deg, #0a0e14, #0c1828, #111a36, #0a1226, #0a0e14);
  background-size: 300% 100%;
  animation: q-svc-hero-bg 16s ease infinite;
  color: #fff;
  padding: calc(var(--q-header-h) + var(--q-space-14)) var(--q-space-4) var(--q-space-14);
  overflow: hidden;
  max-width: 100vw;
  /* Same fix as .q-home-hero in corporate-home.css: the header and this hero each run
     their own independent CSS animation, putting each on its own GPU-composited layer —
     two separately-composited layers meeting at a fractional-pixel boundary can leave a
     sub-pixel seam where the page's plain background shows through, worse at narrower
     widths where the header wraps to two rows. Overlapping the hero slightly under the
     header removes the seam: two dark layers overlap there instead of meeting edge-to-edge. */
  margin-top: -4px;
}
@keyframes q-svc-hero-bg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Soft teal bloom behind the text — the homepage hero has a comparable glow around its
   diagram; without it this hero reads as a flat black slab. */
.q-svc-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(49,177,216,0.16), transparent 62%);
  pointer-events: none;
}
/* Faint grid, echoing the technical subject matter. Masked so it fades out rather than
   ending on a hard edge. */
.q-svc-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
  pointer-events: none;
}

.q-svc-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--q-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--q-space-12);
  align-items: center;
}

.q-svc-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,0.5);
  margin-bottom: var(--q-space-5);
}
.q-svc-breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; }
.q-svc-breadcrumb a:hover { color: var(--q-primary-dark, #7fd6f0); }
.q-svc-breadcrumb i { font-size: 9px; opacity: 0.5; }
.q-svc-breadcrumb span { color: rgba(255,255,255,0.85); }

.q-svc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--q-primary-dark, #7fd6f0);
  background: rgba(49,177,216,0.12);
  border: 1px solid rgba(49,177,216,0.25);
  padding: 6px 14px; border-radius: var(--q-radius-pill);
  margin-bottom: var(--q-space-5);
}
.q-svc-hero h1 {
  font-size: clamp(32px, 4.4vw, 54px);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 var(--q-space-5); color: #fff;
}
.q-svc-hero h1 span { color: var(--q-primary-dark, #7fd6f0); }
.q-svc-hero-lead {
  font-size: 17px; line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 620px; margin: 0 0 var(--q-space-8);
}
.q-svc-hero-actions { display: flex; flex-wrap: wrap; gap: var(--q-space-3); }
/* The hero sits on navy, so the secondary button needs its own light-on-dark treatment
   rather than the global .q-btn-secondary (which is built for light backgrounds). */
.q-svc-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; min-height: 44px;
  border-radius: var(--q-radius-pill);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff; background: transparent;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: border-color var(--q-transition), background var(--q-transition);
}
.q-svc-btn-ghost:hover {
  border-color: var(--q-primary-dark, #7fd6f0);
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* Hero image, mirroring the homepage's right-hand visual slot. Also doubles as a Swiper
   root (.q-svc-hero-swiper) when the page rotates several field photos here instead of a
   single static shot — see the "In the Field" gallery that used to live further down the
   page before it was folded into this slot to cut scroll length. */
.q-svc-hero-visual {
  position: relative;
  border-radius: var(--q-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  aspect-ratio: 4 / 3;
}
.q-svc-hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;   /* these are photographs, not logos — contain was letterboxing them */
  display: block;
}
/* Gradient scrim so the photo blends into the hero instead of sitting on it as a rectangle.
   z-index above Swiper's own slide/pagination layers so it still reads on every slide. */
.q-svc-hero-visual::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(160deg, rgba(10,14,20,0) 45%, rgba(10,14,20,0.55));
  pointer-events: none;
}

/* ---- hero carousel (Swiper) ----
   .swiper-wrapper pinned with inset:0 rather than left to Swiper's own height:100% — that
   percentage has to resolve against .q-svc-hero-visual's aspect-ratio-derived height, and
   depending on exactly when Swiper first measures relative to webfonts/layout settling,
   the wrapper could end up shorter than the box, leaving a visible gap of whatever sits
   behind it. Absolute positioning against the box's edges can't have that problem — it
   doesn't depend on percentage-height timing at all. */
.q-svc-hero-swiper .swiper-wrapper { position: absolute; inset: 0; }
.q-svc-hero-swiper .swiper-slide { width: 100%; height: 100%; }
.q-svc-hero-swiper .swiper-pagination {
  bottom: var(--q-space-4) !important;
  z-index: 3;
}
.q-svc-hero-swiper .swiper-pagination-bullet {
  width: 7px; height: 7px;
  background: #fff; opacity: 0.45;
  transition: opacity 200ms ease, width 200ms ease;
}
.q-svc-hero-swiper .swiper-pagination-bullet-active {
  opacity: 1; width: 20px; border-radius: 4px;
}

/* ============================================================
   PARTNER / TRUST BAR — the numbers that make the claim credible
   ============================================================ */
.q-svc-stats {
  background: var(--q-bg);
  border-bottom: 1px solid var(--q-border);
  padding: var(--q-space-10) var(--q-space-4);
}
.q-svc-stats-inner {
  max-width: var(--q-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--q-space-8);
}
.q-svc-stat { text-align: center; position: relative; }
/* Hairline separators between stats, drawn on the item rather than as borders so the
   first one can be dropped cleanly at any column count. */
.q-svc-stat + .q-svc-stat::before {
  content: '';
  position: absolute; left: calc(var(--q-space-8) / -2);
  top: 50%; transform: translateY(-50%);
  width: 1px; height: 42px; background: var(--q-border);
}
.q-svc-stat-num {
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 800;
  color: var(--q-primary); line-height: 1; margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.q-svc-stat-label {
  font-size: 12.5px; font-weight: 600; color: var(--q-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ============================================================
   SHARED SECTION SCAFFOLD
   ============================================================ */
.q-svc-section { padding: var(--q-space-16) var(--q-space-4); }
.q-svc-section-alt { background: var(--q-bg-secondary); }
.q-svc-inner { max-width: var(--q-container); margin: 0 auto; }

.q-svc-head { max-width: 820px; margin: 0 0 var(--q-space-10); }
.q-svc-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.q-svc-kicker {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--q-primary); margin-bottom: var(--q-space-3);
}
.q-svc-head h2 {
  font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em;
  color: var(--q-text); line-height: 1.2; margin: 0;
}
.q-svc-head p {
  font-size: 16px; line-height: 1.75; color: var(--q-text-muted);
  margin: var(--q-space-4) 0 0;
}

/* ============================================================
   ABOUT — copy beside a highlighted pull-out card
   ============================================================ */
.q-svc-about {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--q-space-12);
  align-items: start;
}
.q-svc-prose p {
  font-size: 16px; line-height: 1.8; color: var(--q-text-muted);
  margin: 0 0 var(--q-space-5);
}
.q-svc-prose p:last-child { margin-bottom: 0; }
.q-svc-prose strong { color: var(--q-text); font-weight: 700; }

/* Sidebar card — pulls the single most quotable fact out of the paragraph so the section
   has a focal point instead of being a wall of grey text. */
.q-svc-aside {
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-lg);
  padding: var(--q-space-8);
  box-shadow: var(--q-shadow-sm);
}
.q-svc-aside-icon {
  width: 46px; height: 46px; border-radius: var(--q-radius-md);
  background: var(--q-primary-tint); color: var(--q-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: var(--q-space-5);
}
.q-svc-aside h3 {
  font-size: 17px; font-weight: 800; color: var(--q-text);
  margin: 0 0 var(--q-space-3);
}
.q-svc-aside p {
  font-size: 14.5px; line-height: 1.7; color: var(--q-text-muted); margin: 0;
}
.q-svc-aside-divider {
  height: 1px; background: var(--q-border);
  margin: var(--q-space-6) 0;
}
.q-svc-aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--q-space-3); }
.q-svc-aside-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.6; color: var(--q-text-muted);
}
.q-svc-aside-list i { color: var(--q-primary); font-size: 13px; margin-top: 4px; flex-shrink: 0; }

/* ============================================================
   CAPABILITY CARDS — numbered, like the homepage's process steps
   ============================================================ */
.q-svc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--q-space-5);
}
.q-svc-card {
  position: relative;
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-lg);
  padding: var(--q-space-8);
  transition: border-color var(--q-transition), transform var(--q-transition), box-shadow var(--q-transition);
  overflow: hidden;
}
/* Teal rule that wipes across the top on hover — the same "this is interactive" cue the
   homepage capability cards use. */
.q-svc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--q-primary), var(--q-primary-dark, #7fd6f0));
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.q-svc-card:hover { border-color: rgba(49,177,216,0.4); transform: translateY(-4px); box-shadow: var(--q-shadow-md); }
.q-svc-card:hover::before { transform: scaleX(1); }
.q-svc-card-num {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--q-primary); margin-bottom: var(--q-space-4);
}
.q-svc-card-icon {
  width: 44px; height: 44px; border-radius: var(--q-radius-md);
  background: var(--q-primary-tint); color: var(--q-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: var(--q-space-5);
}
.q-svc-card h3 {
  font-size: 17px; font-weight: 700; color: var(--q-text);
  margin: 0 0 var(--q-space-3); line-height: 1.3;
}
.q-svc-card p {
  font-size: 14.5px; line-height: 1.7; color: var(--q-text-muted); margin: 0;
}

/* ============================================================
   GALLERY — a real photo grid, not squares with letterboxing
   ============================================================ */
/* 3 columns x 3 rows = 9 cells, filled exactly by six photos with no orphan row:
   a 2x2 feature top-left (4 cells), two 1x1s stacked to its right, and three 1x1s across
   the bottom. Changing the photo count means revisiting the nth-child span below; it is
   what keeps the block gapless. */
.q-svc-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 210px);
  gap: var(--q-space-4);
}
.q-svc-gallery figure {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--q-radius-md);
  background: var(--q-bg-secondary);
}
.q-svc-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;    /* photographs — fill the frame, no white bars */
  display: block;
  transition: transform 520ms cubic-bezier(.4,0,.2,1);
}
.q-svc-gallery figure:hover img { transform: scale(1.05); }
/* One large feature tile breaks the uniform rhythm so it reads as an edited layout rather
   than a contact sheet. Cell budget: 2x2 feature (4) + five 1x1s = 9 = the 3x3 above. */
.q-svc-gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.q-svc-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--q-space-5) var(--q-space-4) var(--q-space-4);
  background: linear-gradient(transparent, rgba(10,14,20,0.82));
  color: #fff; font-size: 13px; font-weight: 600;
  opacity: 0; transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.q-svc-gallery figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* ============================================================
   CLOSING CTA — dark, matching the homepage's final band
   ============================================================ */
.q-svc-cta {
  position: relative;
  background: linear-gradient(120deg, #0a0e14, #0c1828, #111a36, #0a1226, #0a0e14);
  background-size: 300% 100%;
  animation: q-svc-hero-bg 16s ease infinite;
  padding: var(--q-space-16) var(--q-space-4);
  text-align: center;
  overflow: hidden;
}
.q-svc-cta::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse, rgba(49,177,216,0.14), transparent 65%);
  pointer-events: none;
}
.q-svc-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.q-svc-cta h2 {
  font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; color: #fff;
  letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 var(--q-space-4);
}
.q-svc-cta p {
  font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.68);
  margin: 0 0 var(--q-space-8);
}
.q-svc-cta-actions { display: flex; flex-wrap: wrap; gap: var(--q-space-3); justify-content: center; }

/* The global footer carries a 64px margin-top for separation on light pages (see
   footer.php's .q-footer) — sensible against a white section, but it shows up as an
   unwanted pale seam between two navy blocks when the CTA right above it is already dark.
   Collapse it on service pages. General sibling (~), not adjacent (+): footer.php opens
   with its own <style> tag before <footer>, so the two are never truly adjacent. */
.q-svc-cta ~ .q-footer { margin-top: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .q-svc-hero-inner { grid-template-columns: 1fr; gap: var(--q-space-10); }
  .q-svc-hero-visual { aspect-ratio: 16 / 9; }
  .q-svc-about { grid-template-columns: 1fr; gap: var(--q-space-8); }
  /* Two columns: the feature goes full-width as a banner, the rest pair up evenly. */
  .q-svc-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 190px; }
  .q-svc-gallery figure:nth-child(1) { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .q-svc-hero { padding: calc(var(--q-header-h) + var(--q-space-10)) var(--q-space-4) var(--q-space-10); }
  .q-svc-section { padding: var(--q-space-12) var(--q-space-4); }
  .q-svc-hero-actions .q-btn, .q-svc-hero-actions .q-svc-btn-ghost,
  .q-svc-cta-actions .q-btn, .q-svc-cta-actions .q-svc-btn-ghost { width: 100%; justify-content: center; }
  .q-svc-stats-inner { grid-template-columns: repeat(2, 1fr); gap: var(--q-space-6); }
  .q-svc-stat + .q-svc-stat::before { display: none; }
  .q-svc-gallery { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; }
  .q-svc-gallery figure:nth-child(1) { grid-column: span 1; grid-row: span 1; }
  /* Captions rely on hover, which does not exist on touch — show them always instead. */
  .q-svc-gallery figcaption { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .q-svc-hero, .q-svc-cta { animation: none; }
  .q-svc-card, .q-svc-gallery img, .q-svc-gallery figcaption { transition: none; }
  .q-svc-card:hover { transform: none; }
  .q-svc-gallery figure:hover img { transform: none; }
}