/* ============================================================
   GEM Education Centres — the patient hub and its index pages, and the
   Professional Education Center. Generated by content/guides/build_guides.py.

   Brand tokens throughout, all of them from tokens.css: the rose tint, the
   hero wash and the professional centre's navy moved there on 2026-09-22,
   values unchanged. Purple and gold stay the anchors for the patient
   centre, navy for the professional one; nothing in the mockup's
   magenta/plum is reproduced.

   MEASURED (see the report): hero text sits over the photograph behind a
   left-anchored cream wash. Worst case anywhere in the text column is
   --purple 7.69:1, --text 8.65:1, --text-warm 5.67:1. The script accent
   over the open sky at top right is --purple at 11.03:1 raw.

   No animation anywhere, so reduced motion needs no special case.
   ============================================================ */

/* ---- Script accents ------------------------------------------------------
   Great Vibes, self-hosted (SIL Open Font License 1.1), Latin subset only.
   The ♡ is OUTSIDE that subset and renders in the fallback — intended. */
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/great-vibes-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.pec-script {
  font-family: 'Great Vibes', 'Segoe Script', 'Brush Script MT', cursive;
  font-weight: 400;
  color: var(--purple);
  line-height: 1.25;
}

/* ---- a. Hero -------------------------------------------------------------
   The photograph is a real <img> so it carries width/height and a srcset: no
   layout shift and no 1920px download on a phone. On desktop it fills the band
   and a left-anchored cream wash carries the text. Below 900px the band stacks:
   the image becomes a plain block and the text sits on flat --cream, so the
   mobile contrast question does not arise at all. */
.pec-hero {
  position: relative;
  background: var(--cream);
  overflow: hidden;
}
.pec-hero__img {
  display: block;
  width: 100%;
  height: auto;
}
.pec-hero__wash { display: none; }
.pec-hero__inner {
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 3rem);
}
.pec-hero__eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);          /* 7.69:1 worst over the washed photo */
}
.pec-hero__title {
  margin: 0 0 0.9rem;
  font-family: var(--font-head);
  /* Sized so "A Brighter Tomorrow." fits the measured-safe 46% column on one
     line at every desktop width, keeping the headline to the two lines the
     <br> asks for rather than breaking to three. */
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.14;
  color: var(--purple);
}
.pec-hero__lede {
  margin: 0 0 1rem;
  max-width: 34ch;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  color: var(--text);            /* 8.65:1 worst */
}
.pec-hero__alone {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
}
/* A drawn swash replaces the straight underline the audit flagged. Decorative
   only, so it is aria-hidden in the markup and inherits the script's colour. */
.pec-hero__swash {
  display: block;
  width: 100%;
  height: 0.34em;
  margin-top: -0.06em;
  color: var(--purple);
  opacity: 0.55;
}
.pec-hero__together {
  margin: 0;
  padding: 0.75rem clamp(1rem, 4vw, 2rem) 0;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  text-align: right;
}
/* Inline SVG rather than the ♡ character: U+2661 is outside the Latin subset of
   Great Vibes, so the glyph fell back to the body face mid-line. Sized to the
   script text it sits beside and inheriting its --purple. */
.pec-hero__heart {
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.12em;
  vertical-align: baseline;
  color: var(--purple);
  overflow: visible;
}

@media (min-width: 56.25rem) {          /* 900px — text over the photograph */
  .pec-hero__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 72% horizontally keeps the subject in frame on the right. The 20% VERTICAL
       value is load-bearing, not taste: with the default 50% the band's top-right
       corner crops down onto the woman's hair from 1024px up, and the script
       accent sitting there measured 1.0-1.1:1. At 20% the accent stays over open
       sky at every width from 900 to 1920, worst case 11.09:1. Re-measure before
       changing it. */
    object-position: 72% 20%;
  }
  .pec-hero__wash {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* --pec-wash is a peach-rose sunrise (2026-09-22), warmer than the cream it
       replaced, so the alphas below are raised in step. MEASURED against the real
       pixels of pec-hero-1920.webp across a text column reaching 48% of the band:
       --purple 7.46:1 and --text 8.39:1, both above the 7:1 the audit asked for.
       The photograph is no darker than before (right-side mean luminance 0.476 vs
       0.475). Do not lower these alphas or widen that cap without re-measuring. */
    background: linear-gradient(to right,
                rgba(var(--pec-wash), 0.96) 0%,
                rgba(var(--pec-wash), 0.90) 34%,
                rgba(var(--pec-wash), 0.68) 50%,
                rgba(var(--pec-wash), 0) 68%);
  }
  .pec-hero {
    display: flex;
    align-items: center;
    min-height: clamp(26rem, 38vw, 34rem);
  }
  .pec-hero__inner {
    position: relative;
    width: 100%;
    padding-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
  }
  .pec-hero__eyebrow,
  .pec-hero__title,
  .pec-hero__lede,
  .pec-hero__alone { max-width: 46%; }   /* the measured-safe column; see the wash above */
  .pec-hero__lede { max-width: min(46%, 34ch); }
  .pec-hero__together {
    position: absolute;
    top: clamp(1rem, 3vw, 2.25rem);
    right: clamp(1.5rem, 4vw, 3rem);
    padding: 0;
    z-index: 1;                          /* over the photo's bright sky: 11.03:1 */
  }
}

/* ---- b. Three entry cards ------------------------------------------------ */
.pec-entries { padding-block: var(--pec-rhythm); }
.pec-entries__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
/* One column until there is genuinely room for three: at 768px each card was
   only ~240px wide and the descriptions ran to four and five lines. */
@media (min-width: 56.25rem) { .pec-entries__grid { grid-template-columns: repeat(3, 1fr); } }
.pec-entry {
  display: flex;                 /* fix: the arrow pins to the bottom so all */
  flex-direction: column;        /* three align however long the copy runs */
  height: 100%;
  padding: clamp(1.25rem, 3vw, 1.85rem) clamp(1rem, 2.5vw, 1.5rem);
  background: var(--lavender-light);
  border: 1px solid rgba(58, 42, 102, 0.12);
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}
.pec-entry--library { background: var(--pec-rose); border-color: var(--pec-rose-edge); }
.pec-entry:hover { border-color: var(--gold); }
.pec-entry:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pec-entry__iconwrap { display: block; margin-bottom: 0.65rem; color: var(--purple); }
.pec-entry__icon { width: 40px; height: 40px; }
.pec-entry__title {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.2vw, 1.375rem);
  font-weight: 700;
  color: var(--purple);              /* 11.7:1 on rose, 12.0:1 on lavender-light */
}
.pec-entry__desc {
  display: block;
  max-width: 34ch;
  margin: 0 auto 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-warm);           /* 8.7:1 on rose */
}
.pec-entry__go {
  margin-top: auto;              /* fix: pins the arrow to the card's foot */
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);               /* 12.33:1 */
}
.pec-entry__go svg { width: 20px; height: 20px; }

