/* ---------------------------------------------------------------------------
   The two blocks lib/assessment-redesign.js introduces on Assessment pages.

   Loaded only on those pages, and only alongside Webflow's own stylesheet, so
   everything here is namespaced `abc-` and inherits the page's type rather than
   setting its own. Colours are the site's own --color / --alt-color variables
   where they exist, with the literal values behind them as a fallback in case a
   re-port ever renames one.
   --------------------------------------------------------------------------- */

.abc-icon {
  width: 104px;
  height: 104px;
  /* The PNGs it replaces were mint; `currentColor` means a palette change is a
     CSS edit rather than three trips to an image editor. */
  color: var(--alt-color-12, #7ce0bd);
  overflow: visible;
}

/* --- the section block ---------------------------------------------------- */
.abc-block {
  position: relative;
  margin: 3rem 0 3.5rem;
}

.abc-block__photo {
  height: clamp(230px, 32vw, 370px);
  margin-left: clamp(0px, 13vw, 170px);
  border-radius: 4px;
  background-repeat: no-repeat;
  box-shadow: 0 18px 40px -28px rgba(1, 22, 38, .6);
}

.abc-block__card {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin-top: -3.4rem;
  padding: clamp(1.3rem, 2.8vw, 2rem);
  border-radius: 4px;
  border-top: 4px solid var(--alt-color-11, #65e0b5);
  background: #fff;
  box-shadow: 0 2px 4px rgba(2, 43, 76, .07), 0 26px 54px -36px rgba(2, 43, 76, .6);
}

/* The heading appeared twice on the live page — once drawn into the banner and
   once as real text. Now it appears here, once. */
.abc-block__card h2 {
  margin: 0 0 .7rem;
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -.024em;
  color: var(--color-1, #011626);
}

.abc-block__card p {
  margin: 0 0 .9rem;
  font-size: 1.1rem;
  line-height: 1.55;
  /* --color-3 is the paragraph colour the rest of the site uses. */
  color: var(--color-3, #024275);
}
.abc-block__card p:last-of-type { margin-bottom: 1.2rem; }

.abc-block__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border-radius: 100px;
  background: var(--alt-color-11, #65e0b5);
  color: #06251b;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s;
}
.abc-block__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(34, 138, 102, .75);
}
.abc-block__btn:focus-visible {
  outline: 3px solid var(--color-6, #2a8dda);
  outline-offset: 3px;
}
.abc-block__btn svg { width: 15px; height: 15px; }

@media (max-width: 767px) {
  .abc-block__photo { margin-left: 0; }
  .abc-block__card { margin-top: -2rem; max-width: none; }
}

/* ---------------------------------------------------------------------------
   The framing fixes — ADR-0006, third revision.

   Measured on the built page at 1440px: the section heading was centred over a
   left-aligned paragraph, so the two shared no edge and the block never
   resolved; and the photograph inside the reading column was only 31px wider
   than the text, so the overlap it exists for did not read.

   `.abc-lead` and `.abc-measure` are put on by the transform rather than being
   Webflow's own generated class names, which a re-port can rename.
   --------------------------------------------------------------------------- */

/* The heading now shares a left edge with the paragraph beneath it. This
   overrides Webflow, so it is deliberate: see ADR-0006. */
h2.abc-lead {
  /* Webflow centres this with `.heading-36.heading-service-faq` — two classes,
     so it outranks any single-class selector no matter which stylesheet loads
     last. Overriding a generated rule is the one thing !important is actually
     for; the alternative is duplicating a class name to win on specificity,
     which hides the intent. */
  text-align: left !important;
  /* `text-align` alone ranges the *words* left inside a box that its parent —
     a flex column with `align-items: center` — is still centring. That left the
     heading starting 72px right of the paragraph: the same two competing left
     edges, just quiet enough to miss. This is the half that actually moves it. */
  align-self: flex-start;
  /* Not to force a second line — to stop the browser choosing where the break
     falls. A heading that wraps the same way at every width beats one that fits
     at 1440 and strands a word everywhere else. */
  max-width: 22ch;
  text-wrap: balance;
}

/* Running text capped in two ways at once. `58ch` is the measure we want; the
   percentage is what makes it hold — the rich-text column is narrower than the
   card around it, and in that container 58ch is wider than the column, so on
   its own it does nothing at all and the photograph ends up exactly as wide as
   the paragraph. The block is deliberately exempt: the gap between the text and
   the photograph is the whole effect. */
.abc-measure > p,
.abc-measure > ul,
.abc-measure > ol,
.abc-measure > h3,
.abc-measure > h4,
.abc-measure > blockquote {
  max-width: min(58ch, 84%);
}

/* Out of the reading column: indented from the left so the card has something
   to break over, and past the right edge so it is meaningfully wider than the
   84% the paragraph is held to. */
.abc-measure .abc-block__photo {
  margin-left: 6%;
  margin-right: -20%;
}
@media (max-width: 991px) {
  .abc-measure .abc-block__photo { margin-left: 4%; margin-right: -8%; }
}
@media (max-width: 767px) {
  .abc-measure .abc-block__photo { margin-left: 0; margin-right: 0; }
  .abc-measure > p, .abc-measure > ul, .abc-measure > ol,
  .abc-measure > h3, .abc-measure > h4, .abc-measure > blockquote { max-width: none; }
  h2.abc-lead { max-width: none; }
}

/* One body size for the whole section. Three were landing in this single
   column: Webflow's bare `p { font-size: 1.3em }` resolved to 15.73px; `li`
   matched no font-size rule at all and inherited the container's 12.1px, a
   third smaller than the paragraph beside it, sometimes mid-thought; and the
   cards above came in at 1.1rem. Live has the paragraph/list gap too — it is a
   bug there rather than a style, which is why this is the fourth thing ADR-0006
   fixes rather than reproduces.

   Everything is now the largest of the three, which is also the only one that
   is a comfortable reading size — 12.1px body copy is below any floor worth
   defending.

   `rem`, not the `em` Webflow uses, so the value cannot drift with whatever a
   container happens to inherit and nested lists cannot compound. Sized on the
   list rather than the item on purpose: the `58ch` cap above is written on the
   `ul`, and `ch` resolves against the font-size of the element it is written
   on, so enlarging only the `li` leaves the cap computing at the old size and
   the bullets wrap a third short of the paragraphs — the right type in the
   wrong measure. */
.abc-measure > p,
.abc-measure ul,
.abc-measure ol,
.abc-measure > blockquote {
  font-size: 1.1rem;
  line-height: 1.55;
}