/* ==========================================================================
   Service detail — shared template for every service (commercial, leisure,
   generators, rapid-response). Built directly on the landing-preview design
   system (landing-preview.css is linked alongside this file) — this file
   only adds the components landing-preview doesn't already have. Reuses
   --brand/--brand-dark/--bg/--ink/--muted/--border from base.css and the
   --lp-light-... / --lp-dark-... tokens from .lp-page (landing-preview.css).
   (Do not write the token globs with an adjacent slash here: the '*' + '/'
   sequence closes this comment early and silently drops the rule below it.)
   ========================================================================== */

/* Same section rhythm as the landing page's .lp-section — full-viewport-
   height, vertically centred content — so the detail pages read as more of
   the same cinematic scroll rather than switching to a denser document
   layout partway through the site. */
.lp-svc-section {
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(48px, 7vw, 96px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inline keyword highlight used inside detail_services[].name (embedded
   HTML from core/content.py, rendered |safe) — already-established content
   convention, just needs a colour here since the old stylesheet is gone. */
.cme-highlight-key {
  color: var(--brand);
}

/* -----------------------------
   Hero
   ----------------------------- */
.lp-svc-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #f4f7fb;
  overflow: hidden;
  padding-top: var(--nav-h, 90px);
  /* Reserved band for .lp-svc-explore, which is positioned against the hero
     box rather than the end of the copy. Padding rather than a flex row, so
     hero copy of any length is kept clear of it without the cue drifting up
     the page on the shorter of the three heroes. */
  padding-bottom: var(--lp-svc-explore-band, 92px);
}
.lp-svc-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0b1521;
}
.lp-svc-hero__media .cme-cat__media,
.lp-svc-hero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lp-svc-hero__media .cme-cat__video,
.lp-svc-hero__still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Crossfade pair used by service-detail.js's video cycler — the buffered
   clone is inserted as a sibling and toggled via .is-active. */
.lp-svc-hero__media .cme-cat__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--motion-hero) var(--ease-ui);
}
.lp-svc-hero__media .cme-cat__video.is-active { opacity: 1; }
.lp-svc-hero__media .cme-cat__video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 16, 34, 0.55) 0%, rgba(6, 16, 34, 0.35) 35%, rgba(6, 16, 34, 0.92) 100%),
    linear-gradient(90deg, rgba(6, 16, 34, 0.75) 0%, rgba(6, 16, 34, 0.15) 60%);
}

/* Thin topbar row pinned to the true top-left/top-right corners of the
   hero — same pattern as the landing page's "Services" (Engineering
   Capabilities) section: .lp-capability-topbar with its eyebrow left,
   quiet instructional hint right. Kept separate from .lp-svc-hero__content
   below it, which carries its own top spacing instead. Only the extra
   cap-pad-block-equivalent offset is added here — .lp-svc-hero itself
   already carries the nav-height padding, unlike #capabilities (whose
   video runs up behind the transparent navbar with no section-level pad). */
