/* Anatomy IT — base styles. All colors/fonts via tokens.css variables. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink-heading); line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(32px, 4vw, 54px); font-weight: 700; }
h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; }
h3 { font-size: 22px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }
p { margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--ink-heading); }

/* The default hover color above is navy — invisible against the navy/dark
   backgrounds those same links often sit on (a pagehero lede, a dark CTA
   band). Every dark-background context hovers its links to the sky-blue
   accent instead — the same color breadcrumbs and .text-link already use
   on dark backgrounds — so a hovered link reads as distinct from both the
   background and the surrounding white body copy, not just "not navy".
   Buttons are excluded: each .btn variant already sets its own hover
   colors, tuned to its own background. */
.pagehero a:not(.btn):hover,
.pagehero--dots a:not(.btn):hover,
.pagehero--photo a:not(.btn):hover,
.hero--photo a:not(.btn):hover,
.section--dark a:not(.btn):hover {
  color: var(--color-sky);
}

img { max-width: 100%; height: auto; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.section { padding: 80px 0; --surface: var(--bg); }
.section--alt { background: var(--bg-alt); --surface: var(--bg-alt); }
.section--dark { background: var(--bg-dark); --surface: var(--bg-dark); }
.section--dark h2, .section--dark h3 { color: var(--ink-on-dark); }
.section--dark p { color: var(--color-grey-light); }
.section--cream { background: var(--color-yellow-light); --surface: var(--color-yellow-light); }

/* Eyebrow + brand motifs */
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow--teal { color: var(--accent-2); }
.eyebrow--sky { color: var(--color-sky); }

/* HEALTHIT™ 360 wordmark: "HEALTH" and "360" in the surrounding ink colour,
   "IT" in brand purple, "360" a lighter weight than "HEALTHIT" — per your
   logo (2026-09-19). For standalone mentions (headings, the nav/
   footer link) and for the opening mention of a paragraph that leads with the
   mark; left out of every later mention in running copy and out of .text-link,
   where only part of the link changing colour would read as broken, not branded.
   Note that it sets the mark in bold wherever it is used, body copy included.
   --brand-healthit-ink lets a dark-background context (e.g. .pagehero h1)
   swap "HEALTH"/"360" to white without touching the purple. */
.brand-healthit { --brand-healthit-ink: var(--ink-heading); color: var(--brand-healthit-ink); font-weight: 700; }
/* "IT" carries the brand purple at every size the mark is set in, not only in
   headings. Against white that pair measures 4.01:1, which is under the 4.5:1
   contrast floor for text below heading size; it is a deliberate choice, made
   after seeing it rendered, and one value here reverses it. */
.brand-healthit__it { color: var(--color-purple); }
.brand-healthit__360 { color: var(--brand-healthit-ink); font-weight: 500; }
/* The trademark sits with the wordmark, not with the purple: it takes the
   ink of the phrase around it and rides smaller and high, the way a mark
   is set. Inside the purple span it read as part of the letters. */
.brand-healthit__tm {
  color: var(--brand-healthit-ink); font-weight: 500;
  font-size: 0.58em; vertical-align: 0.5em; letter-spacing: 0;
  /* A hair of air between the wordmark and the mark, set here rather than typed
     into the text: the words stay HEALTHIT™ 360 when they are copied, searched
     or indexed, and the gap scales with whatever size the mark is set in. */
  margin-left: 0.12em;
}
.pagehero .brand-healthit { --brand-healthit-ink: var(--ink-on-dark); }
/* Same swap when a bordered button fills on hover: without it the wordmark keeps
   its heading ink and would go navy on navy. */
.btn--secondary:hover .brand-healthit { --brand-healthit-ink: var(--ink-on-dark); }

.gradient-rule {
  height: 14px; width: 220px; border-radius: 999px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
/* Dark variant, as shown on the client's Graphical Elements page */
.gradient-rule--dark {
  background: linear-gradient(90deg, var(--color-navy), var(--color-sky), var(--color-purple));
}

.dots { display: flex; gap: 8px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; }
.dots span:nth-child(1) { background: var(--color-purple); }
.dots span:nth-child(2) { background: var(--color-blue); }
.dots span:nth-child(3) { background: var(--color-sky); }

.hex {
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  display: flex; align-items: center; justify-content: center;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 32px; border-radius: 4px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer; text-align: center;
}
/* A disabled button must not look pressable — same treatment as a disabled field. */
.btn:disabled, .btn:disabled:hover {
  background: var(--color-grey-e8); color: var(--color-grey-90);
  border-color: var(--color-grey-c8); border-style: dashed; cursor: not-allowed;
}
.btn--primary { background: var(--color-navy); color: var(--ink-on-dark); }
.btn--primary:hover { background: var(--color-blue); color: var(--ink-on-dark); }
.btn--cta { background: var(--accent); color: var(--ink-on-dark); }
.btn--cta:hover { background: var(--color-navy); color: var(--ink-on-dark); }
.btn--secondary { background: var(--bg); color: var(--color-navy); border-color: var(--color-navy); }
.btn--secondary:hover { background: var(--color-navy); color: var(--ink-on-dark); }
/* LinkedIn's brand guidelines require the "LinkedIn" wordmark to stay mixed
   case (never LINKEDIN), so this overrides the site-wide uppercase button
   style and adds the gap for the logo mark. */
.btn--linkedin { text-transform: none; letter-spacing: normal; gap: 8px; }
/* The icon must always track the button's own text color, not whatever
   color a wrapping .tile/.featrow/.card/.listing sets on descendant svgs
   (see below) — the extra element in the selector outranks that rule. */
a.btn--linkedin svg { flex: 0 0 auto; color: inherit; }
.btn--accent-dark { background: var(--accent-2); color: var(--color-navy); }
.btn--accent-dark:hover { background: var(--color-white); color: var(--color-navy); }
.btn--ghost-dark { background: transparent; color: var(--ink-on-dark); border-color: var(--color-sky); }
.btn--ghost-dark:hover { background: var(--color-sky); color: var(--color-navy); }
/* Blue line, white inside. Two colour decisions inside one rule, both forced by
   the same measurement: the light blue is 3.51:1 against white and 3.51:1 behind
   white, either way under the 4.5:1 that a 15px label has to meet. So the resting
   label stays heading navy rather than turning blue, and the hover fills navy
   rather than blue (14.76:1). The line itself is the blue that was asked for.
   Fill the hover with the light blue instead and the label drops to 3.51:1. */
.btn--outline-blue { background: var(--bg); color: var(--ink-heading); border-color: var(--color-blue); }
.btn--outline-blue:hover { background: var(--color-navy); color: var(--ink-on-dark); border-color: var(--color-navy); }

.text-link { font-size: 14px; font-weight: 700; color: var(--link); }
.text-link:hover { color: var(--ink-heading); }
/* On navy the default link blue sits at 4.21:1 and the hover colour disappears
   into the background, so the dark sections get the sky accent instead. */
.section--dark .text-link { color: var(--color-sky); }
.section--dark .text-link:hover { color: var(--ink-on-dark); }

/* ============ Header ============ */
/* The bar is not flat white in the approved design: it washes from white at the
   left edge to the brand light grey at the right. Sampled across both drawings -
   #ffffff at the left margin, #f2f3fd at the right, no vertical component - and
   that end colour is --color-grey-light to within one value in one channel. On
   flat white the two links at the top right had no field under them at all,
   which is most of why they read as added on afterwards. */
.navbar {
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg-alt) 100%);
  border-bottom: 1px solid var(--color-grey-blue); position: relative; z-index: 50;
}
/* Top right of the bar, the way the approved design draws them. Still not a band
   of its own: no fill, no rule across the width, so the header reads as one block
   rather than the two stacked strips the earlier navy version made. What holds
   the pair together instead is a mark on each link and a hairline between them.
   The ink is the body ink the drawing uses: the lighter grey that was here
   measured 3.19:1 on white and 2.88:1 on the tinted end of the wash, both under
   the 4.5:1 a label this size has to meet, and that paleness is most of why the
   two words looked dropped on rather than built in. 14px either side of the
   hairline reproduces the ~31px the drawing leaves between the labels. */
.navbar__utility {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding-top: 12px; padding-bottom: 0;
}
.navbar__utility-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; color: var(--ink);
  /* 24px of height, which is the smallest target the guidelines accept. */
  min-height: 24px;
}
.navbar__utility-link svg { flex: 0 0 auto; }
.navbar__utility-link:hover,
.navbar__utility-link:focus-visible { color: var(--ink-heading); }
/* The same focus ring the FAQ summaries and the video poster already use. */
.navbar__utility-link:focus-visible {
  outline: 3px solid var(--color-sky); outline-offset: 3px; border-radius: 3px;
}
.navbar__utility-sep {
  flex: 0 0 auto; width: 1px; height: 14px; background: var(--color-grey-c8);
}

/* Both rows repeat the bar's own background: the dropdown below sits at z-index
   -1, which puts it under them but over .navbar's background, so they - not the
   bar - are what hides the panel while it slides out. inherit rather than a
   colour so it survives the washed bar in the three header options; if that wash
   lands, the ramp restarts at each row's 1200px box, and background-attachment:
   fixed on the bar and both rows lines them up again. */
/* The air belongs at the outer edges of the bar, not between its two rows: 12px
   above the utility line, 10px between that line and this row, 18px below. Built
   the other way round - a 16px channel in the middle and 14px at the bottom - the
   top line read as a separate strip sitting on the nav. */
.navbar__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 10px 18px; gap: 24px; }
.navbar__logo { flex: 0 0 auto; }
/* max-width:none defeats the global img{max-width:100%}, which was compressing
   the logo horizontally once the flex row ran out of room (brand prohibition 1) */
.navbar__logo img { height: 44px; width: auto; max-width: none; display: block; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 10px; cursor: pointer;
  min-width: 44px; min-height: 44px;
}
.nav-toggle svg { display: block; }

/* The items stretch to the height of the row so that .dropdown's top: 100% lands
   on the same line for all of them - 15px (.navbar__inner's padding-bottom plus
   the bar's 1px border) above the bottom edge of the bar, at every width,
   including the ones between 901 and 1200px where a label wraps to two lines and
   the row grows. The panel takes 14 of those 15 back, so its own top edge ends
   up a pixel behind the bar and no hairline of the page can show through. */
