/* ==========================================================================
   CDG homepage + navigation redesign
   Design language ported from the Downey Dental Arts concept
   (C:\Projects\CDG\dentistdowney-concept). Colours, type and layout are
   deliberately shared across offices; logo, NAP and copy are per-office.

   Everything is namespaced under .rd- so it cannot collide with the existing
   compiled style.min.css. Do not edit style/*.scss for these rules.
   ========================================================================== */

.rd,
.rd-nav,
.rd-main {
    --rd-navy: #1b2c65;
    --rd-navy-deep: #101a3e;
    --rd-navy-mid: #16233f;
    --rd-cyan: #5bc9e1;
    --rd-cyan-dark: #0f7f9c;
    --rd-lime: #b3d335;
    --rd-ink: #1b2333;
    --rd-body: #45506a;
    --rd-muted: #5c6679;
    --rd-line: #e6ecf3;
    --rd-line-soft: #dfe6ee;
    --rd-tint: #f6f9fc;
    --rd-tint-cyan: #eef8fb;
    --rd-on-navy: #d3dcf0;
    --rd-font-head: "Outfit", "Segoe UI Semibold", system-ui, sans-serif;
    --rd-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --rd-max: 1440px;
    --rd-gut: 56px;
}

/* ---------- resets scoped to the redesigned areas ---------- */
.rd-main,
.rd-nav {
    font-family: var(--rd-font-body);
    color: var(--rd-ink);
    box-sizing: border-box;
}

.rd-main *,
.rd-nav * {
    box-sizing: border-box;
}

.rd-main h1,
.rd-main h2,
.rd-main h3,
.rd-main h4 {
    font-family: var(--rd-font-head);
    margin: 0;
    letter-spacing: -0.015em;
    text-wrap: balance;
    line-height: 1.15;
}

.rd-main p {
    margin: 0;
    text-wrap: pretty;
}

.rd-main ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rd-main img {
    max-width: 100%;
}

/* style.min.css puts margin on bare <section>; that margin lands on the hero and,
   because the bar is absolutely positioned above it, showed as a white strip
   across the top of the page. Every section in here spaces itself with padding. */
.rd-main section {
    margin: 0;
}

.rd-wrap {
    max-width: var(--rd-max);
    margin: 0 auto;
    padding: 0 var(--rd-gut);
}

/* ==========================================================================
   NAVIGATION — one bar, sitting on the hero image
   ========================================================================== */
/* Default: a solid navy bar. This is what every interior page gets, and it is
   why the white logo and white labels stay legible off the homepage. */
.rd-nav {
    position: relative;
    z-index: 60;
    background: var(--rd-navy-deep);
}

/* Homepage (and the hub pages): the bar lifts off and sits on the hero image,
   which is the Downey concept's arrangement. The hero pads itself to clear it. */
.rd-home .rd-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}

.rd-home .rd-hero__body {
    padding-top: 150px;
}

/* Interior pages: style.min.css pushes the banner down to clear the old, taller
   header — .section-top by ~200px, and .section-banner by another ~110px on
   Oxnard / Santa Barbara. The new bar sits in the page flow, so that offset showed
   as a white gap under it on every interior page. Scoped to "comes after the new
   nav" so the landing pages, which keep their own header, are untouched; the
   doubled class beats .section-top.section-blog on the blog pages too. */
/* !important because Long Beach's tablet/laptop rules are !important themselves:
   .section-banner 280px (<=1300) / 170px (<=1000) and .section-top 305px. At (0,2,0)
   this outranks those (0,1,0) !important rules at every width. */
.rd-nav ~ .section-top,
.rd-nav ~ .section-top.section-blog,
.rd-nav ~ .section-banner {
    margin-top: 0 !important;
}

/* Phones: Long Beach hides the banner section (.section-top{display:none} <=650px)
   and pushed the banner label down 170px to clear the old FIXED header. With the new
   bar in the page flow that became a 170px white gap under it. The banner stays
   hidden; the label now sits directly under the bar. */
@media (max-width: 650px) {
    .rd-nav ~ .section-banner-cta {
        margin-top: 0;
    }
}

/* Legal pages (privacy / terms / sitemap on Long Beach + Oxnard) have no banner, and
   .policy-terms carried 300px — 400px at <=1300, 220px at <=1000 — to clear the old
   header. They get an ordinary content gap instead; (0,2,0) beats every one of
   those breakpoint rules regardless of media query. */
.rd-nav ~ .policy-terms {
    margin-top: 48px;
}

/* Blog index pages set style="margin-top:250px" inline on .container-blog to clear
   the old header. Only !important outranks an inline style; scoped to "after the
   new nav" so it cannot reach anything else. */
.rd-nav ~ .container-blog {
    margin-top: 48px !important;
}

.rd-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--rd-max);
    margin: 0 auto;
    padding: 0 var(--rd-gut);
    height: 96px;
}

.rd-nav__logo {
    flex-shrink: 0;
}

.rd-nav__logo img,
.rd-nav__logo svg {
    height: 46px;
    width: auto;
    display: block;
}

.rd-nav__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rd-nav__items {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Items are static so each panel's containing block is the whole bar (.rd-nav),
   not the one narrow item: every menu opens as a full-width panel under the bar,
   as in the Downey concept. Being position:relative is what squeezed the Dental
   Services panel into a ~130px column (found 2026-09-11). */
.rd-nav__item {
    position: static;
}

/* The wrapper is no longer a <nav>, so the old "nav ul" rules that happened to
   strip browser list styling are gone: without this every li shows a default
   bullet (the stray dots in the bar and the circles in the panels) and each ul
   gets a 40px indent. :where() keeps it at element specificity, so every class
   rule in this file still wins. */
:where(.rd-nav) :is(ul, li) {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Desktop hover bridge. Panels open at the bar's bottom edge (96px) but each link is
   vertically centred, ~30px above that. Hover only lasts while the pointer is over the
   item or its panel, so that strip closed the menu on the way down to it (reported
   2026-09-11). Stretching each item to the full bar height makes item and panel touch;
   the link itself stays centred. Desktop only — the mobile drawer is a vertical list. */
@media (min-width: 1301px) {
    .rd-nav__right,
    .rd-nav__items {
        align-self: stretch;
    }

    .rd-nav__items {
        align-items: stretch;
    }

    .rd-nav__item {
        display: flex;
        align-items: center;
    }
}

.rd-nav__link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--rd-font-head);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease;
}