/* ---- Section heads (topics, videos) -------------------------------------- */
.pec-sectionhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.pec-sectionhead__title {
  margin: 0 1rem 0.35rem 0;
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--purple);
}
.pec-sectionhead__all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--purple);              /* 12.33:1 on white */
  text-decoration: none;             /* fix: underline only on hover/focus */
}
.pec-sectionhead__all:hover { text-decoration: underline; }
.pec-sectionhead__all:focus-visible {
  text-decoration: underline;
  outline: 3px solid var(--focus);   /* the focus ring stays visible */
  outline-offset: 3px;
}
/* The gap before an arrow is a margin, not a text space that can collapse at a
   line end. Shared by every "View all", "View topic" and button arrow. */
.pec-arrow { margin-left: 0.35em; }
.pec-arrow--back { margin-left: 0; margin-right: 0.35em; }

/* ---- c. Topic cards ------------------------------------------------------ */
.pec-topics { padding-block: var(--pec-rhythm); }
/* Six topics, three across on wide desktop, so they read as two rows of
   substantial cards inside the existing container rather than one row of six
   thumbnails. 24px gaps at every width that shows real cards. */
.pec-topics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 40rem) { .pec-topics__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pec-topics__grid { grid-template-columns: repeat(3, 1fr); } }
.pec-topic {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.12);
  border-radius: 12px;
  overflow: hidden;
}
.pec-topic:hover { border-color: var(--gold); }
.pec-topic:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pec-topic__img { display: block; width: 100%; height: auto; }
.pec-topic__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* 16px from the image down to the title, 24px of text padding on the other
     three sides - the two figures the review asked for, which are different
     numbers for different edges rather than one uniform inset. */
  padding: 1rem 1.5rem 1.5rem;
}
.pec-topic__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-head);
  font-size: 1.25rem;                /* 20px */
  font-weight: 700;
  line-height: 1.3;                  /* 26px */
  color: var(--purple);              /* 12.33:1 on white */
}
.pec-topic__desc {
  margin: 0 0 1rem;
  font-size: 1rem;                   /* 16px */
  line-height: 1.5625;               /* 25px */
  color: var(--text-warm);           /* 9.10:1 on white */
}
.pec-topic__more {
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--purple);
}
/* one stretched link makes the whole card the hit area (the site's board-card pattern) */
.pec-topic__link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* ---- Compact topic rows on a phone (below 600px) -------------------------
   Six full-bleed 4:3 cards made the section a very long scroll. Below 600px
   each topic becomes a short row: a square thumbnail on the left, the title,
   description and "View Guides" to its right. The same <img> and srcset are
   reused and simply cropped square with object-fit, and the whole row stays
   one link, so nothing about the markup or the tap target changes. */
/* Narrow phones keep the compact row - square thumbnail left, text right -
   rather than six full-width cards: it is the same one-column reading order in
   roughly a third of the scroll. The boundary meets the 2-up breakpoint
   exactly, so no width falls between the two treatments. */
@media (max-width: 39.99rem) {
  .pec-topics__grid { gap: 0.75rem; }
  .pec-topic {
    flex-direction: row;
    align-items: stretch;
    min-height: 96px;
  }
  .pec-topic__img {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;                    /* a real square, not stretched to the row */
    align-self: center;
    margin: 0.6rem 0 0.6rem 0.6rem;
    object-fit: cover;               /* square crop from the same 4:3 file */
    border-radius: 10px;
  }
  .pec-topic__body {
    padding: 0.7rem 0.85rem;
    justify-content: center;
  }
  .pec-topic__title { font-size: 1rem; margin-bottom: 0.2rem; }
  .pec-topic__desc {
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .pec-topic__more { font-size: 0.875rem; }
}

/* ---- d. Featured videos (rendered only when videos.json has entries) ------ */
.pec-videos { padding-block: var(--pec-rhythm); }
.pec-videos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.4rem);
}
@media (min-width: 40rem) { .pec-videos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pec-videos__grid { grid-template-columns: repeat(4, 1fr); } }
.pec-video { display: block; text-decoration: none; color: var(--text); }
/* A sample is not a link: no pointer, no hover lift, no focus stop. The rules
   below are written for a.pec-video only, so a sample cannot pick them up. */
a.pec-video:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
a.pec-video:hover .pec-video__title { text-decoration: underline; }
.pec-video__media { position: relative; display: block; }
.pec-video__media img { display: block; width: 100%; height: auto; border-radius: 10px; }
/* Play mark. The disc is opaque enough that the white glyph clears 4.5:1 over
   any pixel the thumbnail can put behind it, white included - measured. */
.pec-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  background: rgba(46, 33, 80, 0.86);   /* --purple-deep at 86% */
  color: var(--white);                  /* 10.9:1 over the worst case */
}
.pec-video__play svg { width: 26px; height: 26px; }
.pec-video__title {
  display: block;
  margin: 0.6rem 0 0.25rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--purple);
}
.pec-video__desc { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--text-warm); }

/* ---- e. Closing band ----------------------------------------------------- */
/* One rhythm for the whole page: each section contributes half of it, so the
   white space between any two blocks is the same ~80px on desktop. */
:root { --pec-rhythm: clamp(1.25rem, 3.2vw, 2.5rem); }

.pec-closing {
  position: relative;
  overflow: hidden;
  margin-top: var(--pec-rhythm);     /* fix: same gap above as between sections */
  background: linear-gradient(120deg, var(--lavender-light) 0%, var(--lavender) 100%);
}
.pec-closing__img {
  display: none;                     /* decorative only; hidden until there is room */
}
.pec-closing__inner {
  position: relative;
  z-index: 1;
  /* Vertical padding only. The horizontal gutter comes from .container, so the
     heading lines up with the sections above instead of sitting ~180px inboard,
     which is what the extra padding plus a 62% max-width had been doing. */
  padding-block: clamp(2rem, 5vw, 3.25rem);
}
.pec-closing__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  font-weight: 700;
  color: var(--purple);              /* 10.78:1 on lavender */
}
.pec-closing__text {
  margin: 0 0 1.25rem;
  max-width: 52ch;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text);                /* 12.12:1 on lavender */
}
.pec-closing__action { margin: 0; }
.pec-closing__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* The same heart as the hero's script accent, decorative and aria-hidden. */
.pec-closing__heart {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.5em;
  flex: 0 0 auto;
  color: currentColor;
}
@media (min-width: 56.25rem) {
  .pec-closing__img {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 38%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;                   /* faded decoration; no text sits on it */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
            mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  }
  /* the TEXT is capped, not the container - see .pec-closing__inner */
  .pec-closing__title,
  .pec-closing__text { max-width: 58%; }
}