.nav-menu { display: flex; align-self: stretch; align-items: stretch; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; display: flex; align-items: center; }
/* Those 15px belong to the bar, not to the item, so a mouse crossing them would
   drop the hover and start closing the panel. This invisible strip carries the
   hover across: it is part of the item, and it takes pointer events over the
   bar's background because the item is positioned and the two rows are not. */
.nav-menu > li::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 15px;
}
/* .nav-menu__parent is the submenu parent that has no page behind it (Services,
   Solutions, Who We Serve — client instruction, 2026-09-16). It is a <button>
   so it stays in the tab order and :focus-within below still opens its
   submenu; these rules only strip the button chrome so it matches the links
   beside it. */
.nav-menu > li > a,
.nav-menu > li > .nav-menu__parent {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--color-navy);
  padding: 12px; border-radius: 4px;
}
.nav-menu > li > .nav-menu__parent {
  font-family: inherit; line-height: inherit; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.nav-menu > li > a:not(.btn):hover,
.nav-menu > li > .nav-menu__parent:hover { background: var(--color-grey-light); }

/* Chevron on every dropdown-bearing item: with no other affordance, the plain
   text label of "Services" or "Company" gave no visual sign it opens a menu.
   Points down at rest, flips to point up on hover/focus (the CSS-only trigger
   that already opens .dropdown, see :hover/:focus-within below) — same
   convention as Vercel's nav and most others, so nothing needs explaining. */
.nav-chevron { flex: 0 0 auto; transition: transform 150ms ease 100ms; }
.nav-menu > li:hover > a .nav-chevron,
.nav-menu > li:hover > .nav-menu__parent .nav-chevron,
.nav-menu > li:focus-within > a .nav-chevron,
.nav-menu > li:focus-within > .nav-menu__parent .nav-chevron { transform: rotate(180deg); }

/* "You are here": assets/js/main.js compares location.pathname against every
   nav link on load (the markup is identical on all 102 pages, so there is no
   server-rendered active state to start from) and adds these two classes.
   is-current-section marks the top-level item that owns the current page;
   is-current marks the exact dropdown link that IS the current page. */
.nav-menu > li > a.is-current-section,
.nav-menu > li > .nav-menu__parent.is-current-section {
  color: var(--accent); background: var(--color-grey-light);
}
.dropdown a.is-current {
  color: var(--color-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
}

/* The panel slides out from behind the bar rather than fading in place: at
   z-index -1 it is painted under the two rows of the header, so while it travels
   the only part visible is the part already below the bar's bottom edge. It
   starts a little higher than its own height so nothing shows at rest. The 100ms
   delay is also hover intent - sweeping the mouse along the bar no longer flashes
   every menu open on the way past. */
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 300px;
  background: var(--bg); border: 1px solid var(--color-grey-blue); border-radius: 6px;
  box-shadow: var(--shadow-elevated);
  padding: 10px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  /* A short fade and six pixels of travel. It briefly slid the whole panel out
     from behind the bar instead; that read as too much movement on a hover and
     went back on 22 September. */
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-menu > li:hover > .dropdown,
.nav-menu > li:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* Even six pixels is motion someone may have asked not to see. */
@media (prefers-reduced-motion: reduce) {
  .dropdown, .nav-chevron { transition: none; }
}
.dropdown a {
  display: block; padding: 10px 14px; border-radius: 4px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.dropdown a:hover { background: var(--color-grey-light); color: var(--color-navy); }

.navbar .btn { min-height: 44px; padding: 12px 24px; font-size: 14px; }

/* ============ Hero ============ */
.hero { background: linear-gradient(180deg, var(--bg) 0%, var(--color-grey-light) 100%); }
.hero__inner { display: flex; align-items: stretch; gap: 40px; }
.hero__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 22px; padding: 88px 0; }
.hero__copy p.lede { font-size: 19px; line-height: 1.6; max-width: 540px; }
.hero__copy p.support { font-size: 16px; max-width: 560px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.hero__visual {
  flex: 0 0 480px; position: relative; display: flex; align-items: flex-end;
  justify-content: center; background: var(--color-navy); overflow: hidden;
  border-radius: 0 0 0 8px;
}
.hero__visual .dots { position: absolute; top: 36px; left: 36px; }
.hero__visual .dots span { width: 12px; height: 12px; }
.hero__hex-1 { position: absolute; right: -60px; top: 60px; width: 180px; height: 200px; background: var(--hex-fill-blue); }
.hero__hex-2 { position: absolute; right: 60px; bottom: -40px; width: 140px; height: 156px; background: var(--hex-fill-teal-hero); }
.hero__visual img { position: relative; width: 420px; max-width: 92%; display: block; }

/* ============ Trust band ============ */
.trustband { border-bottom: 1px solid var(--color-grey-blue); background: var(--bg); }
.trustband__inner { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 26px 0; }
.trustband__label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--color-grey-90); }
/* The five award badges arrive at five different sizes, from 121x158 to 193x134.
   Each one now gets a cell of the same width and is centred inside it, so the
   row sits on an even pitch instead of the ragged one their own widths gave it —
   that unevenness, more than the size, was what made the strip read as clutter.
   64px is the ceiling, not a preference: the smallest artwork is 193x134, which
   at 64 CSS px still has device pixels to spare on a retina screen and starts
   upscaling above 67. Do not raise it, and do not crop the smallest badge to its
   ink — that logotype is knocked white out of a dark plate and would disappear
   against this white band. */
.trustband__badge { height: 64px; display: block; flex: 0 0 124px; width: 124px; object-fit: contain; }
.trustband__inner { gap: 26px; }
@media (max-width: 560px) {
  .navbar__utility { gap: 12px; padding-top: 10px; } .trustband__badge { height: 52px; flex: 0 0 96px; width: 96px; } .trustband__inner { gap: 16px; } }
.badge-slot {
  border: 1px solid var(--color-grey-c8); border-radius: 4px; padding: 12px 18px;
  font-size: 12px; font-weight: 500; color: var(--ink);
}
.badge-slot--pending { border-style: dashed; border-color: var(--accent); color: var(--accent); }

/* ============ Stats ============ */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.stat { border-top: 4px solid var(--color-purple); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.stat:nth-child(2) { border-top-color: var(--color-blue); }
.stat:nth-child(3) { border-top-color: var(--color-sky); }
.stat:nth-child(4) { border-top-color: var(--color-teal); }
.stat__value { font-size: 44px; font-weight: 700; color: var(--color-navy); line-height: 1; }
.stat p { font-size: 15px; line-height: 1.5; }

/* ============ Cards ============ */
.section__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.section__head--center { align-items: center; text-align: center; }
.section__head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; }

.card-grid { display: grid; gap: 28px; }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A column of cards standing beside something taller than they are. Without
   this the rows stretch to fill the neighbour and each card grows a pocket of
   empty space under its own text. */
.card-grid--stack { align-content: start; }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--bg); border-radius: 8px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  border-top: 5px solid var(--color-navy);
  box-shadow: var(--shadow-card);
}
.card--blue { border-top-color: var(--color-blue); }
.card--sky { border-top-color: var(--color-sky); }
.card p { font-size: 15px; }
/* Two-line box headings: the dividing bar is out and the second half drops to
   its own line. A span rather than a <br> so the pause survives being read
   aloud — the space before it is what a screen reader hears as the break. */
.card h3 .card__h3-line { display: block; }

/* A card is a flex column, so every child fills its width unless it says
   otherwise, and a heading inside one still answers to the page scale. Both
   defaults are wrong here and they compound: at 38px a four-word title breaks
   over three lines in a 300px column, the chip and the button stretch edge to
   edge as if they were full-width controls, and the call to action lands
   wherever the copy above it happens to end - 150px, 160px, 123px down three
   cards of the same height, which is what makes a tidy grid read as crooked.

   So: a card heading takes the same 22px an h3 already gets, because inside a
   card the heading level is a question about document structure and not about
   size - the 19 cards that use h3 have read correctly all along. The two things
   that are not full-width controls stop pretending to be - the chip sits at the
   start of its line the way a label does, the call to action is centred the way
   a card's one action should be - and a trailing button is pushed to the floor
   of the card, so cards in a row end on one line whatever their copy does. */
.card > h2 { font-size: 22px; line-height: 1.3; }
.card > .chip { align-self: flex-start; }
.card > .btn { align-self: center; }
.card > .btn:last-child { margin-top: auto; }
.card > ul {
  margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 6px;
}

.pill {
  align-self: flex-start; background: var(--accent-2); color: var(--ink-on-dark);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}

.tile {
  border: 1px solid var(--color-grey-blue); border-radius: 8px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px; background: var(--bg);
}
.tile:hover { border-color: var(--color-blue); box-shadow: var(--shadow-card); }
.tile svg { flex: 0 0 auto; }
.tile h3 { font-size: 17px; line-height: 1.4; }
.tile p { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.tile--note { border-style: dashed; border-color: var(--color-grey-c8); background: var(--color-yellow-light); justify-content: center; }

.numcard { background: var(--color-grey-light); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.numcard__no { font-size: 30px; font-weight: 700; color: var(--color-purple); }
.numcard:nth-child(2) .numcard__no { color: var(--color-blue); }
.numcard:nth-child(3) .numcard__no { color: var(--color-sky); }
.numcard:nth-child(4) .numcard__no { color: var(--color-teal); }
.numcard h3 { font-size: 18px; letter-spacing: 0.02em; }
.numcard p { font-size: 15px; }

/* Resource cards */
.rescard { border: 1px solid var(--color-grey-blue); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
.rescard__bar { height: 8px; background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky)); }
.rescard__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.rescard__type { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-2); text-transform: uppercase; }
.rescard h3 { font-size: 17px; line-height: 1.4; }

/* ============ Framework band ============ */
/* Their own framework slide stacks it: headline + sub-head on top, the hexagon
   chain spanning the full width beneath — not a two-column split. */