.rd-nav__link:hover,
.rd-nav__link:focus-visible,
.rd-nav__item[data-open="true"] > .rd-nav__link {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    text-decoration: none;
}

.rd-nav__caret {
    transition: transform 0.18s ease;
}

.rd-nav__item[data-open="true"] .rd-nav__caret {
    transform: rotate(180deg);
}

.rd-nav__phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    font-family: var(--rd-font-head);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.rd-nav__phone:hover {
    color: var(--rd-cyan);
    text-decoration: none;
}

.rd-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 20px;
    border-radius: 6px;
    background: var(--rd-cyan);
    color: var(--rd-navy-deep);
    font-family: var(--rd-font-head);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.rd-nav__cta:hover {
    background: #fff;
    color: var(--rd-navy-deep);
    text-decoration: none;
}

/* ---------- mega menu ---------- */
.rd-mega {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 96px;
    z-index: 40;
    background: #fff;
    border-bottom: 4px solid var(--rd-cyan);
    box-shadow: 0 24px 48px rgba(8, 16, 40, 0.34);
}

.rd-nav__item[data-open="true"] .rd-mega {
    display: block;
}

/* desktop: hover opens too, so the menu works with JS disabled */
@media (min-width: 1301px) {
    .rd-nav__item:hover .rd-mega,
    .rd-nav__item:focus-within .rd-mega {
        display: block;
    }
}

.rd-mega__inner {
    max-width: var(--rd-max);
    margin: 0 auto;
    padding: 32px var(--rd-gut) 36px;
}

.rd-mega__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--rd-line);
}

.rd-mega__hub {
    font-family: var(--rd-font-head);
    font-size: 21px;
    font-weight: 700;
    color: var(--rd-navy);
    text-decoration: none;
}

.rd-mega__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--rd-cyan-dark);
}

.rd-mega__cols {
    display: grid;
    grid-template-columns: repeat(var(--rd-cols, 4), minmax(0, 1fr));
    gap: 30px;
    padding-top: 25px;
}

.rd-mega__cat {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 18px;
}

.rd-mega__cat-title {
    font-family: var(--rd-font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--rd-navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.rd-mega__list li {
    margin-bottom: 7px;
}

.rd-mega__list a {
    font-size: 14.5px;
    color: var(--rd-body);
    text-decoration: none;
}

.rd-mega__list a:hover,
.rd-mega__cat-title:hover {
    color: var(--rd-cyan-dark);
    text-decoration: underline;
}

/* Long Beach's scripts.php tags links to the current page with
   .current{color:#5bc9e1 !important}. In the navy bar that reads as "you are
   here"; on the white panel that cyan is too pale, so use the darker one. */
.rd-mega a.current {
    color: var(--rd-cyan-dark) !important;
}

/* Single-page entries (Emergency, Sedation; the doctor / technology / glossary links)
   share the heading style of categories that have lists under them, so they read as
   empty sections. An arrow, plus the existing hover underline, marks them as links. */
.rd-mega__cat-title--link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rd-mega__arrow {
    color: var(--rd-cyan-dark);
    font-weight: 700;
    transition: transform 0.15s ease;
}

.rd-mega__cat-title--link:hover .rd-mega__arrow,
.rd-mega__cat-title--link:focus-visible .rd-mega__arrow {
    transform: translateX(3px);
}

/* ---------- mobile nav ---------- */
.rd-nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.14);
    cursor: pointer;
}

.rd-nav__toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
}

.rd-nav__toggle span::before,
.rd-nav__toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: #fff;
}

.rd-nav__toggle span::before {
    top: -6px;
}

.rd-nav__toggle span::after {
    top: 6px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.rd-hero {
    position: relative;
    background-color: var(--rd-navy-deep);
    background-size: cover;
    background-position: 50% 32%;
}

.rd-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 26, 62, 0.95) 0%, rgba(16, 26, 62, 0.88) 32%, rgba(16, 26, 62, 0.60) 62%, rgba(16, 26, 62, 0.32) 100%);
}

.rd-hero__body {
    position: relative;
    z-index: 10;
    max-width: var(--rd-max);
    margin: 0 auto;
    padding: 54px var(--rd-gut) 64px;
}

.rd-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 720px;
}

.rd-hero h1 {
    font-size: 60px;
    line-height: 1.02;
    font-weight: 800;
    color: #fff;
}

.rd-hero h1 span {
    color: var(--rd-cyan);
}

.rd-hero__lede {
    font-size: 17.5px;
    line-height: 1.66;
    color: var(--rd-on-navy);
    max-width: 560px;
}

.rd-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 4px;
}

.rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 28px;
    border-radius: 6px;
    font-family: var(--rd-font-head);
    font-size: 16.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 0;
}

.rd-btn--primary {
    background: var(--rd-cyan);
    color: var(--rd-navy-deep);
}

.rd-btn--primary:hover {
    background: #fff;
    color: var(--rd-navy-deep);
    text-decoration: none;
}

.rd-btn--ghost {
    border: 2px solid rgba(255, 255, 255, 0.72);
    color: #fff;
    background: transparent;
}

.rd-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

.rd-btn--solid {
    background: var(--rd-navy);
    color: #fff;
}

.rd-btn--solid:hover {
    background: var(--rd-cyan-dark);
    color: #fff;
    text-decoration: none;
}

.rd-hero__trust {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 26px;
    padding-top: 22px;
}

.rd-hero__trust-item {
    display: flex;
    align-items: center;
    gap: 26px;
}

.rd-hero__trust-item span.rd-rule {
    display: block;
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.35);
}

