/* redesign.css - Shared styles for the rcrr-devw3 redesign (#541), modeled on the approved
   home-test5 page.  Pages are built in WPBakery: each row's "Extra class name" names its
   section style, and columns and elements carry the component classes below (prefix "rd-").
   No page carries its own copy of these styles.  The colors come from the tokens in
   astra-child/style.css (:root).  functions.php loads this file after style.css.  Until the
   theme files are deployed, a copy also sits in Appearance > Customize > Additional CSS,
   between the "redesign.css" start and end comments; remove that copy once this file is
   live. */

/* Values the approved look adds to the theme's tokens */
:root {
    --rd-r-card: 20px;
    --rd-r-thumb: 18px;
    --rd-r-chip: 16px;
    --rd-shadow-card: 0 1px 2px rgba(14, 58, 92, .06), 0 4px 14px rgba(14, 58, 92, .08);
    --rd-gutter: 24px;
}

/* ---------------------------------------------------------------------------------------
   Every page: the redesign's colors and finish on ordinary page and post content, so pages
   not yet rebuilt match the new look.  Heading sizes stay as the child theme sets them
   (client request 2026-09-02).  The Therapist Directory pages (9614, 9627) keep their own
   approved design, and rebuilt sections (.rd) have their own rules below.
   ------------------------------------------------------------------------------------- */

body:not(.page-id-9614):not(.page-id-9627) .entry-content {
    color: var(--ink);
}
body:not(.page-id-9614):not(.page-id-9627) .entry-content :is(h1, h2, h3, h4, h5, h6):not(.rd *) {
    color: var(--navy);
    font-weight: 700;
}
/* Links: no class weight, so any classed link (a button, a card) keeps its own colors. */
:where(body:not(.page-id-9614):not(.page-id-9627) .entry-content) a {
    color: var(--sky-deep);
}
:where(body:not(.page-id-9614):not(.page-id-9627) .entry-content) a:hover {
    color: var(--navy);
}
.entry-content .vc_separator .vc_sep_line {
    border-color: var(--line);
}
body:not(.page-id-9614):not(.page-id-9627) .entry-content :is(.wpb_single_image, .wp-block-image) img:not(.rd *),
body:not(.page-id-9614):not(.page-id-9627) .entry-content iframe:is([src*="youtube"], [src*="vimeo"]):not(.rd *) {
    border-radius: 12px;
}

/* Buttons: WPBakery, block-editor, and Gravity Forms buttons become the redesign's sky-blue
   pill.  WPBakery's own button colors use three classes, hence the doubled class here. */
.entry-content a.vc_btn3.vc_btn3:not(.rd *),
.entry-content .wp-block-button__link:not(.rd *),
.entry-content .gform_wrapper :is(.gform_button, input[type="submit"]) {
    background: var(--sky-deep);
    background-image: none;
    color: #fff;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    box-shadow: none;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
    padding: 11px 22px;
    text-decoration: none;
}
.entry-content a.vc_btn3.vc_btn3:not(.rd *):hover,
.entry-content .wp-block-button__link:not(.rd *):hover,
.entry-content .gform_wrapper :is(.gform_button, input[type="submit"]):hover {
    background: var(--navy);
    color: #fff;
}

/* Blog page post cards ([recmloop ... posts=1] markup, styled in Additional CSS): an older
   rule there indents the title and excerpt 1rem on each side, so they sat right of the
   date, Read More link, and tags.  Line them all up on the card's padding. */
.blog-post .blog-post-body :is(.blog-post-title, .blog-post-excerpt) {
    margin-left: 0;
    margin-right: 0;
}

/* ---------------------------------------------------------------------------------------
   Page frame and WPBakery
   ------------------------------------------------------------------------------------- */

/* A redesigned page runs edge to edge: drop Astra's side padding around the content.  A page
   that opens with a hero banner has no title bar above it. */
.ast-article-single:has(.rd) {
    padding-left: 0;
    padding-right: 0;
}
.ast-article-single:has(.rd-hero) .entry-header {
    display: none;
}
/* On a rebuilt inner page, the first section starts right under the blue title bar.  The
   article is already full width there, so the bar fills it rather than using Additional
   CSS's 100vw, which counts the scrollbar and spills past the edge. */
.ast-article-single:has(.rd) .entry-header {
    width: auto;
    max-width: none;
    margin: 0;
}
/* Below a title bar, sections use the bar's 1200px text column, so their edges line up. */
.ast-article-single:not(:has(.rd-hero)) .rd.vc_row:not(.rd-flush) > .wpb_column,
.ast-article-single:not(:has(.rd-hero)) .rd.vc_row:not(.rd-flush) > .vc_element > .wpb_column {
    max-width: calc(1200px + 2 * var(--rd-gutter));
}

/* A row with class "rd" is a full-width section.  WPBakery's column and element wrappers are
   taken out of the layout (display: contents), so a column's elements, and a Text Block's
   HTML, sit directly in the boxes styled below. */
.rd.vc_row {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.rd.vc_row::before, .rd .vc_inner::before, .rd .vc_inner::after,
.rd .vc_column-inner::before, .rd .vc_column-inner::after {
    display: none;
}
.rd .vc_column-inner, .rd div.wpb_wrapper {
    display: contents;
}
/* WordPress's automatic paragraphs leave empty or blank ones around shortcodes in Text
   Blocks, as between the blog cards; a grid holds only cards. */
.rd p:empty, .rd-grid > p {
    display: none;
}
.rd .vc_row.vc_inner {
    margin: 0;
}
.rd .wpb_column, .rd .vc_inner > .vc_element {
    float: none;
    width: auto;
    min-width: 0;
}
:where(.rd) .wpb_content_element {
    margin-bottom: 0;
}
/* The row's column is the centered page column.  In WPBakery's Frontend Editor, each element
   sits in an extra .vc_element box, hence the second selector. */
.rd.vc_row > .wpb_column, .rd.vc_row > .vc_element > .wpb_column {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--rd-gutter);
}
/* Row "rd rd-flush": its content runs edge to edge, as for the Toolkit banner. */
.rd.rd-flush > .wpb_column, .rd.rd-flush > .vc_element > .wpb_column {
    max-width: none;
    padding: 0;
}
.rd .wpb_single_image img {
    display: block;
}

.rd, .rd * {
    box-sizing: border-box;
}
.rd {
    color: var(--ink);
}
/* These resets outrank Astra's ".entry-content p" spacing, so a component rule that sets a
   paragraph's margin needs two classes too (".rd .rd-hero-text"). */
.rd p, .rd ul, .rd figure {
    margin: 0;
}
/* No class weight: Astra's "a" color is all this needs to beat, and any classed link style
   (such as the Toolkit banner's button in style.css) wins over it. */
:where(.rd) a {
    color: inherit;
}

/* Headings.  The child theme shrinks every heading in page content (style.css,
   "SITE-WIDE: in-content heading sizes"), with a selector that outranks plain classes.  The
   rule below outranks it in turn, inside redesigned sections only, and takes its size from
   --rd-fs, which each component sets.  The :where() defaults match the child theme. */