.lp-svc-hero__topbar {
  position: relative;
  z-index: 1;
  padding-top: clamp(32px, 6vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Tiny breadcrumb occupying the topbar row. Deliberately not a component:
   two spans and a link, sized off the eyebrow it ends with. The parent crumb
   is muted so the category still reads as the heading of the row, and so the
   return path never competes with the forward exploration cue at the foot of
   the hero. */
.lp-svc-breadcrumb {
  justify-content: flex-start;
  gap: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lp-svc-breadcrumb__parent {
  font-weight: 600;
  color: rgba(244, 247, 251, 0.55);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-ui);
}
.lp-svc-breadcrumb__parent:hover,
.lp-svc-breadcrumb__parent:focus-visible {
  color: #f4f7fb;
}
.lp-svc-breadcrumb__sep { color: rgba(244, 247, 251, 0.32); }
.lp-svc-breadcrumb__current { font-size: inherit; letter-spacing: inherit; }

/* Short laptop windows — same fix as .lp-capability-carousel's own
   --cap-pad-block override: clamp()'s vw unit tracks width, not height,
   so a wide-but-short window would otherwise still get "tall desktop"
   spacing here even though the reference section has already tightened
   up, breaking the corner-to-corner match between the two. */
@media (min-width: 900px) and (max-height: 800px) {
  .lp-svc-hero__topbar { padding-top: clamp(20px, 3vw, 32px); }
}

/* The breadcrumb stays at every width — it is the only return path now
   that "Back to Services" has gone, so it must not be hidden on phones. */

.lp-svc-hero__content {
  position: relative;
  z-index: 1;
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: 40px;
  /* Same fix as the landing hero: keep .cme-section-container's centring and
     move the 720px measure onto the children. The breadcrumb directly above
     is its own .cme-section-container and did centre, so above ~1340px the
     H1 sat 80px left of the breadcrumb naming it. */
  max-width: calc(var(--cme-section-maxw) + (var(--cme-section-gx) * 2));
  margin-inline: auto;
}
.lp-svc-hero__content > * { max-width: 720px; }

.lp-svc-hero .cme-eyebrow { color: var(--brand); margin: 0; }

.lp-svc-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 20px;
  max-width: 16ch;
}

.lp-svc-hero__lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: #d7e0ec;
  max-width: 52ch;
  margin: 0 0 12px;
}

/* Separators are glued to the word before them (see the template), so a wrap
   can never start a line with a stray "·" — which is what "Electronics &
   navigation / · Winterising" was doing at 390px. */
.lp-svc-hero__scope {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(244, 247, 251, 0.65);
  margin: 0 0 26px;
}

.lp-svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 480px) {
  /* The reserved band is free wherever the copy is shorter than the
     viewport — min-height absorbs it. It only costs real height on small
     phones, where the hero already overflows, so it is trimmed here rather
     than adding ~90px to a screen that is short to begin with. */
  .lp-svc-hero { --lp-svc-explore-band: 76px; }
}

@media (max-width: 640px) {
  .lp-svc-hero__content { padding-bottom: 28px; }
  .lp-svc-hero__title { font-size: 2.1rem; }
  .lp-svc-hero__actions { flex-direction: column; align-items: stretch; }
}

/* -----------------------------
   Exploration cue — bottom-centre of the hero
   -----------------------------
   Navigation, not a third conversion CTA: no fill, border, pill or circle,
   and sized well below the two buttons above it. The padding gives a
   comfortable target (~180x48) that the 11px type does not advertise.

   Anchored to the hero box, not the copy block, so it holds the same spot
   across Commercial, Leisure and Generators despite their different copy
   lengths — and it is a real anchor, so it works with JS off and with the
   browser's own smooth scrolling. */
