/* =========================================================================
   Rise One — baseline theme styles
   Colors/fonts come from CSS variables printed by inc/design-tokens.php
   (fallbacks below keep the theme usable if tokens are absent).
   ========================================================================= */

:root {
    --ro-primary: #127a8a;
    --ro-primary-dark: #0d5c68;
    --ro-accent: #f2a541;
    --ro-ink: #16242b;
    --ro-muted: #5b6b72;
    --ro-surface: #ffffff;
    --ro-surface-alt: #f2f7f8;
    --ro-border: #dde8ea;
    --ro-font-heading:
        "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ro-font-body:
        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --ro-maxw: 1140px;
    --ro-radius: 14px;
    --ro-radius-sm: 10px;
    --ro-shadow: 0 10px 30px rgba(16, 42, 51, 0.08);
    --ro-shadow-sm: 0 4px 14px rgba(16, 42, 51, 0.06);
    --ro-gap: clamp(1.5rem, 4vw, 3rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--ro-font-body);
    color: var(--ro-ink);
    background: var(--ro-surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--ro-font-heading);
    line-height: 1.15;
    margin: 0 0 0.5em;
}
p {
    margin: 0 0 1rem;
}
a {
    color: var(--ro-primary-dark);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    max-width: 100%;
    display: block;
}

.ro-container {
    width: 100%;
    max-width: var(--ro-maxw);
    margin: 0 auto;
    padding: 0 1.25rem;
}
.ro-section {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}
/* Zebra-stripe server-rendered sections only (direct children of <main>). Block
   pages wrap sections in .ro-content and set backgrounds per section type, so
   this must not bleed in and override them (the `of .ro-section` selector's high
   specificity would otherwise win). */
.ro-main > .ro-section:nth-child(even of .ro-section) {
    background: var(--ro-surface-alt);
}

/* Shared bits ------------------------------------------------------------ */
.ro-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ro-primary);
    margin: 0 0 0.6rem;
}
.ro-section__head {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.ro-section__title {
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
}
.ro-section__intro {
    color: var(--ro-muted);
    font-size: 1.08rem;
}

.ro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    font-family: var(--ro-font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background 0.12s ease;
}
.ro-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}
.ro-btn--primary {
    background: var(--ro-primary);
    color: #fff;
    box-shadow: var(--ro-shadow-sm);
}
.ro-btn--primary:hover {
    background: var(--ro-primary-dark);
    color: #fff;
}
.ro-btn--accent {
    background: var(--ro-accent);
    color: #3a2a06;
}
.ro-btn--ghost {
    background: transparent;
    border-color: var(--ro-border);
    color: var(--ro-ink);
}
.ro-btn--ghost:hover {
    border-color: var(--ro-primary);
    color: var(--ro-primary-dark);
}

.ro-media {
    width: 100%;
    border-radius: var(--ro-radius);
    overflow: hidden;
    background: var(--ro-surface-alt);
}
.ro-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ro-media--placeholder {
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    font-family: var(--ro-font-heading);
    font-weight: 600;
    letter-spacing: 0.01em;
    background: linear-gradient(
        135deg,
        var(--ro-primary),
        var(--ro-primary-dark)
    );
    padding: 1rem;
}
.ro-media--placeholder span {
    opacity: 0.92;
}

/* Header ----------------------------------------------------------------- */
.ro-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--ro-border);
}
.ro-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    gap: 1rem;
}
.ro-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ro-ink);
    font-weight: 700;
}
.ro-brand:hover {
    text-decoration: none;
}
.ro-brand__mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ro-primary);
    color: #fff;
    font-family: var(--ro-font-heading);
    font-weight: 700;
}
.ro-brand__name {
    font-family: var(--ro-font-heading);
    font-size: 1.1rem;
}
.ro-brand__logo {
    max-height: 40px;
    width: auto;
}

.ro-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.ro-nav__list {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ro-nav__list a {
    color: var(--ro-ink);
    font-weight: 500;
    font-size: 0.98rem;
}
.ro-nav__list a:hover {
    color: var(--ro-primary-dark);
    text-decoration: none;
}
.ro-nav__list .current-menu-item > a {
    color: var(--ro-primary);
}
.ro-nav__phone {
    color: var(--ro-ink);
    font-weight: 600;
    white-space: nowrap;
}
.ro-nav__phone:hover {
    color: var(--ro-primary-dark);
    text-decoration: none;
}
/* The header CTA becomes a click-to-call button when a phone is set. */
.ro-nav__cta--phone {
    white-space: nowrap;
}
/* The close (×) button only exists in the mobile cover menu. */
.ro-nav__close {
    display: none;
}
@media (min-width: 721px) {
    /* Desktop: when a phone is set the call button is the header CTA, so the
       Book-now button is hidden there (both show in the mobile cover menu). */
    .ro-nav:has(.ro-nav__cta--phone) .ro-nav__cta--book {
        display: none;
    }
}
/* Logo alignment (Rise One → Navigation). "Logo center" splits the menu into two
   halves that flank a centered logo on one row (desktop). The menu is rendered
   as two `.ro-nav__group` lists; `display:contents` lifts them into the header
   grid so it's [left half] [logo] [right half]. Mobile keeps the toggle layout —
   the groups collapse so all items stack in order in the dropdown. */
@media (min-width: 721px) {
    body.ro-nav-center .ro-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    body.ro-nav-center .ro-nav {
        display: contents;
    }
    body.ro-nav-center .ro-brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    body.ro-nav-center .ro-nav__group {
        display: flex;
        align-items: center;
        gap: 1.4rem;
        grid-row: 1;
    }
    body.ro-nav-center .ro-nav__group--left {
        grid-column: 1;
        justify-self: end;
    }
    body.ro-nav-center .ro-nav__group--right {
        grid-column: 3;
        justify-self: start;
    }
}
@media (max-width: 720px) {
    /* Groups collapse so their items flow into the single dropdown column. */
    body.ro-nav-center .ro-nav__group {
        display: contents;
    }
}

/* Front-page hero: the header floats transparent over the splash and turns
   solid on scroll. It stays fixed and visible throughout — nav is never
   scrolled out of reach. Only applies when a hero background is set. */
body.ro-has-herobg .ro-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
body.ro-has-herobg .ro-header .ro-brand__name {
    color: #fff;
}
body.ro-has-herobg .ro-header .ro-brand__mark {
    background: rgba(255, 255, 255, 0.18);
}
body.ro-has-herobg .ro-header .ro-navtoggle span {
    background: #fff;
}
body.ro-has-herobg .ro-header--solid {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom-color: var(--ro-border);
    box-shadow: var(--ro-shadow-sm);
}
body.ro-has-herobg .ro-header--solid .ro-brand__name {
    color: var(--ro-ink);
}
body.ro-has-herobg .ro-header--solid .ro-brand__mark {
    background: var(--ro-primary);
}
body.ro-has-herobg .ro-header--solid .ro-navtoggle span {
    background: var(--ro-ink);
}
@media (min-width: 721px) {
    /* Top-level items only — submenu links sit on a light panel and keep their
	   own dark color (see .ro-nav__list .sub-menu a). */
    body.ro-has-herobg .ro-header .ro-nav__list > li > a,
    body.ro-has-herobg .ro-header .ro-nav__phone {
        color: #fff;
    }
    body.ro-has-herobg .ro-header--solid .ro-nav__list > li > a,
    body.ro-has-herobg .ro-header--solid .ro-nav__phone {
        color: var(--ro-ink);
    }
}

/* Custom navigation-bar color (Rise One → Navigation bar). A solid bar in the
   chosen color everywhere — overrides the transparent-over-hero treatment;
   foreground is auto-contrasted server-side (--ro-navbar-fg). */
body.ro-navbar-custom .ro-header,
body.ro-navbar-custom.ro-has-herobg .ro-header,
body.ro-navbar-custom.ro-has-herobg .ro-header--solid {
    background: var(--ro-navbar-bg);
    backdrop-filter: none;
    border-bottom-color: var(--ro-navbar-border);
    box-shadow: none;
}
body.ro-navbar-custom .ro-header .ro-brand__name,
body.ro-navbar-custom.ro-has-herobg .ro-header .ro-brand__name,
body.ro-navbar-custom.ro-has-herobg .ro-header--solid .ro-brand__name {
    color: var(--ro-navbar-fg);
}
body.ro-navbar-custom .ro-header .ro-navtoggle span,
body.ro-navbar-custom.ro-has-herobg .ro-header .ro-navtoggle span,
body.ro-navbar-custom.ro-has-herobg .ro-header--solid .ro-navtoggle span {
    background: var(--ro-navbar-fg);
}
body.ro-navbar-custom .ro-header .ro-brand__mark,
body.ro-navbar-custom.ro-has-herobg .ro-header .ro-brand__mark,
body.ro-navbar-custom.ro-has-herobg .ro-header--solid .ro-brand__mark {
    background: var(--ro-navbar-fg);
    color: var(--ro-navbar-bg);
}
@media (min-width: 721px) {
    body.ro-navbar-custom .ro-header .ro-nav__list > li > a,
    body.ro-navbar-custom .ro-header .ro-nav__phone,
    body.ro-navbar-custom.ro-has-herobg .ro-header .ro-nav__list > li > a,
    body.ro-navbar-custom.ro-has-herobg .ro-header .ro-nav__phone,
    body.ro-navbar-custom.ro-has-herobg
        .ro-header--solid
        .ro-nav__list
        > li
        > a,
    body.ro-navbar-custom.ro-has-herobg .ro-header--solid .ro-nav__phone {
        color: var(--ro-navbar-fg);
    }
}

/* Dropdown submenus (Services → services, Service Areas → towns) */
.ro-nav__list > li {
    position: relative;
}
/* Desktop only: stretch the nav and its items to the full header height so EVERY
   dropdown anchors at the same point — the header's bottom edge (top: 100%) —
   rather than the mega (anchored to the header) floating lower than the regular
   submenus (anchored to their shorter <li>). Links stay vertically centered in
   the taller items. Scoped above the mobile breakpoint so the tap-to-open
   accordion (where items must stay stacked, not flex rows) is untouched. */
@media (min-width: 721px) {
    .ro-header__inner > .ro-nav {
        align-self: stretch;
    }
    .ro-nav__list {
        align-self: stretch;
    }
    .ro-nav__list > li {
        align-self: stretch;
        display: flex;
        align-items: center;
    }
}
.ro-nav__list .menu-item-has-children > a::after {
    content: "\25BE";
    margin-left: 0.3rem;
    font-size: 0.75em;
    color: var(--ro-muted);
}
.ro-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-sm);
    box-shadow: var(--ro-shadow);
}
.ro-nav__list .menu-item-has-children:hover > .sub-menu,
.ro-nav__list .menu-item-has-children:focus-within > .sub-menu {
    display: flex;
}
.ro-nav__list .sub-menu li {
    border: 0;
}
.ro-nav__list .sub-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}
.ro-nav__list .sub-menu a:hover {
    background: var(--ro-surface-alt);
    color: var(--ro-primary-dark);
    text-decoration: none;
}