.rd :is(h1, h2, h3) {
    font-family: "Lato", -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    text-wrap: balance;
    margin: 0;
}
:where(.rd) h1 { --rd-fs: 28px; }
:where(.rd) h2 { --rd-fs: 22px; }
:where(.rd) h3 { --rd-fs: 18px; }
body:not(.page-id-9614):not(.page-id-9627) .entry-content .rd :is(h1, h2, h3) {
    font-size: var(--rd-fs);
}

.rd-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------------------
   Buttons: a link with classes "rd-btn rd-btn-gold".  Put several in a .rd-btns paragraph.
   ------------------------------------------------------------------------------------- */

.rd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    padding: 11px 20px;
    cursor: pointer;
}
.rd .rd-btn-gold { background: var(--gold); color: #3f2c07; }
.rd .rd-btn-gold:hover { background: var(--gold-deep); color: #fff; }
.rd .rd-btn-ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.rd .rd-btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.rd .rd-btn-sky { background: var(--sky-deep); color: #fff; }
.rd .rd-btn-sky:hover { background: var(--navy); color: #fff; }
.rd .rd-btn-line { border-color: var(--line); color: var(--navy); }
.rd .rd-btn-line:hover { border-color: var(--sky); background: var(--sky-tint); color: var(--navy); }
.rd-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* A Text Block holding one centered button below a grid */
.rd .rd-center {
    text-align: center;
    margin-top: 28px;
}

/* ---------------------------------------------------------------------------------------
   Section rows: "rd rd-band" plus a spacing and a background class
   ------------------------------------------------------------------------------------- */

.rd-band { padding: 36px 0; }
.rd-band-roomy { padding: 56px 0; }
.rd-band-mid { padding: 40px 0; }
.rd-band-gray { background: #F2F4F6; }
.rd-band-white { background: #fff; }
.rd-band-blue { background: #EEF6FB; }
.rd-band-ground { background: var(--ground); }
.rd-band-gold { background: #F4E4AC; }
.rd-band-navy {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
}

/* Centered section heading (a Text Block): eyebrow, title, and an optional line of text */
.rd-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 34px;
}
.rd-head-tight {
    margin-bottom: 26px;
}
.rd-head .rd-eyebrow { color: var(--sky-deep); }
.rd-head h2 {
    --rd-fs: clamp(1.55rem, 2.7vw, 2.1rem);
    line-height: 1.4;
    color: var(--navy);
    margin-top: 7px;
}
.rd-head p:not(.rd-eyebrow) {
    font-size: 15px;
    color: var(--slate);
    margin-top: 8px;
}
/* Add "rd-head-lines" for thin gold lines running out from both sides of the title. */
.rd .rd-head-lines {
    max-width: none;
}
.rd-head-lines h2 {
    display: flex;
    align-items: center;
    gap: 22px;
}
.rd-head-lines h2::before, .rd-head-lines h2::after {
    content: "";
    flex: 1;
    min-width: 32px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

/* Card grids: an inner row, or a div in a Text Block, with classes "rd-grid rd-grid-4" */
.rd-grid {
    display: grid;
    gap: 20px;
}
.rd-grid-4 { grid-template-columns: repeat(4, 1fr); }
.rd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.rd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rd-grid-wide { gap: 26px; }

/* A card whose "Read More" link covers the whole card, so the card itself is clickable */
.rd-stretch {
    position: relative;
}
.rd-stretch .rd-more a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
}

/* ---------------------------------------------------------------------------------------
   Hero banner (row "rd rd-hero").  Its column holds two Text Blocks: "rd-hero-photos", whose
   images cross-fade, and "rd-hero-body", the text.  The fade assumes 14 photos, 4.5 s apart;
   to change the count, change the delays below and the percentages in rd-hero-fade.
   ------------------------------------------------------------------------------------- */

.rd-hero {
    position: relative;
    min-height: 474px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--sky);
    color: #fff;
}
.rd.rd-hero > .wpb_column, .rd.rd-hero > .vc_element, .rd.rd-hero > .vc_element > .wpb_column {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
.rd-hero-photos {
    position: absolute;
    inset: 0;
}
/* In the Frontend Editor, let the photos fill the banner rather than their element box. */
.rd.rd-hero .vc_element {
    position: static;
}
.rd-hero-photos p {
    display: contents;
}
.rd-hero-photos img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: right center;
    opacity: 0;
    animation: rd-hero-fade 63s linear infinite;
}
.rd-hero-photos img:nth-of-type(1) { animation-delay: -1s; }
.rd-hero-photos img:nth-of-type(2) { animation-delay: 3.5s; }
.rd-hero-photos img:nth-of-type(3) { animation-delay: 8s; }
.rd-hero-photos img:nth-of-type(4) { animation-delay: 12.5s; }
.rd-hero-photos img:nth-of-type(5) { animation-delay: 17s; }
.rd-hero-photos img:nth-of-type(6) { animation-delay: 21.5s; }
.rd-hero-photos img:nth-of-type(7) { animation-delay: 26s; }
.rd-hero-photos img:nth-of-type(8) { animation-delay: 30.5s; }
.rd-hero-photos img:nth-of-type(9) { animation-delay: 35s; }
.rd-hero-photos img:nth-of-type(10) { animation-delay: 39.5s; }
.rd-hero-photos img:nth-of-type(11) { animation-delay: 44s; }
.rd-hero-photos img:nth-of-type(12) { animation-delay: 48.5s; }
.rd-hero-photos img:nth-of-type(13) { animation-delay: 53s; }
.rd-hero-photos img:nth-of-type(14) { animation-delay: 57.5s; }
/* One photo's turn: 1 s fade in, 4.5 s shown, 1 s fade out, as fractions of 14 x 4.5 s. */
@keyframes rd-hero-fade {
    0% { opacity: 0; }
    1.587% { opacity: 1; }
    8.73% { opacity: 1; }
    10.317% { opacity: 0; }
    100% { opacity: 0; }
}
.rd.rd-hero::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28, 109, 160, .94) 0%, rgba(46, 150, 206, .70) 42%,
                                rgba(46, 150, 206, .20) 72%, rgba(46, 150, 206, 0) 100%);
}
.rd-hero-body {
    position: relative;
    z-index: 1;
    max-width: calc(660px + 2 * var(--rd-gutter));
    margin-left: max(16px, calc((100vw - 1120px) / 4 + 24px));
    padding: 38px var(--rd-gutter);
}
.rd-hero .rd-eyebrow { color: #FCE7B8; }
.rd-hero h1 {
    --rd-fs: clamp(2.2rem, 4.6vw, 3.15rem);
    line-height: 1.06;
    color: #fff;
    text-shadow: 0 1px 12px rgba(10, 41, 66, .25);
    margin: 12px 0 8px;
}
.rd .rd-hero-text {
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.45;
    color: #F1F8FC;
    text-shadow: 0 1px 8px rgba(10, 41, 66, .2);
    text-wrap: pretty;
    margin-bottom: 12px;
}
.rd .rd-hero-lead {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #EAF4FB;
    margin-bottom: 11px;
}
.rd .rd-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 9px 46px;
}
/* The disc sits in the left padding, so bold words stay inline in the item's text. */
.rd-checks li {
    position: relative;
    padding-left: 29px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
}
/* A gold disc with a dark check mark drawn from two borders */
.rd-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
}
.rd-checks li::after {
    content: "";
    position: absolute;
    left: 7.5px;
    top: 50%;
    width: 5px;
    height: 9px;
    margin-top: -6px;
    border: solid #3f2c07;
    border-width: 0 2.4px 2.4px 0;
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .rd-hero-photos img { animation: none; }
    .rd-hero-photos img:first-of-type { opacity: 1; }
}

/* ---------------------------------------------------------------------------------------
   Info card (column "rd-card"): a Single Image ("rd-card-pic", or "rd-card-icon" for an
   icon on a blue panel) above a Text Block ("rd-card-body") ending in a "rd-more" link
   ------------------------------------------------------------------------------------- */

.rd-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-card);
    box-shadow: var(--rd-shadow-card);
    overflow: hidden;
}
.rd-card-pic :is(.vc_figure, .vc_single_image-wrapper) {
    display: block;
}
.rd-card-pic img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.rd-card-icon {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 120% at 22% 20%, var(--sky) 0%, var(--sky-deep) 60%, #17618F 100%);
}
.rd-card-icon-alt {
    background: radial-gradient(120% 120% at 80% 25%, var(--sky) 0%, var(--sky-deep) 62%, var(--navy) 100%);
}
.rd-card-icon img {
    width: 82px;
    height: 82px;
    opacity: .95;
}
.rd-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px 22px 22px;
}
.rd-card h3 {
    --rd-fs: 20px;
    line-height: 1.4;
    color: var(--navy);
}
.rd-card-body p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--slate);
}
.rd-card-body .rd-kind {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--slate-lt);
}
.rd-card-body .rd-more {
    margin-top: auto;
    padding-top: 6px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: inherit;
}
.rd-more a {
    color: var(--sky-deep);
    text-decoration: none;
}