/* ==========================================================================
   INDEX PAGES — Education Library, the six topic pages, Research & Journals
   and Patient Videos. Same shell, same stylesheet, same band, so the whole
   centre reads as one place.
   ========================================================================== */
/* These pages carry NO breadcrumb (2026-09-22): the band sits flush under the
   header. The guide ARTICLE pages keep theirs - that is .guide-crumb in
   guides.css, a different thing. */

/* The compact form of the hub's hero band: no photograph behind the text, so
   every pair here is a flat token-on-token measurement. */
.pec-band {
  background: linear-gradient(120deg, var(--cream) 0%, var(--lavender-light) 100%);
  border-bottom: 1px solid rgba(58, 42, 102, 0.10);
}
.pec-band > .container {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.pec-band__eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* brand gold: 5.18:1 on the band's cream end, 5.01:1 on its lavender end */
  color: var(--gold-deep);
}
.pec-band__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--purple);
}
.pec-band__intro {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  color: var(--text);                /* 12.5:1 */
}
/* A restrained inset, not a card: no shadow, no border box, just a pale panel
   with a purple rule down its left edge. #F6F3FA is one step off
   --lavender-light (#F7F4FB) and is the value the review specified; it is
   written here rather than added to tokens.css, which all 77 pages cache. */
.pec-band__start {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;           /* 20px / 24px */
  background: #F6F3FA;
  border-left: 3px solid var(--purple);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  color: var(--text-warm);           /* 8.66:1 on the panel */
}
.pec-band__start a { color: var(--purple); font-weight: 600; }
/* an inline link in a sentence: a 44px hit area from padding, pulled back by
   the same margin so the line's rhythm does not change */
.pec-band__start a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
/* The topic band carries no photograph (2026-09-22): one full-width column of
   eyebrow, title and intro, the same band every index page uses. The topic
   images are still in use on the hub's topic cards. */

/* ---- Supporting pages (library, topic, research, videos) ------------------
   One rhythm across the four. Everything is scoped to .pec-support, which the
   generator puts on <main> for those pages only: .container and .section are
   also the header's and the footer's, and the hub and the professional centre
   keep their own spacing. */
.pec-support .container { padding-inline: 1.5rem; }      /* 24px gutters */
/* 48px from the intro band down to the first row, 64px from the last row to
   the footer - both inside the 48-64px the review asked for. */
.pec-support > .section { padding-block: 3rem 4rem; }
.pec-support .pec-more { margin-top: 2rem; }             /* 32px under the last row */
.pec-support .pec-more + .pec-more { margin-top: 0.5rem; } /* stacked foot links stay a group */
.pec-support .pec-topicblock__head,
.pec-support .pec-block__head { margin-bottom: 1.5rem; }   /* 24px heading to content */
.pec-support .pec-guides,
.pec-support .pec-resources,
.pec-support .pec-videos__grid { gap: 1.5rem; }            /* 24px card gaps */
@media (max-width: 47.99rem) {
  .pec-support .container { padding-inline: 1.25rem; }     /* 20px gutters */
  .pec-support > .section { padding-block: 2.5rem; }       /* 40px on mobile */
}

/* ---- Guide cards: title, Read online, Download PDF. Nothing else. --------- */
.pec-guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 40rem)   { .pec-guides { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem)   { .pec-guides { grid-template-columns: repeat(3, 1fr); } }
.pec-guide {
  display: flex;
  flex-direction: column;
  height: 100%;                      /* equal height across a row; the longest
                                        title sets it, there is no fixed floor */
  padding: 1.5rem;                   /* 24px */
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.14);
  border-radius: 10px;
}
.pec-guide__title {
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-size: 1.1875rem;              /* 19px: the title leads the two 15px actions */
  font-weight: 700;
  line-height: 1.3;
  color: var(--purple);              /* 12.33:1 on white */
}
/* The print-first mark: a small printer after the title, in the title's ink,
   with a visually hidden "print-first" for screen readers. */
.pec-guide__print {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: -0.12em;
  flex: 0 0 auto;
  color: var(--purple);
}
/* The title is the card's primary link. Flex + min-height gives a one-line
   title a 44px target without adding a fixed minimum to the card itself. */
.pec-guide__title a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.pec-guide__title a:hover,
.pec-guide__title a:focus-visible { text-decoration: underline; }
.pec-guide__title a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Pinned to the card's foot by margin-top:auto, so the actions line up across
   a row however long the titles run. */
.pec-guide__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;                         /* 16px apart, and it is a real gap, so
                                        the pair wraps instead of squeezing */
  margin: auto 0 0;
  font-size: 0.9375rem;              /* a step under the title */
}
.pec-guide__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                  /* tap target */
  color: var(--purple);              /* 12.33:1 on white */
  text-decoration: underline;
}
.pec-guide__links a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Both are text links - neither is a filled button. "Read online" leads by
   weight and by order; "Download PDF" follows it at normal weight. */
.pec-guide__read { font-weight: 600; }
.pec-guide__pdf { font-weight: 400; }

/* ---- Library: the pill index lives in the band (.pec-jump, shared with the
   research pages). The seventh pill leaves the page, so it is the one filled
   pill with an arrow: white on --purple 12.33:1; hover inverts to the outline. */
.pec-jump .pec-jump__pill--away { background: var(--purple); color: var(--white); }   /* (0,2,0): outranks the base pill, which sits later in the sheet */
.pec-jump .pec-jump__pill--away:hover { background: transparent; color: var(--purple); }
.pec-jump__pill--away .pec-arrow { margin-left: 0.15em; }
/* the "Not sure where to start?" panel follows the pills */
.pec-jump + .pec-band__start { margin-top: 1.25rem; }

/* ---- Library: one band per topic ------------------------------------------
   .pec-block gives the band its padding and the alternating tint; the guide
   cards are white with a hairline, so they hold their edge on either ground.
   HEAD: image | title + description | "View topic". Source order is title ->
   description -> link, which is how a phone reads it. The 72x54 hub image
   (the 400px crop, decorative) joins from 640px; the link lifts beside the
   title from 768px. */