/* Grouped Services dropdown (mega menu): category groups instead of one long
   list. Two desktop layouts — "columns" (categories side by side) and "flyout"
   (short category list, pages revealed on hover). Rendered by
   Rise_One_Nav_Walker; see inc/nav-mega.php. */
.ro-nav__list .ro-nav__mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    display: none;
    margin: 0;
    padding: 0.9rem 1.1rem;
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-sm);
    box-shadow: var(--ro-shadow);
}
.ro-nav__list .ro-nav-mega-parent:hover > .ro-nav__mega,
.ro-nav__list .ro-nav-mega-parent:focus-within > .ro-nav__mega {
    display: flex;
}
.ro-nav__collist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ro-nav__collist a {
    display: block;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ro-ink);
    white-space: nowrap;
}
.ro-nav__collist a:hover {
    background: var(--ro-surface-alt);
    color: var(--ro-primary-dark);
    text-decoration: none;
}

/* Columns: every category and its pages laid out side by side in a wide panel,
   wrapping to more rows as categories exceed the panel width.

   A columns panel is far wider than its Services <li>, so anchoring it to that
   narrow item (left:0) runs it off the right edge. Instead anchor it to the
   full-width header container and center it in the viewport. Only columns mode
   escapes the item — flyout stays under Services (it opens directly beneath). */
.ro-header__inner {
    position: relative;
}
.ro-nav__list .ro-nav-mega-parent:has(> .ro-nav__mega--columns) {
    position: static;
}
/* Hover bridge: the panel floats a little below the navbar (it looks nicer), but
   that gap isn't hoverable, so dragging the cursor down from "Services" would
   drop the hover and close the menu. This transparent strip fills the gap (the
   header's bottom band, level with the panel's top edge) as part of the trigger,
   keeping the menu open across it. Scoped to the OPEN state (:hover/:focus-within)
   so it never opens the menu on its own. The panel itself is unchanged. */
.ro-nav__list .ro-nav-mega-parent:hover::before,
.ro-nav__list .ro-nav-mega-parent:focus-within::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.6rem;
    z-index: 59;
}
.ro-nav__list .ro-nav__mega--columns {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    flex-flow: row wrap;
    /* Generous row gap so wrapped category rows stay clearly separated (a tight
       gap reads as a crowded block, especially once it wraps to 3+ rows on
       smaller screens). align-content keeps the rows packed at the top. */
    align-content: flex-start;
    gap: 1.6rem 1.75rem;
    /* max-content so the wrap container sizes to its columns instead of
       collapsing to a single column; capped to the viewport so it wraps. */
    width: max-content;
    max-width: min(960px, calc(100vw - 2rem));
    max-height: 72vh;
    overflow-y: auto;
}
.ro-nav__mega--columns .ro-nav__col {
    flex: 1 0 auto;
    min-width: 172px;
}
.ro-nav__mega--columns .ro-nav__colhead {
    display: block;
    padding: 0.15rem 0.75rem 0.4rem;
    margin-bottom: 0.25rem;
    font-family: var(--ro-font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ro-muted);
    border-bottom: 1px solid var(--ro-border);
}

/* Flyout: a short vertical list of category names; hovering one reveals its
   pages in a submenu to the right. Keeps the top level compact no matter how
   many services there are. */
.ro-nav__mega--flyout {
    flex-direction: column;
    gap: 2px;
    min-width: 232px;
}
.ro-nav__mega--flyout .ro-nav__col {
    position: relative;
}
.ro-nav__mega--flyout .ro-nav__colhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ro-ink);
    cursor: default;
}
.ro-nav__mega--flyout .ro-nav__colhead::after {
    content: "\25B8"; /* ▸ */
    color: var(--ro-muted);
    font-size: 0.8em;
}
.ro-nav__mega--flyout .ro-nav__col:hover > .ro-nav__colhead,
.ro-nav__mega--flyout .ro-nav__col:focus-within > .ro-nav__colhead {
    background: var(--ro-surface-alt);
    color: var(--ro-primary-dark);
}
.ro-nav__mega--flyout .ro-nav__collist {
    position: absolute;
    top: -0.5rem;
    left: 100%;
    display: none;
    min-width: 210px;
    max-height: 72vh;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-sm);
    box-shadow: var(--ro-shadow);
}
.ro-nav__mega--flyout .ro-nav__col:hover > .ro-nav__collist,
.ro-nav__mega--flyout .ro-nav__col:focus-within > .ro-nav__collist {
    display: block;
}

.ro-navtoggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}
.ro-navtoggle span {
    width: 24px;
    height: 2px;
    background: var(--ro-ink);
    border-radius: 2px;
}

/* Hero (full-width splash) ---------------------------------------------- */
.ro-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        var(--ro-surface-alt),
        var(--ro-surface)
    );
}
.ro-hero--compact {
    background: var(--ro-surface-alt);
    padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.ro-hero__title {
    font-size: clamp(2rem, 5vw, 3.2rem);
}
.ro-hero--compact .ro-hero__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.ro-hero__subtitle,
.ro-hero .ro-lead {
    font-size: 1.15rem;
    color: var(--ro-muted);
    max-width: 200ch;
}
.ro-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

/* Centered copy (both render paths). */
.ro-hero--full .ro-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.ro-hero--full .ro-hero__subtitle,
.ro-hero--full .ro-lead {
    margin-left: auto;
    margin-right: auto;
}
.ro-hero--full .ro-hero__actions,
.ro-hero--full .wp-block-buttons {
    justify-content: center;
}

/* Background media layer — injected when a hero image/video is configured.
   `max-width:none` overrides the constrained-layout cap that WordPress puts on
   direct children of the hero group (which otherwise pins the background to the
   1400px content width instead of full-bleed on wide screens). */
.ro-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    max-width: none;
    margin: 0;
}
.ro-hero__video,
.ro-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ro-hero__img {
    background-size: cover;
    background-position: center;
}
.ro-hero__overlay {
    position: absolute;
    inset: 0;
    background: #0a1a1f;
}