/* ---------------------------------------------------------------------------------------
   Video card (column "rd-video"): a Single Image ("rd-video-thumb") of the YouTube thumbnail,
   linked to the video, then a Text Block: a "rd-video-len" paragraph (shown on the
   thumbnail), a title, and a line of text.  Add "rd-video-framed" for a white frame.
   ------------------------------------------------------------------------------------- */

.rd-video {
    position: relative;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.rd-video .wpb_text_column {
    display: contents;
}
.rd-video-thumb .vc_figure {
    position: relative;
    display: block;
}
.rd-video-thumb .vc_single_image-wrapper {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--rd-r-thumb);
    overflow: hidden;
    background: linear-gradient(150deg, #1c4a68, #0c2230);
}
.rd-video-thumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
/* Darken the photo a little, with a soft light from the top left. */
.rd-video-thumb .vc_single_image-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 120% at 30% 18%, rgba(79, 176, 228, .30), transparent 62%),
                linear-gradient(rgba(6, 20, 32, .15), rgba(6, 20, 32, .35));
}
/* The play button: a shadowed rounded box with a white triangle.  The box takes the place of
   the new-tab icon that Additional CSS adds as ::after on every target="_blank" link. */
.rd .rd-video-thumb .vc_single_image-wrapper::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 42px;
    margin: -21px 0 0 -30px;
    border-radius: 11px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    opacity: 1;
}
.rd-video-thumb .vc_figure::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 17px;
    margin: -8.5px 0 0 -6px;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    pointer-events: none;
}
.rd-video-thumb .vc_figure::after {
    content: "YouTube";
    position: absolute;
    z-index: 1;
    right: 10px;
    bottom: 9px;
    padding-left: 20px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 15px;
    color: #fff;
    opacity: .92;
    background: url(/wp-content/uploads/2026/10/rd-youtube.svg) left center / 15px 15px no-repeat;
    pointer-events: none;
}
.rd .rd-video-len {
    position: absolute;
    z-index: 1;
    left: 10px;
    top: calc(100cqw * 9 / 16 - 39px);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}
.rd-video h3 {
    --rd-fs: 15.5px;
    line-height: 1.3;
    color: var(--ink);
}
.rd-video p:not(.rd-video-len) {
    font-size: 13px;
    color: var(--slate-lt);
}
.rd-band-navy .rd-video h3 { color: #fff; }
.rd-video-framed .vc_single_image-wrapper {
    border: 10px solid #fff;
}
.rd-video-framed .vc_figure::after {
    right: 20px;
    bottom: 19px;
}
.rd .rd-video-framed .rd-video-len {
    left: 20px;
    top: calc(100cqw * 9 / 16 - 49px);
}

/* ---------------------------------------------------------------------------------------
   Two-column inner rows
   ------------------------------------------------------------------------------------- */

/* "rd-split": text beside a video, as in "Meet ART Founder Laney Rosenzweig" */
.rd-split {
    display: grid;
    grid-template-columns: 1fr minmax(0, 460px);
    gap: 36px;
    align-items: center;
}
.rd-split .rd-eyebrow { color: var(--gold); }
.rd-split h2 {
    --rd-fs: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.4;
    color: #fff;
    margin-bottom: 14px;
}
.rd-split p:not(.rd-eyebrow):not(.rd-btns):not(.rd-video-len) {
    max-width: 48ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: #D8E8F3;
    margin-bottom: 13px;
}
/* A plain link in the text of a light section stands out from the words around it. */
.rd :is(.rd-card-body, .rd-media, .rd-fact, .rd-prose) a:not([class]) {
    color: var(--sky-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* A gold link, for use on the dark sections */
.rd .rd-gold-link {
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
}
.rd-split .rd-btns { margin-top: 20px; }

/* "rd-book": a book cover (Single Image "rd-book-cover") beside text, as in "Laney's Book" */
.rd-book {
    display: grid;
    grid-template-columns: .8fr 1.1fr;
    gap: 40px;
    align-items: center;
}
.rd-book .rd-book-cover {
    text-align: center;
}
.rd-book-cover img {
    display: inline-block;
    width: 190px;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(14, 58, 92, .32);
    transform: rotate(-1.5deg);
}
.rd-book .rd-eyebrow { color: var(--sky-deep); }
.rd-book h2 {
    --rd-fs: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: 14px;
}
.rd-book p:not(.rd-eyebrow):not(.rd-buy) {
    max-width: 48ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--slate);
    margin-bottom: 16px;
}
.rd-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
}
.rd-buy-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}
.rd-book .rd-btn-line { background: #fff; border-color: #E6D6A8; }
.rd-book .rd-btn-line:hover { background: var(--gold-tint); border-color: var(--gold-deep); }

/* "rd-media": an inner page's intro, text beside a photo (Single Image "rd-media-pic") */
.rd-media {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 48px;
    align-items: center;
}
.rd-media .rd-eyebrow {
    color: var(--sky-deep);
    margin-bottom: 6px;
}
.rd-media h2 {
    --rd-fs: clamp(1.45rem, 2.4vw, 1.9rem);
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: 16px;
}
.rd-media p:not(.rd-eyebrow) {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--ink);
}
.rd-media-pic img {
    width: 100%;
    height: auto;
    border-radius: var(--rd-r-card);
    box-shadow: var(--rd-shadow-card);
}
.rd-media-pic :is(.vc_figure, .vc_single_image-wrapper) {
    display: block;
}