.rd-hero__trust-item span.rd-lbl {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.42;
    color: #fff;
    max-width: 190px;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.rd-section {
    padding: 64px 0 66px;
}

.rd-section--tint {
    background: var(--rd-tint);
}

/* the short intro paragraph directly under the hero shouldn't get a full band */
.rd-section--intro {
    padding: 44px 0 10px;
}

.rd-section--navy {
    background: var(--rd-navy);
}

.rd-section__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 28px;
}

.rd-section__head h2 {
    font-size: 34px;
    font-weight: 700;
    color: var(--rd-navy);
}

.rd-section--navy .rd-section__head h2 {
    color: #fff;
}

.rd-section__head p {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--rd-muted);
    max-width: 760px;
}

.rd-section--navy .rd-section__head p {
    color: var(--rd-on-navy);
}

.rd-prose p {
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--rd-body);
    max-width: 820px;
    margin-bottom: 16px;
}

.rd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 12px;
}

/* ---------- service cards ---------- */
.rd-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.rd-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px 28px;
    border: 1px solid var(--rd-line);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.rd-card:hover {
    border-color: var(--rd-cyan);
    box-shadow: 0 14px 30px rgba(16, 26, 62, 0.10);
    transform: translateY(-2px);
    text-decoration: none;
}

.rd-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--rd-navy);
}

.rd-card p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--rd-muted);
}

.rd-card__more {
    margin-top: auto;
    padding-top: 8px;
    font-family: var(--rd-font-head);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--rd-cyan-dark);
}

.rd-card--hub {
    background: var(--rd-navy);
    border-color: var(--rd-navy);
}

.rd-card--hub h3 {
    color: #fff;
}

.rd-card--hub p {
    color: var(--rd-on-navy);
}

.rd-card--hub .rd-card__more {
    color: var(--rd-cyan);
}

/* ---------- doctor ---------- */
.rd-doctor {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.rd-doctor__photo img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.rd-doctor__copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rd-doctor__copy h2 {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
}

.rd-doctor__copy p {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--rd-on-navy);
}

/* ---------- why-choose / feature grid ---------- */
.rd-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.rd-features--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rd-feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 3px solid var(--rd-cyan);
}

.rd-feature h3 {
    font-size: 17.5px;
    font-weight: 700;
    color: var(--rd-navy);
    line-height: 1.3;
}

.rd-feature p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--rd-muted);
}

/* ---------- areas served ---------- */
.rd-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 6px;
}

.rd-areas a {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--rd-line-soft);
    background: #fff;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--rd-navy);
    text-decoration: none;
}

.rd-areas a:hover {
    border-color: var(--rd-cyan);
    background: var(--rd-tint-cyan);
    text-decoration: none;
}

/* ---------- closing CTA ---------- */
.rd-cta-band {
    background: var(--rd-navy-deep);
    padding: 54px 0 56px;
}

.rd-cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 26px;
    max-width: var(--rd-max);
    margin: 0 auto;
    padding: 0 var(--rd-gut);
}

.rd-cta-band h2 {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    max-width: 640px;
}

.rd-cta-band p {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--rd-on-navy);
    max-width: 640px;
    margin-top: 10px;
}

/* ---------- placeholder slot (reviews / blog feeds) ---------- */
.rd-slot {
    padding: 28px;
    border: 1px dashed var(--rd-line-soft);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    color: var(--rd-muted);
}

/* ==========================================================================
   SERVICE PAGES — client copy dropped into the existing templates.
   These pages sit outside .rd-main, so no custom properties here: literal
   colours only, and selectors specific enough to beat style.min.css.
   ========================================================================== */
.rd-svc-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 26px 0 8px;
}

.flex-split-content .rd-svc-cta,
.rd-items + .rd-svc-cta {
    justify-content: flex-start;
}

/* Transparent outlined button, the sites' own footer "BOOK AN APPOINTMENT" style (Aaron,
   2026-09-11: "They need to be transparent buttons like the ones in the footer"). */
.rd-svc-cta a.rd-svc-btn,
.rd-svc-cta a.rd-svc-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 36px;
    border: 2px solid #1b2c65;
    border-radius: 0;
    background: transparent;
    color: #1b2c65;
    font-family: dienstag, "Outfit", "Segoe UI Semibold", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

.rd-svc-cta a.rd-svc-btn:hover,
.rd-svc-cta a.rd-svc-btn:focus-visible {
    background: #1b2c65;
    color: #fff;
    text-decoration: none;
}

/* FAQ answers and feature lists read left-aligned even inside centred containers */
.rd-faq,
.rd-items {
    text-align: left;
    max-width: 900px;
    margin: 0 auto;
}

.rd-faq h3.subheading-section,
.rd-items h3.subheading-section {
    margin-top: 26px;
}

/* Overflow grid: list items that do not fit beside a section's photo continue full-width
   as cards, so a photo is never stretched down the side of a long list (2026-09-11). */
.rd-svc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 30px;
    max-width: 1100px;
    margin: 6px auto 0;
    text-align: left;
}

.rd-svc-card {
    padding: 22px 26px 24px;
    border: 1px solid #e6ecf3;
    border-radius: 10px;
    background: #fff;
}

.rd-svc-card h3.subheading-section {
    margin-top: 0;
}

.rd-svc-grid > .rd-svc-card:only-child,
.rd-svc-grid > .rd-svc-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .rd-svc-grid {
        grid-template-columns: 1fr;
    }
}

/* FAQ accordions (Aaron, 2026-09-11: "FAQs should be accordions"). Native <details>, so no
   script and the answers stay in the page for search engines; the question keeps its H3.
   Styled after the sites' own FAQ accordions: cyan bar, white question, answer below.
   Used on the service pages (site CSS context) and the hub pages (.rd-main), so literal
   colours and selectors strong enough for both. */
.rd-acc-list {
    max-width: 900px;
    margin: 12px auto 0;
    text-align: left;
}

