/* css/professional-services.css — professional-services.html only: what this Solutions page has
   that platform.html and the other sub pages do not. The skin is css/site.css (loaded first,
   and it carries platform.html's devices: .cmp, .caps, .pts, .record-grid, .anno-item,
   .rec-card, .chips, .graph-grid, .faq); the product finish — bare icons, the connected-context
   panel with its paper skin, and the lifecycle chain — is css/product.css (loaded after this
   sheet, so it wins where the two overlap); the bar is css/nav.css, loaded last. */

/* --- skip link (site.css styles the nav, not this) --- */
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--blue);
  color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
  text-decoration: none; transition: top .2s ease; }
.skip:focus { top: 16px; }

/* --- hero: the professional-services photograph (05 Assets/Photos/Industry_Professional_01.png,
   1536x1024): a lawyer at a laptop in a glass office at night, the skyline lit beyond the
   window, papers and a pen on the desk. The frame is 3:2 rather than the other heroes' 16:9,
   so at desktop widths only the height is cropped: the crop sits a little below centre so the
   face shows between the bar and the one-line headline (at 40% it sat behind the headline, at
   65% under the bar), the headline runs over the shoulder and the laptop under the buttons.
   The portrait source is the 577x1024 window centred at 60%, from the laptop to the figure's
   back, for phones held upright. --- */
.hero--sub .hero-media picture { display: block; width: 100%; height: 100%; }
.hero--pro .hero-media img { object-position: 50% 55%; }
@media (max-width: 760px) { .hero--pro .hero-media img { object-position: 50% 50%; } }

/* --- inline links inside body copy: weight and a hairline rule, never a browser underline.
   On a night band they lift to the light blue. --- */
.lede a, .anno-item p a, .pt p a, .cap p a, .chain-step p a, .closing a, .note a { font-weight: 500; text-decoration: none;
  color: var(--blue); box-shadow: 0 1px 0 rgba(13,79,211,.34); transition: box-shadow .25s ease, opacity .25s ease; }
.lede a:hover, .anno-item p a:hover, .pt p a:hover, .cap p a:hover, .chain-step p a:hover, .closing a:hover, .note a:hover { opacity: .8; }
section.night .lede a, section.night .anno-item p a, section.night .j-body p a,
section.night .chain-step p a { color: #BFD4FF; box-shadow: 0 1px 0 rgba(191,212,255,.4); }
section.night .lede a:hover, section.night .anno-item p a:hover, section.night .j-body p a:hover,
section.night .chain-step p a:hover { opacity: .8; }

/* --- numbered notes and the record caption on a plain white band: css/site.css inks them for
   night and for .tint, so the white band restates the paper treatment (the same lines the
   other sub pages carry) --- */
.anno-item { cursor: default; }
section:not(.night):not(.tint) .anno-item { border-top-color: var(--line); }
section:not(.night):not(.tint) .anno-item h3 { color: var(--ink); }
section:not(.night):not(.tint) .anno-item p { color: var(--sub); }
section:not(.night):not(.tint) .rec-cap { color: var(--sub); }

/* --- the paragraph that closes a narrative band, centred under the visual --- */
.closing { margin: clamp(40px, 4.4vw, 56px) auto 0; max-width: 62ch; text-align: center;
  font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.6; color: var(--sub); }

/* --- the responsibility note: the caveat the copy carries under the four kinds of firm, set
   as an aside against a brand rule rather than a block quote (as case-management.html sets
   its reporting note) --- */
.note { margin: clamp(34px, 3.6vw, 48px) auto 0; max-width: 78ch; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--blue); font-size: 14.5px; line-height: 1.65; color: var(--sub); }
section.night .note { border-left-color: #4C86F5; color: rgba(255,255,255,.7); }

/* --- the ten connected checks under the compare device: site.css sets the chips 26px under a
   tile grid; under the taller compare stage they take a band's own gap --- */
#intake .chips { margin-top: clamp(36px, 4vw, 52px); }

/* --- the connected-context panel with eight records rather than four sources: as on bank.html
   the chips keep their four columns and run to two rows on short labels, and a little side
   padding is given back to the label so the longest ("Directors") stays on one line down to
   1024px, where css/product.css already takes the grid to two columns at 640px --- */
.sig--pro .sig-src li { padding-left: 4px; padding-right: 4px; }

/* --- the two record grids (#cdd, #conflicts): css/site.css top-aligns the columns, so the
   panel on the right would stop short of the list beside it. As on the other sub pages the
   right column stretches to the row and its panel fills it: the CDD record's rows share the
   remainder equally with their content centred; the conflict-check panel spreads it across
   its body, the flow diagram taking the first 34px (its paths already scale,
   preserveAspectRatio none) and the gaps between its blocks the rest. Under 920px the grid is
   one column, so nothing stretches. The IDs outrank product.css, which loads after this
   file. --- */
#cdd .record-grid, #conflicts .record-grid { align-items: stretch; }
#cdd .record-grid > :last-child, #conflicts .record-grid > :last-child { display: flex; flex-direction: column; }
#cdd .record-grid .rec-card { flex: 1 1 auto; display: flex; flex-direction: column; }
#cdd .record-grid .rec-body { flex: 1 1 auto; display: flex; flex-direction: column; }
#cdd .record-grid .rec-row { flex: 1 1 auto; align-content: center; }
#conflicts .record-grid .sig { flex: 1 1 auto; display: flex; flex-direction: column; }
#conflicts .record-grid .sig .sig-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
#conflicts .record-grid .sig .sig-core { width: 100%; }
#conflicts .record-grid .sig .sig-flow { height: auto; flex: 1 1 84px; min-height: 84px; max-height: 118px; }

@media (prefers-reduced-motion: reduce) {
  .sig-flow .beam { animation: none; }
  .sig-acts li, .sig.sig--paper .sig-acts li { animation: none; }
}