.pec-topicblock__head { margin-bottom: 1.5rem; }   /* 24px heading to content */
.pec-topicblock__img { display: none; }
@media (min-width: 40rem) {
  .pec-topicblock__head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
  }
  .pec-topicblock__img {
    display: block;
    grid-area: 1 / 1 / 3 / 2;
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
  }
  .pec-topicblock__title { grid-area: 1 / 2; }
  .pec-topicblock__desc  { grid-area: 2 / 2; }
  .pec-topicblock__more  { grid-area: 3 / 2; }
}
@media (min-width: 48rem) {
  .pec-topicblock__head {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    column-gap: 1.25rem;
  }
  .pec-topicblock__more  { grid-area: 1 / 3; justify-self: end; margin-top: 0; align-self: center; }
}
.pec-topicblock__title {
  margin: 0 1rem 0.25rem 0;
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--purple);              /* 12.33 white, 10.78 --lavender */
}
.pec-topicblock__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--purple);
}
.pec-topicblock__desc {
  margin: 0;
  max-width: 60ch;
  color: var(--text-warm);           /* 9.10 white, 7.95 --lavender */
}
.pec-topicblock__more { margin-top: 0.75rem; }     /* 12px under the description */

/* ---- Library: the closing band ---------------------------------------------
   A quiet lavender-light band with a gold rule along its top, carrying the two
   onward links side by side (stacked on a phone). */
.pec-closeband {
  background: var(--lavender-light);
  border-top: 3px solid var(--gold);
}
.pec-closeband__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.pec-closeband__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--purple);              /* 11.33:1 on lavender-light */
  text-decoration: none;
}
.pec-closeband__link:hover,
.pec-closeband__link:focus-visible { text-decoration: underline; }
.pec-closeband__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---- Research & Journals / Research & Guidelines -------------------------
   Every section is its own full-width band. The generator alternates white
   with the page's pale tint (.pec-block--tint: --lavender here, the blue tint
   on the professional page) so the eye gets a break between sections; cards
   on a tinted band turn white so they keep their edge. */
.pec-block { padding-block: clamp(2.5rem, 5vw, 4rem); }
.pec-block--tint { background: var(--lavender); }
.pec-block--tint .pec-resource,
.pec-block--tint .pec-journal { background: var(--white); }
/* the foot (notice + back link) is a plain white band after the last section */
.pec-foot { padding-block: clamp(2rem, 4vw, 3rem) 4rem; }

/* Heading with its gold line-art icon: the same 24-unit grid and 1.6 stroke as
   the hub entry cards, at 32px against the larger heading. Decorative and
   aria-hidden; --gold measures 3.18:1 on white and drops to 2.78:1 on the
   lavender band, so the tinted bands use --gold-deep (4.77:1) instead - still
   gold, and every icon clears the 3:1 non-text line wherever it sits. */
.pec-block__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.pec-block__icon { flex: 0 0 auto; width: 32px; height: 32px; color: var(--gold); }
.pec-block--tint .pec-block__icon { color: var(--gold-deep); }
.pec-block__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--purple);
}
.pec-resources { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
@media (min-width: 48rem) { .pec-resources { grid-template-columns: repeat(2, 1fr); } }
.pec-resource {
  position: relative;                /* the name's stretched link fills the card */
  padding: 0.9rem 1rem;
  background: var(--lavender-light);
  border: 1px solid rgba(58, 42, 102, 0.12);
  border-radius: 10px;
}
.pec-resource__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--purple);              /* 11.33:1 on lavender-light, 12.33:1 on white */
}
.pec-resource__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-warm);           /* 8.36:1 on lavender-light, 9.10:1 on white */
}
/* The featured database: spans the grid, deeper ground, a purple rule down its
   left edge and a larger name. Same words, more presence. */
.pec-resource--featured {
  grid-column: 1 / -1;
  padding: 1.25rem 1.5rem 1.35rem;
  background: var(--lavender);
  border-left: 4px solid var(--purple);
}
.pec-block--tint .pec-resource--featured { background: var(--white); }
.pec-resource--featured .pec-resource__link { font-size: clamp(1.2rem, 2.2vw, 1.4rem); } /* --purple 10.78:1 on --lavender */
.pec-resource--featured .pec-resource__desc { font-size: 1rem; max-width: 68ch; }        /* --text-warm 7.95:1 */

/* ---- Cards read as clickable ---------------------------------------------
   The name's link is stretched over its whole card, so the card is the hit
   area (the site's board-card / topic-card pattern). Hover and keyboard focus
   lift the card a touch and deepen its border; under reduced motion the
   border still changes but nothing moves. */
.pec-resource__link::after,
.pec-journal__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pec-resource,
.pec-journal {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.pec-resource:hover,
.pec-journal:hover,
.pec-resource:focus-within,
.pec-journal:focus-within {
  transform: translateY(-2px);
  border-color: rgba(58, 42, 102, 0.42);
  box-shadow: 0 6px 18px rgba(58, 42, 102, 0.12);
}
.pec-resource:hover .pec-resource__link,
.pec-journal:hover .pec-journal__link,
.pec-resource:focus-within .pec-resource__link,
.pec-journal:focus-within .pec-journal__link { text-decoration: underline; }
/* the ring goes on the card, not the inline name, so it frames the hit area */
.pec-resource:has(.pec-resource__link:focus-visible),
.pec-journal:has(.pec-journal__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pec-resource__link:focus-visible,
.pec-journal__link:focus-visible { outline: none; }
/* a browser without :has() keeps the ring on the name itself */
@supports not selector(:has(a)) {
  .pec-resource__link:focus-visible,
  .pec-journal__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .pec-resource,
  .pec-journal { transition: none; }
  .pec-resource:hover,
  .pec-journal:hover,
  .pec-resource:focus-within,
  .pec-journal:focus-within { transform: none; }
}

/* A section's intro sits under its heading, its note under its list. Both are
   plain body copy, one step smaller than the resource descriptions' parent. */
.pec-block__intro {
  margin: 0 0 1.25rem;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-warm);           /* 9.10:1 on white, 7.95:1 on --lavender */
}
.pec-support .pec-block__head + .pec-block__intro { margin-top: -0.5rem; } /* 24px heading gap, minus a step */
.pec-block__note {
  margin: 1.25rem 0 0;
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-warm);           /* 9.10:1 on white, 7.95:1 on --lavender */
}

/* ---- "How to read a paper" -------------------------------------------------
   Three numbered steps in a quiet panel under the databases: the notice's
   pale ground and left rule, so it reads as guidance, not another resource
   card. The numbers are small purple discs. */
.pec-howto {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.5rem 1.25rem;
  max-width: 72ch;
  background: #F6F3FA;               /* the panel value .pec-band__start already uses */
  border-left: 3px solid var(--purple);
  border-radius: 0 8px 8px 0;
}
.pec-block--tint .pec-howto { background: var(--white); }
.pec-howto__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--purple);              /* 11.23:1 on the panel */
}
.pec-howto__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: howto;
  display: grid;
  gap: 0.5rem;
}
.pec-howto__steps li {
  position: relative;
  padding-left: 2.1rem;
  min-height: 1.6rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-warm);           /* 8.28:1 on the panel */
}
.pec-howto__steps li::before {
  counter-increment: howto;
  content: counter(howto);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);               /* 12.33:1 */
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.45rem;
  text-align: center;
}