.framework__inner { display: flex; flex-direction: column; gap: 44px; }
.framework__copy { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.framework__copy p { font-size: 17px; }
/* Centred variant, as asked for on the home page: the column itself, the type
   inside it, and the button row (a flex row, which would otherwise stay left). */
.framework__copy--center { align-items: center; text-align: center; margin-inline: auto; }
.framework__copy--center .hero__actions { justify-content: center; }
/* Hexagon chain — outlined hexagons that touch in one row, each holding a
   thin-line icon, labels alternating above/below. This mirrors how the client
   actually draws the motif on their own framework slide and Graphical Elements
   page (both from their "We are expanding this" set, so treat as directional). */
.hexchain {
  flex: 0 0 auto; list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.hexchain__step {
  display: flex; flex-direction: column; align-items: center;
  /* pitch == hexagon width, so neighbours meet point-to-point like their slide */
  flex: 0 0 122px; margin-inline: -2px;
}
.hexchain__step:nth-child(even) { flex-direction: column-reverse; }
.hexchain__hex { width: 118px; height: 132px; display: block; flex: 0 0 auto; }
.hexchain__hex polygon { fill: none; stroke-width: 3; stroke-linejoin: round; }
.hexchain__hex .hexchain__glyph { fill: none; stroke: var(--color-navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hexchain__label {
  font-size: 13.5px; font-weight: 700; line-height: 1.35; text-align: center;
  padding: 12px 6px; min-height: 62px; display: flex; align-items: center;
  justify-content: center;
}
.section--dark .hexchain__hex .hexchain__glyph { stroke: var(--ink-on-dark); }
.section--dark .hexchain__label { color: var(--color-grey-light); }

@media (max-width: 900px) {
  .hexchain { flex-wrap: wrap; gap: 8px 0; }
  .hexchain__step { flex: 0 1 33.333%; }
  .hexchain__hex { width: 100px; height: 112px; }
}
@media (max-width: 560px) {
  .hexchain__step { flex: 0 1 50%; }
  .hexchain__label { min-height: 0; padding: 8px 2px; font-size: 12.5px; }
}

/* ============ Quote ============ */
.quote { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 860px; margin: 0 auto; text-align: center; }
.quote blockquote { margin: 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.6; font-weight: 500; color: var(--color-navy); }
.quote cite { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.quote cite strong { font-size: 15px; color: var(--color-navy); }
.quote cite span { font-size: 14px; }
/* The spotlights link belongs at the top right of a client quote. Where the
   block has a heading the link rides the heading row; this box has none, so
   the link takes a row of its own above the quote and pushes to the edge. */
.quote__cta { align-self: stretch; text-align: right; }

/* ============ CTA band ============ */
.ctaband { position: relative; text-align: center; }
.ctaband::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
.ctaband__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ctaband p { max-width: 560px; }

/* ============ Page hero (inner pages) ============ */
.pagehero { position: relative; background: var(--color-navy); overflow: hidden; }
/* padding-block only -- a shorthand here wipes .container's 24px gutter, and this
   element carries both classes on 106 pages, so the hero copy ran edge to edge
   on every one of them below 1200px. */
.pagehero__inner { position: relative; display: flex; flex-direction: column; gap: 18px; padding-block: 76px; }
.pagehero__hex-1 { position: absolute; right: -50px; top: -60px; width: 220px; height: 244px; background: var(--hex-fill-blue); }
.pagehero__hex-2 { position: absolute; right: 180px; bottom: -80px; width: 150px; height: 166px; background: var(--hex-fill-teal-pagehero); }
.pagehero h1 { color: var(--ink-on-dark); max-width: 780px; }
.pagehero .lede { font-size: 17px; line-height: 1.75; color: var(--color-grey-light); max-width: 760px; }
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.breadcrumbs a { color: var(--color-sky); font-weight: 500; }
.breadcrumbs span[aria-hidden] { color: var(--color-blue); }
.breadcrumbs em { font-style: normal; color: var(--color-grey-light); font-weight: 500; }

/* Alternating feature rows */
.featrow { display: flex; align-items: center; gap: 56px; }
.featrow__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
.featrow__copy .eyebrow { letter-spacing: 0.18em; }
.featrow__copy h2 { font-size: 28px; line-height: 1.3; }
.featrow__media {
  flex: 0 0 440px; min-height: 270px; border-radius: 8px;
  background: var(--color-grey-light); border: 1px dashed var(--color-grey-c8);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.featrow__media p { font-size: 13px; font-weight: 500; color: var(--color-grey-90); text-align: center; }
.featrow--flip { flex-direction: row-reverse; }
.section--alt .featrow__media { background: var(--bg); }

/* ============ Footer ============ */
.footer { background: var(--bg); border-top: 1px solid var(--color-grey-blue); }
/* Six sections, so six tracks: the brand, then one for each menu. They used to
   share five, which put Resources underneath Company in the same column instead
   of beside it. The link tracks take the width their own words need and the row
   spreads what is left evenly between them, so the space you see between any two
   columns is the same - equal-width tracks made the gaps look uneven, because a
   column of short words leaves a wide ragged margin and a column of long ones
   leaves none. */
.footer__grid {
  display: grid; grid-template-columns: minmax(240px, 2fr) repeat(5, max-content);
  justify-content: space-between; gap: 28px; padding: 60px 0 40px;
}
/* Tracks that take the width of their own words cannot shrink, so below the width
   where all six still fit the row would push the page sideways. Measured: six fit
   at 1200 and not at 1100, so the three-column stack starts here rather than at
   the 1080 it used to. */
@media (max-width: 1199px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); justify-content: stretch; }
}
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__brand img { height: 38px; width: auto; align-self: flex-start; }
.footer__brand p { font-size: 13.5px; max-width: 260px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-grey-light); color: var(--ink-heading);
  transition: background-color 150ms ease, color 150ms ease;
}
.footer__social a:hover, .footer__social a:focus-visible { background: var(--accent); color: var(--ink-on-dark); }
.footer__social svg { width: 18px; height: 18px; }
.footer h4 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 13px; color: var(--ink); }
.footer__col a:hover { color: var(--color-navy); }
.footer__badges {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 0; border-top: 1px solid var(--color-grey-blue); border-bottom: 1px solid var(--color-grey-blue);
}
/* Half the height of the band under the top block, in cells of a fixed width so
   the five sit on an even pitch: the artwork is five different shapes and left
   to itself the row reads as clutter. 40px keeps every mark inside its own
   resolution - the smallest source is 134px tall. */
.footer__badge {
  height: 40px; width: 84px; flex: 0 0 84px;
  object-fit: contain; display: block;
}
.footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0 28px; }
.footer__legal p, .footer__legal a { font-size: 12.5px; color: var(--color-grey-90); }
.footer__legal a:hover { color: var(--color-navy); }
.footer__legal nav { display: flex; align-items: center; gap: 24px; }
.footer__legal nav a { display: inline-flex; align-items: center; gap: 5px; }
.footer__legal nav svg { flex: 0 0 auto; }

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

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .hero__visual { flex-basis: 400px; }
  .hexgrid { flex-basis: 420px; }
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: span 3; }
}

@media (max-width: 900px) {
  .section { padding: 56px 0; }
  .nav-toggle { display: block; }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--color-grey-blue);
    box-shadow: var(--shadow-nav-menu); padding: 8px 16px 16px;
  }
  .nav-menu.is-open { display: flex; }
  /* Back to a block: the submenu is in the flow here, under its label, not a
     flex sibling beside it. And there is no gap left to bridge. */
  .nav-menu > li { display: block; }
  .nav-menu > li::after { content: none; }
  .nav-menu > li > a,
  .nav-menu > li > .nav-menu__parent { display: flex; width: 100%; min-height: 48px; }
  /* Every dropdown is already permanently open here (below), so a chevron
     that implies "tap to expand" would be a broken promise. */
  .nav-chevron { display: none; }
  .dropdown {
    position: static; visibility: visible; pointer-events: auto; transform: none;
    border: 0; box-shadow: none; padding: 0 0 8px 16px; min-width: 0;
  }
  .navbar .btn { display: none; }
  .hero__inner { flex-direction: column; gap: 0; }
  .hero__copy { padding: 48px 0; }
  .hero__visual { flex-basis: auto; width: 100%; border-radius: 8px 8px 0 0; min-height: 320px; }
  .framework__inner { flex-direction: column; align-items: flex-start; }
  .hexgrid { flex-basis: auto; width: 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; }
  .featrow, .featrow--flip { flex-direction: column; align-items: stretch; }
  .featrow__media { flex-basis: auto; }
  .section__head--split { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  /* 34px keeps us clear of the brand's 30px minimum while the row still fits */
  .navbar__logo img { height: 34px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat__value { font-size: 32px; }
  .card-grid--4 { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}

/* ============================================================================
   CONTENT COMPONENTS
   Added for the migrated-content build (blog, news, leadership, webinars,
   client spotlights, insights & guides). Everything above this line is
   untouched. All colors/fonts come from tokens.css; radii 8px; shadows use the
   same soft-navy rgba as the base cards; breakpoints stay at 1080/900/560.
   ============================================================================ */

/* ---------- Long-form article body ---------- */
.prose { max-width: 68ch; }
/* C61 (punch list 14.09) "Have copy go all the way across. Looks awkward with
   white space." — the Leadership intro only; .prose keeps its 68ch measure
   everywhere else. */
.prose--full { max-width: none; }
.prose > * + * { margin-top: 1.3em; }
.prose p, .prose li { font-size: 17px; line-height: 1.8; }
.prose h2 { font-size: 26px; margin-top: 2em; }
.prose h3 { font-size: 20px; margin-top: 1.8em; }
.prose h4 { font-size: 17px; margin-top: 1.6em; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: 0.8em; }
.prose strong { color: var(--ink-heading); }
.prose a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--ink-heading); }
/* A button-styled link inside prose copy (e.g. the LinkedIn button on a
   speaker card) should look like every other button, not like inline text —
   and must keep its own hover colors, since --ink-heading above is the same
   navy as the button's hover background and would erase it. */