.rd-acc {
    margin: 0 0 12px;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.rd-acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 22px;
    background: #5bc9e1;
    cursor: pointer;
    list-style: none;
}

.rd-acc > summary::-webkit-details-marker {
    display: none;
}

.rd-acc > summary::after {
    content: "+";
    flex-shrink: 0;
    color: #fff;
    font-family: "Outfit", "Segoe UI Semibold", system-ui, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.rd-acc[open] > summary::after {
    content: "–";
}

.rd-acc > summary:hover {
    background: #4bb9d2;
}

.rd-acc > summary:focus-visible {
    outline: 3px solid #1b2c65;
    outline-offset: -3px;
}

.rd-acc > summary h3.rd-acc__q {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: dienstag, "Outfit", "Segoe UI Semibold", system-ui, sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
}

.rd-acc__a {
    padding: 18px 22px 4px;
}

.rd-acc__a p {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.65;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Nav fit (2026-09-11): nine items (919px) + logo + phone need ~1300px. At 1440 and below
   the phone shows as its icon and the bar gutters tighten; at 1300 and below the bar
   collapses to the hamburger drawer (previously 900, which squashed the logo to 37px at
   1280 and pushed the items off-screen between 901 and ~1180). */
@media (max-width: 1440px) {
    .rd-nav__phone span {
        display: none;
    }

    .rd-nav__bar {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 1300px) {
    /* collapsed bar: logo left; phone icon, then the menu button, at the right edge
       (the toggle sat mid-bar between them), as in the concept's mobile header */
    .rd-nav__toggle {
        display: inline-flex;
        order: 3;
        flex-shrink: 0;
    }

    .rd-nav__right {
        order: 2;
        margin-left: auto;
    }

    .rd-nav__items {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 84px;
        z-index: 50;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 4px solid var(--rd-cyan);
        box-shadow: 0 24px 48px rgba(8, 16, 40, 0.34);
        padding: 8px 0 14px;
        max-height: 72vh;
        overflow-y: auto;
    }

    .rd-nav[data-mobile-open="true"] .rd-nav__items {
        display: flex;
    }

    .rd-nav__bar {
        height: 84px;
    }

    .rd-nav__link {
        justify-content: space-between;
        color: var(--rd-navy);
        font-size: 16px;
        font-weight: 600;
        padding: 13px 40px;
        border-radius: 0;
    }

    .rd-nav__link:hover,
    .rd-nav__item[data-open="true"] > .rd-nav__link {
        background: var(--rd-tint);
        color: var(--rd-navy);
    }

    .rd-mega {
        position: static;
        box-shadow: none;
        border-bottom: 0;
        background: var(--rd-tint);
    }

    .rd-mega__inner {
        padding: 14px 40px 18px;
    }

    .rd-mega__cols {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: 16px;
    }

    .rd-nav__phone span {
        display: none;
    }
}

@media (max-width: 900px) {
    .rd-nav__bar {
        padding-left: var(--rd-gut);
        padding-right: var(--rd-gut);
    }

    .rd-nav__link {
        padding: 13px var(--rd-gut);
    }

    .rd-mega__inner {
        padding: 14px var(--rd-gut) 18px;
    }
}

@media (max-width: 1100px) {
    .rd-mega__cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rd-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rd-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rd-doctor {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 32px;
    }

    .rd-hero h1 {
        font-size: 46px;
    }
}

@media (max-width: 900px) {
    .rd,
    .rd-nav,
    .rd-main {
        --rd-gut: 22px;
    }


    .rd-hero h1 {
        font-size: 36px;
    }

    .rd-hero__body {
        padding: 34px var(--rd-gut) 44px;
    }

    .rd-home .rd-hero__body {
        padding-top: 118px;
    }

    .rd-cards,
    .rd-features,
    .rd-features--3 {
        grid-template-columns: 1fr;
    }

    .rd-doctor {
        grid-template-columns: 1fr;
    }

    .rd-doctor__photo {
        max-width: 320px;
    }

    .rd-section {
        padding: 44px 0 46px;
    }

    .rd-section__head h2 {
        font-size: 27px;
    }

    .rd-btn {
        height: 52px;
        padding: 0 22px;
        font-size: 15.5px;
    }
}

@media (max-width: 520px) {
    .rd-hero__actions .rd-btn {
        width: 100%;
    }

    .rd-hero__trust {
        flex-direction: column;
        gap: 12px;
    }

    .rd-hero__trust-item span.rd-rule {
        display: none;
    }
}

/* ==========================================================================
   HOMEPAGE, concept pass 2 (Aaron, 2026-09-11: the Long Beach homepage "doesn't follow
   the new design completely"). Section for section with the concept's Main.dc.html and
   Mobile.dc.html. New class names, so the hub pages (which share .rd-card / .rd-feature)
   are untouched.
   ========================================================================== */
.rd-hero h1 span {
    color: var(--rd-lime);
}

ul.rd-hero__trust {
    margin: 0;
    padding: 22px 0 0;
    list-style: none;
}

.rd-hero__trust-item:first-child span.rd-rule {
    display: none;
}

.rd-hero__check {
    display: none;
    flex-shrink: 0;
    color: var(--rd-lime);
}

.rd-btn svg {
    flex-shrink: 0;
}

.rd-btn--sm {
    height: 50px;
    padding: 0 26px;
    font-size: 15.5px;
}

.rd-btn--lime {
    background: var(--rd-lime);
    color: var(--rd-navy-mid);
}

.rd-btn--lime:hover {
    background: #fff;
    color: var(--rd-navy-mid);
    text-decoration: none;
}

.rd-btn--outline-light {
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #fff;
}

.rd-btn--outline-light:hover {
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

/* ---------- services: five cards + the dark hub card ---------- */
.rd-home-services .rd-section__head p {
    max-width: 760px;
}

.rd-svc-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.rd-svc-card {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 28px 26px 30px;
    border: 1px solid var(--rd-line-soft);
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rd-svc-card:hover {
    border-color: var(--rd-cyan);
    box-shadow: 0 14px 30px rgba(16, 26, 62, 0.10);
    text-decoration: none;
}

.rd-svc-card__icon,
.rd-svc-card__chev {
    display: block;
    line-height: 0;
    color: var(--rd-cyan-dark);
}

.rd-svc-card__chev {
    display: none;
    flex-shrink: 0;
}

.rd-svc-card__text {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.rd-svc-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--rd-navy);
}

.rd-svc-card p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--rd-muted);
}

.rd-svc-card--hub {
    justify-content: space-between;
    background: var(--rd-navy);
    border-color: var(--rd-navy);
}

.rd-svc-card--hub:hover {
    border-color: var(--rd-lime);
}

.rd-svc-card--hub .rd-svc-card__icon,
.rd-svc-card__more {
    color: var(--rd-lime);
}

.rd-svc-card--hub h3 {
    color: #fff;
}

.rd-svc-card--hub p {
    color: #b6c4e2;
}

.rd-svc-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rd-font-head);
    font-size: 15px;
    font-weight: 700;
}