/* ---- Journal cards ---------------------------------------------------------
   Cards, not a table: name (the link) with the access pill on its row, then
   publisher and subject beneath. One column on a phone, two from 768px, three
   from 1024px. */
.pec-journals { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
@media (min-width: 48rem) { .pec-journals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pec-journals { grid-template-columns: repeat(3, 1fr); } }
.pec-support .pec-journals { gap: 1.5rem; }                /* the 24px card gap */
.pec-journal {
  position: relative;                /* the name's stretched link fills the card */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.9rem 1rem 1rem;
  background: var(--lavender-light);
  border: 1px solid rgba(58, 42, 102, 0.12);
  border-radius: 10px;
}
/* name left, pill right; on a narrow card the pill wraps under the name */
.pec-journal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}
.pec-journal__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 1 1 8rem;                    /* leaves room for the pill on the same row from 390px */
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--purple);              /* 11.33:1 on lavender-light, 12.33:1 on white */
  overflow-wrap: anywhere;           /* long journal names never overflow a 320px card */
}
.pec-journal__meta {
  margin: 0.25rem 0 0;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.pec-journal__meta > div { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pec-journal__meta dt {
  flex: 0 0 5.5rem;
  color: var(--text-muted);          /* 6.41:1 on lavender-light, 6.98:1 on white */
}
.pec-journal__meta dd { margin: 0; flex: 1 1 10rem; color: var(--text-warm); }  /* 8.36:1 / 9.10:1 */
/* Subject labels grouping the professional page's journals. */
.pec-group__title {
  margin: 1.75rem 0 0.9rem;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--purple);
}
.pec-block__intro + .pec-group__title { margin-top: 0; }
/* The access pill, on the name's row. Two tints from the page's own palette,
   and never colour alone: the text label stays, and the glyph differs too
   (filled ring = open, hollow ring = mixed).
     Open access:  --guide-gold-light ground, --text ink  8.60:1
     Mixed access: white ground, --purple ink            12.33:1
   The pill sits above the stretched link (z-index) only so its text stays
   selectable; it is not itself a control. */
.pec-journal__access {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;               /* centres on the name's first 44px row */
  flex: 0 0 auto;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(58, 42, 102, 0.22);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--purple);
}
.pec-journal__access::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: currentColor;
}
.pec-journal__access--mixed::before { background: transparent; }
.pec-journal__access--open {
  background: var(--guide-gold-light);
  border-color: rgba(138, 98, 34, 0.35);
  color: var(--text);
}

/* ---- Page-foot notice ------------------------------------------------------
   The same restrained inset as the library's "Not sure where to start?" panel:
   a pale ground with a rule down its left edge, not a card. */
.pec-notice {
  margin: 0;
  padding: 1.25rem 1.5rem;
  max-width: 72ch;
  background: #F6F3FA;               /* the panel value .pec-band__start already uses */
  border-left: 3px solid var(--purple);
  border-radius: 0 8px 8px 0;
}
.pec-notice p {
  margin: 0;
  max-width: none;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-warm);           /* 8.28:1 on the panel */
}

/* ---- The onward link at the foot of an index page ------------------------ */
.pec-more { margin: clamp(1.25rem, 3vw, 2rem) 0 0; }
.pec-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--purple);
}

/* ==========================================================================
   PROFESSIONAL EDUCATION CENTER — professional-education.html.
   Navy where the patient centre is cream and purple. Three sections only.

   MEASURED against the real pixels of pro-hero-1920.webp: a base navy tint
   over the whole band (0.50) carries the photograph into the navy palette,
   and a left-anchored navy wash on top holds WHITE text at 9.75:1 across the
   text column. The script accent sits bottom-right on its own navy panel,
   because the photograph's surgical highlights reach pure white at every
   crop - measured raw there at 1.00:1, and 10.42:1 on the panel.
   ========================================================================== */
.pro-hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
.pro-hero__img { display: block; width: 100%; height: auto; }
.pro-hero__tint,
.pro-hero__wash { display: none; }
.pro-hero__inner {
  position: relative;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 3rem);
}
.pro-hero__eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* brand gold on the navy wash: 6.05:1, measured against the real pixels */
  color: var(--guide-gold-light);
}
.pro-hero__title {
  margin: 0 0 0.9rem;
  font-family: var(--font-head);
  /* Sized so "Improving Care. Together." fits the measured-safe 48% column on
     one line at every desktop width, keeping the headline to the two lines the
     <br> asks for rather than breaking to three. */
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.16;
  color: var(--white);
}
.pro-hero__lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  color: var(--white);
}
@media (min-width: 56.25rem) {        /* 900px — text over the photograph */
  .pro-hero { display: flex; align-items: center; min-height: clamp(24rem, 34vw, 30rem); }
  .pro-hero__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
  }
  .pro-hero__tint,
  .pro-hero__wash {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* base tint: carries the photograph into the navy palette, and is what makes
     the bottom-right script accent legible whatever the crop shows */
  .pro-hero__tint { background: rgba(var(--navy-rgb), 0.50); }
  /* left wash, on top of the tint. Do not lower these without re-measuring. */
  .pro-hero__wash {
    background: linear-gradient(to right,
                rgba(var(--navy-rgb), 0.90) 0%,
                rgba(var(--navy-rgb), 0.82) 40%,
                rgba(var(--navy-rgb), 0.50) 55%,
                rgba(var(--navy-rgb), 0) 78%);
  }
  .pro-hero__inner { width: 100%; padding-block: clamp(2rem, 4vw, 3rem); }
  .pro-hero__eyebrow,
  .pro-hero__title,
  .pro-hero__lede { max-width: 48%; }
  .pro-hero__lede { max-width: min(48%, 44ch); }
}

/* ---- Four entry cards. Plain while professional.json leaves href null; the
   whole card becomes the link as soon as one is set (no arrow button). A live
   card lifts a little on hover and shows a focus ring; a waiting card looks
   the same at rest and does neither. ---- */
.pro-cards { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.pro-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
@media (min-width: 40rem)   { .pro-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem)   { .pro-cards__grid { grid-template-columns: repeat(4, 1fr); } }
.pro-card {
  display: flex;                 /* fix: the pill pins to the foot so all four */
  flex-direction: column;        /* align however long the description runs */
  height: 100%;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 2.5vw, 1.4rem);
  background: var(--pro-tint-lavender);
  border: 1px solid rgba(20, 50, 92, 0.16);
  border-radius: 14px;
  text-align: center;
}
/* Four soft tints, one family. Measured on each: --navy 11.1:1 or better,
   --text-warm 7.9:1 or better. */