.prose .btn, .prose .btn:hover { text-decoration: none; }
.prose ul, .prose ol { margin-left: 0; padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose blockquote {
  margin: 0; padding: 22px 28px;
  border-left: 5px solid var(--color-purple);
  background: var(--color-grey-light); border-radius: 0 8px 8px 0;
}
.prose blockquote p { font-size: 18px; font-weight: 500; color: var(--color-navy); }
.prose blockquote > * + * { margin-top: 0.8em; }
.prose figure { margin: 0; }
.prose img { display: block; border-radius: 8px; }
.prose figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--color-grey-90); }
.prose hr {
  border: 0; height: 4px; width: 180px; border-radius: 2px; margin: 44px 0;
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
.prose code {
  background: var(--color-grey-light); border: 1px solid var(--color-grey-blue);
  border-radius: 4px; padding: 2px 6px; font-size: 0.92em;
}
.prose__scroll { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--color-grey-blue); padding: 10px 14px; text-align: left; vertical-align: top; }
.prose th { background: var(--color-grey-light); color: var(--ink-heading); font-weight: 700; }

/* ---------- Post title block ---------- */
.article-header { display: flex; flex-direction: column; gap: 16px; }
.article-header h1 { font-size: clamp(28px, 3.4vw, 44px); }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 14px; color: var(--ink);
}
.article-meta strong { font-weight: 700; }
.article-meta__sep { color: var(--color-grey-c8); }
.pagehero .article-meta { color: var(--color-grey-light); }
.pagehero .article-meta strong { color: var(--ink-on-dark); }
.pagehero .article-meta__sep { color: var(--color-blue); }
.pagehero .article-header .chip { background: transparent; border-color: var(--color-sky); color: var(--color-sky); }

/* ---------- Index rows / cards ---------- */
.listing { display: flex; flex-direction: column; border-top: 1px solid var(--color-grey-blue); }
.listing__item {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px 32px;
  padding: 28px 0; border-bottom: 1px solid var(--color-grey-blue);
}
.listing__side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.listing__date { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-grey-90); }
.listing__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.listing__title { font-size: 20px; line-height: 1.35; }
.listing__title a { color: var(--ink-heading); }
.listing__title a:hover { color: var(--link); }
.listing__excerpt { font-size: 15px; line-height: 1.7; }
.listing--media .listing__item { grid-template-columns: 260px minmax(0, 1fr); }
.listing--media .listing__side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.listing__thumb {
  width: 100%; aspect-ratio: 1024 / 538; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--color-grey-blue);
  background: var(--color-grey-light);
}
.listing__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Category sort buttons (Blog, News, Webinars) ---------- */
/* One colour per category, as on the live pages. The fills are the brand
   tokens: the live stylesheet's own fills are already #5c88da / #5bc2e7 /
   #012169 / #8c6fca, so this is the same row of colours, sourced from
   tokens.css instead of from four hard-coded hexes.

   The ink is chosen per fill rather than white everywhere, which is what the
   live page does. White on Sky measures 2.0:1 and is not legible at button
   size, so Sky takes navy (7.3:1). Navy and Purple keep white (15.3:1 and
   4.0:1 — the same pairing .btn--cta has shipped with site-wide) and Light Blue
   keeps white at 3.5:1, both above the 3:1 floor for a control and matching the
   live page. ALL is the live page's own light grey, with navy ink because its
   purple-on-grey measures 3.6:1.

   The bar is hidden until the script reveals it, so it never appears where it
   cannot work. [hidden] needs saying twice over: a display rule of our own
   beats the browser's default for it. */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 32px; }
.filterbar[hidden] { display: none; }

/* The search row above the bar on the Blog list: label, field, purple button,
   in the order the live page has them. Same two rules as the bar — it is hidden
   until the script reveals it, and [hidden] has to be repeated because the
   display rule on the line above would otherwise win.
   The field is wide and the button never shrinks, so at 390px the button drops
   to a line of its own instead of squeezing the field to nothing. The border is
   Grey 90 rather than the lighter greys: at 3.2:1 on white it is a boundary a
   low-vision reader can find (the 3:1 floor for a control), where the next grey
   down the scale is 2.4:1. The button is the site's purple CTA button, minus the uppercase every
   other button takes — the live control reads "Search", not "SEARCH". */
.searchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.searchbar[hidden] { display: none; }
.searchbar__label { font-size: 15px; color: var(--ink); }
.searchbar__input {
  flex: 1 1 240px; min-width: 0; min-height: 48px; padding: 12px 16px;
  font-family: var(--font-sans); font-size: 15px;
  border: 1px solid var(--color-grey-90); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
.searchbar__btn { flex: 0 0 auto; text-transform: none; border-radius: 8px; }
/* Shown only when a query matches nothing. It is not a live region: the count
   is announced by the one status line in the bar. */
.listing__empty { padding: 28px 0; font-size: 15px; line-height: 1.7; }
.listing__empty[hidden] { display: none; }
.filterbar__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 26px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  background: var(--bg); color: var(--ink-heading);
}
.filterbar__btn--all { background: var(--color-grey-light); border-color: var(--color-grey-blue); color: var(--ink-heading); }
.filterbar__btn--blue { background: var(--color-blue); color: var(--ink-on-dark); }
.filterbar__btn--sky { background: var(--color-sky); color: var(--color-navy); }
.filterbar__btn--navy { background: var(--color-navy); color: var(--ink-on-dark); }
.filterbar__btn--purple { background: var(--color-purple); color: var(--ink-on-dark); }
/* Which one is on cannot be colour alone — every button is already a different
   colour — so the pressed one is ringed and the others are dimmed. */
.filterbar__btn[aria-pressed="false"] { opacity: 0.75; }
.filterbar__btn:hover { opacity: 1; }
/* The ring cannot be currentColor: on every white-ink button that is white
   on a near-white page, so four of the eight had no visible pressed state. */
.filterbar__btn[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink-heading); }
.filterbar__btn--all[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink-heading); }

/* ---------- Webinar cards (the /webinars/ list) ---------- */
/* Two across, with every so often one running the full width: the live page
   shows two cards, then the next recording in full, then the rest. A card
   hidden by the sort buttons has to give up its grid slot as well. */
.wcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.wcards > [hidden], .listing__item[hidden] { display: none; }
.wcard {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--color-grey-blue); border-radius: 8px;
  overflow: hidden; box-shadow: var(--shadow-card-subtle);
}
.wcard__media { display: block; width: 100%; aspect-ratio: 1024 / 474; background: var(--color-grey-light); }
.wcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.wcard__title { font-size: 19px; line-height: 1.35; }
.wcard__title a { color: var(--ink-heading); }
.wcard__title a:hover { color: var(--link); }
.wcard .text-link { margin-top: auto; padding-top: 4px; }

/* A webinar shown in full: at the top of the page, and once inside the grid in
   teal. Navy ink on teal measures 6.7:1. */
.wfeature { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 36px; align-items: start; }
/* Same trap as the bar above: a display rule of ours outranks [hidden], so the
   feature above the list has to be told twice to go away. */
.wfeature[hidden] { display: none; }
.wfeature--nomedia { grid-template-columns: minmax(0, 1fr); }
.wfeature__media { display: block; border-radius: 12px; overflow: hidden; background: var(--color-grey-light); }
.wfeature__media img { width: 100%; height: auto; display: block; }
.wfeature__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.wfeature__title { font-size: 26px; line-height: 1.3; }
.wfeature__title a { color: var(--ink-heading); }
.wfeature__title a:hover { color: var(--link); }
.wfeature .prose { max-width: none; }
.wfeature--teal {
  grid-column: 1 / -1; background: var(--color-teal); color: var(--color-navy);
  border-radius: 12px; padding: 32px;
}
.wfeature--teal .wfeature__title a, .wfeature--teal .listing__date, .wfeature--teal .prose { color: var(--color-navy); }
.wfeature--teal .wfeature__title a:hover { color: var(--ink-on-dark); }

/* ---------- Article lead image ---------- */
.article-lead { margin: 0 0 32px; max-width: 68ch; }
.article-lead img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ---------- Category label ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--color-grey-blue); background: var(--color-grey-light);
  color: var(--ink-heading);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
a.chip, button.chip { min-height: 44px; padding: 10px 20px; }
a.chip:hover { border-color: var(--color-blue); color: var(--color-navy); }
.chip--active { background: var(--color-navy); border-color: var(--color-navy); color: var(--ink-on-dark); }
.chip--active:hover { color: var(--ink-on-dark); }
.chip--pending { background: var(--bg); border-style: dashed; border-color: var(--accent); color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- Leadership ---------- */
/* B65 (punch list 14.09) "Prefer as it is on current site with white background
   and 4 people across. Feels a bit tight with 5." The steps below (three at
   1080px, two at 900px) are unchanged. */
.person-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.person-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.person-card__photo {
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--color-grey-light); border: 4px solid var(--color-grey-blue);
}
.person-card a:hover .person-card__photo { border-color: var(--color-blue); }
.person-card__name { font-size: 17px; line-height: 1.35; }
.person-card__name a { color: var(--ink-heading); }
.person-card__name a:hover { color: var(--link); }
.person-card__role {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-grey-90); line-height: 1.5;
}

.person-detail { display: flex; align-items: flex-start; gap: 56px; }
.person-detail__media { flex: 0 0 260px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.person-detail__photo {
  width: 240px; height: 240px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--color-grey-light); border: 6px solid var(--color-grey-blue);
}
.person-detail__body { flex: 1 1 0; }

/* ---------- Responsive video ---------- */
.video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--color-navy); border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow-elevated);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Embedded form container ---------- */
.form-embed {
  border: 1px solid var(--color-grey-blue); border-radius: 8px; background: var(--bg);
  padding: 32px; box-shadow: var(--shadow-card);
}
.form-embed__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-embed__note { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--color-grey-90); }
.form-embed noscript { display: block; }

/* ---------- Speaker block (photo + LinkedIn, inside a form-embed) ---------- */
.speaker { display: flex; align-items: center; gap: 16px; }
.speaker__photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--color-grey-light); border: 3px solid var(--color-grey-blue);
}
.speaker__info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.speaker__info p { margin: 0; }

/* ---------- Client logo row ---------- */
.logo-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 28px 48px; padding: 8px 0;
}
.logo-strip img { max-height: 60px; width: auto; display: block; }
.logo-strip a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 4px;
  border: 1px solid var(--color-grey-blue);
  font-size: 14px; font-weight: 700; color: var(--ink-heading);
}
.pagination a:hover { border-color: var(--color-blue); background: var(--color-grey-light); }
.pagination [aria-current="page"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--ink-on-dark); }
.pagination__gap { border-color: transparent; color: var(--color-grey-90); }
.pagination__label { border-color: transparent; color: var(--color-grey-90); font-weight: 500; }