.lp-svc-explore {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px) + 16px);
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 247, 251, 0.78);
  transition: color var(--motion-fast) var(--ease-ui);
  /* Settles in just after the incoming hero copy, so on a transition from
     the landing page it is the last thing to arrive — the cue that the
     navigation finished. `backwards` means the pre-delay frame is the
     from-state, so if animations never run the cue is simply visible.
     Nothing is gated on it: the link is usable the whole time. */
  /* Keeps its own keyframe because it is centred with translate(-50%), which
     a shared role keyframe would overwrite. Timing matches BODY. */
  animation: var(--motion-in-body) var(--ease-premium) calc(var(--motion-step) * 7) backwards lp-svc-explore-in;
}
@keyframes lp-svc-explore-in {
  from { opacity: 0; transform: translate(-50%, 26px); }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.lp-svc-explore__arrow {
  font-size: 0.78rem;
  line-height: 1;
  color: rgba(244, 247, 251, 0.6);
  transition: transform var(--motion-fast) var(--ease-ui), color var(--motion-fast) var(--ease-ui);
}
.lp-svc-explore:hover { color: #f4f7fb; }
.lp-svc-explore:hover .lp-svc-explore__arrow {
  transform: translateY(3px);
  color: var(--brand);
}
.lp-svc-explore:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: 4px;
  color: #f4f7fb;
}
@media (max-width: 420px) {
  /* Tighten tracking before allowing a wrap — "Explore commercial services"
     is the longest of the three and stays on one line down to 360px. */
  .lp-svc-explore { font-size: 0.66rem; letter-spacing: 0.1em; padding: 10px 8px; }
}
/* The cookie notice is a fixed overlay. It must not reserve vertical space or
   rewrite hero layout, so the cue keeps its normal position and the notice
   simply sits above page content while visible. */
.lp-svc-explore { transition: color var(--motion-fast) var(--ease-ui), opacity var(--motion-ui) var(--ease-ui); }

@media (prefers-reduced-motion: reduce) {
  .lp-svc-explore { animation: none; }
  .lp-svc-explore__arrow { transition: color var(--motion-fast) var(--ease-ui); }
  .lp-svc-explore:hover .lp-svc-explore__arrow { transform: none; }
}

/* The cue jumps the section flush with the top of the viewport — it runs up
   behind the translucent navbar rather than stopping short and leaving a
   strip of the hero showing above it.

   Clearance is then the section's own job: its top padding has to be at
   least the navbar's height, or the heading would sit behind the glass.
   clamp() alone is not enough — it bottoms out at 48px on narrow screens,
   well under the 90px bar — so it is floored with max(). Scoped to the jump
   target rather than every .lp-svc-section: the others are scrolled past
   rather than landed on, where passing under the navbar is normal. */
#core-services {
  scroll-margin-top: 0;
  /* Exactly the navbar's height — no more. .cme-section-container already
     contributes its own 56px (28px on mobile), and stacking a further
     nav+28 on top of that left ~84px of empty band under the bar. This puts
     the section's content box flush under the navbar and lets the
     container's existing rhythm be the visible gap. */
  padding-top: var(--nav-h, 90px);
}

/* -----------------------------
   Core services — the principal service families, right after the hero.
   Plain bordered items rather than cards: consistent with the Who We
   Support / Also Supported treatment further down the page.
   ----------------------------- */
.lp-svc-services__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  max-width: 840px;
}
.lp-svc-services__item {
  padding: 22px 0;
  border-top: 1px solid var(--lp-light-border);
}
/* Icon chip above each family's title. A hairline square rather than a bare
   glyph: at 1.25rem the loose icons read as incidental, and the chip gives
   them a consistent optical weight whatever the glyph's shape (a compass and
   a battery have very different footprints). Border and radius follow the
   section's existing hairline language, and the fill is a 6% brand wash
   rather than a solid — four solid badges in a 2x2 grid would tip these
   items into looking like product cards, which the treatment below
   deliberately avoids. Glyph is light-ink navy, not the cyan accent, so the
   chips sit under the eyebrow in the hierarchy instead of competing. */
