/* ============================================================
   Services page
   Mirrors the existing core-page rhythm: dark hero, then alternating
   white / tinted sections, closing on a navy call-to-action.
   ============================================================ */

.sv-hero {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--white);
  padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(3rem, 5vw, 5rem);
}
/* base.css sets headings to --ink, which is invisible on the navy hero. */
.sv-hero h1 { margin: .4rem 0 1rem; max-width: 20ch; color: var(--white); }
.sv-hero .eyebrow { color: #bdd7f6; }
.sv-hero .lead { color: #c9d6ea; max-width: 62ch; }
.sv-hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }

.sv-sub { color: var(--steel); max-width: 60ch; margin: .5rem 0 0; }

/* --- what we do ---
   Fixed 3 columns rather than auto-fit: six cards on a wide screen would
   otherwise break as 4 + 2 and leave the second row half empty. */
.sv-grid {
  display: grid; gap: 1rem; margin-top: 2.4rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .sv-grid { grid-template-columns: repeat(2, 1fr); } }

/* Two-up variant: used where a section has exactly two cards (careers entry
   paths) or four that read better 2x2 (partner models). Above 900px it
   overrides the 3-column default; below that the rules under this one take
   over and it collapses to two, then one, like every other card grid. */
@media (min-width: 901px) {
  .sv-grid--pair { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) { .sv-grid { grid-template-columns: 1fr; } }
.sv-card {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem 1.5rem;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.sv-card:hover {
  border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
/* The grid already makes every card the same height; without this the closing
   line (an "Apply →" link, a "Low investment · High returns" tagline) sat
   wherever the copy happened to end, so two cards side by side finished at
   different heights and read as ragged. Pushing the last paragraph down aligns
   those closing lines across the row. Yash, 2026-09-01. */
.sv-card { display: flex; flex-direction: column; }
/* :not(:first-of-type) matters — on a card whose only paragraph IS the body
   copy (supplier, services), pushing it down would leave a hole under the
   heading. This applies only where a separate closing line exists. */
.sv-card > p:last-child:not(:first-of-type) { margin-top: auto; padding-top: .35rem; }
.sv-num {
  display: block; font-family: var(--font-mono);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--accent); margin-bottom: .6rem;
}
.sv-card h3 { margin: 0 0 .5rem; font-size: var(--fs-h3); color: var(--ink); }
.sv-card p { margin: 0; color: var(--slate); font-size: .95rem; line-height: 1.65; }

/* --- service network --- */
.sv-locations {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.sv-locations li {
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  /* single-sided accent, so no rounding here — a rounded corner on one
     border reads as a rendering bug rather than a design choice */
  border-radius: 0;
  padding: .7rem .9rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.sv-locations b { color: var(--ink); font-size: .95rem; }
.sv-locations span { color: var(--steel); font-size: .78rem; }

/* The auto-fill above is right for the service register's fourteen entries,
   but it lands on FIVE columns at desktop width — so a six-item list renders
   5 + 1, leaving the last point orphaned on its own row. This opt-in modifier
   is for the six-item lists (careers, partner): three columns give a clean
   3 + 3. Added 2026-08-22 after seeing the orphan on both pages. */
.sv-locations--trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .sv-locations--trio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sv-locations--trio { grid-template-columns: 1fr; } }

/* --- closing CTA --- */
.sv-cta .lead { color: #c9d6ea; max-width: 54ch; margin-inline: auto; }
.sv-cta__btns { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  .sv-card { transition: none; }
  .sv-card:hover { transform: none; }
}

/* pointer to the full register on the Contact page — one copy of the fact */
.sv-locations__more { margin: 1.4rem 0 0; font-size: .9rem; color: var(--slate); max-width: 76ch; }

/* The pointer to the full service register was .9rem (14.4px) — under the
   readable floor on a phone. Phones only; desktop keeps its quieter size. */
@media (max-width: 620px) {
  .sv-locations__more { font-size: 1rem; line-height: 1.55; }
}

/* ============================================================
   PAGE PHOTOGRAPHY (added 2026-08-22) — shared by services,
   partner and careers. Two pieces: a photographic hero, and a
   three-up strip of labelled shots inside a section.
   ============================================================ */

/* --- photographic hero ---
   The picture is a real <img> rather than a CSS background so it can carry a
   srcset and be fetched at the right size; it sits behind the text on its own
   layer. alt is empty on purpose: every word in this hero is already live text
   in the DOM, so announcing the photo again would only be noise to a screen
   reader. The scrim is what keeps white type legible over a photograph —
   without it the contrast wanders with whatever is in the picture. */
.sv-hero--photo { position: relative; isolation: isolate; overflow: hidden; }
.sv-hero--photo .wrap { position: relative; z-index: 1; }
.sv-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: -2;
}
.sv-hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Darker on the left, where the headline and lead sit, easing off to the
     right so the photograph still reads as a photograph. */
  background:
    linear-gradient(100deg, rgba(8,26,54,.94) 0%, rgba(8,26,54,.88) 38%, rgba(8,26,54,.62) 72%, rgba(8,26,54,.52) 100%);
}
@media (max-width: 760px) {
  /* On a phone the text spans the full width, so the scrim must be even all
     the way across rather than fading out under the last lines. */
  .sv-hero--photo::after {
    background: linear-gradient(180deg, rgba(8,26,54,.90) 0%, rgba(8,26,54,.93) 100%);
  }
}

/* --- three-up photo strip ---
   Each shot carries a short label that names something the surrounding
   section already talks about, so the strip reads as part of the page rather
   than as decoration dropped in to fill space. */
.pg-strip {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem;
}
.pg-strip figure { margin: 0; }
.pg-strip img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  /* height:auto is load-bearing, exactly as it is on .rp-card img. The markup
     carries height="675" for layout stability, and the browser applies that
     attribute as a REAL height — which makes the box definite and turns
     aspect-ratio into a no-op. Without this line the strip rendered 675px tall
     in a 415px-wide column, i.e. portrait letterboxes instead of 4:3 shots. */
  height: auto;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--mist);
}
.pg-strip figcaption {
  margin-top: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--steel);
}
.section--tint .pg-strip img { border-color: rgba(15,62,124,.14); }
@media (max-width: 760px) { .pg-strip { grid-template-columns: 1fr; gap: 1.4rem; } }


