/* The close of every solution page: "Other services", then the red banner.

   "Other services": a full-width carousel of photo cards linking to related
   services, placed just before the closing banner. Each
   card width leaves part of the next card showing, so it is clear the row
   continues. Hovering or focusing a card turns its photo greyscale under a red
   gradient. */
.other-services { padding-block: clamp(3.5rem, 8vw, 7rem); background: #fff; color: var(--ink); }
.other-services-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; width: 100%; max-width: 92rem; margin: 0 auto clamp(2rem, 4vw, 3.5rem); padding-left: max(1.25rem, 3vw, env(safe-area-inset-left, 0px)); padding-right: max(1.25rem, 3vw, env(safe-area-inset-right, 0px)); }
.other-services .other-services-eyebrow { margin: 0 0 .875rem; color: var(--accent); font-size: clamp(.9375rem, 1vw, 1.0625rem); font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.other-services h2 { max-width: 20ch; margin: 0; color: var(--ink); font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.1; letter-spacing: -.03em; }
.other-services-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.other-services-all { display: inline-flex; background: transparent; cursor: pointer; font-family: inherit; align-items: center; justify-content: center; min-height: 54px; padding: .85rem 2.25rem; border: 2px solid var(--accent); color: var(--ink); font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.other-services-arrows { display: flex; gap: .5rem; }
.other-services-arrow { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; padding: 0; border: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, opacity .2s ease; }
.other-services-prev svg { transform: rotate(180deg); }
.other-services-arrow:disabled { opacity: .35; cursor: default; }
.other-services-arrow:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.other-services-row { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.other-services-row::-webkit-scrollbar { display: none; }
.other-services-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* 1.15, 2.3, then 4.3 cards per screen: always a slice of the next one. */
.other-services-list { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4px) / 1.15); gap: 4px; margin: 0; padding: 0; list-style: none; }

/* Without a photo the card stays the flat placeholder grey. */
.other-service { position: relative; isolation: isolate; overflow: hidden; min-width: 0; aspect-ratio: 4 / 3; background: #c7cbd2; scroll-snap-align: start; }
.other-service img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: filter .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
/* For photos whose subject stands at the right edge, such as the presenter on Security Assessments. */
.other-service img.other-service-photo-right { object-position: 85% 20%; }
/* For photos whose subject stands right at the edge, such as the instructor on Staff Security Training. */
.other-service img.other-service-photo-edge { object-position: right center; }
/* For photos whose subject sits toward the left, such as the officer on Risk & Threat Assessments. */
.other-service img.other-service-photo-left { object-position: left center; }
/* The red wash: light at the top, deepening toward the title. */
.other-service::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(203 25 57 / .2) 0%, rgb(203 25 57 / .55) 50%, rgb(203 25 57 / .92) 100%); opacity: 0; transition: opacity .45s ease; }
.other-service h3 { position: absolute; left: clamp(1rem, 1.6vw, 1.5rem); right: clamp(1.5rem, 3vw, 3rem); bottom: clamp(1rem, 1.6vw, 1.5rem); margin: 0; padding: 1.25rem; background: #fff; color: var(--ink); font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); line-height: 1.25; letter-spacing: -.015em; box-shadow: 0 14px 30px rgb(0 0 0 / .18); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
/* The title link covers the whole card. */
.other-service h3 a { color: inherit; text-decoration: none; }
.other-service h3 a::after { content: ""; position: absolute; inset: -100vmax; }
.other-service:has(a:focus-visible) { outline: 4px solid #fff; outline-offset: -8px; }
.other-service h3 a:focus-visible { outline: none; }

.other-service:focus-within img { filter: grayscale(1); }
.other-service:focus-within::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .other-service:hover img { filter: grayscale(1); transform: scale(1.04); }
  .other-service:hover::before { opacity: 1; }
  .other-service:hover h3 { transform: translateY(-.5rem); }
  .other-services-all:hover { background: var(--accent); color: #fff; }
  .other-services-arrow:not(:disabled):hover { border-color: var(--accent); background: var(--accent); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .other-services-row { scroll-behavior: auto; }
  .other-service img, .other-service::before, .other-service h3, .other-services-all, .other-services-arrow { transition: none; }
  .other-service:hover img, .other-service:hover h3 { transform: none; }
}
/* Phones get portrait cards; tablets keep the wider shape. */
@media (max-width: 39.999rem) {
  .other-service { aspect-ratio: 4 / 5; }
}
@media (min-width: 40rem) {
  .other-services-list { grid-auto-columns: calc((100% - 2 * 4px) / 2.3); }
}
@media (min-width: 64rem) {
  .other-services-list { grid-auto-columns: calc((100% - 4 * 4px) / 4.3); }
  .other-service { aspect-ratio: 4 / 5; }
}

/* Closing banner: a white card with a red top edge floating over a navy-tinted
   photo, or over flat placeholder grey until a photo is chosen. */
.closing-banner { --closing-gutter: max(1.25rem, 3vw); position: relative; isolation: isolate; padding: clamp(2.5rem, 6vw, 5rem) max(var(--closing-gutter), env(safe-area-inset-right, 0px)) clamp(2.5rem, 6vw, 5rem) max(var(--closing-gutter), env(safe-area-inset-left, 0px)); color: var(--ink); }
.closing-banner-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #c7cbd2; }
.closing-banner-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.closing-banner-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(25 26 55 / .45); }
.closing-banner-copy { display: grid; justify-items: start; gap: 1.5rem; max-width: 34rem; margin: 0 auto; padding: clamp(2rem, 4vw, 3rem); border-top: 6px solid var(--accent); background: #fff; box-shadow: 0 24px 50px rgb(18 22 42 / .25); }
.closing-banner h2.closing-banner-title { margin: 0; color: var(--ink); font-size: clamp(1.75rem, 2.8vw, 2.25rem); line-height: 1.2; letter-spacing: -.02em; }
.closing-banner-text { margin: -.75rem 0 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.closing-banner-text a { color: var(--ink); font-weight: 700; white-space: nowrap; }
.closing-banner-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: .9rem 2.5rem; border: 2px solid var(--accent); background: var(--accent); color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .closing-banner-btn:hover { background: transparent; color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .closing-banner-btn { transition: none; } }
@media (max-width: 39.999rem) { .closing-banner-copy { justify-items: stretch; } .closing-banner-btn { width: 100%; } }
/* Below 64rem the photo shows as a strip above the card, which overlaps its bottom edge. */
@media (max-width: 63.999rem) {
  .closing-banner { --closing-photo: clamp(15rem, 62vw, 24rem); padding-top: calc(var(--closing-photo) - 3rem); }
  .closing-banner-media { bottom: auto; height: var(--closing-photo); }
  .closing-banner-media img { object-position: 65% 25%; }
  .closing-banner-photo::before { background: rgb(25 26 55 / .2); }
}
@media (min-width: 64rem) {
  .closing-banner-copy { margin-left: max(4rem, calc((100vw - 92rem) / 2 + 4rem)); }
}
/* Optional modifiers: .closing-banner-roomy adds height, .closing-banner-blue
   tints the photo blue, and .closing-banner-end puts the card on the right for
   photos whose subject stands on the left. */
.closing-banner-roomy { padding-block: clamp(4rem, 9vw, 8rem); }
.closing-banner-blue .closing-banner-photo::before { background: rgb(28 52 130 / .5); }
.closing-banner-end .closing-banner-media img { object-position: 25% 42%; }
@media (max-width: 63.999rem) {
  .closing-banner-roomy { --closing-photo: clamp(18rem, 75vw, 28rem); padding-top: calc(var(--closing-photo) - 3rem); padding-bottom: clamp(3rem, 8vw, 5rem); }
  .closing-banner-blue .closing-banner-photo::before { background: rgb(28 52 130 / .3); }
}
@media (min-width: 64rem) {
  .closing-banner-end .closing-banner-copy { margin-right: max(4rem, calc((100vw - 92rem) / 2 + 4rem)); margin-left: auto; }
}