.lp-svc-services__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border: 1px solid var(--lp-light-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-dark) 6%, transparent);
  font-size: 1.05rem;
  line-height: 1;
  color: color-mix(in srgb, var(--lp-light-ink) 90%, transparent);
}
.lp-svc-services__item h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
}
.lp-svc-services__item p {
  margin: 0;
  color: var(--lp-light-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
/* Stays 2x2 on phones rather than collapsing to a single file of four —
   same reasoning as the landing page's feature points, which also hold two
   columns at phone widths so the block reads as a set rather than a long
   scroll. The column gap and the icon chip both come down to buy back the
   width the second column costs. */
@media (max-width: 640px) {
  .lp-svc-services__grid { gap: 0 18px; }
  .lp-svc-services__item { padding: 18px 0; }
  .lp-svc-services__item h3 { font-size: 0.98rem; }
  .lp-svc-services__item p { font-size: 0.88rem; line-height: 1.5; }
  .lp-svc-services__icon {
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    font-size: 0.95rem;
  }
}

/* Two controls closing the Core Services block. Both borrow the landing
   page's existing vocabulary rather than introducing a third button style:
   .lp-btn--primary for the action, .lp-link for the onward navigation —
   the same pairing #mobile-service and the capability panels use. Only the
   bits <details> needs are added here. */
.lp-svc-also {
  margin-top: 36px;
  max-width: 840px;
}
.lp-svc-next {
  display: inline-block;
  margin-top: 18px;
}

/* <summary> carries .lp-link, so it only needs its native marker removed
   and the default list-item display replaced. The +/- is supplied as text
   through ::after, matching the way the "How we work" link carries its own
   arrow inline rather than as an icon element. */
.lp-svc-also__toggle {
  display: inline-block;
  width: fit-content;
  list-style: none;
  cursor: pointer;
}
.lp-svc-also__toggle::-webkit-details-marker { display: none; }
.lp-svc-also__toggle::marker { content: ""; }
.lp-svc-also__toggle::after { content: " +"; }
.lp-svc-also[open] .lp-svc-also__toggle::after { content: " \2013"; }

/* Hairline between the disclosure and the onward link — same weight and
   colour as the rules separating the core service items above. */
.lp-svc-rule {
  max-width: 840px;
  margin: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--lp-light-border);
}

/* Two columns rather than three: at three, most entries wrapped to two or
   three ragged lines and the block read as loose text. At two, nearly every
   one fits a single line. Row rules on top (not bottom) so the list opens
   with a divider under the toggle and does not collide with the <hr> that
   follows it — and because grid rows share a height, the rules stay aligned
   across both columns even when one entry wraps. */
.lp-svc-also__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 44px;
}
.lp-svc-also__list li {
  position: relative;
  padding: 11px 0 11px 18px;
  border-top: 1px solid color-mix(in srgb, var(--lp-light-ink) 8%, transparent);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--lp-light-ink);
}
.lp-svc-also__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 9px;
  height: 1px;
  background: var(--brand-dark);
}

/* Same navbar-clearance treatment as #core-services: the jump lands the
   section flush with the viewport top, so its own padding has to keep the
   heading out from behind the glass bar. */
#how-we-work {
  scroll-margin-top: 0;
  padding-top: var(--nav-h, 90px);
}

/* -----------------------------
   How we work
   ----------------------------- */
.lp-svc-process .cme-eyebrow { color: var(--brand); }

/* Sized to its own content rather than stretched to a full viewport — the
   same treatment #mobile-service gets on the landing page. Three short steps
   only came to ~389px of content, so the inherited min-height:100vh left
   ~510px of empty navy at 1440x900 and ~810px at 1920x1200, with the steps
   marooned in the middle. Capped instead, which also pulls the media band
   below up so the two read as one passage. */
.lp-svc-process.lp-svc-section {
  min-height: auto;
  justify-content: flex-start;
  padding-bottom: clamp(56px, 7vw, 104px);
}