/* Splash sizing + light copy when a background is present. */
body.ro-has-herobg .ro-hero--full {
    display: flex;
    align-items: center;
    min-height: 86vh;
}
body.ro-has-herobg .ro-hero--full > .ro-hero__inner,
body.ro-has-herobg .ro-hero--full > .ro-container {
    width: 100%;
}
body.ro-has-herobg
    .ro-hero--full
    .ro-hero__inner
    :is(h1, p, .ro-eyebrow, .ro-hero__subtitle, .ro-lead) {
    color: #fff;
}
body.ro-has-herobg .ro-hero--full .ro-hero__subtitle,
body.ro-has-herobg .ro-hero--full .ro-lead {
    color: rgba(255, 255, 255, 0.9);
}
body.ro-has-herobg .ro-hero--full .ro-eyebrow {
    color: rgba(255, 255, 255, 0.8);
}
/* Secondary/ghost CTA must read light over the dark splash (both render paths). */
body.ro-has-herobg .ro-hero--full .ro-btn--ghost,
body.ro-has-herobg
    .ro-hero--full
    .wp-block-button.is-style-outline
    .wp-block-button__link {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    background: transparent;
}
body.ro-has-herobg .ro-hero--full .ro-btn--ghost:hover,
body.ro-has-herobg
    .ro-hero--full
    .wp-block-button.is-style-outline
    .wp-block-button__link:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Internal page hero with a stock-photo banner (e.g. About): light copy over the
   image, with the content lifted above the absolutely-positioned background. The
   `:has(.ro-hero__bg)` selector catches the baked hero (background injected via
   render_block); `.ro-hero--banner` catches the server-rendered path. Scoped to
   compact heroes so the full-width front-page hero keeps its own treatment. */
.ro-hero--banner,
.ro-hero--compact:has(> .ro-hero__bg) {
    display: flex;
    align-items: center;
    min-height: 38vh;
}
.ro-hero--banner .ro-hero__inner,
.ro-hero--compact:has(> .ro-hero__bg) .ro-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}
.ro-hero--banner :is(.ro-hero__title, .ro-eyebrow, p, .ro-hero__subtitle, .ro-lead),
.ro-hero--compact:has(> .ro-hero__bg) :is(.ro-hero__title, .ro-eyebrow, p, .ro-hero__subtitle, .ro-lead) {
    color: #fff;
}
.ro-hero--banner .ro-hero__subtitle,
.ro-hero--banner .ro-lead,
.ro-hero--compact:has(> .ro-hero__bg) .ro-hero__subtitle,
.ro-hero--compact:has(> .ro-hero__bg) .ro-lead {
    color: rgba(255, 255, 255, 0.9);
}
.ro-hero--banner .ro-eyebrow,
.ro-hero--compact:has(> .ro-hero__bg) .ro-eyebrow {
    color: rgba(255, 255, 255, 0.85);
}

/* Stats ------------------------------------------------------------------ */
.ro-stats {
    padding: clamp(2rem, 4vw, 3rem) 0;
}
.ro-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}
.ro-stat {
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius);
    padding: 1.5rem 1rem;
    box-shadow: var(--ro-shadow-sm);
}
.ro-stat__value {
    font-family: var(--ro-font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--ro-primary);
}
.ro-stat__label {
    color: var(--ro-muted);
    font-size: 0.92rem;
}

/* Services / cards ------------------------------------------------------- */
/* Services index directory: category-grouped columns of service links — the
   same grouping as the Services nav dropdown (service.category). Categories flow
   into as many ~15rem columns as fit and pack densely (masonry-style). */
.ro-svcdir {
    columns: 16rem;
    column-gap: 3.5rem;
    max-width: 1040px;
    margin-inline: auto;
}
.ro-svcdir__group {
    break-inside: avoid;
    margin: 0 0 3rem;
}
.ro-svcdir__cat {
    margin: 0 0 1.2rem;
    padding-bottom: 0.75rem;
    font-family: var(--ro-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ro-ink);
    border-bottom: 2px solid var(--ro-border);
    border-bottom-color: color-mix(in srgb, var(--ro-primary) 45%, transparent);
}
.ro-svcdir__list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ro-svcdir__link {
    color: var(--ro-primary-dark);
    font-weight: 500;
    font-size: 1.06rem;
    text-decoration: none;
}
.ro-svcdir__link:hover {
    color: var(--ro-ink);
    text-decoration: underline;
}
.ro-svcdir__item {
    color: var(--ro-ink);
    font-weight: 500;
    font-size: 1.06rem;
}

.ro-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.ro-card {
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius);
    padding: 1.6rem;
    box-shadow: var(--ro-shadow-sm);
    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease;
}
.ro-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ro-shadow);
}
.ro-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ro-primary) 12%, #fff);
    color: var(--ro-primary);
    margin-bottom: 1rem;
}
.ro-icon {
    width: 26px;
    height: 26px;
}
/* Custom service image (replaces the icon glyph). */
.ro-card__icon--img {
    width: 64px;
    height: 64px;
    background: none;
    border-radius: 10px;
    overflow: hidden;
}
.ro-card__icon--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* "Large" services style (Rise One → Services → Icon style): centered cards with
   a big icon badge, or a prominent full-width image tile for custom images —
   an editorial, Muse-like presentation. */
.ro-cards--large .ro-card {
    text-align: center;
    padding: 2.4rem 1.9rem;
}
.ro-cards--large .ro-card__icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-inline: auto;
    margin-bottom: 1.35rem;
}
.ro-cards--large .ro-card__icon .ro-icon {
    width: 46px;
    height: 46px;
}
.ro-cards--large .ro-card__icon--img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--ro-radius);
    margin-bottom: 1.35rem;
}
.ro-cards--large .ro-card__icon--img img {
    object-fit: cover;
}
.ro-cards--large .ro-linkcard__more {
    display: block;
    text-align: center;
}

/* Theme-wide "Square" corner style (Rise One → Design & Branding → Corner style):
   strip border-radius broadly for a sharp, editorial look. Rounded is the default
   (no class). Applied last / broadly so it wins over component radii. */
body.ro-square *,
body.ro-square *::before,
body.ro-square *::after {
    border-radius: 0 !important;
}

/* Optional section image split (Rise One → Sections → Image layout). Desktop:
   content on one side, image on the other; mobile: stack, hide image, center. */
.ro-content .ro-section--split > .ro-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    max-width: var(--wp--style--global--content-size, 1140px);
    margin-inline: auto;
}
.ro-content .ro-section--media-left .ro-split__media {
    order: 0;
}
.ro-content .ro-section--media-left .ro-split__content {
    order: 1;
}
.ro-content .ro-section--media-right .ro-split__media {
    order: 1;
}
.ro-content .ro-section--media-right .ro-split__content {
    order: 0;
}
.ro-content .ro-section--split .ro-split__content {
    text-align: left;
}
.ro-content
    .ro-section--split
    .ro-split__content
    :is(
        .ro-section__head,
        .ro-insurance__inner,
        .ro-cta__inner,
        .ro-callout__inner
    ) {
    text-align: left;
    margin-inline: 0;
    max-width: none;
}
.ro-content
    .ro-section--split
    .ro-split__content
    :is(
        .wp-block-buttons,
        .ro-insurance__logos,
        .ro-insurance__badges,
        .ro-insurance__list,
        .ro-insurance__more,
        .ro-stats__grid,
        .ro-cards,
        .ro-quotes
    ) {
    justify-content: flex-start;
    text-align: left;
}
.ro-split__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ro-radius);
    box-shadow: var(--ro-shadow);
    display: block;
}
/* Photo ratio (Rise One → Sections → Photo ratio): match the box to the
   uploaded photo's orientation so it isn't clipped oddly by object-fit. */
.ro-split__media--square img {
    aspect-ratio: 1 / 1;
}
.ro-split__media--wide img {
    aspect-ratio: 4 / 3;
}
.ro-split__media--tall img {
    aspect-ratio: 3 / 4;
}
@media (max-width: 768px) {
    .ro-content .ro-section--split > .ro-split__inner {
        grid-template-columns: 1fr;
    }
    .ro-split__media {
        display: none;
    }
    .ro-content .ro-section--split .ro-split__content,
    .ro-content
        .ro-section--split
        .ro-split__content
        :is(
            .ro-section__head,
            .ro-insurance__inner,
            .ro-cta__inner,
            .ro-callout__inner
        ) {
        text-align: center;
    }
    .ro-content
        .ro-section--split
        .ro-split__content
        :is(
            .wp-block-buttons,
            .ro-insurance__logos,
            .ro-insurance__badges,
            .ro-insurance__list,
            .ro-insurance__more
        ) {
        justify-content: center;
        text-align: center;
    }
}
.ro-card__title {
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
}
.ro-card__body {
    color: var(--ro-muted);
    margin: 0;
}