/* ---------- In-page anchor list ---------- */
.toc {
  border-left: 5px solid var(--color-sky); border-radius: 0 8px 8px 0;
  background: var(--color-grey-light); padding: 22px 26px;
}
.toc__title { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-grey-90); }
.toc ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.toc a { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; }

/* ---------- Content-component responsive ---------- */
@media (max-width: 1080px) {
  .person-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .person-detail { gap: 36px; }
  .person-detail__media { flex-basis: 200px; }
  .person-detail__photo { width: 190px; height: 190px; }
}

@media (max-width: 900px) {
  .prose { max-width: none; }
  .article-lead { max-width: none; }
  .listing__item { grid-template-columns: 1fr; gap: 12px; }
  .listing__side { flex-direction: row; align-items: center; gap: 14px; }
  .listing--media .listing__item { grid-template-columns: 1fr; }
  .wcards { grid-template-columns: 1fr; }
  .wfeature { grid-template-columns: 1fr; gap: 20px; }
  .wfeature__media { max-width: 420px; }
  .person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-detail { flex-direction: column; align-items: stretch; }
  .person-detail__media { flex-basis: auto; align-items: flex-start; }
}

@media (max-width: 560px) {
  .prose p, .prose li { font-size: 16px; }
  .prose h2 { font-size: 22px; }
  .prose h3 { font-size: 18px; }
  .prose blockquote { padding: 18px 20px; }
  .form-embed { padding: 22px; }
  .logo-strip { gap: 22px 28px; }
  .logo-strip img { max-height: 46px; }
  .person-card__photo { width: 128px; height: 128px; }
}

/* SVG icons inherit their stroke from color (tokens, never hardcoded) */
.nav-toggle { color: var(--color-navy); }
.tile svg, .featrow svg, .card svg, .listing svg { color: var(--ink-heading); }

/* ---------- MIPS planner ----------
   A year of deadlines, grouped by the month heading the source page uses. Two
   columns where there is room, one where there is not; the months stay in
   reading order either way, which a masonry layout would not guarantee. */
.planner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.planner__month h3 {
  font-size: 20px; padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 2px solid var(--color-grey-blue);
}
.planner__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.planner__item { display: flex; flex-direction: column; gap: 6px; }
.planner__item p { font-size: 15.5px; line-height: 1.65; margin: 0; }
.planner__date { font-weight: 700; color: var(--ink-heading); }
@media (max-width: 860px) { .planner { grid-template-columns: 1fr; gap: 32px; } }

/* ============ Company history timeline ============
   Real text (recovered from the client's timeline graphic) rather than an
   image, so it is readable by screen readers, agents and search. */
.timeline { margin: 56px 0 0; }
/* The 56px above is the gap from whatever sits over the timeline inside the same
   section. When the timeline opens a section of its own, that section's padding
   is the gap. */
.timeline:first-child { margin-top: 0; }
.timeline__head { text-align: center; margin-bottom: 36px; }
.timeline__head h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; }
.timeline__head h3 em { font-style: normal; color: var(--accent); }
.timeline__head p { font-size: 16px; color: var(--ink); margin-top: 8px; }
.timeline__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.timeline__item { position: relative; padding-top: 26px; }
.timeline__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--color-grey-blue);
}
.timeline__item::after {
  content: ""; position: absolute; top: -7px; left: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--color-purple);
}
.timeline__item:nth-child(4n+2)::after { border-color: var(--color-blue); }
.timeline__item:nth-child(4n+3)::after { border-color: var(--color-sky); }
.timeline__item:nth-child(4n+4)::after { border-color: var(--color-teal); }
.timeline__year {
  display: block; font-size: 26px; font-weight: 700;
  color: var(--ink-heading); line-height: 1; margin-bottom: 10px;
}
.timeline__item p { font-size: 14.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .timeline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 560px) {
  .timeline__list { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================================
   SERVICES v1 COMPONENTS
   Blocks the client's Services document (2026-08-28) asks for on every service
   page: the "Need to include" checklist, third-party data points with their
   source, the anonymous Client Experience card, the Solutions hand-off
   ("Anatomy IT helps ..."), a FAQ whose Q&A pairs mirror the FAQPage JSON-LD,
   and the Let's Connect box that closes every page. Tokens only; radii 8px;
   the same soft-navy shadow as the base cards; breakpoints 1080/900/560.
   ============================================================================ */

/* ---------- Service checklist ---------- */
.svclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.svclist li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--ink-heading); }
.svclist li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
.svclist--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Data points (third-party statistics, always with their source) ---------- */
.datapoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; }
.datapoint { border-left: 4px solid var(--color-sky); padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.datapoint:nth-child(2n) { border-left-color: var(--color-purple); }
.datapoint:nth-child(3n) { border-left-color: var(--color-teal); }
.datapoint__value { font-size: 40px; font-weight: 700; color: var(--color-navy); line-height: 1; }
.datapoint__text { font-size: 15px; line-height: 1.6; }
.datapoint__source { font-size: 12.5px; color: var(--color-grey-90); }
.datapoint__source a { color: var(--color-grey-90); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.datapoint__source a:hover { color: var(--color-navy); }

/* ---------- Client Experience (anonymous engagement) ---------- */
.experience {
  background: var(--bg); border-radius: 8px; padding: 40px;
  border-top: 5px solid var(--color-purple);
  box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px;
}
.experience__story { display: flex; flex-direction: column; gap: 16px; }
.experience__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.experience h3 { font-size: 24px; line-height: 1.3; }
.experience p { font-size: 15.5px; line-height: 1.7; }
.experience__outcome { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; border-radius: 8px; background: var(--color-grey-light); }
.experience__outcome-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); }
.experience__outcome-value { font-size: 20px; font-weight: 700; color: var(--color-navy); line-height: 1.3; }
.experience__aside { display: flex; flex-direction: column; gap: 22px; }
.experience__aside .datapoints { grid-template-columns: 1fr; gap: 20px; }
.section--alt .experience { box-shadow: var(--shadow-card-subtle); }

/* ---------- Solutions hand-off ("Anatomy IT helps ...") ---------- */
.solution { display: flex; align-items: center; gap: 56px; }
.solution__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
.solution__copy h2 em { font-style: normal; color: var(--accent); }
.solution__copy p { font-size: 17px; }
.solution__suites {
  flex: 0 0 340px; display: flex; flex-direction: column; gap: 14px; padding: 32px;
  background: var(--bg); border-radius: 8px; box-shadow: var(--shadow-card);
}
.solution__suites-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-grey-90); }

/* ---------- FAQ (question-form headings, mirrored 1:1 in FAQPage JSON-LD) ---------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
/* The answers are folded away behind their question (her call, 16.09). This is a
   native <details>, so it opens on click, on Enter and on Space, tells assistive
   software whether it is open, and needs no script. The answer stays in the
   markup when closed, so the FAQ schema and any crawler still read it. */
.faq__item {
  background: var(--bg); border-radius: 8px; padding: 20px 26px;
  border-left: 5px solid var(--color-blue);
  box-shadow: var(--shadow-card-subtle);
  display: block; align-self: start;
}
.faq__item > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 8px 0;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary h3 { margin: 0; }
/* A chevron drawn from two borders, so it needs no file and follows the text colour. */
.faq__item > summary::after {
  content: ""; flex: 0 0 auto; margin-top: 7px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--color-blue); border-bottom: 2px solid var(--color-blue);
  transform: rotate(45deg); transition: transform 150ms ease;
}
.faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq__item:nth-child(2n) > summary::after { border-color: var(--color-purple); }
.faq__item > summary:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 3px; border-radius: 4px; }
.faq__item > summary + * { margin-top: 12px; }
/* State it rather than trust it: the built-in hiding of a closed <details> did not
   apply in testing, and a closed question that still shows its answer is worse than
   no accordion at all. The answer stays in the markup either way. */
.faq__item:not([open]) > :not(summary) { display: none; }
@media (prefers-reduced-motion: reduce) { .faq__item > summary::after { transition: none; } }
.faq__item:nth-child(2n) { border-left-color: var(--color-purple); }
.faq__item h3 { font-size: 19px; line-height: 1.35; }
.faq__item p, .faq__item li { font-size: 15px; line-height: 1.7; }
.faq__item ul { margin: 0; padding-left: 20px; }
.faq__item li + li { margin-top: 6px; }

/* ---------- Let's Connect box (closes the Services and Solutions pages) ---------- */
.ctabox { position: relative; }
.ctabox::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
.ctabox__inner { display: flex; align-items: center; gap: 56px; }
.ctabox__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 18px; }
.ctabox__copy ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.ctabox__copy li { font-size: 16px; line-height: 1.65; color: var(--color-grey-light); }
.ctabox__copy li strong { color: var(--ink-on-dark); }
.ctabox__action { flex: 0 0 auto; }