.lp-svc-process__list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.lp-svc-process__list li {
  border-top: 2px solid var(--brand);
  padding-top: 16px;
}
.lp-svc-process__num {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  margin-bottom: 10px;
}
.lp-svc-process__list strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.lp-svc-process__list p {
  margin: 0;
  color: var(--lp-dark-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .lp-svc-process__list { grid-template-columns: 1fr; gap: 24px; }
}

/* -----------------------------
   Operational / visual section — one large image, restrained caption
   ----------------------------- */
.lp-svc-operational {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #f4f7fb;
}
.lp-svc-operational__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-svc-operational__scrim {
  position: absolute;
  inset: 0;
  /* The ramp used to start at 0.15, which was enough for the copy (which
     sits low in the band) but left the top bright enough to swallow the
     fixed navbar's white brand lockup — badly so on posters with a lot of
     sky. The upper 40% is now held at a constant 0.5 so the strip the
     navbar passes through is reliably dark, then it ramps to 0.75 as
     before behind the copy. */
  background: linear-gradient(
    180deg,
    rgba(6, 16, 34, 0.5) 0%,
    rgba(6, 16, 34, 0.5) 40%,
    rgba(6, 16, 34, 0.75) 100%
  );
}
.lp-svc-operational__copy {
  position: relative;
  z-index: 1;
  padding-block: clamp(32px, 5vw, 56px);
}
.lp-svc-operational__copy p:first-child {
  margin: 0 0 8px;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
}
.lp-svc-operational__sub {
  margin: 0;
  color: #d7e0ec;
  max-width: 56ch;
}

/* -----------------------------
   Who this suits
   ----------------------------- */
.lp-svc-audiences__list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 32px;
}
.lp-svc-audiences__list li {
  padding: 14px 0;
  border-top: 1px solid var(--lp-light-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-svc-audiences__list strong { font-size: 1rem; }
.lp-svc-audiences__list span {
  font-size: 0.9rem;
  color: var(--lp-light-muted);
}

/* -----------------------------
   Final CTA + enquiry form
   ----------------------------- */
.lp-svc-cta__lede { max-width: 60ch; margin-top: 8px; }
/* Call/email sit below the form, as they do on the landing page, rather
   than as a second pair of buttons above it — the old "Request a quotation"
   there pointed at the card directly beneath it. Styling comes from
   .lp-contact__* in landing-preview.css; only the placement is set here. */
.lp-svc-contact {
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 720px;
}

.lp-svc-form-card {
  margin-top: clamp(40px, 5vw, 56px);
  max-width: 720px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--lp-dark-border);
  border-radius: 8px;
  padding: clamp(24px, 3vw, 36px);
}
.lp-svc-form-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.lp-svc-form-card--avatar .lp-svc-form-head {
  align-items: center;
  justify-content: flex-start;
  gap: clamp(14px, 2.5vw, 22px);
  text-align: left;
  margin-bottom: 14px;
}
.lp-svc-form-card--avatar .lp-svc-form-head > div {
  min-width: 0;
  max-width: 52ch;
}
.lp-svc-form-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}
.lp-svc-form-avatar {
  --svc-form-avatar-size: clamp(96px, 14vw, 124px);
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--svc-form-avatar-size);
  height: var(--svc-form-avatar-size);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  object-position: center;
}
.lp-svc-form-avatar--large-subject {
  --svc-form-avatar-size: clamp(90px, 13vw, 116px);
}
.lp-svc-form-card--avatar .lp-svc-form-head h3 {
  margin-bottom: 5px;
}
.lp-svc-form-card--avatar .lp-svc-form-head p {
  line-height: 1.45;
}
.lp-svc-form-head .lp-svc-form-context {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 9px;
  margin: 8px 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
}
.lp-svc-form-head .lp-svc-form-context::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 1px;
  background: var(--brand);
  opacity: 0.86;
  transform: translateY(-0.18em);
}
.lp-svc-form-head .lp-svc-form-context__label {
  color: rgba(244, 247, 251, 0.58);
  font-weight: 600;
}
.lp-svc-form-head .lp-svc-form-context__value {
  color: #fff;
  font-weight: 700;
}
@media (max-width: 480px) {
  .lp-svc-form-card--avatar .lp-svc-form-head {
    gap: 12px;
    margin-bottom: 13px;
  }

  .lp-svc-form-avatar {
    --svc-form-avatar-size: clamp(78px, 24vw, 96px);
  }

  .lp-svc-form-avatar--large-subject {
    --svc-form-avatar-size: clamp(74px, 22vw, 90px);
  }

  .lp-svc-form-head .lp-svc-form-context {
    gap: 5px 8px;
    margin-top: 7px;
  }

  .lp-svc-form-head .lp-svc-form-context::before {
    flex-basis: 14px;
    width: 14px;
  }
}
.lp-svc-form-head h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}
.lp-svc-form-head p {
  margin: 0;
  color: var(--lp-dark-muted);
  font-size: 0.92rem;
}
.lp-svc-form-note {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--lp-dark-muted);
}
.lp-svc-form-response {
  margin: 0 0 20px;
  color: var(--lp-dark-muted);
}
.lp-svc-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lp-svc-form-card--dispatch .lp-svc-form-actions { margin-bottom: 16px; }

@media (max-width: 640px) {
  .lp-svc-form-actions { flex-direction: column; align-items: stretch; }
}