/* Text + media ----------------------------------------------------------- */
.ro-textmedia__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ro-gap);
    align-items: center;
}
.ro-textmedia--media-left .ro-textmedia__media {
    order: -1;
}
.ro-textmedia__body {
    color: var(--ro-muted);
    font-size: 1.05rem;
}
.ro-checklist {
    list-style: none;
    margin: 1rem 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.ro-checklist li {
    position: relative;
    padding-left: 1.8rem;
}
.ro-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ro-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")
        center/70% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")
        center/70% no-repeat;
}

/* Testimonials ----------------------------------------------------------- */
.ro-quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.ro-quote {
    margin: 0;
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius);
    padding: 1.6rem;
    box-shadow: var(--ro-shadow-sm);
}
.ro-quote__text {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}
.ro-quote__cite {
    display: flex;
    flex-direction: column;
}
.ro-quote__name {
    font-weight: 600;
    font-family: var(--ro-font-heading);
}
.ro-quote__meta {
    color: var(--ro-muted);
    font-size: 0.88rem;
}

/* Team ------------------------------------------------------------------- */
.ro-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
    justify-content: center;
    gap: 1.75rem;
    max-width: 1200px;
    margin-inline: auto;
}
/* Cancel WordPress's constrained-layout block-gap margin on the grid items —
   it offsets every card but the first, staggering the row. Grid `gap` spaces them. */
.ro-team__grid > .ro-member {
    margin-block: 0;
    margin-top: 0;
    justify-self: stretch;
    width: 100%;
}
.ro-member {
    text-align: center;
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius);
    padding: 2.25rem 1.75rem;
    box-shadow: var(--ro-shadow-sm);
}
.ro-member__avatar,
.ro-member__photo {
    width: 96px;
    height: 96px;
    margin: 0 auto 1rem;
    border-radius: 50%;
}
.ro-member__avatar {
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--ro-font-heading);
    font-weight: 700;
    font-size: 1.6rem;
    background: linear-gradient(
        135deg,
        var(--ro-primary),
        var(--ro-primary-dark)
    );
}
.ro-member__name {
    font-size: 1.1rem;
    margin-bottom: 0.1rem;
}
.ro-member__role {
    color: var(--ro-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.ro-member__bio {
    color: var(--ro-muted);
    font-size: 0.92rem;
    margin: 0;
}

/* FAQ -------------------------------------------------------------------- */
.ro-faq__inner {
    max-width: 760px;
}
.ro-faq__list {
    display: grid;
    gap: 0.75rem;
}
.ro-faq__item {
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-sm);
    background: var(--ro-surface);
    padding: 0.25rem 1.1rem;
}
.ro-faq__q {
    cursor: pointer;
    font-family: var(--ro-font-heading);
    font-weight: 600;
    padding: 0.9rem 0;
    list-style: none;
}
.ro-faq__q::-webkit-details-marker {
    display: none;
}
.ro-faq__q::after {
    content: "+";
    float: right;
    color: var(--ro-primary);
    font-size: 1.3rem;
    line-height: 1;
}
details[open] .ro-faq__q::after {
    content: "\2013";
}
.ro-faq__a {
    color: var(--ro-muted);
    padding: 0 0 1rem;
}

/* CTA -------------------------------------------------------------------- */
.ro-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(
        135deg,
        var(--ro-primary),
        var(--ro-primary-dark)
    );
    color: #fff;
    border-radius: var(--ro-radius);
    padding: clamp(1.8rem, 4vw, 2.8rem);
}
.ro-cta__title {
    color: #fff;
    margin: 0 0 0.3rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
}
.ro-cta__body {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Steps (how it works) --------------------------------------------------- */
.ro-steps__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.ro-step {
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius);
    padding: 1.75rem 1.6rem 1.6rem;
    box-shadow: var(--ro-shadow-sm);
}
.ro-step__num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ro-primary);
    color: #fff;
    font-family: var(--ro-font-heading);
    font-weight: 700;
    margin-bottom: 0.9rem;
}
.ro-step__title {
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}
.ro-step__body {
    color: var(--ro-muted);
    margin: 0;
}

/* Callout (highlight band) ----------------------------------------------- */
.ro-callout__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: var(--ro-surface-alt);
    border: 1px solid var(--ro-border);
    border-left: 4px solid var(--ro-accent);
    border-radius: var(--ro-radius);
    padding: clamp(1.4rem, 3vw, 2rem);
}
.ro-callout__text {
    flex: 1 1 320px;
}
.ro-callout__title {
    margin: 0 0 0.25rem;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
}
.ro-callout__inner .ro-lead {
    margin: 0;
    color: var(--ro-muted);
}

/* Rich text (AI body prose) ---------------------------------------------- */
.ro-richtext .ro-prose {
    margin: 0 auto;
}
/* Alternating-background bands (one per ## subheading) for long-form content. */
.ro-prose-band {
    padding-block: clamp(1.75rem, 3.5vw, 3rem);
    padding-inline: 1.25rem;
}
.ro-prose-band--alt {
    background: var(--ro-surface-alt);
}
.ro-prose-band .ro-prose {
    max-width: var(--wp--style--global--content-size, 760px);
    margin-inline: auto;
}
.ro-content .ro-prose-band {
    padding-block: clamp(1.75rem, 3.5vw, 3rem);
    padding-inline: 1.25rem;
    background: var(--ro-surface);
}
.ro-content .ro-prose-band--alt {
    background: var(--ro-surface-alt);
}
.ro-content .ro-prose-band .ro-prose {
    max-width: var(--wp--style--global--content-size, 760px);
    margin-inline: auto;
}
.ro-prose p {
    font-size: 1.08rem;
    color: var(--ro-ink);
}
.ro-prose p:last-child {
    margin-bottom: 0;
}
.ro-prose h2,
.ro-prose .ro-prose__head {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    margin: 1.7em 0 0.5em;
}
.ro-prose h3 {
    font-size: 1.15rem;
    margin: 1.35em 0 0.4em;
}
.ro-prose h2:first-child,
.ro-prose h3:first-child {
    margin-top: 0;
}
.ro-prose ul.ro-prose__list {
    margin: 0 0 1.15rem;
    padding-left: 1.3rem;
    display: grid;
    gap: 0.45rem;
}
.ro-prose ul.ro-prose__list li {
    color: var(--ro-ink);
}
.ro-prose strong {
    font-weight: 600;
}
/* On phones, an image floated in the content (block editor → Align left/right)
   would sit in a narrow column with text crammed beside it. Drop the float and
   center it so the copy flows cleanly above/below instead. Scoped to `.ro-content`
   (Image blocks land there, not necessarily inside `.ro-prose`) and the
   `.wp-block-image.alignX` selectors out-specify core's float rule. `width` +
   `margin:auto` are what actually center a shrink-to-fit figure. */
@media (max-width: 600px) {
    .ro-content .wp-block-image.alignleft,
    .ro-content .wp-block-image.alignright,
    .ro-content figure.alignleft,
    .ro-content figure.alignright,
    .ro-content img.alignleft,
    .ro-content img.alignright,
    .ro-content .alignleft,
    .ro-content .alignright {
        float: none;
        display: block;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Link cards (service-area index + auto-linked child pages) --------------- */
.ro-linkcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--ro-ink);
    text-decoration: none;
}
.ro-linkcard:hover {
    text-decoration: none;
}
.ro-linkcard .ro-card__title {
    margin-top: 0;
}
.ro-linkcard__more {
    margin-top: auto;
    padding-top: 0.9rem;
    color: var(--ro-primary);
    font-family: var(--ro-font-heading);
    font-weight: 600;
    font-size: 0.92rem;
}
.ro-linkcard__more::after {
    content: " \2192";
}

/* Insurance -------------------------------------------------------------- */
.ro-insurance__inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
.ro-insurance__banner {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    text-align: left;
    background: color-mix(in srgb, var(--ro-primary) 8%, var(--ro-surface));
    border: 1px solid
        color-mix(in srgb, var(--ro-primary) 24%, var(--ro-border));
    border-radius: var(--ro-radius);
    padding: 1.4rem 1.6rem;
    box-shadow: var(--ro-shadow-sm);
}
.ro-insurance__banner-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--ro-primary);
    color: #fff;
}
.ro-insurance__banner-icon .ro-icon {
    width: 28px;
    height: 28px;
}
.ro-insurance__banner-text {
    display: block;
}
.ro-insurance__banner-title {
    display: block;
    font-family: var(--ro-font-heading);
    font-weight: 700;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    color: var(--ro-ink);
}
.ro-insurance__banner-sub {
    display: block;
    color: var(--ro-muted);
    margin-top: 0.25rem;
}
.ro-insurance__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}
.ro-insurance__pill {
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: var(--ro-shadow-sm);
}
/* Featured insurance logos — white chips with a hairline border so they read on
   the light insurance band (and on the /insurances page). */