/* ---------- meet the doctor ---------- */
.rd-doc__grid {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.rd-doc__photo {
    overflow: hidden;
    border-radius: 10px;
    background: var(--rd-tint-cyan);
    line-height: 0;
}

.rd-doc__photo img {
    display: block;
    width: 100%;
    height: auto;
}

.rd-doc__copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rd-main p.rd-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rd-font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rd-cyan);
}

.rd-eyebrow::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    background: var(--rd-lime);
}

.rd-doc__copy h2 {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
}

.rd-doc__copy > p:not(.rd-eyebrow) {
    max-width: 700px;
    font-size: 16.5px;
    line-height: 1.66;
    color: #c6d1e8;
}

.rd-creds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    padding-top: 8px;
}

.rd-creds li {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    border-left: 3px solid var(--rd-cyan);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.rd-creds b {
    font-family: var(--rd-font-head);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.rd-creds span {
    font-size: 13.5px;
    line-height: 1.45;
    color: #a9b8d6;
}

.rd-doc .rd-actions {
    padding-top: 10px;
}

/* ---------- why choose us: tinted cards with a tick ---------- */
.rd-why__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.rd-why__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rd-why__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 28px;
    border-radius: 8px;
    background: var(--rd-tint-cyan);
}

.rd-why__tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--rd-cyan-dark);
}

.rd-why__card h3 {
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rd-navy);
}

.rd-why__card p {
    font-size: 14.5px;
    line-height: 1.56;
    color: var(--rd-muted);
}

/* ---------- doc sections the concept has no slot for: heading left, copy right ---------- */
.rd-split__grid,
.rd-hfaq__grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.rd-split__head h2,
.rd-hfaq__intro h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.16;
    color: var(--rd-navy);
}

.rd-split__body p {
    max-width: 760px;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--rd-body);
}

.rd-split__body p + p {
    margin-top: 14px;
}

.rd-split__body .rd-actions {
    padding-top: 22px;
}

.rd-split__body .rd-slot {
    margin-top: 16px;
}

/* ---------- areas served card ---------- */
.rd-areas-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 34px 36px 36px;
    border: 1px solid var(--rd-line-soft);
    border-radius: 10px;
    background: #fff;
}

.rd-areas-card h2 {
    font-size: 27px;
    font-weight: 700;
    color: var(--rd-navy);
}

.rd-areas--pins {
    padding-top: 0;
    gap: 9px;
}

.rd-areas--pins a {
    gap: 8px;
    height: auto;
    padding: 10px 17px;
    background: var(--rd-tint);
    border-color: var(--rd-line-soft);
}

.rd-areas--pins svg {
    flex-shrink: 0;
    color: var(--rd-cyan);
}

/* ---------- common questions ---------- */
.rd-hfaq__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.rd-hfaq__intro p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--rd-muted);
}

.rd-hfaq__intro .rd-btn {
    margin-top: 6px;
}

.rd-hfaq__intro .rd-btn svg {
    color: var(--rd-cyan);
}

.rd-hfaq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rd-hfaq__item {
    border: 1px solid var(--rd-line);
    border-radius: 8px;
    background: #fff;
}

.rd-hfaq__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
}

.rd-hfaq__item > summary::-webkit-details-marker {
    display: none;
}

.rd-hfaq__item > summary h3 {
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.32;
    color: var(--rd-navy);
}

.rd-hfaq__item > summary::after {
    content: "+";
    flex-shrink: 0;
    font-family: var(--rd-font-head);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    color: var(--rd-cyan-dark);
}

.rd-hfaq__item[open] > summary::after {
    content: "\2013";
}

.rd-hfaq__item > summary:focus-visible {
    outline: 3px solid var(--rd-cyan);
    outline-offset: 2px;
    border-radius: 8px;
}

.rd-hfaq__a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0 26px 22px;
}

.rd-hfaq__a p {
    font-size: 15px;
    line-height: 1.62;
    color: var(--rd-body);
}

.rd-hfaq__more {
    font-family: var(--rd-font-head);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--rd-cyan-dark);
    text-decoration: none;
}

/* ---------- homepage footer (shared/footer-rd.php) — outside .rd-main ---------- */
.rd-foot {
    background: var(--rd-navy-mid);
    font-family: var(--rd-font-body);
    color: #9aa8c6;
    text-align: left;
}

.rd-foot * {
    box-sizing: border-box;
}

:where(.rd-foot) :is(ul, li) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rd-foot p {
    margin: 0;
}

.rd-foot a {
    text-decoration: none;
}

.rd-foot__inner {
    max-width: var(--rd-max);
    margin: 0 auto;
    padding: 54px var(--rd-gut) 0;
}