/* -----------------------------
   Cross-document View Transition targets — paired with the matching
   .lp-capability-carousel__media / .lp-capability-panel names in
   landing-preview.css (shared by both templates, which is also where the
   @view-transition opt-in and the hero-copy slide keyframes live, since
   those apply regardless of which of the two documents is "old" or "new"
   in a given navigation). Visiting this page directly, refreshing it, or
   arriving from anywhere other than the matching /landing-preview panel
   is completely unaffected — an unmatched view-transition-name simply
   falls back to the browser's default per-element fade, nothing breaks.

   Named on the *container* (.lp-svc-hero__media), not the individual
   video — it also holds the .cme-cat__video-overlay scrim as a sibling,
   so both are captured together as one flat "video, darkened" snapshot,
   matching the same choice on the landing side. That's what keeps the
   overlay visually pinned to the video instead of independently
   cross-fading against a different overlay via the generic root group. */
.lp-svc-hero__media { view-transition-name: hero-media; }

.lp-svc-hero__content { view-transition-name: hero-copy; }

/* A wrapper with no geometry of its own — it exists so an eyebrow, heading
   and lede can be revealed as one composition rather than as separate text
   nodes taking turns (see .lp-reveal in landing-preview.css). display stays
   block and margins collapse through it exactly as they did when these were
   direct children of .cme-section-container. */
.lp-svc-head { display: block; }

/* -----------------------------
   Service-detail hero entrance
   -----------------------------
   The same composition as the landing hero: title, lede, scope line, then the
   actions. Children are few enough that one step between each is the whole
   sequence — it is finished in ~690ms.

   It runs on a direct visit only. Arriving from the landing page is already a
   motion event: the shared media stays put while the copy swipes across
   (see the view-transition block in landing-preview.css). Playing this on top
   of that would mean the copy slides in, settles, then rises in again — one
   navigation, two entrances. data-arrival is stamped by
   includes/motion_head.html on `pagereveal`, before the incoming document's
   first render, so the suppression is in place before anything paints. */
/* The entrance itself is the shared role system in landing-preview.css, which
   this template also loads: .lp-svc-hero__content and .lp-svc-hero__topbar are
   listed in those scopes alongside .lp-hero__content, so a heading here
   behaves exactly as a heading does on the homepage. These rules used to name
   lp-rise-in, a keyframe deleted when the role system replaced it, which left
   the detail hero with no entrance at all. */

/* The breadcrumb is a sibling of .lp-svc-hero__content, not a child, so it is
   named separately here — the child selector below cannot reach it, and
   without this it would be the one element still playing a second entrance. */
[data-arrival="transition"] .lp-svc-hero__topbar,
[data-arrival="transition"] .lp-svc-hero__content > *,
[data-arrival="transition"] .lp-svc-explore {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Repeated at the role rules' own specificity, as in landing-preview.css:
     those rules carry two classes, so a bare `.lp-svc-hero__content > *`
     reset loses to them and the animation runs regardless.

     animation-only, deliberately. .lp-svc-explore is centred with
     translate(-50%), so a blanket `transform: none` here would shunt it half
     its own width off centre. */
  .lp-svc-hero__content > *,
  .lp-svc-hero__content > :is(h1, h2, h3, .cme-section-title),
  .lp-svc-hero__content > .lp-svc-hero__actions,
  .lp-svc-hero__content > .lp-svc-hero__scope,
  .lp-svc-hero__topbar {
    animation: none;
  }
}

/* Same reasoning as #feedback/#about on the landing page: this section is a
   four-column list of client types, ~250px of content, and the inherited
   min-height:100vh left 325px of empty light grey above AND below it on all
   three category pages — the most visibly unfinished band on the site. */
.lp-svc-audiences.lp-svc-section {
  min-height: auto;
}

/* Each item carries its own trailing separator and cannot break internally,
   so a wrap always lands between items. Rendered as one string this line put
   an orphaned "·" at the start of the second line at 390px. */
.lp-svc-hero__scope span {
  white-space: nowrap;
}
.lp-svc-hero__scope span:not(:last-child)::after {
  content: "\00b7";
  margin-left: 0.4em;
  opacity: 0.55;
}