.pro-card--library  { background: var(--pro-tint-lavender); }
.pro-card--research { background: var(--pro-tint-blue); }
.pro-card--video    { background: var(--pro-tint-teal); }
.pro-card--cases    { background: var(--pro-tint-peach); }
.pro-card__iconwrap { display: block; margin-bottom: 0.65rem; color: var(--navy); }
.pro-card__iconwrap svg { width: 40px; height: 40px; }
.pro-card { text-decoration: none; }
a.pro-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.pro-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 50, 92, 0.1), 0 14px 30px rgba(20, 50, 92, 0.16); }
a.pro-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.pro-card__title {
  display: block;
  margin: 0 0 0.4rem;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);                /* 11.3:1 on --lavender-light */
}
.pro-card__desc {
  display: block;
  margin: 0 auto;
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-warm);           /* 8.36:1 on --lavender-light */
}

/* ---- Featured Professional Resources ------------------------------------- */
.pro-res-sec { padding-block: var(--pec-rhythm); }
.pro-res__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
@media (min-width: 40rem) { .pro-res__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pro-res__grid { grid-template-columns: repeat(4, 1fr); } }
.pro-res {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(20, 50, 92, 0.16);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
}
.pro-res__media { display: block; }
.pro-res__media img { display: block; width: 100%; height: auto; }
.pro-res__body {
  flex: 1 1 auto;
  padding: 1rem 1.5rem 1.5rem;       /* 16px image-to-title, 24px elsewhere */
}
.pro-res__title {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-head);
  font-size: 1.25rem;                /* 20px */
  font-weight: 700;
  line-height: 1.3;                  /* 26px */
  color: var(--navy);                /* 12.80:1 on white */
}
.pro-res__desc {
  display: block;
  font-size: 1rem;                   /* 16px */
  line-height: 1.5625;               /* 25px */
  color: var(--text-warm);           /* 9.10:1 on white */
}
.pro-res__go {
  display: block;
  padding: 0 1rem 1rem;
  font-weight: 600;
  color: var(--navy);
}
a.pro-res:hover .pro-res__title { text-decoration: underline; }
a.pro-res:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---- Featured Surgical Videos (carousel), then Recent Case Discussions ---- */
/* Two full-width sections. The carousel's cards, controls and lightbox player
   are the GEM Video Library's own (assets/css/video-library.css); only the
   section spacing and the heading colours are set here. */
.pro-showcase, .pro-cases-sec { padding-block: var(--pec-rhythm); }
.pro-res-sec .pec-sectionhead__title,
.pro-res-sec .pec-sectionhead__all,
.pro-showcase .pec-sectionhead__title,
.pro-showcase .pec-sectionhead__all,
.pro-cases-sec .pec-sectionhead__title,
.pro-cases-sec .pec-sectionhead__all { color: var(--navy); }   /* 10.42:1 on white */
.pro-res-sec .pec-sectionhead__all:focus-visible,
.pro-showcase .pec-sectionhead__all:focus-visible,
.pro-cases-sec .pec-sectionhead__all:focus-visible { outline-color: var(--navy); }
.pro-showcase .pec-sectionhead__all { display: inline-flex; align-items: center; min-height: 44px; }

/* Case discussions: one column on phones, three across from 1024px. */
.pro-case__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
@media (min-width: 64rem) { .pro-case__list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.pro-case__list > li { display: flex; }
.pro-case__list > li > .pro-case { flex: 1 1 auto; }
.pro-case {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-height: 44px;
  padding: 0.95rem 1.05rem;
  background: var(--pro-tint-lavender);
  border: 1px solid rgba(20, 50, 92, 0.16);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}
.pro-case__icon { flex: 0 0 auto; display: block; color: var(--navy); }
.pro-case__icon svg { display: block; width: 22px; height: 22px; }
.pro-case__title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);                /* 10.13:1 on --pro-tint-lavender */
}
/* Recent Surgical Cases (2026-10-31, P8): the same card with a text column - the video's title on at most two
   lines (the box always holds two, so a redraw never shifts the row), then the category and the duration -
   and the arrow at the right. */
.pro-case__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pro-case__text .pro-case__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.35em * 2);
}
.pro-case__meta { font-size: 0.875rem; line-height: 1.4; color: var(--text-muted); }   /* contrast measured by the suite on --pro-tint-lavender */
.pro-case .pec-arrow { flex: 0 0 auto; align-self: center; margin-left: auto; color: var(--navy); }
a.pro-case:hover .pro-case__title { text-decoration: underline; }
a.pro-case:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---- Research & Guidelines (research-guidelines.html) ---------------------
   The professional centre's supporting page. It reuses the index-page bones
   (.pec-support, .pec-block, .pec-resource, .pec-journal, .pec-notice) and
   re-inks them navy under .pro-support, which the generator puts on <main>
   for this page only. Every pair is token on token, measured:
     white on --navy 12.80 · --guide-gold-light on --navy 7.94
     --navy on --pro-tint-blue 11.23 · --text-warm on it 7.98 · --text-muted 6.12
     --navy on white 12.80 · --navy on the notice panel 11.65 */
.pec-band--pro {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pec-band--pro .pec-band__eyebrow { color: var(--guide-gold-light); }
.pec-band--pro .pec-band__title,
.pec-band--pro .pec-band__intro { color: var(--white); }
.pec-band--pro .pec-band__intro { max-width: 64ch; }
.pro-support .pec-block__title,
.pro-support .pec-group__title { color: var(--navy); }
.pro-support .pec-block--tint { background: var(--pro-tint-blue); }
.pro-support .pec-resource,
.pro-support .pec-journal {
  background: var(--pro-tint-blue);
  border-color: rgba(20, 50, 92, 0.16);
}
.pro-support .pec-block--tint .pec-resource,
.pro-support .pec-block--tint .pec-journal { background: var(--white); }
.pro-support .pec-resource--featured { border-left-color: var(--navy); }
.pro-support .pec-resource__link,
.pro-support .pec-journal__link,
.pro-support .pec-journal__access,
.pro-support .pec-more a { color: var(--navy); }
.pro-support .pec-journal__access--open { color: var(--navy); }   /* 7.94:1 on gold-light */
.pro-support .pec-resource:hover,
.pro-support .pec-journal:hover,
.pro-support .pec-resource:focus-within,
.pro-support .pec-journal:focus-within {
  border-color: rgba(20, 50, 92, 0.46);
  box-shadow: 0 6px 18px rgba(20, 50, 92, 0.12);
}
.pro-support .pec-resource:has(.pec-resource__link:focus-visible),
.pro-support .pec-journal:has(.pec-journal__link:focus-visible),
.pro-support .pec-more a:focus-visible { outline-color: var(--navy); }
.pro-support .pec-journal__access { border-color: rgba(20, 50, 92, 0.26); }
.pro-support .pec-journal__access--open { border-color: rgba(138, 98, 34, 0.35); }
/* the site's a:hover turns links purple-bright; on this page they deepen in navy */
.pro-support .pec-resource__link:hover,
.pro-support .pec-journal__link:hover,
.pro-support .pec-more a:hover { color: var(--navy-deep); text-decoration: underline; }
.pec-notice--pro { border-left-color: var(--navy); }

/* ---- Layout and navigation pass (2026-09-23) --------------------------------
   Counts in headings, the in-page link row, the professional page's rail grid,
   count-sized journal grids, equal card heights, the off-site mark and the
   reviewed line. */

/* The count, in the heading's own smaller muted style. */
.pec-block__count {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);          /* 6.98:1 white, 6.10 --lavender, 6.12 blue tint */
  white-space: nowrap;
}