/* A quote pulled out of the intro text, and small print under it */
.rd .rd-media blockquote {
    margin: 18px 0 0;
    padding: 4px 0 4px 18px;
    border-left: 4px solid var(--gold);
    font-size: 17.5px;
    font-style: italic;
    line-height: 1.55;
    color: var(--navy);
}
.rd .rd-media blockquote p {
    font-size: inherit;
    color: inherit;
}
.rd .rd-media blockquote + p {
    margin-top: 18px;
}
/* A subheading and checklist further down the intro text */
.rd-media h3 {
    --rd-fs: 20px;
    color: var(--navy);
    margin: 24px 0 8px;
}
.rd .rd-media .rd-checks-grid {
    margin-top: 14px;
}

/* Numbered steps: an ordered list "rd-steps" in a Text Block, each step a white bar */
.rd .rd-steps {
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: rd-step;
    display: grid;
    gap: 12px;
}
/* The number sits in the left padding, so bold words stay inline in the sentence. */
.rd-steps > li {
    counter-increment: rd-step;
    position: relative;
    padding: 20px 20px 20px 72px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-chip);
    box-shadow: var(--rd-shadow-card);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
}
.rd-steps > li::before {
    content: counter(rd-step);
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -18px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--sky), var(--sky-deep));
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
/* Add "rd-steps-detail" for steps that hold a heading and paragraphs: the number sits beside
   the heading. */
.rd .rd-steps-detail {
    max-width: 880px;
    gap: 16px;
}
.rd-steps-detail > li {
    padding: 22px 26px 24px 76px;
}
.rd-steps-detail > li::before {
    top: 20px;
    margin-top: 0;
}
.rd-steps-detail h3 {
    --rd-fs: 19px;
    line-height: 1.4;
    color: var(--navy);
    margin-bottom: 8px;
}
.rd .rd-steps-detail p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink);
}
.rd .rd-steps-detail :is(p, ul) + :is(p, ul) {
    margin-top: 10px;
}
.rd .rd-steps-detail ul {
    padding-left: 1.25em;
    list-style: disc;
}
.rd-steps-detail ul li {
    font-size: 15.5px;
    line-height: 1.6;
}
.rd-steps-detail ul li::marker {
    color: var(--sky);
}
.rd .rd-steps a:not([class]) {
    color: var(--sky-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.rd-media p.rd-note {
    margin-top: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--slate);
}

/* Readable text column (a Text Block "rd-prose"): a heading and paragraphs */
.rd-prose {
    max-width: 780px;
    margin: 0 auto;
}
/* Add "rd-prose-left" to line the column up with full-width cards below it. */
.rd-prose-left {
    margin-left: 0;
}
/* Add "rd-prose-full" for text as wide as the page column. */
.rd-prose-full {
    max-width: none;
}
.rd-prose .rd-eyebrow {
    color: var(--sky-deep);
    margin-bottom: 6px;
}
.rd-prose h2 {
    --rd-fs: clamp(1.45rem, 2.4vw, 1.9rem);
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: 14px;
}
.rd-prose p:not(.rd-eyebrow) {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ink);
}
.rd-prose p + p {
    margin-top: 16px;
}
/* Lists in a text column: gold checklists ("rd-checks rd-checks-grid rd-checks-1") or plain
   bullets, with the same spacing as paragraphs */
.rd .rd-prose :is(p, ul) + ul {
    margin-top: 14px;
}
.rd .rd-prose ul + p {
    margin-top: 20px;
}
.rd .rd-prose .rd-checks li {
    font-weight: 400;
}
.rd .rd-prose ul:not(.rd-checks) {
    padding-left: 1.25em;
    list-style: disc;
}
.rd .rd-prose li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.rd .rd-prose ul:not(.rd-checks) li + li {
    margin-top: 6px;
}
.rd .rd-prose li::marker {
    color: var(--sky);
}
.rd .rd-prose p.rd-eyebrow + p {
    margin-top: 0;
}
/* An opening sentence set larger, above the first heading */
.rd .rd-prose .rd-lead-line {
    margin-bottom: 26px;
    font-size: 19px;
    line-height: 1.55;
    color: var(--navy);
}

/* Card text is centered (client request 2026-10-07): headings, paragraphs, buttons, and
   number badges.  A list keeps its lines left-aligned, as a block centered in the card. */
.rd-card-body, .rd-fact, .rd-press li {
    text-align: center;
}
.rd-card h3:has(.rd-num) {
    justify-content: center;
}
.rd :is(.rd-card-body, .rd-fact) .rd-btns {
    justify-content: center;
}
.rd .rd-card-body ul {
    align-self: center;
    width: fit-content;
    max-width: 100%;
    text-align: left;
}

/* Text-only card: a column "rd-card" holding just a "rd-card-body" Text Block */
.rd-card-body p + p {
    margin-top: 10px;
}
/* An offer card's price line, and its buttons pushed to the bottom */
.rd-card-body .rd-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--navy);
}
.rd-card-body .rd-btns {
    margin-top: auto;
    padding-top: 10px;
}

/* Fact card (a column "rd-fact"): a short label above a line or two of detail */
.rd-fact {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-chip);
}
.rd-fact p.rd-fact-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sky-deep);
}
.rd-fact p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
}
/* Slightly smaller buttons, so two long labels fit side by side in a fact card */
.rd-fact .rd-btn {
    font-size: 14px;
    padding: 10px 17px;
}

/* An inner row or Text Block placed below other content in the same column */
.rd .vc_inner.rd-spaced, .rd .rd-spaced {
    margin-top: 28px;
}

/* A PDF viewer (a PDF Embedder or EmbedPress shortcode in a Text Block "rd-embed"), in a
   rounded frame */
.rd-embed :is(.pdfemb-viewer, .embedpress-document-embed) {
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-card);
    overflow: hidden;
    box-shadow: var(--rd-shadow-card);
}
.rd-embed iframe {
    display: block;
    border: 0;
}
.rd-embed :is(.embedpress-document-embed, iframe) {
    max-height: 85vh;
}
.rd-embed .embedpress-el-powered {
    display: none;
}

/* A highlighted note (a "rd-notice" paragraph), such as a pricing condition */
.rd .rd-notice {
    margin-top: 18px;
    padding: 16px 20px;
    background: var(--gold-tint);
    border-left: 4px solid var(--gold);
    border-radius: 0 12px 12px 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}