/* -----------------------------------------------------------------------
   Breadcrumb touch target (coarse pointers only)
   -----------------------------------------------------------------------
   The parent link resolved to 18x68px. It sits inside the hero's topbar, so
   giving it a real 44px box would grow that row and shift the hero
   composition below it — the one thing this correction must not do.

   An absolutely-positioned overlay extends the hit area over the existing
   line box instead: the element's own geometry is unchanged, so the topbar
   height, the hero spacing and the breadcrumb's wrapping all stay exactly as
   they are. The overlay reaches across the "/" separator, which is
   aria-hidden and not interactive, and stops short of the current-page
   crumb, which is not a link.
   ----------------------------------------------------------------------- */
@media (pointer: coarse) {
  .lp-svc-breadcrumb__parent { position: relative; }
  .lp-svc-breadcrumb__parent::after {
    content: "";
    position: absolute;
    inset: -13px -8px;
  }
}


/* -----------------------------
   Rapid Response: hero availability
   -----------------------------
   Every value here is an existing token. This page is meant to feel more
   direct than its siblings, and that has to come from hierarchy and copy
   rather than from a colour it does not share with them — no alert red, no
   pulse, nothing that reads as a siren. */
.lp-svc-hero__availability {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}
.lp-svc-hero__availability i {
  font-size: 0.86rem;
  color: var(--brand);
}

/* The qualifier is quieter than the claim above it but not hidden: it is the
   part Terms §2 actually turns on, so it must not read as small print. */
.lp-svc-hero__availability-note {
  margin: 0 0 4px;
  padding-left: 26px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(244, 247, 251, 0.72);
}

/* The number can be long; on a narrow screen the button wraps rather than
   letting the digits shrink or clip. */
.lp-svc-hero__call span { white-space: nowrap; }

/* -----------------------------
   Rapid Response: before you call
   -----------------------------
   Same navbar clearance as #core-services and #how-we-work, and needed for
   the same reason: "Before you call" is a jump target, the jump lands the
   section flush with the top of the viewport, and the section's own top
   padding is then the only thing keeping its heading out from behind the
   glass bar.

   Measured without it, at 390px: the eyebrow sat 14px *above* the navbar's
   bottom edge. Desktop happened to clear, but only because .lp-svc-section
   centres its content and there was room to spare — an accident of content
   height, not clearance. */
#call-info {
  scroll-margin-top: 0;
  padding-top: var(--nav-h, 90px);
}

.lp-svc-callinfo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.lp-svc-callinfo__panel {
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--lp-light-border, rgba(8, 47, 73, 0.14));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}

.lp-svc-callinfo__panel h3 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.lp-svc-callinfo__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.lp-svc-callinfo__list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.94rem;
  line-height: 1.5;
}
.lp-svc-callinfo__list i {
  margin-top: 0.28em;
  font-size: 0.76rem;
  color: var(--lp-light-accent, #0369a1);
  justify-self: center;
}

.lp-svc-callinfo__reassure {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--lp-light-border, rgba(8, 47, 73, 0.14));
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Hours as a description list, because that is what it is: three labels and
   the fact each one carries. The distinction between them is the whole point,
   so each row is separated rather than run together as prose. */
.lp-svc-callinfo__hours {
  margin: 0;
  display: grid;
  gap: 14px;
}
.lp-svc-callinfo__hours dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lp-svc-callinfo__hours dd {
  margin: 4px 0 0;
  font-size: 0.98rem;
  line-height: 1.5;
  font-weight: 600;
}
/* The third row is a condition, not a headline fact, so it steps back from
   the two above it without being demoted to footnote size. */
.lp-svc-callinfo__hours dd:last-of-type {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
}

@media (max-width: 860px) {
  .lp-svc-callinfo__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .lp-svc-hero__availability { font-size: 0.95rem; }
  .lp-svc-hero__availability-note { padding-left: 0; }
  .lp-svc-callinfo__panel { padding: 18px 16px; }
}