.rd-foot__grid {
    display: grid;
    grid-template-columns: 300px repeat(var(--rd-foot-cols, 4), minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 40px;
}

.rd-foot__brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rd-foot__brand img {
    align-self: flex-start;
    width: auto;
    height: 58px;
}

.rd-foot__addr,
.rd-foot__hours li {
    font-size: 14.5px;
    line-height: 1.6;
    color: #9aa8c6;
}

.rd-foot a.rd-foot__phone {
    font-family: var(--rd-font-head);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
}

.rd-foot a.rd-foot__phone:hover {
    color: var(--rd-cyan);
}

.rd-foot p.rd-foot__es {
    font-family: var(--rd-font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-lime);
}

.rd-foot__social {
    display: flex;
    gap: 12px;
    padding-top: 4px;
}

.rd-foot__social img {
    display: block;
    width: 28px;
    height: 28px;
}

.rd-foot__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rd-foot__title {
    font-family: var(--rd-font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rd-cyan);
}

.rd-foot__col ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rd-foot__col a,
.rd-foot__col a:visited {
    font-size: 14px;
    line-height: 1.4;
    color: #9aa8c6;
}

.rd-foot__col a:hover,
.rd-foot__links a:hover {
    color: #fff;
    text-decoration: underline;
}

.rd-foot p.rd-foot__legal {
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12.5px;
    line-height: 1.5;
    color: #7f8db0;
}

.rd-foot__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 18px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    color: #7f8db0;
}

.rd-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.rd-foot__links a,
.rd-foot__links a:visited {
    font-size: 13px;
    color: #7f8db0;
}

.rd-mbar {
    display: none;
}

@media (max-width: 1100px) {
    .rd-svc-cards,
    .rd-why__grid,
    .rd-why__grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rd-doc__grid {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 36px;
    }

    .rd-split__grid,
    .rd-hfaq__grid {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 36px;
    }

    .rd-foot__grid {
        grid-template-columns: repeat(var(--rd-foot-cols, 4), minmax(0, 1fr));
    }

    .rd-foot__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    ul.rd-hero__trust {
        flex-direction: column;
        gap: 9px;
        padding-top: 12px;
    }

    .rd-hero__trust-item {
        gap: 9px;
    }

    .rd-hero__trust-item span.rd-rule {
        display: none;
    }

    .rd-hero__check {
        display: block;
    }

    .rd-hero__trust-item span.rd-lbl {
        max-width: none;
        font-size: 14px;
    }

    .rd-svc-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rd-svc-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 17px 18px;
        border-left: 4px solid var(--rd-cyan);
        border-radius: 8px;
    }

    .rd-svc-card__icon {
        display: none;
    }

    .rd-svc-card__chev {
        display: block;
    }

    .rd-svc-card__text {
        gap: 3px;
    }

    .rd-svc-card h3 {
        font-size: 16.5px;
    }

    .rd-svc-card p {
        font-size: 13.5px;
        line-height: 1.45;
    }

    .rd-svc-card--hub {
        justify-content: center;
        min-height: 52px;
        padding: 0 18px;
        border: 0;
        border-radius: 6px;
        background: var(--rd-tint-cyan);
    }

    .rd-svc-card--hub .rd-svc-card__icon,
    .rd-svc-card--hub .rd-svc-card__text {
        display: none;
    }

    .rd-svc-card--hub .rd-svc-card__more {
        color: var(--rd-cyan-dark);
    }

    .rd-doc__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .rd-doc__photo {
        width: 148px;
    }

    .rd-doc__copy {
        gap: 14px;
    }

    .rd-doc__copy h2 {
        font-size: 23px;
    }

    .rd-doc__copy > p:not(.rd-eyebrow) {
        font-size: 15px;
    }

    .rd-creds {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rd-doc .rd-actions .rd-btn {
        width: 100%;
    }

    .rd-why__grid,
    .rd-why__grid--3 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rd-split__grid,
    .rd-hfaq__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .rd-split__head h2,
    .rd-hfaq__intro h2 {
        font-size: 23px;
    }

    .rd-areas-card {
        padding: 22px 20px 24px;
    }

    .rd-areas-card h2 {
        font-size: 21px;
    }

    .rd-hfaq__item > summary {
        padding: 17px 18px;
    }

    .rd-hfaq__item > summary h3 {
        font-size: 15.5px;
    }

    .rd-hfaq__a {
        padding: 0 18px 17px;
    }

    .rd-hfaq__a p {
        font-size: 14px;
    }

    .rd-foot__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .rd-mbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 3px solid var(--rd-lime);
        background: var(--rd-navy-mid);
    }

    .rd-mbar a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        border-radius: 6px;
        font-family: var(--rd-font-head);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    .rd-mbar a.rd-mbar__call {
        border: 2px solid rgba(255, 255, 255, 0.35);
        color: #fff;
    }

    .rd-mbar a.rd-mbar__book {
        background: var(--rd-lime);
        color: var(--rd-navy-mid);
    }

    body.rd-index {
        padding-bottom: 80px;
    }
}

@media (max-width: 520px) {
    /* link labels are short: two columns keep the footer from running a full screen long */
    .rd-foot__grid {
        gap: 26px 16px;
    }
}

/* ==========================================================================
   HOMEPAGE TYPE FLOOR (Aaron, 2026-09-11: "fonts need to be at least 20px").
   Every piece of homepage text (main, footer-rd, phone bar) is 20px or larger at every
   width; headings step up to keep the hierarchy. Scoped to body.rd-index, the homepage
   only, and specific enough (body + class) to beat the per-breakpoint sizes above
   without being repeated inside each media query. The shared nav is not covered.
   ========================================================================== */
body.rd-index .rd-hero h1 { font-size: 64px; }
body.rd-index .rd-hero__lede { font-size: 21px; max-width: 640px; }
body.rd-index .rd-hero__trust-item span.rd-lbl { font-size: 20px; max-width: 250px; }
body.rd-index .rd-main .rd-btn,
body.rd-index .rd-main .rd-btn--sm { height: 60px; padding: 0 30px; font-size: 20px; }

body.rd-index .rd-section__head h2 { font-size: 40px; }
body.rd-index .rd-section__head p { font-size: 20px; line-height: 1.6; }

body.rd-index .rd-svc-card h3 { font-size: 24px; }
body.rd-index .rd-svc-card p,
body.rd-index .rd-svc-card__more { font-size: 20px; }