/* Checklist on a light background: a "rd-checks rd-checks-grid" list in a Text Block */
.rd .rd-checks-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 28px;
    margin: 0;
}
.rd-checks-grid li {
    white-space: normal;
    font-size: 15.5px;
    color: var(--ink);
}
/* Two columns, for longer statements */
.rd .rd-checks-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* One column, as in a card, at every width (hence the extra class) */
.rd .rd-checks.rd-checks-1 {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
}
.rd .rd-card-body .rd-checks-grid {
    margin: 6px 0;
}

/* Section heading and checklist on the navy section */
.rd-band-navy .rd-head .rd-eyebrow { color: var(--gold); }
.rd-band-navy .rd-head h2 { color: #fff; }
.rd-band-navy .rd-head p:not(.rd-eyebrow) { color: #C6D8E4; }
.rd-band-navy .rd-checks-grid li { color: #fff; }

/* ---------------------------------------------------------------------------------------
   Blog card: written by [recmloop ... posts=1] inside a Text Block
   ------------------------------------------------------------------------------------- */

.rd-post {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-card);
    overflow: hidden;
    transition: transform .16s ease;
}
.rd-post:hover {
    transform: translateY(-3px);
}
.rd-post img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}
.rd-post-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 17px 18px;
}
.rd-post-date {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--slate-lt);
}
.rd-post h3 {
    --rd-fs: 15px;
    line-height: 1.35;
    color: var(--navy);
}
.rd-post .rd-more {
    margin-top: auto;
    padding-top: 6px;
    font-size: 12.5px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------------------
   Testimonial card (column "rd-quote"): a Text Block with a blockquote and a "rd-quote-who"
   line (initials, name, role)
   ------------------------------------------------------------------------------------- */

.rd-quote {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 22px;
    border: 2px solid var(--gold);
    border-radius: var(--rd-r-card);
}
.rd-quote .wpb_text_column {
    display: contents;
}
.rd-quote::before {
    content: "“";
    height: 22px;
    font-family: "Newsreader", serif;
    font-size: 44px;
    line-height: .6;
    color: var(--gold);
}
/* The quote keeps Astra's blockquote look (faint left bar, italics, padding), as approved. */
.rd .rd-quote blockquote {
    flex: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}
.rd .rd-quote blockquote p {
    margin: 0;
}
.rd-quote-who {
    display: flex;
    align-items: center;
    gap: 11px;
}
.rd-quote-initials {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--sky), var(--navy));
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
}
.rd-quote-who :is(b, strong) {
    display: block;
    font-size: 14px;
    color: var(--navy);
}
.rd-quote-role {
    font-size: 12.5px;
    color: var(--slate-lt);
}
/* Home: the newest real testimonials, as written by [recmloop testimonial limit=3] into a
   "rd-grid rd-grid-3 rd-quotes-home" div. Long ones show their first lines, then fade out. */
.rd-quotes-home > p {
    display: none;
}
.rd .rd-quotes-home .rd-quote {
    margin: 0;
}
.rd .rd-quotes-home .rd-quote blockquote {
    flex: none;
    max-height: 11.2em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 55%, transparent);
    mask-image: linear-gradient(#000 55%, transparent);
}
.rd .rd-quotes-home .rd-quote blockquote p + p {
    margin-top: .6em;
}
.rd-quotes-home .rd-quote-who {
    margin-top: auto;
}

/* Video card wall: "rd-card rd-vcard" figures in a "rd-grid rd-vcards" div, as written by
   [recmloop video]: the embedded player ("rd-vcard-media"), then the title and description */
.rd .rd-vcard {
    margin: 0;
}
.rd-vcard-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--navy-deep);
}
.rd-vcard-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.rd-vcard h3 {
    --rd-fs: 18px;
}

/* Testimonial wall: a "rd-quotes" div holding "rd-testimonial" figures (a blockquote and an
   optional figcaption), as written by [recmloop testimonial], in masonry columns so long
   and short quotes pack together */
.rd .rd-quotes {
    columns: 3 300px;
    column-gap: 20px;
}
.rd-quotes > p {
    display: none;
}
.rd .rd-testimonial {
    break-inside: avoid;
    margin: 0 0 20px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-card);
    box-shadow: var(--rd-shadow-card);
}
.rd-testimonial::before {
    content: "“";
    display: block;
    height: 24px;
    font-family: "Newsreader", serif;
    font-size: 46px;
    line-height: .9;
    color: var(--gold);
}
.rd .rd-testimonial blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    font-style: normal;
    line-height: 1.65;
    color: var(--ink);
}
.rd .rd-testimonial figcaption {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

/* ---------------------------------------------------------------------------------------
   Call to action row ("rd rd-cta"), as in "Get trained to deliver ART."
   ------------------------------------------------------------------------------------- */

.rd-cta {
    padding: 40px 0;
    text-align: center;
    color: #fff;
    background: radial-gradient(70% 120% at 50% 0%, rgba(217, 166, 60, .18), transparent 55%),
                linear-gradient(120deg, var(--navy-deep), #123a56 55%, var(--sky-deep));
}
.rd-cta .rd-eyebrow { color: var(--gold); }
.rd-cta h2 {
    --rd-fs: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.4;
    color: #fff;
    margin: 12px 0 10px;
}
.rd-cta p:not(.rd-eyebrow):not(.rd-btns) {
    max-width: 52ch;
    color: #D3E4F0;
    margin: 0 auto 22px;
}
.rd-cta .rd-btns { justify-content: center; }

/* ---------------------------------------------------------------------------------------
   Logo chips: a Text Block with a "rd-logos" div of "rd-logo" divs, each holding an image
   ------------------------------------------------------------------------------------- */

.rd-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 22px 40px;
}
.rd-logo {
    height: 78px;
    display: grid;
    place-items: center;
    padding: 14px 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-chip);
}
.rd-logo img {
    max-width: 190px;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* A logo wall: a "rd-logo-grid" div of "rd-logo" chips in a Text Block, in even rows */
.rd .rd-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
}
.rd-logo-grid .rd-logo {
    height: 120px;
    padding: 16px 20px;
    gap: 8px;
    grid-auto-rows: minmax(0, 1fr);
}
.rd-logo-grid .rd-logo a {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 0;
}
.rd-logo-grid .rd-logo img {
    max-width: 100%;
    max-height: 88px;
}
/* A chip holding two logos stacks them at half height. */
.rd-logo-grid .rd-logo:has(a + a) img {
    max-height: 38px;
}
/* The logos are links that open a new tab; leave out the site's new-tab icon here. */
.rd-logo-grid a[target="_blank"]::after {
    display: none;
}

/* ---------------------------------------------------------------------------------------
   Research pages: numbered cards, bulleted lists, and toggles
   ------------------------------------------------------------------------------------- */

/* Larger opening text: add "rd-lead" to a "rd-prose" Text Block. */
.rd-prose.rd-lead p:not(.rd-eyebrow) {
    font-size: 18px;
    color: var(--navy);
}

/* A card heading that starts with a number badge (a "rd-num" span holding the number) */
.rd-card h3:has(.rd-num) {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rd-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--sky), var(--sky-deep));
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