.ro-insurance__logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.ro-insurance__logo {
    background: #fff;
    border: 1px solid var(--ro-border);
    border-radius: 12px;
    padding: 0.85rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ro-shadow-sm);
    min-width: 120px;
}
.ro-insurance__logo img {
    height: 42px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
}
.ro-insurance__more {
    margin: 1.4rem 0 0;
}
.ro-content .ro-insurance .ro-insurance__more a {
    color: var(--ro-primary);
    text-decoration: underline;
    font-weight: 600;
}

/* Internal /insurances page. */
.ro-inspage .ro-section__head {
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 640px;
}
.ro-inspage__logos {
    margin: 0 auto 2.25rem;
}
.ro-inspage .ro-insurance__logo {
    border: 1px solid var(--ro-border);
}
.ro-inspage__tools {
    max-width: 460px;
    margin: 0 auto 1.5rem;
}
.ro-inspage__search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    border: 2px solid var(--ro-border);
    border-radius: var(--ro-radius-sm);
    font-size: 1rem;
    background: var(--ro-surface);
}
.ro-inspage__search:focus {
    outline: none;
    border-color: var(--ro-primary);
    box-shadow: 0 0 0 3px var(--ro-primary-10, rgba(18, 122, 138, 0.15));
}
.ro-inspage__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 820px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.6rem;
}
.ro-inspage__item {
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-sm);
    padding: 0.7rem 1rem;
    font-weight: 500;
}
.ro-inspage__empty {
    text-align: center;
    color: var(--ro-muted);
    margin-top: 1.25rem;
}
.ro-inspage .ro-insurance__badges {
    margin-top: 2rem;
}

.ro-insurance__badges {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}
.ro-insurance__badge {
    color: var(--ro-primary-dark);
    font-weight: 600;
    font-size: 0.9rem;
    background: color-mix(in srgb, var(--ro-primary) 10%, var(--ro-surface));
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
}
.ro-insurance__financing {
    color: var(--ro-muted);
    margin: 1.25rem 0 0;
}

/* Locations -------------------------------------------------------------- */
.ro-locations__single {
    max-width: 560px;
    margin: 0 auto;
}
.ro-location {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.ro-location__addr {
    color: var(--ro-muted);
    margin: 0 0 0.9rem;
}
.ro-location__meta {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.ro-location__meta li {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: baseline;
    gap: 0.5rem;
}
.ro-location .ro-hours {
    margin-bottom: 1.25rem;
}
.ro-location .ro-hours__title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.ro-location__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

/* Location topper (address + hours + map, above the footer) -------------- */
.ro-loctop {
    background: var(--ro-surface-alt);
    border-top: 1px solid var(--ro-border);
}
.ro-loctop__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--ro-gap);
    align-items: stretch;
}
.ro-loctop__title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0.2rem 0 0.6rem;
}
.ro-loctop__addr {
    color: var(--ro-muted);
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}
.ro-loctop__phone {
    margin: 0 0 1.25rem;
    font-weight: 600;
}
.ro-loctop__hours {
    margin-bottom: 1.5rem;
    max-width: 340px;
}
.ro-loctop__actions {
    margin: 0;
}
.ro-loctop__map {
    min-height: 320px;
    border-radius: var(--ro-radius);
    overflow: hidden;
    border: 1px solid var(--ro-border);
    box-shadow: var(--ro-shadow-sm);
}
.ro-loctop__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
}
@media (max-width: 760px) {
    .ro-loctop__inner {
        grid-template-columns: 1fr;
    }
}

/* Child-page nav (auto, above the footer) -------------------------------- */
.ro-childnav {
    background: var(--ro-surface-alt);
    border-top: 1px solid var(--ro-border);
}
.ro-childnav .ro-section__head {
    margin-bottom: 1.5rem;
}

/* Contact ---------------------------------------------------------------- */
.ro-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ro-gap);
}
.ro-contact__body {
    color: var(--ro-muted);
}
.ro-contact__list {
    list-style: none;
    margin: 1.25rem 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}
.ro-contact__list li {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: baseline;
    gap: 0.5rem;
}
.ro-contact__k {
    color: var(--ro-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ro-hours__title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.ro-hours__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.ro-hours__list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ro-muted);
    border-bottom: 1px dashed var(--ro-border);
    padding-bottom: 0.4rem;
}

.ro-form {
    display: grid;
    gap: 0.9rem;
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius);
    padding: 1.5rem;
    box-shadow: var(--ro-shadow-sm);
}
.ro-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
.ro-form label {
    display: grid;
    gap: 0.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ro-ink);
}
.ro-form input,
.ro-form textarea {
    font: inherit;
    font-weight: 400;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-sm);
    background: var(--ro-surface-alt);
}
.ro-form input:focus,
.ro-form textarea:focus {
    outline: 2px solid var(--ro-primary);
    outline-offset: 1px;
}
.ro-form__note {
    font-size: 0.8rem;
    color: var(--ro-muted);
    font-weight: 400;
    margin: 0;
}
/* Contact — hours as a prominent card, not fine print. Scoped to .ro-contact so
   the footer/location hours keep their compact styling. */
.ro-contact .ro-hours {
    margin-top: 1.75rem;
    background: var(--ro-surface-alt);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius);
    padding: 1.1rem 1.35rem 0.5rem;
}
.ro-contact .ro-hours__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    margin: 0 0 0.4rem;
}
.ro-contact .ro-hours__title .ro-icon {
    width: 1.15em;
    height: 1.15em;
    color: var(--ro-primary);
    flex: none;
}
.ro-contact .ro-hours__list {
    gap: 0;
}
.ro-contact .ro-hours__list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1.05rem;
    color: var(--ro-ink);
    border-bottom: 1px solid var(--ro-border);
    padding: 0.7rem 0;
}
.ro-contact .ro-hours__list li:last-child {
    border-bottom: 0;
}
.ro-contact .ro-hours__day {
    font-weight: 600;
}
.ro-contact .ro-hours__time {
    color: var(--ro-muted);
    font-variant-numeric: tabular-nums;
}
.ro-contact .ro-hours__list li.is-closed .ro-hours__time {
    font-style: italic;
    opacity: 0.85;
}

/* Map — real embedded map (framed), with a directions link; the striped
   placeholder is the fallback when there's no address. */
.ro-map {
    margin-top: 1.25rem;
    border-radius: var(--ro-radius);
    overflow: hidden;
    border: 1px solid var(--ro-border);
    box-shadow: var(--ro-shadow-sm);
}
.ro-map__frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
}
.ro-map__dir {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    font-weight: 600;
    color: var(--ro-primary);
}
.ro-map__dir:hover {
    text-decoration: underline;
}
.ro-map--placeholder {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    color: var(--ro-muted);
    background: repeating-linear-gradient(
        45deg,
        var(--ro-surface-alt),
        var(--ro-surface-alt) 12px,
        #e9f1f2 12px,
        #e9f1f2 24px
    );
}