@media (max-width: 1080px) {
  .readiness__chart { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .readiness__slot { height: 120px; }
}
@media (max-width: 900px) {
  .svclist, .svclist--3 { grid-template-columns: 1fr; }
  .experience { grid-template-columns: 1fr; padding: 28px; }
  .solution { flex-direction: column; align-items: stretch; }
  .solution__suites { flex-basis: auto; }
  .faq { grid-template-columns: 1fr; }
  .ctabox__inner { flex-direction: column; align-items: flex-start; }
  .scorecard { gap: 28px; }
  .scoreband__captions li { font-size: 11.5px; }
}
@media (max-width: 560px) {
  .datapoint__value { font-size: 32px; }
  .experience h3 { font-size: 21px; }
  .ctabox__action .btn { width: 100%; }
}

/* ============================================================================
   SOLUTIONS v1 COMPONENTS (client Solutions document, dated 31.08, received 02.09)
   Two blocks the document asks for: the per-suite "copy + graphic" pair on Core
   Solutions ("less words and no swivel" — a static label grid, no carousel) and a
   numbered step strip (the "Establish Governance Early" asset, rendered in
   tokens until the branded version arrives). Tokens only; radii 8px; the same
   soft-navy shadow; breakpoints 1080/900/560.
   ============================================================================ */

/* ---------- Suite block: copy + label grid ---------- */
.suite { display: flex; align-items: center; gap: 56px; }
.suite--flip { flex-direction: row-reverse; }
.suite__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
.suite__copy h2 { font-size: 30px; }
.suite__copy p { font-size: 16.5px; }
.suite__graphic {
  flex: 0 0 440px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  padding: 28px; border-radius: 8px; background: var(--bg);
  border-top: 5px solid var(--color-purple); box-shadow: var(--shadow-card);
}
.suite--security .suite__graphic { border-top-color: var(--color-blue); }
.suite--advisory .suite__graphic { border-top-color: var(--color-sky); }
.suite--innovation .suite__graphic { border-top-color: var(--color-teal); }
.suite__label {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px;
  border-radius: 8px; background: var(--color-grey-light);
  font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--color-navy);
}
.suite__label::before {
  content: ""; flex: 0 0 12px; width: 12px; height: 14px; background: var(--color-purple);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.suite--security .suite__label::before { background: var(--color-blue); }
.suite--advisory .suite__label::before { background: var(--color-sky); }
.suite--innovation .suite__label::before { background: var(--color-teal); }
.suite__label:last-child:nth-child(odd) { grid-column: span 2; }
.section--alt .suite__graphic { box-shadow: var(--shadow-card-subtle); }

/* ---------- Numbered step strip ---------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
.steps li {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 26px 16px; border-radius: 8px; background: var(--bg);
  border-top: 4px solid var(--color-teal); box-shadow: var(--shadow-card-subtle);
}
.steps__no {
  width: 32px; height: 32px; border-radius: 6px; background: var(--color-teal); color: var(--color-navy);
  font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.steps svg { width: 40px; height: 40px; fill: none; stroke: var(--color-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.steps p { font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--ink-heading); }

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .suite, .suite--flip { flex-direction: column; align-items: stretch; }
  .suite__graphic { flex-basis: auto; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .suite__graphic { grid-template-columns: 1fr; padding: 20px; }
  .suite__label:last-child:nth-child(odd) { grid-column: auto; }
}


/* ============================================================================
   HEALTHIT 360 sample report + report request form
   (/solutions/healthit-framework/ — built to the client's HealthIT page
   direction document, 2026-09-05; status colours come from tokens.css)
   ============================================================================ */

/* ---------- Conversion box shell ---------- */
.report { display: flex; flex-direction: column; gap: 32px; }
.report__head { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.report__head h2 { font-size: 30px; line-height: 1.25; }
.report__head p { font-size: 16.5px; }
.report__panel {
  padding: 32px; border-radius: 8px; background: var(--bg);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 28px;
}
.report__part { display: flex; flex-direction: column; gap: 18px; }

/* The form lies over the report rather than following it, which is the whole
   point of the treatment: you can see what you are asking for underneath the
   thing you fill in. The card pulls up over the panel's lower edge and carries a
   heavier shadow so the two planes read apart. Below the breakpoint the overlap
   would eat the report, so there it simply sits under it. */
/* The detail behind the form: present, unreadable, and not clickable. It is
   what the form lies on - without it the form would hang below the report
   instead of on top of it. */
.report__part--veiled {
  filter: blur(7px); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 92%);
}
.report__gate { position: relative; z-index: 2; max-width: 660px; margin: -340px auto 0; }
.report__gate .form-embed { box-shadow: var(--shadow-elevated); }
.report__gate .form-embed__head { align-items: center; text-align: center; }
.report__gate .form-embed__head h3 { font-size: 24px; line-height: 1.25; }
@media (max-width: 860px) {
  .report__gate { margin-top: 24px; max-width: none; }
  .report__part--veiled { display: none; }
}
.report__part-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Score: dial + figures ---------- */
.scorecard { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.dial { flex: 0 0 200px; position: relative; width: 200px; height: 200px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial__track { fill: none; stroke: var(--color-grey-blue); stroke-width: 16; }
.dial__value { fill: none; stroke: var(--status-critical); stroke-width: 16; stroke-linecap: butt; }
.dial__caption {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.dial__pct { font-size: 40px; font-weight: 700; color: var(--status-critical); line-height: 1; }
.dial__unit {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}
.figures { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.figures__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.figure {
  padding: 16px 18px; border: 1px solid var(--color-grey-blue); border-radius: 8px; background: var(--bg);
  display: flex; flex-direction: column; gap: 4px;
}
.figure dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
}
.figure dd { margin: 0; font-size: 26px; font-weight: 700; color: var(--ink-heading); line-height: 1.1; }
.verdict {
  align-self: flex-start; padding: 9px 18px; border-radius: 999px;
  background: var(--status-critical-soft); color: var(--status-critical-ink);
  font-size: 14px; font-weight: 700;
}

/* ---------- Score: scoring interpretation scale ---------- */
.scoreband { display: flex; flex-direction: column; gap: 10px; }
.scoreband__bar { display: flex; border-radius: 999px; overflow: hidden; }
/* Decorative only: every range and caption is spelled out in .scoreband__captions,
   so nothing sits as text on a mid-tone fill and nothing is hidden from a reader. */
.scoreband__seg { flex: 1 1 0; height: 14px; }
.scoreband__seg--critical { background: var(--status-critical); flex-grow: 40; }
.scoreband__seg--moderate { background: var(--status-moderate); flex-grow: 20; }
.scoreband__seg--strong { background: var(--status-strong); flex-grow: 25; }
.scoreband__seg--excellent { background: var(--status-excellent); flex-grow: 15; }
.scoreband__captions {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 8px;
}
.scoreband__captions li {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--ink);
}
.scoreband__captions li::before {
  content: ""; display: block; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 3px;
}
.scoreband__captions li:nth-child(1) { flex-grow: 40; }
.scoreband__captions li:nth-child(2) { flex-grow: 20; }
.scoreband__captions li:nth-child(3) { flex-grow: 25; }
.scoreband__captions li:nth-child(4) { flex-grow: 15; }
.scoreband__captions li:nth-child(1)::before { background: var(--status-critical); }
.scoreband__captions li:nth-child(2)::before { background: var(--status-moderate); }
.scoreband__captions li:nth-child(3)::before { background: var(--status-strong); }
.scoreband__captions li:nth-child(4)::before { background: var(--status-excellent); }

/* ---------- Readiness by category: real bar chart. Values are the sample
   PDF's own (Surgical Center of Evergreen, a fictional demo org, Sept 2026),
   so — unlike the old hatched placeholder this replaces — the bar heights and
   colour bands mean something real, and colour-coding by band is honest here. ---------- */
.readiness { display: flex; flex-direction: column; gap: 14px; }
.readiness__chart {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px;
  padding: 20px; border-radius: 8px;
  background: var(--color-grey-light);
  border: 1px solid var(--color-grey-blue);
}
.readiness__col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.readiness__value { font-size: 14px; font-weight: 700; color: var(--ink-heading); }
.readiness__slot { width: 100%; height: 150px; display: flex; align-items: flex-end; }
.readiness__track { width: 100%; border-radius: 6px 6px 0 0; min-height: 4px; }
.readiness__track--critical { background: var(--status-critical); }
.readiness__track--moderate { background: var(--status-moderate); }
.readiness__track--strong { background: var(--status-strong); }
.readiness__track--excellent { background: var(--status-excellent); }
/* Excluded from the overall score (the asterisked category) — greyed out like
   the source PDF, rather than coloured by band, so it visually reads apart
   from the ten that do count. */
.readiness__track--excluded { background: var(--color-grey-c8); }
.readiness__label { font-size: 11.5px; line-height: 1.3; text-align: center; color: var(--ink-heading); font-weight: 500; }
.readiness__note { font-size: 13px; color: var(--ink); }

/* ---------- Report request: CTA card ---------- */
/* Reads as a CTA worth clicking, not a plain info box: a soft gradient wash
   (same tokens as .section--wash) in place of the plain-white .form-embed
   background, a gradient top accent (same pattern as .ctabox), a "for
   partners" pill, and the whole thing centred around one big button. */

/* ---------- Report request: trigger ---------- */
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.formgrid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-heading); }
/* A field that owns its row: a HubSpot field group of one, the way the portal lays it out. */
.formgrid__full { grid-column: 1 / -1; }
.formgrid input, .formgrid select, .formgrid textarea {
  font-family: var(--font-sans); font-size: 15px; padding: 11px 12px;
  border: 1px solid var(--color-grey-c8); border-radius: 8px; background: var(--color-grey-light); color: var(--ink);
}
.formgrid input:disabled, .formgrid select:disabled {
  cursor: not-allowed; background: var(--color-grey-e8); color: var(--color-grey-90);
  border-style: dashed;
}
.field-error { font-size: 13px; font-weight: 500; color: var(--status-critical-ink); }
.field-error:empty { display: none; }
.formgrid [aria-invalid="true"] { border-color: var(--status-critical-ink); }
.lead-form .form-error { margin-bottom: 16px; }
.lead-form .cf-turnstile { margin: 18px 0; }
.lead-form[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.formnote {
  padding: 12px 14px; border-radius: 8px; border: 1px dashed var(--accent);
  background: var(--color-grey-light); font-size: 13.5px; font-weight: 500; color: var(--ink-heading);
}

@media (max-width: 560px) {
  .report__panel { padding: 20px; }
  .formgrid { grid-template-columns: 1fr; }
  .dial { flex-basis: 160px; width: 160px; height: 160px; }
  .dial__pct { font-size: 32px; }
  .figures__grid { grid-template-columns: 1fr; }
  .readiness__chart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readiness__slot { height: 110px; }
  .scoreband__bar { display: none; }
  .scoreband__captions { flex-direction: column; gap: 10px; }
  /* Stacked: the captions become a colour key, so the range proportions go away. */
  .scoreband__captions li,
  .scoreband__captions li:nth-child(1),
  .scoreband__captions li:nth-child(2),
  .scoreband__captions li:nth-child(3),
  .scoreband__captions li:nth-child(4) { flex-grow: 0; }
  .scoreband__captions li { flex-direction: row; align-items: center; gap: 10px; text-align: left; }
}

/* ============================================================================
   HOME v1 (client punch list, HOME tab, 2026-09-14)
   New classes only — nothing above this line changes. Colours via tokens.css.
   ============================================================================ */

/* Block 2 — "Subhead (keep left justified)" */
.trustband__inner--left { justify-content: flex-start; }

/* Block 4 — "Don't like the icons and white boxes. And just Navy color feel."
   The service tiles keep their geometry and lose the icon and the white fill;
   the yellow call-out box is the one thing that stays light on the navy band,
   so its heading and link are pulled back from the dark-section colours. */
.tile--dark { background: transparent; border-color: var(--color-blue); }
.tile--dark:hover { background: transparent; border-color: var(--color-sky); box-shadow: none; }
.section--dark .tile--note h3 { color: var(--ink-heading); }
.section--dark .tile--note .text-link { color: var(--link); }
.section--dark .tile--note .text-link:hover { color: var(--ink-heading); }

/* Blocks 7 and 9 — a lede paragraph inside a centred section head, and a
   centred row for the block's single button or link. */
.section__lede { font-size: 17px; max-width: 860px; }
.section__cta { display: flex; justify-content: center; margin-top: 36px; }

/* Block 7 — the four short headers from the client's Advantage slide. The slide
   puts a photograph behind each panel with the title over it; until those photos
   arrive the panel is the navy ground, with the brand colour on the top edge. */
.advtile {
  display: flex; align-items: flex-end; min-height: 190px; padding: 26px;
  background: var(--color-navy); border-radius: 8px;
  border-top: 5px solid var(--color-purple);
}
.advtile:nth-child(2) { border-top-color: var(--color-blue); }
.advtile:nth-child(3) { border-top-color: var(--color-sky); }
.advtile:nth-child(4) { border-top-color: var(--color-teal); }
.advtile h3 { color: var(--ink-on-dark); font-size: 18px; line-height: 1.35; }

/* Block 9 — the quote treatment from the Design tab: light panel, large quote
   mark, a light blue line along the top and right with one rounded corner. */
.quotecard {
  position: relative; max-width: 860px; margin: 0 auto;
  background: var(--bg-alt); border-radius: 8px 24px 8px 8px;
  padding: 40px 44px 32px 96px;
  border-top: 2px solid var(--color-sky); border-right: 2px solid var(--color-sky);
}
.quotecard__mark {
  position: absolute; left: 30px; top: 16px;
  font-size: 92px; line-height: 1; font-weight: 700; color: var(--color-sky);
}
.quotecard blockquote {
  margin: 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.6;
  font-weight: 500; color: var(--color-navy);
}
.quotecard figcaption {
  margin-top: 22px; display: flex; flex-direction: column; gap: 2px; text-align: right;
}
.quotecard figcaption strong { font-size: 15px; color: var(--color-navy); }
.quotecard figcaption span { font-size: 14px; }
/* The attribution is right justified, and .dots is a flex row that would other-
   wise start hard left under it, so the dots are pushed to the same edge. */
.quotecard figcaption .dots { justify-content: flex-end; }

@media (max-width: 900px) {
  .advtile { min-height: 150px; }
}
@media (max-width: 560px) {
  .quotecard { padding: 64px 22px 24px; border-radius: 8px 18px 8px 8px; }
  .quotecard__mark { left: 18px; top: 8px; font-size: 68px; }
  .quotecard figcaption { text-align: left; }
  .quotecard figcaption .dots { justify-content: flex-start; }
  .trustband__inner--left { justify-content: center; }
}

/* ============================================================
   Services punch list, 16 September — the treatments the workbook asks for on
   the seven /services/ pages. Scoped with modifiers so nothing outside that
   section changes until she has seen these.
   ============================================================ */

/* (A) "Purple color block with dots" hero — C19, C84, C164, C209. Her mock-up:
   solid brand purple, light blue dots scattered over the right half and
   spilling onto the white below, no hexes, no gradient rule. Three
   radial-gradient layers on different tiles keep the scatter from reading as a
   grid; the mask fades the density away from the copy. */
.pagehero--dots { background: var(--color-purple); overflow: visible; }
.pagehero__dotfield {
  position: absolute; left: 0; right: 0; top: 0; bottom: -46px;
  pointer-events: none;
  background-image:
    radial-gradient(var(--dot-hero) 1.7px, transparent 1.8px),
    radial-gradient(var(--dot-hero-soft) 1.5px, transparent 1.6px),
    radial-gradient(var(--dot-hero) 1.2px, transparent 1.3px);
  background-size: 86px 74px, 57px 93px, 121px 61px;
  background-position: 0 0, 23px 41px, 61px 17px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 1) 74%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 1) 74%);
}
.pagehero--dots .lede { color: var(--ink-on-dark); }
/* The rule under the page name starts in brand purple, and this panel IS
   brand purple - on it the first third of the bar simply vanishes and what
   is left reads as a short sky stub. Same three cool stops, same direction,
   but starting on navy so the bar has an edge to begin at. Only this panel
   needs it; on navy and on a photograph the standard rule is correct. */