/* Bulleted lists in cards and toggles */
.rd :is(.rd-card-body, .vc_toggle_content) ul:not(.rd-checks) {
    margin: 0;
    padding-left: 1.25em;
    list-style: disc;
}
.rd .rd-card-body li {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--slate);
}
.rd :is(.rd-card-body, .vc_toggle_content) li + li {
    margin-top: 8px;
}
.rd :is(.rd-card-body, .vc_toggle_content) li::marker {
    color: var(--sky);
}

/* Toggle (WPBakery's "Toggle" element): a white panel whose title opens and closes it */
.rd .vc_toggle {
    max-width: 980px;
    margin: 0 auto 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-chip);
    box-shadow: var(--rd-shadow-card);
}
.rd .vc_toggle:last-child {
    margin-bottom: 0;
}
/* WPBakery's toggle rules carry up to four classes; these match them. */
.rd .vc_toggle .vc_toggle_title {
    position: relative;
    padding: 16px 20px 16px 48px;
}
.rd .vc_toggle .vc_toggle_title .vc_toggle_icon {
    left: 20px;
    margin-left: 0;
}
.rd .vc_toggle .vc_toggle_icon::before, .rd .vc_toggle .vc_toggle_icon::after {
    background: var(--sky-deep);
}
.rd .vc_toggle .vc_toggle_title h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.45;
    color: var(--navy);
}
.rd .vc_toggle .vc_toggle_content {
    margin: 0;
    padding: 0 20px 20px 48px;
}
.rd .vc_toggle_content li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}
/* A toggle list's links ("ABSTRACT", "FULL ARTICLE") are small pill buttons. */
.rd .vc_toggle_content li a {
    display: inline-flex;
    align-items: center;
    margin: 3px 2px;
    padding: 2px 11px;
    background: var(--sky-tint);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--sky-deep);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.6;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.rd .vc_toggle_content li a:hover {
    background: var(--sky-deep);
    border-color: var(--sky-deep);
    color: #fff;
}

/* ---------------------------------------------------------------------------------------
   People: a person card (column "rd-card rd-person": a linked photo, then a Text Block
   "rd-card-body"), and the trainer grid (a Post Grid with class "rd-people"), styled alike
   ------------------------------------------------------------------------------------- */

/* Person cards and the trainer grid share the page gutter, so their columns line up. */
.rd .rd-grid:has(.rd-person) {
    gap: var(--rd-gutter);
}
.rd-person .rd-card-pic img {
    aspect-ratio: 4 / 5;
    object-position: center 20%;
}
.rd .rd-person .rd-card-body {
    text-align: center;
    gap: 6px;
}
.rd .rd-person .rd-card-body h3 a {
    color: var(--navy);
    text-decoration: none;
}
.rd .rd-person .rd-person-where {
    font-size: 13.5px;
    color: var(--slate-lt);
}
.rd .rd-person .rd-person-role {
    margin: 4px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sky-deep);
}
.rd .rd-person .rd-person-email {
    margin-top: auto;
    padding-top: 6px;
}

/* A person card without a photo: a "rd-person-initials" paragraph as a round badge at the
   top of the card body */
.rd .rd-person .rd-person-initials {
    width: 72px;
    height: 72px;
    margin: 6px auto 8px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--sky), var(--navy));
    box-shadow: 0 0 0 5px var(--sky-tint);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .04em;
}
/* Three photo-less cards read best at a narrower width.  ".vc_inner" outranks the inner-row
   margin reset. */
.rd .vc_inner.rd-team {
    max-width: 1040px;
    margin: 0 auto;
}

/* An email link is a small pill; the grid's links carry an envelope image.  These outrank
   the underlined-link rule for card text. */
.rd :is(.rd-person, .rd-people) :is(.rd-person-email, .vc_gitem-post-meta-field-email) a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    background: var(--sky-tint);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--sky-deep);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}
.rd :is(.rd-person, .rd-people) :is(.rd-person-email, .vc_gitem-post-meta-field-email) a:hover {
    background: var(--sky-deep);
    border-color: var(--sky-deep);
    color: #fff;
}
.rd :is(.rd-person-email, .vc_gitem-post-meta-field-email) a img {
    width: 14px;
    height: auto;
}
.rd :is(.rd-person-email, .vc_gitem-post-meta-field-email) a:hover img {
    filter: brightness(0) invert(1);
}

/* Trainer grid cards */
/* The Post Grid spaces cards with padding and a matching negative margin; WPBakery's rules
   carry three classes, hence ".vc_grid.vc_row". */
.rd-people .vc_grid.vc_row .vc_grid-item {
    padding: 0 var(--rd-gutter) var(--rd-gutter) 0;
}
/* Flex rows, so the cards in a row are the same height */
.rd-people .vc_grid.vc_row .vc_pageable-slide-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-1 * var(--rd-gutter));
}
.rd-people .vc_pageable-slide-wrapper::before, .rd-people .vc_pageable-slide-wrapper::after {
    display: none;
}
.rd-people .vc_grid.vc_row {
    margin-bottom: calc(-1 * var(--rd-gutter));
}
.rd-people .vc_grid-item-mini {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-card);
    box-shadow: var(--rd-shadow-card);
    overflow: hidden;
    transition: transform .16s ease;
}
.rd-people .vc_grid-item-mini:hover {
    transform: translateY(-3px);
}
.rd-people .vc_gitem-zone-a {
    aspect-ratio: 4 / 5;
    background-position: center 20%;
}
.rd-people .vc_gitem-zone-a::before {
    display: none;
}
.rd-people .vc_gitem-zone-c {
    padding: 14px 14px 16px;
    text-align: center;
}
.rd-people .vc_gitem-post-data {
    margin-bottom: 2px;
}
.rd-people .vc_gitem-post-data .vc_gitem-link {
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
}
.rd-people .vc_gitem-post-meta-field-location {
    font-size: 13px;
    color: var(--slate-lt);
}
.rd-people .vc_gitem-post-meta-field-email:not(:empty) {
    margin-top: 8px;
    text-align: center;
}

/* Press list: a "rd-press" list in a Text Block, each item a "rd-press-date" span and a
   link, shown as white cards in two columns.  The link covers its whole card. */
.rd .rd-press {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.rd-press li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-chip);
    box-shadow: var(--rd-shadow-card);
    transition: border-color .15s ease, transform .15s ease;
}
.rd-press li:hover {
    border-color: var(--sky);
    transform: translateY(-2px);
}
.rd-press-date {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sky-deep);
}
.rd .rd-press a {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--navy);
    text-decoration: none;
}
.rd .rd-press a::before {
    content: "";
    position: absolute;
    inset: 0;
}
@media (prefers-reduced-motion: reduce) {
    .rd-press li { transition: none; }
    .rd-press li:hover { transform: none; }
}

/* A card topped by a playable video: a WPBakery Video Player ("rd-card-video") above the
   card's Text Block, as for the Vimeo talks on Resources > Videos */