/* Footer ----------------------------------------------------------------- */
.ro-footer {
    background: var(--ro-ink);
    color: #cdd8dc;
    margin-top: 2rem;
}
.ro-footer a {
    color: #eaf1f2;
}
/* CTA band across the top of the footer. */
.ro-footer__cta-band {
    background: color-mix(in srgb, var(--ro-primary) 22%, var(--ro-ink));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ro-footer__cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.ro-footer__cta-copy .ro-eyebrow {
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}
.ro-footer__cta-head {
    color: #fff;
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0.15rem 0 0;
}
.ro-footer__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.ro-footer__cta-actions .ro-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}
.ro-footer__cta-actions .ro-btn--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Columns: brand block wider, nav columns share the rest (wrap as needed). */
.ro-footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ro-gap) clamp(1.5rem, 4vw, 3rem);
    padding: clamp(2.5rem, 5vw, 3.5rem) 1.25rem;
    align-items: flex-start;
}
.ro-footer__brand {
    flex: 1 1 240px;
    min-width: 220px;
    max-width: 360px;
}
.ro-footer__col {
    flex: 1 1 140px;
    min-width: 130px;
}
.ro-footer__phone {
    margin: 0.5rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
}
.ro-footer__more {
    color: var(--ro-primary-2, #eaf1f2);
    font-weight: 600;
}
.ro-footer__title a {
    color: inherit;
}
.ro-footer__title a:hover {
    color: #fff;
    text-decoration: none;
}
.ro-footer__brand .ro-brand__name {
    color: #fff;
    font-size: 1.2rem;
}
.ro-footer__tagline {
    color: #9fb2b8;
    margin: 0.5rem 0 1rem;
}
.ro-footer__title {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 0.8rem;
}
.ro-social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0;
    margin: 1.1rem 0 0;
}
.ro-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #eaf1f2;
    transition: background 0.15s ease, color 0.15s ease;
}
.ro-social a:hover {
    background: var(--ro-primary);
    border-color: var(--ro-primary);
    color: #fff;
}
.ro-social__icon {
    width: 1.1rem;
    height: 1.1rem;
}
.ro-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.ro-footer__menu a {
    color: #cdd8dc;
}
.ro-footer__menu a:hover {
    color: #fff;
    text-decoration: none;
}
.ro-footer__menu .sub-menu {
    display: none;
} /* keep footer nav flat */
.ro-footer__cta {
    margin-top: 0.9rem;
}
.ro-footer .ro-hours__list li {
    color: #9fb2b8;
    border-color: rgba(255, 255, 255, 0.12);
}
.ro-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    color: #9fb2b8;
}
.ro-footer__bar p {
    margin: 0;
    padding: 1rem 0;
}
.ro-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
}
.ro-footer__legal {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.ro-footer__legal a {
    color: #9fb2b8;
}
.ro-footer__legal a:hover {
    color: #fff;
}

/* Legal pages (/privacy-policy/, /hipaa-notice/). */
.ro-legal {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.ro-legal__inner {
    max-width: 820px;
}
.ro-legal__head {
    text-align: left;
    margin: 0 0 1.5rem;
    max-width: none;
}
.ro-legal__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.ro-legal__body h2 {
    font-size: clamp(1.3rem, 2.8vw, 1.7rem);
    margin-top: 2.2rem;
}
.ro-legal__body h3 {
    font-size: 1.1rem;
    margin-top: 1.4rem;
}
.ro-legal__body p,
.ro-legal__body li {
    color: var(--ro-ink);
}

.ro-prose {
    max-width: var(--wp--style--global--content-size, 760px);
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
    .ro-cards,
    .ro-quotes {
        grid-template-columns: repeat(2, 1fr);
    }
    .ro-steps__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ro-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ro-hero--split .ro-hero__inner,
    .ro-textmedia__inner,
    .ro-contact__grid {
        grid-template-columns: 1fr;
    }
    .ro-textmedia--media-left .ro-textmedia__media {
        order: 0;
    }
    .ro-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .ro-navtoggle {
        display: flex;
    }
    /* Full-screen cover menu with a close (×) button top-right. */
    .ro-nav {
        position: fixed;
        inset: 0;
        z-index: 100;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--ro-surface);
        padding: 4rem 1.5rem 2rem;
        box-shadow: none;
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    body.ro-nav-open .ro-nav {
        display: flex;
    }
    body.ro-nav-open {
        overflow: hidden;
    }
    /* The header's backdrop-filter makes it the containing block for its fixed
       descendants (same as a transform would), which would trap the cover menu
       inside the header's box instead of filling the viewport. Drop it while the
       menu is open — the opaque cover hides the header anyway. The `.ro-navbar-custom`
       selector is needed to out-specify the inline `body.ro-navbar-custom .ro-header`
       backdrop rule emitted by navbar_css (custom header bg + opacity), which else
       wins by source order and re-traps the cover on internal pages. */
    body.ro-nav-open .ro-header,
    body.ro-nav-open.ro-navbar-custom .ro-header,
    body.ro-nav-open.ro-has-herobg .ro-header--solid {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .ro-nav__close {
        display: block;
        position: absolute;
        top: 0.9rem;
        right: 1.1rem;
        background: none;
        border: 0;
        font-size: 2.2rem;
        line-height: 1;
        color: var(--ro-ink);
        cursor: pointer;
        padding: 0.2rem 0.5rem;
    }
    .ro-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .ro-nav__list li {
        border-bottom: 1px solid var(--ro-border);
    }
    .ro-nav__list a {
        display: block;
        padding: 0.9rem 0;
    }
    .ro-nav__cta {
        margin-top: 1rem;
    }
    /* Book-now stays the primary CTA; the phone reads as a lighter call option. */
    .ro-nav__cta--phone {
        margin-top: 1.25rem;
        margin-bottom: 0;
        background: transparent;
        color: var(--ro-primary-dark);
        border-color: var(--ro-border);
        box-shadow: none;
    }
    .ro-nav__cta--phone + .ro-nav__cta--book {
        margin-top: 0.6rem;
    }
    /* Submenus are collapsed by default and expand when the parent item is
       tapped (JS toggles `.is-open`) — no auto-explode on touch. */
    .ro-nav__list .sub-menu {
        position: static;
        display: none;
        max-height: none;
        overflow: visible;
        box-shadow: none;
        border: 0;
        padding: 0 0 0.5rem 1rem;
        min-width: 0;
        background: transparent;
    }
    .ro-nav__list .menu-item-has-children.is-open > .sub-menu {
        display: flex;
    }
    .ro-nav__list .sub-menu a {
        padding: 0.5rem 0;
    }
    /* Mega dropdown collapses to a stacked, tap-to-open list on mobile. Reset the
       desktop columns centering (transform/width/left) so it stacks in the drawer. */
    .ro-nav__list .ro-nav__mega {
        position: static;
        display: none;
        flex-direction: column;
        gap: 0.25rem;
        left: auto;
        right: auto;
        transform: none;
        width: auto;
        max-width: none;
        max-height: none;
        overflow: visible;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0 0 0.5rem 1rem;
        background: transparent;
    }
    .ro-nav__list .ro-nav-mega-parent.is-open > .ro-nav__mega {
        display: flex;
    }
    .ro-nav__col {
        min-width: 0;
    }
    .ro-nav__collist a {
        padding: 0.5rem 0;
    }
    /* Columns mega on mobile: the desktop `--columns` rules (max-content width,
       centering transform, row-wrap, fixed column min-width) out-specify the
       generic .ro-nav__mega reset above, so they must be flattened explicitly —
       otherwise the Services submenu keeps its narrow, off-center desktop panel
       inside the drawer instead of a full-width stacked list. */
    .ro-nav__list .ro-nav__mega--columns {
        left: auto;
        right: auto;
        transform: none;
        width: auto;
        max-width: none;
        flex-flow: column;
        gap: 0.25rem;
        max-height: none;
        overflow: visible;
    }
    .ro-nav__mega--columns .ro-nav__col {
        min-width: 0;
    }
    .ro-nav__mega--columns .ro-nav__colhead {
        padding: 0.4rem 0 0.2rem;
        margin-bottom: 0.1rem;
        border-bottom: 0;
    }
    /* Flyout has no hover on mobile — flatten it to the same stacked list as
       columns (category label + its pages), matching the classic mobile menu. */
    .ro-nav__mega--flyout .ro-nav__col {
        position: static;
    }
    .ro-nav__mega--flyout .ro-nav__collist {
        position: static;
        display: block;
        min-width: 0;
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .ro-nav__mega--flyout .ro-nav__colhead {
        display: block;
        padding: 0.4rem 0 0.2rem;
        margin-top: 0.25rem;
        font-family: var(--ro-font-heading);
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ro-muted);
        background: transparent;
    }
    .ro-nav__mega--flyout .ro-nav__colhead::after {
        content: none;
    }
    /* Caret on parent items indicates they expand; it flips when open. */
    .ro-nav__list .menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .ro-nav__list .menu-item-has-children > a::after {
        content: "\25BE";
        margin-left: 0.5rem;
        color: var(--ro-muted);
        transition: transform 0.15s ease;
    }
    .ro-nav__list .menu-item-has-children.is-open > a::after {
        transform: rotate(180deg);
    }
}

@media (max-width: 560px) {
    .ro-cards,
    .ro-quotes,
    .ro-stats__grid,
    .ro-steps__grid,
    .ro-form__row {
        grid-template-columns: 1fr;
    }
    .ro-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Block-editor content (core blocks seeded from the Site Profile)
   Rendered inside .ro-content; sections are full-width core/group blocks
   with constrained inner content. Reuses the tokens above.
   ========================================================================= */

.ro-content {
    overflow-x: clip;
}

/* Section bands (full-width groups) + vertical rhythm + side gutters. */
.ro-content .ro-section {
    padding-top: clamp(2.5rem, 6vw, 5rem);
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
    padding-inline: 1.25rem;
}
.ro-content .ro-hero {
    background: linear-gradient(
        180deg,
        var(--ro-surface-alt),
        var(--ro-surface)
    );
}
.ro-content .ro-hero--compact {
    background: var(--ro-surface-alt);
    text-align: center;
}
.ro-content .ro-services,
.ro-content .ro-testimonials,
.ro-content .ro-faq {
    background: var(--ro-surface-alt);
}
/* The services directory is the page's centerpiece: give it a stronger branded
   band (clear contrast against the lighter hero/FAQ) and extra vertical room so
   it has real presence on desktop. */
.ro-content .ro-services--directory {
    background: var(--ro-surface-alt);
    background: color-mix(in srgb, var(--ro-primary) 12%, var(--ro-surface));
    padding-block: clamp(4.5rem, 9vw, 8rem);
}
/* Insurance & financing sits on a soft branded tint (light band). The closing
   CTA is the single dark gradient "moment" in the home flow, so this band stays
   light — the banner/pills/badges/logo chips already read as light components. */
.ro-content .ro-insurance {
    background: color-mix(in srgb, var(--ro-primary) 6%, var(--ro-surface));
}
/* A section given a dark custom background (Rise One → Sections) whitens its
   heading for contrast; cards keep their own colors. */
.ro-content .ro-secbg-dark > .ro-section__head h2,
.ro-content .ro-secbg-dark > .ro-section__head .ro-eyebrow,
.ro-content .ro-secbg-dark > .ro-section__head .ro-lead {
    color: #fff;
}
.ro-content .ro-stats,
.ro-content .ro-textmedia,
.ro-content .ro-richtext,
.ro-content .ro-steps,
.ro-content .ro-callout {
    background: var(--ro-surface);
}
/* Providers sits on a soft branded tint so it reads distinctly from the
   neighboring bands and the white provider cards pop. */
.ro-content .ro-team {
    background: var(--ro-surface-alt);
    background: color-mix(in srgb, var(--ro-primary) 16%, var(--ro-surface));
}
.ro-content .ro-richtext .ro-prose {
    margin-inline: auto;
    max-width: var(--wp--style--global--content-size, 760px);
}
.ro-content .ro-richtext .ro-prose p {
    color: var(--ro-ink);
    font-size: 1.08rem;
}

/* Wide/full alignment fallbacks (classic theme). */
.ro-content .is-layout-constrained > .alignwide {
    max-width: var(--wp--style--global--wide-size, 1140px);
}

/* Shared inline helpers emitted by the serializer. */
.ro-content .ro-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ro-primary);
    margin-bottom: 0.4rem;
}
.ro-content .ro-lead {
    color: var(--ro-muted);
    font-size: 1.1rem;
}
.ro-content .ro-section__head {
    text-align: center;
    margin-bottom: 2rem;
}
.ro-content .ro-section__head .ro-lead {
    margin-left: auto;
    margin-right: auto;
    max-width: 42ch;
}

/* Buttons. */
.ro-content .wp-block-button__link {
    background: var(--ro-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.8rem 1.4rem;
    font-family: var(--ro-font-heading);
    font-weight: 600;
}
.ro-content .wp-block-button__link:hover {
    background: var(--ro-primary-dark);
}
.ro-content .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--ro-ink);
    border: 1.5px solid var(--ro-border);
}

/* Hero. */
.ro-content .ro-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.12;
}
.ro-content .ro-hero--compact h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.ro-content .ro-hero .wp-block-columns {
    align-items: center;
    gap: var(--ro-gap);
}
.ro-content .ro-hero__media img {
    border-radius: var(--ro-radius);
    box-shadow: var(--ro-shadow);
    width: 100%;
}