.pagehero--dots .gradient-rule {
  background: linear-gradient(90deg, var(--color-navy), var(--color-blue), var(--color-sky));
}
.pagehero--dots .breadcrumbs a { color: var(--ink-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.pagehero--dots .breadcrumbs em { color: var(--ink-on-dark); }
.pagehero--dots .breadcrumbs span[aria-hidden] { color: var(--color-grey-light); }
.pagehero--dots .btn--ghost-dark { border-color: var(--color-white); }

/* B11 "Love this. Don't love white box." — the suites keep their place in the
   yellow block and lose the card; a brand rule carries the structure. */
.solution__suites--open {
  background: transparent; box-shadow: none;
  padding: 4px 0 4px 26px; border-left: 4px solid var(--color-purple);
}

/* C141 + D143 — the Advantage promo laid out like the right-hand side of the
   overview PDF: four light cards on a soft purple-to-blue wash. The wash is the
   brand pair at low alpha so navy type on it stays well above the contrast
   threshold, as it is in the PDF. */
.section--wash { background: linear-gradient(120deg, var(--wash-purple-soft), var(--wash-blue-soft)); }
.advband__head { margin: 0 0 20px; font-size: 20px; }
.advtile--light { background: var(--bg); box-shadow: var(--shadow-card); align-items: flex-start; }
.advtile--light h3, .advtile--light h4 { color: var(--ink-heading); font-size: 18px; line-height: 1.35; }

/* D99 / D101 — her engagement story keeps its three points as a list, and the
   outcome is now a full sentence rather than a headline figure. */
.experience__points { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.7; }
.experience__outcome-value--statement { font-size: 16px; font-weight: 600; line-height: 1.6; }

/* A single-column service list, the class form of the inline rule these lists
   carried before. */
.svclist--one { grid-template-columns: 1fr; }

/* C61 "Need to adjust design loosing 2 data points" — the Advisory figures now
   run as a pair instead of a row of four. */
.stats--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* B76 "have this moving" — the Trusted By strip scrolls. The second set is a
   clone that closes the seam and is hidden from assistive technology; the
   motion stops for anyone who asks for reduced motion. */
.logo-strip--marquee { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; gap: 0; position: relative; }
.logo-strip__track {
  display: flex; align-items: center; flex: 0 0 auto; gap: 48px; padding-right: 48px;
  animation: logo-marquee 34s linear infinite; animation-play-state: paused;
}
/* WCAG 2.2.2: the motion only runs while the script that offers the stop control
   is there, and the control (not just hover) decides. */
.logo-strip--marquee[data-motion="on"] .logo-strip__track { animation-play-state: running; }
.logo-strip--marquee:hover .logo-strip__track { animation-play-state: paused; }
/* The control that stops the strip. What came off is the full-size secondary
   button that sat underneath and read like a call to action; content that moves
   on its own still needs a stop the keyboard can reach, so the stop became a
   40px disc at the right-hand edge of the strip itself. The strip fades into
   whatever surface the section paints, so a logo never slides out half-covered
   behind the disc. */
.logo-strip--marquee::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 170px;
  background: linear-gradient(90deg, transparent, var(--surface, var(--bg)) 62%);
  pointer-events: none; z-index: 1;
}
.logo-strip__toggle {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--color-grey-e8); background: var(--surface, var(--bg));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.logo-strip__toggle:hover,
.logo-strip__toggle:focus-visible { color: var(--ink-heading); border-color: var(--color-grey-c8); }
.logo-strip__toggle[hidden] { display: none; }
.logo-strip__icon-play { display: none; }
.logo-strip__toggle[aria-pressed="true"] .logo-strip__icon-play { display: block; }
.logo-strip__toggle[aria-pressed="true"] .logo-strip__icon-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .logo-strip__toggle { transition: none; } }
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; }
  .logo-strip--marquee { flex-wrap: wrap; justify-content: center; gap: 28px 48px; }
}

/* C37 / C65 — the two photographs she sent from the current site sit in the
   feature row in place of the bullets that moved into the FAQ. */
.featrow__media--photo { padding: 0; border: 0; background: transparent; overflow: hidden; }
.featrow__media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }

/* C217 — the picture took the second column of that row, so the two figures from
   the "Data" section now sit on their own line under it. */
.featrow + .datapoints { margin-top: 44px; }

/* C220 — the new data block on Data Protection & Business Continuity, built
   after the treatment in her slide: the figure, then the two statements. */
.datablock { display: flex; gap: 56px; align-items: flex-start; }
.datablock__figure { flex: 0 0 300px; }
.datablock__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.datablock__list li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.7; }
.datablock__list li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--color-sky);
}
.datablock__list li:nth-child(2n)::before { background: var(--color-purple); }

@media (max-width: 900px) {
  .datablock { flex-direction: column; gap: 28px; }
  .datablock__figure { flex-basis: auto; }
}

/* ---------------- Solutions punch list (17.09) ---------------- */

/* C55 "Please just add the icons from the PDF" — the five Establish Governance
   Early icons of the AI Governance datasheet are filled vectors, not the outline
   set the strip was first drawn with, so they need fill and no stroke. The colour
   comes from the token, not from the #0F1D62 the PDF paints them in. */
.steps--asset svg { fill: var(--color-navy); stroke: none; }