body.rd-index .rd-main p.rd-eyebrow { font-size: 20px; letter-spacing: 0.1em; }
body.rd-index .rd-doc__copy h2 { font-size: 40px; }
body.rd-index .rd-doc__copy > p:not(.rd-eyebrow) { font-size: 20px; line-height: 1.6; }
body.rd-index .rd-creds b,
body.rd-index .rd-creds span { font-size: 20px; }

body.rd-index .rd-why__card h3 { font-size: 22px; }
body.rd-index .rd-why__card p { font-size: 20px; line-height: 1.55; }

body.rd-index .rd-split__head h2,
body.rd-index .rd-hfaq__intro h2 { font-size: 38px; }
body.rd-index .rd-split__body p,
body.rd-index .rd-hfaq__intro p,
body.rd-index .rd-slot { font-size: 20px; line-height: 1.6; }

body.rd-index .rd-areas-card h2 { font-size: 32px; }
body.rd-index .rd-areas--pins a { font-size: 20px; }

body.rd-index .rd-hfaq__item > summary h3 { font-size: 22px; }
body.rd-index .rd-hfaq__a p,
body.rd-index .rd-hfaq__more { font-size: 20px; }

body.rd-index .rd-foot__addr,
body.rd-index .rd-foot__hours li,
body.rd-index .rd-foot p.rd-foot__es,
body.rd-index .rd-foot__title,
body.rd-index .rd-foot__col a,
body.rd-index .rd-foot p.rd-foot__legal,
body.rd-index .rd-foot__bar,
body.rd-index .rd-foot__links a { font-size: 20px; }
body.rd-index .rd-foot a.rd-foot__phone { font-size: 26px; }
body.rd-index .rd-foot__grid { grid-template-columns: 320px repeat(var(--rd-foot-cols, 4), minmax(0, 1fr)); }
body.rd-index .rd-mbar a { font-size: 18px; }
.rd-mbar a { text-align: center; line-height: 1.15; padding: 0 8px; }

@media (max-width: 1100px) {
    body.rd-index .rd-hero h1 { font-size: 52px; }
    body.rd-index .rd-foot__grid { grid-template-columns: repeat(var(--rd-foot-cols, 4), minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    body.rd-index .rd-hero h1 { font-size: 40px; }
    body.rd-index .rd-hero__lede { font-size: 20px; }
    body.rd-index .rd-main .rd-btn,
    body.rd-index .rd-main .rd-btn--sm { height: 56px; padding: 0 22px; }
    body.rd-index .rd-section__head h2,
    body.rd-index .rd-doc__copy h2,
    body.rd-index .rd-split__head h2,
    body.rd-index .rd-hfaq__intro h2 { font-size: 30px; }
    body.rd-index .rd-areas-card h2 { font-size: 26px; }
    body.rd-index .rd-svc-card h3 { font-size: 22px; }
    body.rd-index .rd-hfaq__item > summary h3 { font-size: 21px; }
    body.rd-index .rd-foot__grid { grid-template-columns: 1fr; }
    body.rd-index .rd-mbar a { height: 54px; }
    body.rd-index.rd-index { padding-bottom: 86px; }
}

/* Hero trust points on one line (Aaron, 2026-09-11, laptop view: "all three items need to be on
   one line"). At 20px three points no longer fit the 720px copy column, so the third wrapped
   under the first. The copy column widens; the paragraph keeps its own measure; the row never
   wraps and the points share it equally (each wraps inside itself). Phones keep the stacked list. */
@media (min-width: 901px) {
    body.rd-index .rd-hero__copy {
        max-width: 920px;
    }

    body.rd-index ul.rd-hero__trust {
        flex-wrap: nowrap;
        gap: 26px;
    }

    body.rd-index .rd-hero__trust-item {
        flex: 1 1 0;
        min-width: 0;
    }

    body.rd-index .rd-hero__trust-item span.rd-lbl {
        max-width: none;
    }
}

/* Hero photos are chosen with the people on the right and open space on the left, where the
   headline and scrim sit (Aaron, 2026-09-11: "use an image that doesnt cover someones face").
   Anchor the crop to the right so narrow screens keep the person in frame. */
.rd-home .rd-hero {
    background-position: 72% 30%;
}

/* Phones and small tablets (Aaron, 2026-09-11: "on mobile the banner isnt centered"). The copy
   block is far taller than it is wide, so a cover-sized photo was blown up until only a slice of
   hair showed behind the headline. Instead the photo is a band across the top, sized by height
   (works for the 3:2 photos and Oxnard's 10:3 strip alike), framed on the person between the bar
   and the headline, and fading into navy where the copy starts: the concept's mobile hero. */
@media (max-width: 900px) {
    .rd-home .rd-hero {
        --rd-band: min(120vw, 640px);
        background-size: auto var(--rd-band);
        background-position: 72% 0;
        background-repeat: no-repeat;
    }

    .rd-home .rd-hero__scrim {
        background: linear-gradient(180deg,
            rgba(16, 26, 62, 0.72) 0,
            rgba(16, 26, 62, 0.18) 96px,
            rgba(16, 26, 62, 0.12) calc(var(--rd-band) * 0.42),
            rgba(16, 26, 62, 0.90) calc(var(--rd-band) * 0.78),
            #101a3e var(--rd-band));
    }

    .rd-home .rd-hero__body {
        padding-top: calc(var(--rd-band) * 0.62);
    }

    /* Doctor photo at full column width (Aaron: "doctor is too small on mobile"); the concept's
       148px thumbnail read as an avatar. */
    .rd-doc__photo {
        width: 100%;
        max-width: 440px;
    }
}

/* Hub pages: each item is a box with its own "Learn More About ..." button (Aaron, 2026-09-11).
   The button sits at the foot of the box, so buttons line up across a row. */
.rd-features--boxed .rd-feature {
    padding: 22px 22px 24px;
    border: 1px solid var(--rd-line-soft);
    border-top: 3px solid var(--rd-cyan);
    border-radius: 8px;
    background: #fff;
}

.rd-features--boxed .rd-feature > p {
    margin-bottom: 8px;
}

.rd-main .rd-btn.rd-feature__cta {
    align-self: flex-start;
    height: auto;
    min-height: 46px;
    margin-top: auto;
    padding: 11px 18px;
    font-size: 15px;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
}

/* Service-page YouTube embeds at a real size (Aaron, 2026-09-11: "the video is really tiny").
   layout.responsive_video strips each site's fixed iframe size; this frame fills the column
   up to 960px at 16:9. Outside .rd-main, so literal values and selectors that beat the site CSS. */
.section-content .rd-video {
    width: 100%;
    max-width: 960px;
    margin: 12px auto 0;
}

.section-content .rd-video iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
    background: #101a3e;
}

/* Content buttons on the new pages (homepage + hubs) use the sites' own two button styles
   (Aaron, 2026-09-11, with screenshots of each):
   1. section actions ("Schedule Your Dental Visit", "Explore Payment Options", "Ask us directly"):
      the outlined navy button the site uses for "BOOK AN APPOINTMENT" (style.min.css .btn);
   2. the "Learn More About ..." / "Explore ..." button in each hub box: the cyan button the
      service pages use (.rd-svc-btn).
   Hero and doctor-section buttons keep their own styles. */
.rd-main .rd-btn--solid {
    border: 2px solid #1b2c65;
    border-radius: 0;
    background: transparent;
    color: #1b2c65;
    font-family: dienstag, "Outfit", "Segoe UI Semibold", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0 40px;
}

.rd-main .rd-btn--solid:hover,
.rd-main .rd-btn--solid:focus-visible {
    background: #1b2c65;
    color: #fff;
    text-decoration: none;
}

.rd-main .rd-hfaq__intro .rd-btn--solid svg {
    color: currentColor;
}

/* hub box buttons: the same transparent outlined footer style (Aaron, 2026-09-11) */
.rd-main .rd-btn.rd-feature__cta {
    border: 2px solid #1b2c65;
    border-radius: 0;
    background: transparent;
    color: #1b2c65;
    font-family: dienstag, "Outfit", "Segoe UI Semibold", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.rd-main .rd-btn.rd-feature__cta:hover,
.rd-main .rd-btn.rd-feature__cta:focus-visible {
    background: #1b2c65;
    color: #fff;
}

/* ---------- homepage testimonials (Aaron, 2026-09-11: "put in testimonials") ----------
   The reviews each site's original homepage carried, as a row of cards. */
.rd-quotes,
.rd-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.rd-quote {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 28px 26px 26px;
    border: 1px solid var(--rd-line-soft);
    border-radius: 10px;
    background: #fff;
}

.rd-quote__stars {
    color: #f2b01e;
    font-size: 20px;
    letter-spacing: 3px;
    line-height: 1;
}

.rd-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

.rd-quote blockquote p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--rd-body);
}

.rd-quote figcaption {
    margin-top: auto;
    font-family: var(--rd-font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--rd-navy);
}

/* ---------- homepage blog feed (shared/blog-feed.php; "do the feed for the blog posts") ---------- */
.rd-post {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rd-line-soft);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rd-post:hover,
.rd-post:focus-visible {
    border-color: var(--rd-cyan);
    box-shadow: 0 14px 30px rgba(16, 26, 62, 0.10);
    text-decoration: none;
}

.rd-post__img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--rd-tint-cyan);
}