/* Stat / card / quote / member tiles (each is a wp-block-column). */
.ro-content .ro-stat,
.ro-content .ro-card,
.ro-content .ro-quote,
.ro-content .ro-member {
    background: var(--ro-surface);
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius);
    padding: 1.6rem;
    box-shadow: var(--ro-shadow-sm);
}
.ro-content .ro-stat {
    text-align: center;
    padding: 1.5rem 1rem;
}
.ro-content .ro-stat h3 {
    color: var(--ro-primary);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0;
}
.ro-content .ro-stat__label {
    color: var(--ro-muted);
    margin: 0;
    font-size: 0.92rem;
}
.ro-content .ro-card h3 {
    margin-top: 0;
}
.ro-content .ro-card p {
    color: var(--ro-muted);
    margin-bottom: 0;
}
.ro-content .ro-quote__text {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}
.ro-content .ro-quote__name {
    font-weight: 600;
    font-family: var(--ro-font-heading);
    margin: 0;
}
.ro-content .ro-quote__meta {
    color: var(--ro-muted);
    font-size: 0.88rem;
    margin: 0;
}

/* Team. */
.ro-content .ro-member {
    text-align: center;
    padding: 2.5rem 1.9rem;
}
.ro-content .ro-member .wp-block-image {
    margin: 0 auto 1.3rem;
}
/* The figure sits full-width, so center the avatar itself (a block image
   ignores the card's text-align). */
.ro-content .ro-member .wp-block-image img {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin-inline: auto;
}
.ro-content .ro-member h3 {
    margin: 0 0 0.15rem;
    font-size: 1.25rem;
}
.ro-content .ro-member__role {
    color: var(--ro-primary);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
}
.ro-content .ro-member p {
    color: var(--ro-muted);
    margin: 15px 0 0;
    font-size: 0.92rem;
}
/* Homepage provider cards show no bio (kept on the dedicated team page).
   Targets the bio paragraph whether or not it carries the ro-member__bio class. */
body.ro-front .ro-content .ro-team .ro-member p:not(.ro-member__role) {
    display: none;
}

/* Team page — editorial "split" layout: alternating portrait + bio rows. */
.ro-content .ro-team--split {
    background: var(--ro-surface);
}
.ro-teamlist {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    max-width: 1140px;
    margin-inline: auto;
}
.ro-teamrow {
    display: grid;
    grid-template-columns: 0.82fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
.ro-teamrow:not(:first-child) {
    border-top: 1px solid var(--ro-border);
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
.ro-teamrow__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--ro-radius);
    box-shadow: var(--ro-shadow);
    display: block;
}
.ro-teamrow__media.is-placeholder img {
    aspect-ratio: 4 / 5;
    object-fit: contain;
    background: var(--ro-surface-alt);
    padding: 16%;
    box-shadow: none;
}
.ro-teamrow__text .ro-eyebrow {
    margin-bottom: 0.4rem;
}
.ro-teamrow__name {
    font-family: var(--ro-font-heading);
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    margin: 0.2rem 0 1.2rem;
}
.ro-teamrow__bio p {
    color: var(--ro-muted);
    line-height: 1.75;
    margin: 0 0 1rem;
}
.ro-teamrow__bio p:last-child {
    margin-bottom: 0;
}
/* Alternate: even rows place the portrait on the right. */
.ro-teamrow:nth-child(even) .ro-teamrow__media {
    order: 2;
}
@media (max-width: 720px) {
    /* Stacked + centered on phones (matches the page's centered hero/heading);
       the desktop alternating L/R split collapses to one centered column. */
    .ro-teamrow {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        justify-items: center;
        text-align: center;
    }
    .ro-teamrow:nth-child(even) .ro-teamrow__media {
        order: 0;
    }
    .ro-teamrow__media {
        width: 100%;
        max-width: 320px;
        margin-inline: auto;
    }
    /* Photo + role + name center; the bio stays left-aligned so longer,
       multi-paragraph copy stays readable. */
    .ro-teamrow__bio {
        text-align: left;
    }
}

/* A single provider becomes a wider, left/right "featured" card instead of a
   lone narrow column. (Grid caps at 3 across; 2–3 stay as centered columns.) */