/* ===== STAT BAND ON /partner (Anurag point 14, 2026-08-31) =====
   The homepage six-icon credentials band, copied verbatim from home.css
   (lines 252-321 there) because this page does not load home.css and loading
   all of it here risks restyling the sv-* layout. If the homepage band
   changes, change BOTH copies. count.js drives the four numbers. */
.stat-band { padding: 0 0 1.4rem; }
.stat-strip {
  background: linear-gradient(180deg, #1657b0 0%, #0f3e7c 100%);
  border-block: 1px solid #12468c;
}
.stat-strip__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.stat-strip__grid li {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.05rem .85rem;
  border-right: 1px solid rgba(255,255,255,.28);
}
/* Written when this strip was six cells on one row; it is twelve on two rows
   now (2026-09-01). :last-child cleared only the very last cell, so cell 6 —
   the end of row 1 — kept drawing a divider into empty space. nth-child(6n)
   clears the end of EVERY row, and the :not(:nth-last-child(-n+6)) rule gives
   every row but the last a bottom divider. Both work for any cell count. */
.stat-strip__grid li:nth-child(6n) { border-right: 0; }
.stat-strip__grid li:not(:nth-last-child(-n+6)) { border-bottom: 1px solid rgba(255,255,255,.28); }
.stat-strip__ic {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
  background: #fff; color: #0f3e7c;
  display: grid; place-items: center;
}
.stat-strip__ic svg { width: 27px; height: 27px; }
.stat-strip__tx { display: grid; gap: .18rem; min-width: 0; }
.stat-strip__tx b {
  font-size: clamp(1.25rem, 1.7vw, 1.7rem);
  line-height: 1; font-weight: 700; color: #fff;
  letter-spacing: -.01em; white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.stat-strip__tx b span { color: #fff; }
.stat-strip__tx b.stat-strip__word { font-size: clamp(.98rem, 1.25vw, 1.22rem); text-transform: uppercase; letter-spacing: .02em; }
.stat-strip__tx > span {
  /* .75rem = 12px — .66rem measured 10.6px, under the readable floor */
  font-size: .75rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #CFE0F7; line-height: 1.35;
}
/* The six-column strip switches to three at 1200px, not 1050px (fixed
   2026-08-22). `1fr` is `minmax(auto, 1fr)`, and that auto floor is min-content
   — a track can never shrink below the widest word plus the 50px icon, so when
   six tracks do not fit the grid does not compress, it OVERHANGS. Measured on
   this content: the six columns need 1099px, plus the 38px .wrap gutter = a
   1138px viewport. The old 1050px breakpoint therefore left 1051–1137px broken,
   which is exactly where the homepage scrolled sideways by ~17px at 1101px.
   1200px keeps ~60px of slack for wider font rendering on Windows/Linux, where
   the same text measures a few per cent longer than it does here. Re-measure if
   a stat's wording gets longer. */
@media (max-width: 1200px) {
  .stat-strip__grid { grid-template-columns: repeat(3, 1fr); }
  .stat-strip__grid li:nth-child(3n) { border-right: 0; }
  .stat-strip__grid li:not(:nth-last-child(-n+3)) { border-bottom: 1px solid rgba(255,255,255,.28); }
}
@media (max-width: 640px) {
  .stat-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .stat-strip__grid li { border-right: 0; padding: .95rem .6rem; }
  .stat-strip__grid li:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.28); }
  .stat-strip__grid li:not(:nth-last-child(-n+2)) { border-bottom: 1px solid rgba(255,255,255,.28); }
  .stat-strip__ic { width: 42px; height: 42px; }
  .stat-strip__ic svg { width: 23px; height: 23px; }
}
/* Phones: the icon moves ABOVE the text instead of beside it (added
   2026-08-22, same min-content bug as the six-column case above). Two columns
   on a 375px screen give each cell 168px, but the widest cell needs 186px —
   the icon (42) and its gap (11) eat the width the label "Equipment
   installations" needs, and `1fr` cannot shrink below that, so the strip
   overhung the viewport by 3px. Stacking returns those 53px to the text:
   the cell then needs ~115px, which still fits a 320px iPhone SE (141px per
   cell) with room to spare. Trimming padding instead was measured too and
   only just fitted 375px while still failing a 360px Android. */
@media (max-width: 430px) {
  .stat-strip__grid li { flex-direction: column; align-items: flex-start; gap: .5rem; }
}


/* photo-on-top variant of sv-card for the four partnership models */
.sv-card--photo { padding-top: 0; overflow: hidden; }
.sv-card--photo > img {
  display: block; width: calc(100% + 3.2rem); max-width: none;
  margin: 0 -1.6rem 1.1rem; height: auto;
}
/* centred section heads on this page keep their sub-line centred too */
.sec-head.center .sv-sub { margin-inline: auto; }