.rd .rd-card-video {
    margin: 0;
}
.rd-card-video :is(.wpb_video_wrapper, .ast-oembed-container) {
    position: relative;
    height: auto;
    padding: 0;
    aspect-ratio: 16 / 9;
    background: var(--navy-deep);
}
.rd-card-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
}

/* ---------------------------------------------------------------------------------------
   Contact page: the contact form in a full-width white card (Text Block "rd-form-card"),
   topped by a blue strip ("rd-form-head" div: the FAQ logo and a line of text) above a
   "rd-form-body" div holding the form.  The strip matches the title bar and the logo's
   own background (Astra global color 0).
   ------------------------------------------------------------------------------------- */

.rd .rd-form-card {
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-card);
    box-shadow: var(--rd-shadow-card);
}
.rd-form-head {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 10px 32px;
    background: var(--ast-global-color-0, #2B85BB);
}
.rd-form-head img {
    flex-shrink: 0;
    width: 120px;
    height: auto;
}
.rd .rd-form-head p {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}
.rd-form-body {
    padding: 24px 32px 28px;
}
/* A Gravity Forms thank-you message on any other page (such as Feedback): a card with a
   check badge.  Messages inside a "rd-form-body" keep that box's own look. */
.entry-content .gform_confirmation_message:not(.rd-form-body *) {
    position: relative;
    max-width: 720px;
    margin: 12px auto;
    padding: 30px 32px 30px 96px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--gold);
    border-radius: var(--rd-r-card);
    box-shadow: var(--rd-shadow-card);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--navy);
}
.entry-content .gform_confirmation_message:not(.rd-form-body *)::before {
    content: "\2713";
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sky-deep);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}
/* Links in the form's text and its thank-you message look like links */
.rd .rd-form-body a:not([class]) {
    color: var(--sky-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* A person card's description, between the role and the email pill */
.rd .rd-person .rd-card-body p:not([class]) {
    font-size: 14px;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------------------
   Continuing education pages: logo pills that jump to each approving body ("rd-ce-nav"),
   and per body, a text column opening with its logo beside the heading ("rd-ce-head"), the
   credit hours as a pill ("rd-ce-hours"), and a revision date ("rd-ce-revised")
   ------------------------------------------------------------------------------------- */

/* A row given an ID (WPBakery's Row ID) is a jump target; leave room for the sticky header. */
.rd.vc_row[id] {
    scroll-margin-top: 130px;
}
.rd .rd-ce-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.rd .rd-ce-nav a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--rd-shadow-card);
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.rd .rd-ce-nav a:hover {
    border-color: var(--sky);
    background: var(--sky-tint);
}
.rd-ce-nav img {
    height: 28px;
    width: auto;
    border-radius: 4px;
}
.rd .rd-btns.rd-center {
    justify-content: center;
}
.rd-ce-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}
.rd-ce-head img {
    flex-shrink: 0;
    width: auto;
    max-width: 120px;
    max-height: 56px;
    border-radius: 6px;
}
.rd .rd-ce-head h2 {
    margin: 0;
}
.rd .rd-prose .rd-ce-hours {
    display: inline-block;
    padding: 6px 16px;
    background: var(--sky-tint);
    border-radius: var(--radius-pill);
    color: var(--sky-deep);
    font-size: 15px;
    font-weight: 700;
}
.rd .rd-prose .rd-ce-revised {
    font-size: 13.5px;
    color: var(--slate);
}
/* Subheadings and a quoted statement in a text column */
.rd-prose h3 {
    --rd-fs: 19px;
    line-height: 1.4;
    color: var(--navy);
    margin-top: 26px;
}
.rd .rd-prose h3 + :is(p, ul) {
    margin-top: 8px;
}
.rd .rd-prose blockquote {
    margin: 14px 0 0;
    padding: 16px 20px;
    background: var(--sky-tint);
    border-left: 4px solid var(--sky);
    border-radius: 0 12px 12px 0;
    font-style: italic;
}
.rd .rd-prose blockquote p {
    font-size: 15.5px;
    color: var(--navy);
}
.rd .rd-prose blockquote + :is(p, h3) {
    margin-top: 16px;
}
/* Section headings partway down a long text column, such as a policy page */
.rd .rd-prose :is(p, ul) + h2 {
    margin-top: 34px;
}

/* ---------------------------------------------------------------------------------------
   Members-only pages, such as ACAT Chapters: a "rd-gate-box" message for visitors who may not
   see the content, and info cards with small "rd-label" headings
   ------------------------------------------------------------------------------------- */

.rd-gate-box {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 28px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--gold);
    border-radius: var(--rd-r-card);
    box-shadow: var(--rd-shadow-card);
}
.rd-gate-box h2 {
    --rd-fs: clamp(1.3rem, 2.2vw, 1.6rem);
    line-height: 1.35;
    color: var(--navy);
    margin-bottom: 12px;
}
.rd .rd-gate-box p:not(.rd-btns) {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink);
    margin-bottom: 10px;
}
.rd .rd-gate-box .rd-btns {
    justify-content: center;
    margin-top: 18px;
}
.rd :is(.rd-card-body, .rd-acc-body) .rd-label {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sky-deep);
}

/* Collapsible box: a "details" element with class "rd-acc", holding a "summary" title and a
   "rd-acc-body" div.  Put several in a "rd-grid rd-accs" div; opening one leaves the box
   beside it closed and at its own height. */