.ro-content .ro-team__grid:has(> .ro-member:only-child) {
    grid-template-columns: 1fr;
    max-width: 760px;
}
.ro-content .ro-team__grid:has(> .ro-member:only-child) .ro-member {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: 1.75rem;
    align-items: center;
    text-align: left;
    padding: 2rem;
}
.ro-content
    .ro-team__grid:has(> .ro-member:only-child)
    .ro-member
    .wp-block-image {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
    align-self: center;
}
.ro-content
    .ro-team__grid:has(> .ro-member:only-child)
    .ro-member
    .wp-block-image
    img {
    width: 200px;
    height: 200px;
}
@media (max-width: 480px) {
    .ro-content .ro-team__grid:has(> .ro-member:only-child) .ro-member {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    .ro-content
        .ro-team__grid:has(> .ro-member:only-child)
        .ro-member
        .wp-block-image {
        grid-column: auto;
        grid-row: auto;
    }
}
/* Keep home providers' bios tidy even if copy runs long (belt-and-suspenders
   with the sentence-clip done at build time). Home only — the /team page keeps
   full bios. */
body.ro-front .ro-member__bio {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Text + media. */
.ro-content .ro-textmedia .wp-block-columns {
    align-items: center;
    gap: var(--ro-gap);
}
.ro-content .ro-textmedia__media img {
    border-radius: var(--ro-radius);
    width: 100%;
}
.ro-content .ro-textmedia__text ul.wp-block-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.ro-content .ro-textmedia__text ul.wp-block-list li {
    position: relative;
    padding-left: 1.8rem;
}
.ro-content .ro-textmedia__text ul.wp-block-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ro-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")
        center/70% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")
        center/70% no-repeat;
}

/* FAQ. */
.ro-content .ro-faq__list {
    display: grid;
    gap: 0.75rem;
    max-width: 760px;
    margin-inline: auto;
}
.ro-content .ro-faq__item {
    border: 1px solid var(--ro-border);
    border-radius: var(--ro-radius-sm);
    background: var(--ro-surface);
    padding: 1.1rem 1.3rem;
}
.ro-content .ro-faq__item summary {
    cursor: pointer;
    font-family: var(--ro-font-heading);
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.ro-content .ro-faq__item > p {
    color: var(--ro-muted);
    margin: 0;
    padding: 0;
}
/* Desktop: lay the FAQ cards out as a 3-column grid; on mobile they fall back to
   the single stacked column above. Cancel WordPress's constrained-layout block-gap
   top margin on the cards (it offsets every card but the first, breaking the row
   alignment — grid `gap` spaces them), and give each card `height: 100%` so the
   cells in a row are equal height (a <details> box won't stretch on its own). */
@media (min-width: 721px) {
    .ro-content .ro-faq__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        max-width: var(--ro-maxw);
    }
    .ro-content .ro-faq__list > .ro-faq__item {
        margin-block: 0;
        height: 100%;
    }
}

/* CTA band. */
.ro-content .ro-cta {
    background: linear-gradient(
        135deg,
        var(--ro-primary),
        var(--ro-primary-dark)
    );
    text-align: center;
}
.ro-content .ro-cta h2,
.ro-content .ro-cta p {
    color: #fff;
}
/* The button sits in a flex .wp-block-buttons, so text-align:center can't center
   it — center the flex track itself. */
.ro-content .ro-cta .wp-block-buttons {
    justify-content: center;
}
.ro-content .ro-cta .wp-block-button__link {
    background: var(--ro-accent);
    color: #3a2a06;
}

/* =========================================================================
   Service detail pages (body.ro-service) — a richer baseline: split hero with
   Book/Call, a clean editorial article (no empty full-bleed bands), and a
   related-services strip. Assembled at render time in inc/rise-one-settings.php.
   ========================================================================= */

/* Split hero: copy + CTAs on one side, image on the other. */
.ro-service .ro-content .ro-hero--service {
    background: color-mix(in srgb, var(--ro-primary) 6%, var(--ro-surface));
    text-align: left;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.ro-svc-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    max-width: var(--wp--style--global--content-size, 1140px);
    margin-inline: auto;
}
.ro-svc-hero__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin: 0.1rem 0 0.6rem;
}
.ro-svc-hero__text .ro-lead {
    color: var(--ro-muted);
    font-size: 1.12rem;
    max-width: 46ch;
}
.ro-svc-hero__text .ro-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.4rem;
}
.ro-svc-hero__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ro-radius);
    box-shadow: var(--ro-shadow);
    display: block;
}

/* Editorial article: drop the alternating full-bleed prose bands and read the
   body as one clean, centered column with generous rhythm.

.ro-service .ro-content .ro-prose-band,
.ro-service .ro-content .ro-prose-band--alt {
    background: none;
    padding-block: 0;
}

 */
/* Space the article off the colored bands it sits between. On service pages the
   article is buffered by the benefits/steps sections; on service-area pages it
   sits directly between the hero and the cta, so pad those two edges (targeting
   the actual first/last prose band, not the first/last div — `:first-of-type`
   would match the hero/cta divs, not the prose). */
.ro-service .ro-content .ro-hero--service + .ro-prose-band {
    padding-top: clamp(1.75rem, 4vw, 2.75rem);
}
.ro-service .ro-content .ro-prose-band:has(+ .ro-cta) {
    padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.ro-service .ro-content .ro-prose {
    max-width: 760px;
    margin-inline: auto;
}
.ro-service .ro-content .ro-prose > * {
    margin-block: 0;
}
.ro-service .ro-content .ro-prose h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-top: 2.4rem;
    margin-bottom: 0.6rem;
}
.ro-service .ro-content .ro-prose > h2:first-child {
    margin-top: 0;
}
.ro-service .ro-content .ro-prose p {
    color: var(--ro-ink);
    font-size: 1.08rem;
    margin-bottom: 1rem;
}
/* Lead-in: the article's first paragraph reads larger (after the hero on
   service-area pages, after the benefits section on service pages). */
.ro-service
    .ro-content
    .ro-hero--service
    + .ro-prose-band
    .ro-prose
    > p:first-child,
.ro-service
    .ro-content
    .ro-benefits
    + .ro-prose-band
    .ro-prose
    > p:first-child {
    font-size: 1.22rem;
    line-height: 1.6;
    color: var(--ro-ink);
}
/* Benefit lists → checkmarked rows. */
.ro-service .ro-content .ro-prose ul {
    list-style: none;
    margin: 0.4rem 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.ro-service .ro-content .ro-prose ul li {
    position: relative;
    padding-left: 1.9rem;
    color: var(--ro-ink);
}
.ro-service .ro-content .ro-prose ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ro-primary) 16%, var(--ro-surface));
}
.ro-service .ro-content .ro-prose ul li::after {
    content: "✓";
    position: absolute;
    left: 0.28rem;
    top: 0.02rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ro-primary);
}

/* Related services strip. */
.ro-service .ro-content .ro-related {
    background: var(--ro-surface-alt);
}
.ro-cards--related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
    justify-content: center;
    gap: 1rem;
    max-width: var(--ro-maxw);
    margin-inline: auto;
}
.ro-cards--related .ro-linkcard {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Mobile: stack the hero, image first. */
@media (max-width: 768px) {
    .ro-svc-hero__inner {
        grid-template-columns: 1fr;
    }
    .ro-svc-hero__media {
        order: -1;
    }
    .ro-svc-hero__text .ro-hero__actions {
        justify-content: flex-start;
    }
    .ro-cards--related {
        grid-template-columns: 1fr;
    }
}

/* Benefits split (service pages): titled benefit rows beside an image. */
.ro-content .ro-benefits__inner {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: stretch;
    max-width: var(--wp--style--global--content-size, 1140px);
    margin-inline: auto;
}
.ro-benefits__media {
    display: flex;
}
.ro-benefits__media img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    border-radius: var(--ro-radius);
    box-shadow: var(--ro-shadow);
    display: block;
}
.ro-benefits__head .ro-eyebrow {
    margin-bottom: 0.4rem;
}
.ro-benefits__head h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin: 0 0 1.1rem;
}
.ro-benefits__list {
    display: grid;
    gap: 0;
}
.ro-benefit {
    padding: 0.95rem 0;
    border-top: 1px solid var(--ro-border);
}
.ro-benefit:first-child {
    border-top: none;
    padding-top: 0;
}
.ro-benefit__title {
    font-size: 1.08rem;
    margin: 0 0 0.2rem;
}
.ro-benefit__body {
    color: var(--ro-muted);
    margin: 0;
}
@media (max-width: 768px) {
    .ro-content .ro-benefits__inner {
        grid-template-columns: 1fr;
    }
    .ro-benefits__media {
        order: -1;
    }
}

/* Large + 4K desktops: the fixed 1140px shell + 760px prose measure leave big
   empty margins and make the main content feel narrow. Widen the shell, the
   prose/FAQ column, and the services directory in two tiers so content pages use
   more of the screen — up to a wide 1200px prose on 4K-class monitors. Placed last
   so they override the base caps by source order. (Full-bleed hero/benefits media
   sections are already wide, so they're left as-is.) */
@media (min-width: 1440px) {
    :root {
        --ro-maxw: 1360px;
    }
    .ro-prose-band .ro-prose,
    .ro-content .ro-prose-band .ro-prose {
        max-width: 960px;
    }
    .ro-faq__inner {
        max-width: 960px;
    }
    .ro-svcdir {
        max-width: 1280px;
    }
}
@media (min-width: 1920px) {
    :root {
        --ro-maxw: 1720px;
    }
    .ro-prose-band .ro-prose,
    .ro-content .ro-prose-band .ro-prose {
        max-width: 1400px;
    }
    .ro-faq__inner {
        max-width: 1200px;
    }
    .ro-svcdir {
        max-width: 1540px;
    }
}