/* C110 "Follow image with Copy on top design" — treatment (B): the photograph
   fills the hero, a navy scrim carries the white copy, and the bottom edge stays
   square (no dots, no wave). The scrim is heaviest behind the column the copy
   sits in and lightens to the right so the picture is still readable. */
.pagehero--photo { background: var(--color-navy); }
.pagehero--photo .pagehero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.pagehero--photo .pagehero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--scrim-pagehero-photo) 0%, var(--scrim-pagehero-photo) 58%, var(--scrim-pagehero-photo-far) 100%);
}
.pagehero--photo .lede { color: var(--ink-on-dark); }
.pagehero--photo .breadcrumbs em { color: var(--ink-on-dark); }

/* The 30% above is framed for a hero that carries a lede. A hero without one is
   about 100px shorter, so the same 30% drops the visible strip to chest height
   and cuts the faces off. This modifier pulls the crop back to the very top of
   the picture, which is where it has to be: in the photograph this is written
   for, the subject's hair reaches the third row, so anything above zero shaves
   the crown off at every width the page is read at. Opt-in, so the heroes that
   do carry a lede are untouched. */
.pagehero--photo-top .pagehero__photo { object-position: center 0%; }

/* Below 900px the container is full width, so the copy would reach the light
   end of the gradient: the scrim goes solid there. */
@media (max-width: 900px) {
  .pagehero--photo .pagehero__scrim { background: var(--scrim-pagehero-photo); }
}

/* ============================================================
   Home top block, 17 September — her design direction of 13 September
   (design-direction-home-image-dots-swirl.png, "Image, dots, swirl bottom").
   Every number below was measured off that PNG with PIL, at the 1.4565 device
   px per CSS px the screenshot was taken at, not read from the note that came
   with it. Scoped to .hero--photo so no other page moves.
   ============================================================ */

/* The photograph is the block: full width, copy on top of it. The mock-up has no
   overlay — the left 40% of that frame is a dark wall (mean luminance 63/255 over
   x 0-400) and carries white type on its own. Ours is bright there, so the scrim
   is what keeps the copy readable. It is a flat neutral veil, not the dark blue
   gradient it used to be, and lighter than the one on the (B) service heroes so
   the picture still reads. */
.hero--photo { position: relative; background: var(--color-navy); overflow: visible; }
.hero--photo .hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}
.hero--photo .hero__scrim {
  position: absolute; inset: 0;
  background: var(--scrim-hero-photo);
}
/* Mock-up: header edge to h1 = 126 CSS px, buttons to the crest of the wave =
   89 CSS px. The wave is 82 px tall and overlaps the padding, hence 170 below. */
.hero--photo .hero__inner { position: relative; z-index: 2; display: block; }
/* 296px of air below the copy, not 170: his drawing crests 256px above the bottom
   of the block (measured - the highest white pixel sits 184 down his 440px file),
   and at 170 the buttons landed on the white. */
.hero--photo .hero__copy { padding: 118px 0 296px; gap: 18px; max-width: 860px; }
.hero--photo h1 { color: var(--ink-on-dark); }
/* Her lede runs 4 lines over 729 CSS px at ~31 px line height. */
.hero--photo .hero__copy p.lede { color: var(--ink-on-dark); max-width: 730px; }

/* The bottom edge of the block. The white wave and the light blue dots are one
   drawing, supplied as one file on 21 September; before that they were a curve we
   traced off a mock-up and a separate dot artwork placed against it, and the two
   never agreed. They cannot disagree now.
   Sized the way it was drawn to be: held at its own 1920px width so nothing is
   stretched, anchored to the bottom, and scaled only once the window is wider
   than the drawing. Below 1920 the window simply shows less of it. */
.hero__dotfield {
  position: absolute; left: 0; right: 0; bottom: -1px; top: auto;
  height: 440px; z-index: 1; pointer-events: none;
  background: url("/assets/img/brand/hero-wave-dots.svg") no-repeat center bottom;
  background-size: max(1920px, 100%) auto;
}

@media (max-width: 900px) {
  /* The container is full width here; the scrim is set from the single token so
     this stays right whatever the wide layout above does with it. */
  .hero--photo .hero__scrim { background: var(--scrim-hero-photo); }
  .hero--photo .hero__copy { padding: 64px 0 200px; }
  .hero__dotfield { height: 300px; }
}

/* The five recognition badges (J11) are sized once, up at .trustband__badge near
   the top of this file: one common height so they sit on a line. Their own sizes
   run 134-159 px tall, which is both too large for a trust strip and visibly
   ragged. They are only ever scaled DOWN, so the artefacts in the artwork shrink
   with them rather than being enlarged. */

/* The silent b-roll in the AI Governance row. Same shape as the photograph
   variant of this slot; the stop button sits under the frame, not over it. */
.featrow__media--video {
  padding: 0; border: 0; background: transparent;
  flex-direction: column; align-items: flex-start; gap: 12px;
}
.section--alt .featrow__media--video { background: transparent; }
.ambient-video {
  width: 100%; aspect-ratio: 16 / 9; height: auto; display: block;
  border-radius: 8px; background: var(--color-navy); object-fit: cover;
}
.ambient-video__pause[hidden] { display: none; }

/* C90 "Content is good. We need to dress up with some imagery." with C91 "Use the
   video from the advisory page": that clip is a 2580x740 banner, so it runs the
   full width of the column at its own ratio rather than being cropped into the
   16/9 slot, which would cut the clinician out of frame. */
.mediaband { margin: 44px 0 0; }
.ambient-video--band { aspect-ratio: 192 / 55; }

/* The six HEALTHIT 360 focus areas. One vector hexagon per area with its name as
   page text underneath, replacing the one raster that had the names painted in.
   Six across on a desktop row; three, then two, as the column narrows, because
   six two- and three-word headings side by side stop being readable well before
   a phone. The shape is capped rather than left to take its whole share of the
   row, so it does not grow past the size it was drawn for. No colour here: the
   fills are inside the SVG files. */
.hexrow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.hexrow__item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.hexrow__shape { display: block; width: 100%; max-width: 96px; height: auto; }
.hexrow h3 { font-size: 16px; line-height: 1.35; }
/* Declared here rather than in the shared breakpoint blocks near the top of the
   file: those run before this rule, and at equal specificity the later one wins. */
@media (max-width: 900px) { .hexrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hexrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The clip is its own play/pause control, so it has to look and behave like one:
   a pointer over it and a focus ring for anyone arriving by keyboard. */
.ambient-video[role="button"] { cursor: pointer; }
.ambient-video[role="button"]:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 3px; }

/* ---------------- Client Support punch list (18.09) ---------------- */

/* B21 "Needs some pizazz" + C21 "Please follow the same design / colors etc. on
   the current site" — the two Client Billing cards on the live page are not white
   boxes with a navy top rule: each is a photograph behind a white wash, in a
   hairline grey frame with a 10px radius, and its button is solid navy and spans
   the card. Every value is read out of the live stylesheet
   (6647-layout.css, nodes 679y0z8iobrs / r5xoq06fcke3): 1px #d1d1d1 border,
   10px radius, rgba(255,255,255,0.72) wash, background no-repeat center / cover,
   button #012169 with a #8c6fca hover, label uppercase 15px/500 at 2px of
   letter-spacing. The colours all exist as tokens already (#012169 is
   --color-navy, #8c6fca --color-purple); the wash and the frame are the two that
   did not, and they are in tokens.css.
   Scoped to .card--photo so the site-wide .card is untouched. */
.card--photo {
  position: relative; isolation: isolate;
  border: 1px solid var(--border-card-photo); border-radius: 10px;
  padding: 40px 40px 56px;
  background-repeat: no-repeat; background-position: center center;
  background-size: cover;
}
/* The wash sits above the photograph and below the copy: a negative z-index
   inside the card's own stacking context paints after the background and before
   the content, which is what the live ::after does. */
.card--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--wash-card-photo); border-radius: inherit;
}
.card--photo .btn { width: 100%; margin-top: 22px; font-weight: 500; letter-spacing: 2px; }
/* Purple hover, here only: .btn--primary goes blue on hover everywhere else. */
.card--photo .btn--primary:hover { background: var(--color-purple); }

/* The photograph is the one thing that differs between the two cards. These are
   the two files the live cards use, now local to the image bank: the hand on a
   mouse behind the online-payment card, the colleague at a desktop behind the
   billing-questions card. */
.card-grid--billing .card--photo:nth-child(1) {
  background-image: url("/assets/img/image-bank/client-billing-hand-on-a-mouse.jpg");
}
.card-grid--billing .card--photo:nth-child(2) {
  background-image: url("/assets/img/image-bank/client-billing-colleague-at-a-desktop.jpg");
}

/* B63 "Including with client logos included" — each client story opens with that
   client's own mark, above the quote, the way the live page does. The width cap is
   the column the live page puts it in (a Beaver Builder small column, 360px less
   its padding): three of the four marks are narrower than that and keep their own
   size, the widest one comes down to it. */
.spotlight__logo { display: block; width: auto; height: auto; max-width: 320px; margin: 0 0 24px; }

/* B103 "Please add scam alert pop up like current site". The notice ships as an
   open <dialog>, so it has two faces and both are styled here. Open in the markup
   it is a block of the page (the UA stylesheet takes a non-modal dialog out of the
   flow, hence position: static); opened by the script it is a modal, and :modal
   hands back the UA's fixed position and centring. */
.scam-notice {
  position: static; width: auto; max-width: 720px; margin: 0;
  padding: 28px; border: 1px solid var(--color-grey-e8); border-radius: 12px;
  background: var(--bg); color: var(--ink); box-shadow: var(--shadow-card);
}
.scam-notice:modal {
  position: fixed; margin: auto;
  max-width: min(720px, calc(100% - 32px)); max-height: calc(100% - 64px); overflow: auto;
}
.scam-notice::backdrop { background: var(--scrim-modal); }
.scam-notice h2 { margin: 0 0 18px; }
.scam-notice__close { margin-top: 24px; }
/* .btn is inline-flex, which beats the hidden attribute on its own. The button is
   hidden until the script that opens the dialog is there to give it something to do. */
[data-scam-open][hidden], [data-scam-close][hidden] { display: none; }