/* ---- In-page section pills under the band's intro --------------------------
   Outline pill buttons, one per section, name + count, 44px tall, wrapping on
   a phone. In-page anchors, not a rail. Measured, flat token on token:
     patient  --purple text/outline on the cream->lavender-light band 11.72-11.33;
              hover fill --purple, white text 12.33; ring --focus 11.72
     pro      white text/outline on --navy 12.80 (15.75 at the navy-deep end);
              hover fill white, --navy text 12.80; ring white 12.80 */
.pec-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.pec-jump li { display: flex; }
.pec-jump__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0.35rem 1rem;
  border: 1.5px solid var(--purple);
  border-radius: 999px;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--purple);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pec-jump__count { font-weight: 400; }
.pec-jump__pill:hover { background: var(--purple); color: var(--white); text-decoration: none; }
.pec-jump__pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.pec-band--pro .pec-jump__pill { border-color: var(--white); color: var(--white); }
.pec-band--pro .pec-jump__pill:hover { background: var(--white); color: var(--navy); }
.pec-band--pro .pec-jump__pill:focus-visible { outline-color: var(--white); }
@media (prefers-reduced-motion: reduce) { .pec-jump__pill { transition: none; } }

/* Phone sizing (2026-09-23): 14px labels, tighter padding and gaps, so two or
   three pills share a row instead of one per row and the band stays short.
   min-height 44px is kept; a long label may wrap to two lines inside its one
   target. Same colours as above, so the measured pairs do not change. */
@media (max-width: 47.99rem) {
  .pec-jump ul { gap: 0.4rem; margin-top: 0.9rem; }
  .pec-jump__pill {
    gap: 0.25rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.875rem;
  }
}

/* ---- Pills behind a disclosure (library, Research & Guidelines) ------------
   The guide pages' own "On this page" component, unchanged: details.guide-toc__box
   + summary.guide-toc__summary from guides.css (which these two pages load) and
   TOC_JS. Closed in the markup, so a phone gets a short band; from 768px the
   script opens it and the summary is hidden, so the pills render exactly as on
   research-journals.html. Without JavaScript the summary stays visible and
   operable at every width, so the pills are never unreachable. */
.pec-jump--collapsible .guide-toc__box { margin: 0.9rem 0 0; }
.pec-jump--collapsible .guide-toc__summary { margin: 0; }
.pec-jump--collapsible .guide-toc__box[open] .guide-toc__summary { margin-bottom: 0; }
@media (max-width: 47.99rem) {
  .pec-jump--collapsible ul { margin-top: 0.6rem; }
  /* The summary reads as a control, not a heading: sentence case at 500 in the
     body face, a list mark before the label, a hairline and a light tint
     around it. Deliberately quieter than the "Not sure where to start?" panel
     beneath it on the library (solid ground, 3px purple rule, 600 link). */
  .pec-jump--collapsible .guide-toc__summary {
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(58, 42, 102, 0.30);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--purple);            /* 11.9:1 on the tinted cream */
  }
  .pec-jump__icon { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
  .pec-jump__label { flex: 1 1 auto; }   /* pushes the chevron to the right edge */
  .pec-band--pro .pec-jump--collapsible .guide-toc__summary {
    border-color: rgba(255, 255, 255, 0.45);   /* 3.9:1 edge on navy */
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);             /* 10.1:1 on the tinted navy */
  }
}
@media (min-width: 48rem) {
  html.js .pec-jump--collapsible .guide-toc__summary { display: none; }
  html.js .pec-jump--collapsible .guide-toc__box { margin: 0; }
  html:not(.js) .pec-jump--collapsible .guide-toc__summary { pointer-events: auto; cursor: pointer; }
}
/* on the navy band the summary and its chevron are white: 12.80:1 */
.pec-band--pro .guide-toc__summary { color: var(--white); }
.pec-band--pro .guide-toc__summary:focus-visible { outline-color: var(--white); }

/* The research bands carry the pill row, so they take less vertical padding
   than the other index bands: the open space to the right of the copy reads
   as room, not as something missing. 28px top and bottom at 1440 (was 40),
   20px on a phone (was 24). */