.rd .rd-accs {
    align-items: start;
}
.rd-acc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--rd-r-chip);
    box-shadow: var(--rd-shadow-card);
}
.rd-acc summary {
    position: relative;
    display: block;
    padding: 16px 20px 16px 48px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--navy);
    list-style: none;
    cursor: pointer;
}
.rd-acc summary::-webkit-details-marker {
    display: none;
}
/* A plus sign drawn from two bars; open, the upright bar goes and a minus sign remains. */
.rd-acc summary::before, .rd-acc summary::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 14px;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--sky-deep);
}
.rd-acc summary::after {
    transform: rotate(90deg);
}
.rd-acc[open] summary::after {
    display: none;
}
.rd-acc summary:hover {
    color: var(--sky-deep);
}
.rd-acc summary:focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: -2px;
    border-radius: var(--rd-r-chip);
}
.rd-acc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px 20px 48px;
}
.rd .rd-acc-body :is(p, li) {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--slate);
}
.rd .rd-acc-body strong {
    color: var(--ink);
}
.rd .rd-acc-body a:not([class]) {
    color: var(--sky-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.rd .rd-acc-body ul {
    margin: 0;
    padding-left: 1.25em;
    list-style: disc;
}
.rd .rd-acc-body li + li {
    margin-top: 4px;
}
.rd .rd-acc-body li::marker {
    color: var(--sky);
}

/* ---------------------------------------------------------------------------------------
   Trainer bio pages: a "rd-bio" div with the photo ("rd-bio-pic") beside the text
   ("rd-bio-text": the location, a heading, the license line "rd-bio-role", and the bio
   paragraphs), then a link back to the trainer list.  The photo matches the trainer grid's 4:5
   crop, in a gold frame.  A trainer without a photo gets a "rd-bio-initials" paragraph in its
   place.  Phones stack the photo on top.  The page template (page-trainer-bio.php) writes
   this markup, so it sits in a plain "rd rd-band" div, not a WPBakery row and column.
   ------------------------------------------------------------------------------------- */

/* Without WPBakery content, Astra pads the article ("Page frame" above does not outrank it),
   which would inset the title bar. */
.ast-single-post .site-main > .ast-article-single:has(.rd-bio) {
    padding: 0;
}

.rd .rd-bio {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    max-width: calc(1040px + 2 * var(--rd-gutter));
    margin: 0 auto;
    padding: 0 var(--rd-gutter);
}
.rd .rd-bio-pic img, .rd .rd-bio-pic .rd-bio-initials {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    padding: 6px;
    background: #fff;
    border: 4px solid var(--gold);
    border-radius: 22px;
    box-shadow: var(--rd-shadow-card);
}
.rd .rd-bio-pic img {
    object-fit: cover;
    object-position: center 20%;
}
.rd .rd-bio-pic .rd-bio-initials {
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--sky), var(--navy)) content-box;
    color: #fff;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: .04em;
}
.rd .rd-bio-text .rd-eyebrow {
    color: var(--sky-deep);
    margin-bottom: 6px;
}
.rd .rd-bio-text h2 {
    --rd-fs: clamp(1.45rem, 2.4vw, 1.9rem);
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: 14px;
}
.rd .rd-bio-text p:not(.rd-eyebrow) {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ink);
}
.rd .rd-bio-text p + p {
    margin-top: 16px;
}
.rd .rd-bio-text p.rd-bio-role {
    margin: -6px 0 2px;
    font-size: 17px;
    font-weight: 600;
    color: var(--slate);
}
.rd .rd-bio-text p.rd-btns {
    margin-top: 28px;
}
@media (max-width: 760px) {
    .rd .rd-bio {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .rd .rd-bio-pic {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
    }
}

/* ---------------------------------------------------------------------------------------
   Course schedule pages (RealEd's /reg/icat.php, shown in WordPress page 1579): the course
   description as a reading card, the filters, month headings, and each class as a card row.
   RealEd's own rules are specific, so some selectors repeat its element names to outrank
   them.  At 40em and up RealEd lays the rows out as table rows; below that, as stacked cards.
   ------------------------------------------------------------------------------------- */

.page-id-1579 .realed-field-dsc {
    display: block;
    max-width: 880px;
    margin: 8px auto 0;
    padding: 26px 32px;
    background: var(--sky-tint);
    border-left: 4px solid var(--gold);
    border-radius: 0 18px 18px 0;
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ink);
}
.page-id-1579 .realed-section-icat-crs > p {
    text-align: center;
    font-size: 15px;
    margin-top: 26px;
}
.page-id-1579 .realed-section.realed-section-icat-cls {
    max-width: 1040px;
    margin: 18px auto 0;
}
.page-id-1579 :is(.realed-icat-filtst, .realed-icat-filtloc, .realed-icat-filtinst) {
    margin: 0 18px 14px 0;
}
.page-id-1579 :is(.realed-icat-filtst, .realed-icat-filtloc, .realed-icat-filtinst) label {
    display: block;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--slate);
}
.page-id-1579 :is(.realed-icat-filtst, .realed-icat-filtloc, .realed-icat-filtinst) select {
    padding: 8px 36px 8px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
}
/* Month headings */
.page-id-1579 div.realed-result-tr.realed-resultgrp {
    margin-top: 26px;
    border-bottom: 2px solid var(--gold);
}
.page-id-1579 div.realed-result-tr.realed-resultgrp div.realed-result-td {
    padding: 12px 0 6px;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
}
/* Each class */
.page-id-1579 .realed-result-tr:not(.realed-resultgrp) {
    margin: 12px 0;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #D6E1E8;
    border-radius: 14px;
    box-shadow: var(--rd-shadow-card);
}
.page-id-1579 .realed-result-tr:not(.realed-resultgrp) .realed-result-pair {
    vertical-align: middle;
}
.page-id-1579 .realed-result-pair-dates .realed-result-td span {
    font-weight: 700;
    color: var(--navy);
}
.page-id-1579 .realed-result-pair-add .button {
    padding: 10px 24px;
    background: var(--gold);
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}
.page-id-1579 .realed-result-pair-add .button:hover {
    background: var(--navy);
    color: #fff;
}
/* Stacked cards on phones: the label and value cells float, so the card contains them */
@media (max-width: 39.99em) {
    .page-id-1579 div.realed-result-tr:not(.realed-resultgrp) {
        display: flow-root;
    }
}

/* ---------------------------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .rd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .rd-grid-3, .rd-grid-2, .rd-split, .rd-book, .rd-media { grid-template-columns: 1fr; }
    .rd .rd-press { grid-template-columns: minmax(0, 1fr); }
    .rd .rd-checks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-split { gap: 24px; }
    .rd-book { text-align: center; }
    .rd-buy { justify-content: center; }
    .rd-head { margin-bottom: 26px; }
}
@media (max-width: 560px) {
    .rd-grid-4 { grid-template-columns: 1fr; }
    .rd-btn { white-space: normal; text-align: center; }
    .rd .rd-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .rd-logo-grid .rd-logo { height: 100px; padding: 12px 14px; }
    .rd-logo-grid .rd-logo img { max-height: 76px; }
    .rd .rd-checks { grid-template-columns: max-content; }
    .rd .rd-checks-grid { grid-template-columns: 1fr; }
    .rd .vc_toggle .vc_toggle_content { padding: 0 16px 18px 20px; }
    .rd-people .vc_grid.vc_row .vc_grid-item { width: 50%; float: left; padding: 0 12px 12px 0; }
    .rd-people .vc_grid.vc_row .vc_pageable-slide-wrapper { margin-right: -12px; }
    .rd-people .vc_grid.vc_row { margin-bottom: -12px; }
    .rd-people .vc_gitem-post-data .vc_gitem-link { font-size: 15px; }
    .rd .rd-grid:has(.rd-person) { gap: 20px; }
    .rd-head-lines h2 { gap: 14px; }
    .rd-acc-body { padding: 0 16px 18px 20px; }
    .rd-form-head { flex-direction: column; gap: 4px; padding: 12px 18px 16px; text-align: center; }
    .rd .rd-form-head p { font-size: 16.5px; }
    .rd-form-body { padding: 20px 18px 24px; }
    .rd-steps-detail > li { padding: 70px 18px 20px; }
    .rd-steps-detail > li::before { left: 18px; top: 20px; }
    .entry-content .gform_confirmation_message:not(.rd-form-body *) {
        padding: 74px 20px 24px; font-size: 18px; text-align: center;
    }
    .entry-content .gform_confirmation_message:not(.rd-form-body *)::before {
        left: 50%; top: 18px; transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .rd-post { transition: none; }
}