/* ============================================================
   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; }
/* 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,
.pec-support .pec-block { margin-bottom: 4rem; }
.pec-support .pec-topicblock:last-of-type,
.pec-support .pec-block:last-of-type { margin-bottom: 0; }
.pec-support .pec-topicblock__head,
.pec-support .pec-block__title { 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 */
  .pec-support .pec-topicblock,
  .pec-support .pec-block { margin-bottom: 2.5rem; }
}

/* ---- 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.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--purple);              /* 12.33:1 on white */
}
/* 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: 1rem;
}
.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: 700; }
.pec-guide__pdf { font-weight: 400; }

/* ---- Library: the in-page index ------------------------------------------ */
.pec-index { margin: 0 0 3rem; }
.pec-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
}
@media (min-width: 40rem) { .pec-index__list { grid-template-columns: repeat(2, 1fr); } }
.pec-index__list a {
  display: flex;
  align-items: center;
  min-height: 44px;                  /* tap target */
  font-size: 1rem;
  color: var(--purple);              /* 12.33:1 on white */
  text-decoration: none;
  border-bottom: 1px solid rgba(58, 42, 102, 0.10);
}
.pec-index__list a:hover,
.pec-index__list a:focus-visible { text-decoration: underline; }
.pec-index__list a:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }

/* ---- Library: one block per topic ---------------------------------------- */
.pec-topicblock { margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); }
/* Source order is title -> description -> "View topic", which is how a phone
   reads it: the link sits under the description, 12px below, left-aligned.
   From 768px the grid lifts the link back up beside the title. */
.pec-topicblock__head { margin-bottom: 1.5rem; }   /* 24px heading to content */
@media (min-width: 48rem) {
  .pec-topicblock__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.5rem;
    align-items: baseline;
  }
  .pec-topicblock__title { grid-area: 1 / 1; }
  .pec-topicblock__desc  { grid-area: 2 / 1; }
  .pec-topicblock__more  { grid-area: 1 / 2; justify-self: end; margin-top: 0; }
}
.pec-topicblock__title {
  margin: 0 1rem 0.25rem 0;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
  color: var(--purple);
}
.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:1 on white */
}
.pec-topicblock__more { margin-top: 0.75rem; }     /* 12px under the description */

/* ---- Research & Journals -------------------------------------------------- */
.pec-block { margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); }
.pec-block__title {
  margin: 0 0 0.9rem;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
  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 {
  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 */
}
.pec-resource__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-warm);           /* 8.36:1 on lavender-light */
}

/* ---- 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 a link, with an arrow circle, as soon as one is set. ---- */
.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:hover .pro-card__title { text-decoration: underline; }
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 */
}
/* Pinned to the card's foot, so four cards with four different description
   lengths still line their arrows up. */
.pro-card__go { display: block; margin-top: auto; padding-top: 0.9rem; }
.pro-card .pec-entry__go { background: var(--navy); }   /* 10.42:1 with white */

/* ---- 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; }

/* ---- Surgical videos beside case discussions ----------------------------- */
/* Stacked below 1024px, side by side above it, videos first either way. */
.pro-duo { padding-block: var(--pec-rhythm); }
.pro-duo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 64rem) { .pro-duo__grid { grid-template-columns: 1fr 1fr; } }
/* A half-width column takes a smaller heading than a full-width section. */
.pro-duo .pec-sectionhead__title { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.pro-res-sec .pec-sectionhead__title,
.pro-res-sec .pec-sectionhead__all,
.pro-duo .pec-sectionhead__title,
.pro-duo .pec-sectionhead__all { color: var(--navy); }   /* 10.42:1 on white */
.pro-res-sec .pec-sectionhead__all:focus-visible,
.pro-duo .pec-sectionhead__all:focus-visible { outline-color: var(--navy); }

/* The same card shape as the patient video row: 16:9 thumbnail on top, title
   beneath. Three across inside this column from 1024px, two from 480px, one on
   a narrow phone. */
.pro-vid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
@media (min-width: 30rem) { .pro-vid__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pro-vid__list { grid-template-columns: repeat(3, 1fr); } }
.pro-vid { display: block; text-decoration: none; color: inherit; }
/* GEM has supplied no surgical stills, so the thumbnail is a soft navy-to-blue
   sky rather than a borrowed or invented frame. The three stops keep it clearly
   a deliberate surface - a flat block reads as an image that failed to load.
   The two blues are COMPONENT-LOCAL, not design tokens: tokens.css is referenced
   by all 77 pages under a year-long immutable cache, so adding tokens there is a
   77-page stamp bump and outside this task. Move them in at the next one. */
.pro-vid__frame {
  --pro-vid-sky: #2F6BA8;            /* white on this, the lightest stop: 5.54:1 */
  --pro-vid-mid: #1B4477;
  position: relative;                /* the play disc centres against this */
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: linear-gradient(150deg,
              var(--pro-vid-sky) 0%,
              var(--pro-vid-mid) 55%,
              var(--navy-deep) 100%);
}
.pro-vid__title {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);                /* 12.80:1 on white */
}
a.pro-vid:hover .pro-vid__title { text-decoration: underline; }
a.pro-vid:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.pro-case__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.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 */
}
a.pro-case:hover .pro-case__title { text-decoration: underline; }
a.pro-case:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---- 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(--navy-deep);
  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);               /* 15.75:1 on --navy-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); }

/* Nothing on this page animates; the contract is explicit all the same. */
@media (prefers-reduced-motion: reduce) {
  .pec-hero *, .pec-entry, .pec-topic, .pec-video,
  .pro-card, .pro-res, .pro-vid, .pro-case { transition: none !important; animation: none !important; }
}