.pec-band--nav > .container {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Three remaining databases in one row under the featured card, so the grid
   has no empty cell: 1 / 2 / 3 across. The reading aid runs full width. */
@media (min-width: 64rem) { .pec-resources--featured { grid-template-columns: repeat(3, 1fr); } }
.pec-howto { max-width: none; }

/* Equal heights in every row: the grid stretches its items, the card is a
   column with content at the top, and the journal pill keeps its place on the
   name's row whatever the card beside it does. */
.pec-resource { display: flex; flex-direction: column; }
.pec-resource__desc { margin-top: 0; }

/* A one- or two-journal group takes a grid its own size rather than a
   three-column row with empty cells. */
.pec-journals[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
@media (min-width: 48rem) { .pec-journals[data-count="2"] { grid-template-columns: repeat(2, 1fr); } }

/* The off-site mark after a name, in the link's own colour. */
.pec-ext {
  flex: 0 0 auto;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.3em;
  opacity: 0.85;
}

/* The reviewed line at the foot, above the back link. */
.pec-reviewed {
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--text-muted);          /* 6.98:1 on white */
}
.pec-support .pec-reviewed + .pec-more { margin-top: 0.5rem; }

/* ---- The professional page's rail grid, from 1200px -------------------------
   The component is the guides' (.guide-rail, guides.css, RAIL_JS) unchanged;
   only the grid around it is this page's, because the bands here are
   full-width while a guide is a 708px column. One named template is shared
   by the page wrapper and every band: the rail takes column 2 and is sticky
   beside a main column that spans the full width, so each band's background
   still runs edge to edge while its content sits in column 4. */
@media (min-width: 75rem) {
  .pec-has-rail {
    --rail-cols: minmax(1.5rem, 1fr) 260px 2.5rem minmax(0, 820px) minmax(1.5rem, 1fr);
  }
  .pec-has-rail .pec-jump { display: none; }         /* the rail takes over */
  .pec-has-rail .pec-page {
    display: grid;
    grid-template-columns: var(--rail-cols);
  }
  .pec-has-rail .pec-page > .guide-rail {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    z-index: 1;
    /* clear of the first band's top padding, so the rail's head lines up with
       the first section heading */
    margin-top: clamp(2.5rem, 5vw, 4rem);
  }
  .pec-has-rail .pec-page__main { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
  .pec-has-rail .pec-block,
  .pec-has-rail .pec-foot {
    display: grid;
    grid-template-columns: var(--rail-cols);
  }
  .pec-has-rail .pec-block > .container,
  .pec-has-rail .pec-foot > .container {
    grid-column: 4;
    max-width: none;
    padding-inline: 0;
  }
  /* The rail in this page's ink: navy where a guide uses purple. */
  .pro-support .guide-rail__list a:hover,
  .pro-support .guide-rail__list a:focus-visible,
  .pro-support .guide-rail__list a.is-current { color: var(--navy); }   /* 12.80 white, 11.23 blue tint */
  .pro-support .guide-rail__list a.is-current::before { background: var(--navy); border-color: var(--navy); }
  .pro-support .guide-rail__list a:focus-visible { outline-color: var(--navy); }
}

/* ---- Closing band -------------------------------------------------------- */
/* fix: a rounded panel inside the page container, matching the cards' radius,
   with clear white space beneath it before the footer. */
/* The panel's OUTER edges sit on the card row's outer edges: .container is
   1120px wide with a 1.25rem gutter, so the cards span 1120 - 2*20 = 1080. */
.pro-closing {
  width: calc(100% - 2.5rem);
  max-width: 1080px;
  margin: var(--pec-rhythm) auto clamp(2.5rem, 6vw, 5rem);
  background: var(--purple-deep);    /* the site's deep purple (was navy) */
  border-radius: 14px;
  overflow: hidden;
}
.pro-closing__inner {
  /* 56px desktop, 32px mobile - the panel's own inner padding, measured from
     its outer edge, which lines up with the card row's outer edge. */
  padding: clamp(2rem, 4.4vw, 3.5rem);
  max-width: none;                   /* the panel, not .container, sets the width */
}
.pro-closing__title {
  margin: 0 0 0.6rem;
  max-width: 45rem;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  font-weight: 700;
  color: var(--white);               /* 14.6:1 on --purple-deep */
}
.pro-closing__text {
  margin: 0 0 1.5rem;
  /* ~720px: a comfortable measure now that no accent shares the row. The 58%
     cap that used to sit here existed only to leave space at the panel's right. */
  max-width: 45rem;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.6;
  color: var(--white);
}
.pro-closing__action { margin: 0; }
.pro-closing__btn {
  min-height: 44px;
  background: var(--white);
  border-color: var(--white);
  color: var(--navy-deep);           /* 15.75:1 */
}
.pro-closing__btn:hover { background: var(--lavender-light); border-color: var(--lavender-light); }

/* With "reduce motion" on, nothing on these pages moves. */
@media (prefers-reduced-motion: reduce) {
  .pec-hero *, .pec-entry, .pec-topic, .pec-video,
  .pro-card, .pro-res, .pro-case { transition: none !important; animation: none !important; }
  a.pro-card:hover { transform: none; }
}

/* ==========================================================================
   MOBILE HEROES, below 768px (2026-09-23). One band, not two blocks: the
   photograph is the band's background and the text sits over it, the way
   patient-stories.html does it (photo layer, scrim layer, copy on top).
   Height is capped at about 65% of the viewport so the first card sits at
   the fold.

   CROP: object-position 100% 50%. At 390px the band shows a 40%-wide slice
   of the 16:9 photograph; the right-hand slice holds the woman (patient) and
   the surgeons (professional), both with their faces in the TOP half of the
   image. The copy therefore starts at half height and the scrim rises from
   there, leaving the faces on the natural photograph. MEASURED on the real
   pixels at 390x844 - see the report; do not lower the scrim stops without
   re-measuring. Desktop (900px+) and tablet (768-899px) are untouched.
   ========================================================================== */
@media (max-width: 47.99rem) {
  /* ---- patient hub: rose-cream wash rising under purple copy -------------- */
  /* The photograph and its wash are a FIXED 65svh box. The copy starts at 67%
     of that box - her head and shoulders are complete by ~63% and the tail of
     her hair by ~68% (measured on the 390px slice at object-position 100%),
     so the photograph resolves into the wash rather than dissolving under it.
     The band grows past the box on a solid rose ground when the copy needs
     more room, so the subject and the ramp never move relative to each other.
     (2026-09-23: was 51% / wash from 44%, which cut her at the chin.) */
  .pec-hero {
    display: flex;
    flex-direction: column;
    min-height: 65vh;
    min-height: 65svh;
    padding-top: 43.55vh;
    padding-top: 43.55svh;
    background: rgb(var(--pec-wash));
  }
  .pec-hero__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65vh;
    height: 65svh;
    object-fit: cover;
    object-position: 100% 50%;
  }
  .pec-hero__wash {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65vh;
    height: 65svh;
    background: linear-gradient(to bottom,
                rgba(var(--pec-wash), 0) 60%,
                rgba(var(--pec-wash), 0.90) 67%,
                rgba(var(--pec-wash), 0.96) 100%);
  }
  /* One script accent on a phone (2026-09-23): "Stronger Together" is
     display:none here - out of the accessibility tree as well - and stays in
     the markup for the desktop hero, which positions it top-right. "You are
     not alone." closes the copy, left-aligned, with the band's own bottom
     padding beneath it. */
  .pec-hero__together { display: none; }
  .pec-hero__inner {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 0 1.25rem 1.5rem;
  }
  .pec-hero__lede { max-width: none; margin-bottom: 0.75rem; }
  .pec-hero__title { margin-bottom: 0.7rem; }

  /* ---- professional centre: navy rising under white copy ----------------- */
  .pro-hero {
    display: flex;
    flex-direction: column;
    min-height: 65vh;
    min-height: 65svh;
    padding-top: 32.5vh;                        /* the copy starts at 50% of the photo box */
    padding-top: 32.5svh;
  }
  .pro-hero__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65vh;
    height: 65svh;
    object-fit: cover;
    object-position: 100% 50%;
  }
  .pro-hero__tint { display: none; }          /* no all-over tint on a phone */
  .pro-hero__wash {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65vh;
    height: 65svh;
    background: linear-gradient(to bottom,
                rgba(var(--navy-rgb), 0) 42%,
                rgba(var(--navy-rgb), 0.88) 50%,
                rgba(var(--navy-rgb), 0.94) 100%);
  }
  .pro-hero__inner {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 0 1.25rem 1.5rem;
  }
  .pro-hero__lede { max-width: none; }
}