/* Services page: rules specific to services.html. Shared components live in ../styles.css.
   Single-class selectors only, so they win over styles.css by source order. */

:root {
  /* .anchor-nav__link min-height (52px) plus the nav's 1px bottom hairline */
  --anchor-h: 53px;
}

/* styles.css already inset the scrollport by the sticky header (scroll-padding-top on html).
   scroll-margin-top adds to that, so each section only needs to clear the anchor nav. */
.service {
  scroll-margin-top: var(--anchor-h);
}


/* --- Anchor nav ---------------------------------------------------------- */

/* the first link's text sits on the container gutter, not one padding-step in */
.anchor-nav__list {
  margin-inline: calc(-1 * var(--s-4));
}


/* --- Service sections ---------------------------------------------------- */

.service {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--paper);
}

.service + .service {
  border-top: 1px solid var(--line);
}

.service__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-10) clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* even sections: photo on the left, text on the right */
.service--flip .service__media {
  order: -1;
}

.service__body {
  max-width: 56ch;
  /* the query container the section title measures against; no layout effect */
  container-type: inline-size;
}

/* "Construction site security" is the widest heading on the site, and
   "Construction" on its own is the widest single word: at display size it has no
   break opportunity in it, so its width is a floor under the whole column. The
   h2 size token's lower bound is 2rem, which browser text size moves, so at 200%
   the word set itself 353px wide, the stacked `1fr` track below took that as its
   minimum and services.html scrolled sideways at 360. The ceiling ties the
   heading to its own column (measured: the word runs about 5.5x its font size,
   so 17cqw always fits). At the default text size the cqw term is above the
   token at 360, 390, 480, 1024, 1100, 1280 and 1440, so the 100% rendering is
   unchanged; the `minmax(0, …)` track below is what keeps the text on the page
   where container query units are missing. */
.service__body h2 {
  font-size: min(var(--text-h2), 17cqw);
}

/* "Best for": a mono label followed by the sectors on one flowing line, so a buyer can scan by
   sector. The list is a shared .seplist, which draws the middots in its own column gap and clips
   them at its edge, so no separator can ever end or open a wrapped line. */
.service__for {
  margin-top: var(--s-4);
  font-size: var(--text-small);
  line-height: 1.6;
}

/* mono label: the element also carries class="mono" */
.service__for-label {
  margin-right: var(--s-3);
  color: var(--navy-700);
}

.service__sectors {
  font-weight: 500;
  color: var(--ink-soft);
}

.service__text {
  margin-top: var(--s-6);
}

.service__text > * + * {
  margin-top: var(--s-4);
}

/* mono label: the element also carries class="mono" */
.service__list-title {
  margin-top: var(--s-8);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
  color: var(--navy-700);
}

.service__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service__list > li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-small);
  color: var(--ink);
}

.service__cta {
  margin-top: var(--s-6);
}

/* One fixed frame for all seven photographs, at every width, so the page reads as one format
   instead of seven shapes. The figure used to stretch to whatever height the copy beside it set,
   which sized each frame by the length of its own section: the seven frames rendered between
   0.60 and 0.89 to 1, and the longest sections cut a landscape photograph down to a narrow
   portrait keyhole.

   3:2 rather than 4:3 because it is close to the ratio the files are cropped to (the seven sit
   between 1.25 and 1.56 to 1), so every crop is a trim rather than a re-frame. A 4:3 frame has to
   take 6.5% off each side of svc-construction.jpg, which slices the G and the O off the GATE ONE
   B lettering on the hoarding. */
.service__media {
  margin: 0;
  position: relative;
  align-self: start;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-900);
}

.service__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per-section hold inside the frame. The crops are small, so only the two frames whose subject
   sits high in the file need one: both are trimmed from the top edge rather than the middle, so
   the hard hats in svc-risk keep their headroom (the pair are looking up at the structure they
   are assessing) and the officer in svc-asset keeps his head and the vest panel together.
   svc-construction needs none: at 3:2 the frame is all but the photograph's own crop, so there is
   no side trim left to steer, which is why the --focus-right modifier it used to carry is gone. */
.service__media--focus-top img {
  object-position: 50% 25%;
}

/* Two columns, and the copy is the taller of the two in every section: a half-width 3:2 frame is
   about 350px and the bodies run from 580 to 870px. The frame therefore top-aligns with the
   heading and then sticks while the rest of its own section scrolls past, so the photograph stays
   beside the copy it illustrates and the unused part of the track is never on screen as a void
   under the picture. It is bounded by its grid area, so it releases at the end of its section and
   does nothing at all where the two columns are close in height. The offset clears the fixed
   header and the sticky anchor nav, matching .service scroll-margin-top. */
@media (min-width: 1025px) {
  .service__media {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--anchor-h) + var(--s-6));
  }
}


/* --- Every engagement includes ------------------------------------------- */

.engagement__lead {
  margin-top: var(--s-6);
}


/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  /* minmax(0, 1fr), never a bare 1fr: the single track would otherwise be floored
     at the min-content width of the section heading and widen the page. */
  .service__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  /* stacked: photo first, then the text, on every section. The frame keeps the same 3:2 it has on
     the two-column layout, so a section looks like itself at every width. */
  .service__media {
    order: -1;
  }

  .service__body {
    max-width: 62ch;
  }
}

@media (max-width: 768px) {
  /* the link row bleeds to the viewport edges and scrolls sideways; the page does not */
  .anchor-nav__list {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: calc(var(--gutter) - var(--s-4));
    scroll-padding-inline: calc(var(--gutter) - var(--s-4));
  }
}