.rd-post__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rd-post__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 24px;
}

.rd-post__date {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rd-cyan-dark);
}

.rd-post h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rd-navy);
}

.rd-post__more {
    margin-top: auto;
    font-family: var(--rd-font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--rd-cyan-dark);
}

.rd-posts-sec .rd-actions,
.rd-quotes-sec .rd-actions {
    padding-top: 26px;
}

@media (max-width: 1100px) {
    .rd-quotes,
    .rd-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .rd-quotes,
    .rd-posts {
        grid-template-columns: 1fr;
    }
}

/* homepage 20px floor for the new cards */
body.rd-index .rd-quote blockquote p,
body.rd-index .rd-quote figcaption,
body.rd-index .rd-post__date,
body.rd-index .rd-post__more {
    font-size: 20px;
}

body.rd-index .rd-post h3 {
    font-size: 22px;
}

/* ==========================================================================
   BODY TEXT FLOOR, ALL PAGES (Aaron, 2026-09-11: "make sure body font size is consistent
   across all sections and pages, at least 20px"). Paragraphs and list items are 20px on
   the hub pages (.rd-main) and in the content areas every interior page shares
   (.section-content, split rows, FAQ answers, item lists). The site stylesheet sets no size
   for these (they inherit body's 1.3rem), so a plain rule placed last is enough, and it
   beats the smaller per-breakpoint sizes above by order. Footer and button labels are not
   body text and keep their own sizes.
   ========================================================================== */
.rd-main p,
.rd-main li,
.section-content p,
.section-content li,
.flex-split-content p,
.flex-split-content li,
.rd-acc__a p,
.rd-items p,
.rd-faq p {
    font-size: 20px;
    line-height: 1.6;
}

/* keep headings above the body text on the hub pages */
.rd-main .rd-feature h3 {
    font-size: 22px;
}

/* Small phones (found in the 2026-09-11 go-live crawl at 320px): the bar's logo + phone icon +
   menu button came to ~350px on Oxnard and ~341px on Santa Barbara, so the page scrolled
   sideways. Long Beach's narrower logo fitted. Shrink the logo and tighten the spacing. */
@media (max-width: 380px) {
    .rd-nav__bar {
        gap: 10px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .rd-nav__logo img,
    .rd-nav__logo svg {
        height: 34px;
        max-width: 165px;
        object-fit: contain;
        object-position: left center;
    }

    .rd-nav__right {
        gap: 10px;
    }

    .rd-nav__toggle {
        width: 40px;
        height: 40px;
    }
}