/* ==========================================================================
   Glacial Blocks — Retina Associates of Cleveland
   Shared layout helpers, design-token utilities and editor neutralizers.
   The visual language (colors, gradients, radii, type) comes from css/webflow.css
   (:root tokens --blue --cyan --yellow --light-red --block --white) and the
   homepage classes reused verbatim by blocks (.hp_headline, .section_header,
   .dot_div, .button, .button._2, .stats_cell, .hp_img_div, .doc_btn, .location_cell,
   .resouces_link). This file prints AFTER webflow.css AND style.css.
   ========================================================================== */

:root {
    --gl-navy: #01294a;
    --gl-navy-deep: #001b31;
    --gl-light: #edf4f9;
    --gl-radius: 20px;
    --gl-radius-sm: 10px;
    --gl-grad-brand: linear-gradient(131deg, var(--blue), var(--cyan));
    --gl-grad-warm: linear-gradient(139deg, var(--light-red), var(--yellow));
    --gl-grad-dark: radial-gradient(circle at 50% 100%, #0076a7, #002849);
    --gl-shadow: 0 19px 20px rgba(0, 0, 0, 0.16);
    --gl-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
    --gl-section-pad: clamp(1.5rem, 3.5vw, 3.5rem); /* was clamp(1.5rem, 6vw, 6rem) — tightened per the 2026-09-24 client edits */
    --gl-container: var(--gl-max-width, 1550px);
    --gl-on-dark-soft: rgba(255, 255, 255, 0.82);
}

/* ---- Section band: full-bleed wrapper + container aligned with the page column ---- */
.gl-section {
    padding: var(--gl-section-pad) 0;
}

.gl-container {
    width: 90%;
    max-width: var(--gl-container);
    margin: 0 auto;
}

.gl-section--narrow > .gl-container {
    max-width: 960px;
}

.gl-section--pad-none {
    padding: 0;
}

.gl-section--pad-small {
    padding: clamp(1rem, 2vw, 2rem) 0;
}

.gl-section--pad-large {
    padding: clamp(2.5rem, 5.5vw, 5.5rem) 0;
}

/* The first band sits close under the page title, and two white bands in a row share one gap instead of stacking
   two (the white-on-white seam is invisible, so the doubled padding only read as empty space). */
.entry > h1 + .gl-section,
.entry > h1 + .gl-cta {
    padding-top: clamp(0.5rem, 1.25vw, 1.25rem);
}

.gl-section:not(.gl-section--light):not(.gl-section--dark):not(.gl-section--navy) + .gl-section:not(.gl-section--light):not(.gl-section--dark):not(.gl-section--navy) {
    padding-top: 0;
}

.gl-text-center {
    text-align: center;
}

.gl-text-center .section_header {
    justify-content: center;
}

.gl-text-center .gl-checklist li,
.gl-text-center .gl-step {
    text-align: left;
}

/* Backgrounds — the homepage's own surfaces */
.gl-section--light {
    background-color: var(--gl-light);
}

.gl-section--dark {
    background-color: var(--blue);
    background-image: var(--gl-grad-dark);
    color: var(--white);
}

.gl-section--navy {
    background-color: var(--gl-navy);
    color: var(--white);
}

.gl-section--dark :is(h1, h2, h3, h4, h5, h6),
.gl-section--navy :is(h1, h2, h3, h4, h5, h6),
.gl-cta--dark :is(h1, h2, h3, h4, h5, h6) {
    color: var(--white);
}

.gl-section--dark :is(p, li, td, th, .stats_text),
.gl-section--navy :is(p, li, td, th, .stats_text) {
    color: var(--white);
}

.entry :is(.gl-section--dark, .gl-section--navy, .gl-cta--dark) a:not(.gl-btn):not(.doc_btn):not(.gl-page-card):not(.gl-arrow-link):not(.location_name a) {
    color: var(--yellow);
}

.entry :is(.gl-section--dark, .gl-section--navy, .gl-cta--dark) a:not(.gl-btn):not(.doc_btn):not(.gl-page-card):hover {
    color: var(--white);
}

/* homepage gradient headings can't sit on navy — the section forces the white variant look */
.gl-section--dark .hp_headline:not(.locations),
.gl-section--navy .hp_headline:not(.locations) {
    background-image: none;
    -webkit-text-fill-color: inherit;
    color: var(--white);
}

/* Rhythm inside sections and columns. style.css gives .entry h2 a 6% top padding for plain pages —
   sections own their own spacing, so cancel it there and use margins instead. */
.entry .gl-section h2,
.entry .gl-section .gl-heading,
.entry .gl-split h2,
.entry .gl-cta h2,
.entry .gl-card h2,
.entry .gl-section .wp-block-heading {
    padding-top: 0;
}

.gl-container > * + h2,
.gl-container > * + .gl-heading:is(h2),
.gl-col > * + h2,
.gl-col > * + .gl-heading:is(h2),
.gl-split__body > * + h2 {
    margin-top: 1.75rem;
}

.gl-container > * + h3,
.gl-col > * + h3,
.gl-split__body > * + h3,
.gl-card__body > * + h3 {
    margin-top: 1.5rem;
}

.gl-container > :last-child,
.gl-col > :last-child,
.gl-card__body > :last-child,
.gl-split__body > :last-child,
.gl-faq-body > :last-child,
.gl-step__body > :last-child {
    margin-bottom: 0;
}

.gl-container > .section_header + h2,
.gl-container > .section_header + .gl-heading,
.gl-col > .section_header + h2,
.gl-col > .section_header + .gl-heading,
.gl-split__body > .section_header + h2,
.gl-split__body > .section_header + .gl-heading {
    margin-top: 0;
}

.gl-container > .gl-grid,
.gl-container > .gl-steps,
.gl-container > .gl-faq,
.gl-container > .gl-doctors,
.gl-container > .gl-locations,
.gl-container > .gl-page-cards {
    margin-top: 1.5rem;
}

.gl-container > .gl-grid:first-child,
.gl-container > .gl-steps:first-child,
.gl-container > .gl-faq:first-child,
.gl-container > .gl-doctors:first-child,
.gl-container > .gl-locations:first-child,
.gl-container > .gl-page-cards:first-child {
    margin-top: 0;
}

/* ---- Grid primitive ---- */
.gl-grid {
    display: grid;
    gap: 24px;
    align-items: start;
    margin-bottom: 30px;
}

.gl-grid--center {
    align-items: center;
}

.gl-grid--gap-small {
    gap: 16px;
}

.gl-grid--gap-large {
    gap: 48px;
}

.gl-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gl-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gl-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gl-cols-2-1 {
    grid-template-columns: 2fr 1fr;
}

.gl-cols-1-2 {
    grid-template-columns: 1fr 2fr;
}

.gl-col {
    min-width: 0;
}

.gl-col > * + * {
    margin-top: 0;
}

@media (max-width: 991px) {
    .gl-cols-3,
    .gl-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gl-cols-2-1,
    .gl-cols-1-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .gl-cols-2,
    .gl-cols-3,
    .gl-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* swipe-on-mobile is a behaviour modifier: matched alone, appended outside any column preset */
@media (max-width: 767px) {
    .gl-swipe {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .gl-swipe > * {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}

/* ---- Buttons (.button / .button._2 from webflow.css) inside .entry ---- */
.entry a.gl-btn,
.entry span.gl-btn,
.gl-btn {
    text-decoration: none;
    display: inline-block;
    line-height: 1.3;
    transition: all 150ms ease;
}

.entry a.button.gl-btn {
    color: var(--block);
}

.entry a.button.gl-btn:hover {
    color: var(--white);
}

.entry a.button._2.gl-btn {
    color: var(--white);
    margin-left: 0;
    margin-top: 0;
}

.gl-btn--outline,
.entry a.gl-btn--outline {
    background-image: none;
    background-color: transparent;
    border: 2px solid var(--blue);
    color: var(--blue);
    padding: 13px 24px;
}

.gl-btn--outline:hover,
.entry a.gl-btn--outline:hover {
    background-image: none;
    background-color: var(--blue);
    color: var(--white);
}

.gl-btn--white,
.entry a.gl-btn--white {
    background-image: none;
    background-color: var(--white);
    color: var(--blue);
}

.gl-btn--white:hover,
.entry a.gl-btn--white:hover {
    background-image: none;
    background-color: var(--yellow);
    color: var(--block);
}

:is(.gl-section--dark, .gl-section--navy, .gl-cta--dark) .gl-btn--outline,
.entry :is(.gl-section--dark, .gl-section--navy, .gl-cta--dark) a.gl-btn--outline {
    border-color: var(--white);
    color: var(--white);
}

:is(.gl-section--dark, .gl-section--navy, .gl-cta--dark) .gl-btn--outline:hover,
.entry :is(.gl-section--dark, .gl-section--navy, .gl-cta--dark) a.gl-btn--outline:hover {
    background-color: var(--white);
    color: var(--blue);
}

.gl-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 30px;
}

.gl-buttons--center {
    justify-content: center;
}

.gl-buttons--right {
    justify-content: flex-end;
}

.gl-buttons .button._2 {
    margin-left: 0;
    margin-top: 0;
}

@media (max-width: 479px) {
    .gl-buttons--stack-mobile {
        flex-direction: column;
        align-items: stretch;
    }

    .gl-buttons--stack-mobile .gl-btn {
        width: 100%;
        text-align: center;
    }
}

/* ---- Heading block (variants reuse the homepage .hp_headline recipes) ---- */
.entry .hp_headline {
    -webkit-text-fill-color: transparent;
}

.entry .hp_headline.locations {
    -webkit-text-fill-color: inherit;
}

.gl-heading--sm {
    font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.6rem) !important;
    line-height: 1.3 !important;
}

.gl-heading--lg {
    font-size: clamp(1.9rem, 1rem + 3vw, 3.2rem) !important;
    line-height: 1.15 !important;
}

h3.gl-heading,
h4.gl-heading {
    line-height: 1.25;
}

h4.gl-heading:not(.hp_headline) {
    color: var(--cyan);
}

/* ---- Eyebrow (.section_header replica) ---- */
.gl-eyebrow {
    margin-bottom: 12px;
}

.gl-eyebrow .section_header_text {
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ---- Arrow link (.resouces_link replica with an inline currentColor arrow) ---- */
.entry a.gl-arrow-link,
.gl-arrow-link {
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
}

.gl-arrow-link .arrow_icon {
    flex: none;
    width: 24px;
    height: 24px;
    transition: transform 150ms ease;
}

.gl-arrow-link:hover .arrow_icon {
    transform: translateX(4px);
}

.entry a.gl-arrow-link--dark,
.gl-arrow-link--dark {
    color: var(--blue);
}

.entry a.gl-arrow-link--dark:hover,
.gl-arrow-link--dark:hover {
    color: var(--cyan);
}

.entry a.gl-arrow-link:not(.gl-arrow-link--dark):hover {
    color: var(--yellow);
}

.gl-arrow-link + .gl-arrow-link {
    margin-top: 0;
}

/* ---- Callout card ---- */
.gl-card {
    border-radius: var(--gl-radius);
    padding: 30px;
    margin-bottom: 30px;
    height: 100%;
}

.gl-grid .gl-card {
    margin-bottom: 0;
    /* .gl-grid is align-items:start — stretch paired cards so their rules line up */
    align-self: stretch;
}

.gl-card--light {
    background-color: var(--gl-light);
}

.gl-card--white {
    background-color: var(--white);
    box-shadow: var(--gl-shadow-soft);
}

.gl-card--yellow {
    background-color: rgba(255, 201, 55, 0.25);
}

.gl-card--coral {
    background-color: rgba(240, 93, 103, 0.37);
}

.gl-card--cyan {
    background-color: rgba(0, 151, 214, 0.29);
}

.gl-card--blue {
    background-color: rgba(0, 69, 126, 0.31);
}

.gl-card--glass {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: var(--gl-shadow);
    color: var(--white);
}

.gl-card--glass :is(h2, h3, h4, h5, p, li) {
    color: var(--white);
}

.entry .gl-card--glass a:not(.gl-btn) {
    color: var(--yellow);
}

.entry .gl-card__title {
    margin: 0 0 12px;
    padding-top: 0;
    font-size: 1.3rem;
    line-height: 1.3;
    color: inherit;
}

.gl-card--light .gl-card__title,
.gl-card--white .gl-card__title {
    color: var(--blue);
}

:is(.gl-card--yellow, .gl-card--coral, .gl-card--cyan, .gl-card--blue) .gl-card__title {
    color: var(--block);
}

.gl-section--dark :is(.gl-card--light, .gl-card--white) :is(h2, h3, h4, p, li) {
    color: var(--block);
}

.gl-section--dark :is(.gl-card--light, .gl-card--white) .gl-card__title {
    color: var(--blue);
}

.entry .gl-section--dark :is(.gl-card--light, .gl-card--white) a:not(.gl-btn) {
    color: var(--blue);
}

/* ---- Stat (.stats_cell replica) ---- */
.gl-stat {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 30px;
}

.gl-grid .gl-stat {
    margin-bottom: 0;
}

.gl-stat .stats_number {
    color: var(--block);
}

.gl-section--dark .gl-stat,
.gl-section--navy .gl-stat {
    background-color: rgba(255, 255, 255, 0.12);
}

.gl-section--dark .gl-stat .stats_number,
.gl-section--navy .gl-stat .stats_number {
    color: var(--white);
}

/* ---- Split section (photo + content) ---- */
.gl-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
    align-items: center;
}

.gl-split__media,
.gl-split__body {
    min-width: 0;
}

.gl-split--img-right .gl-split__media {
    order: 2;
}

/* The photo keeps its own aspect ratio. webflow.css gives .hp_img_div a fixed height (600 / 400 / 250px) with
   object-fit: cover, which paints the image wider than its box — and `sizes="auto"` picks the srcset candidate from
   the box width, so the browser fetched e.g. the 768px file for a ~900px-wide paint. Height auto = box width is the
   painted width, and the right candidate loads. (Scoped to .gl-split; the homepage's .hp_img_div is untouched.) */
.gl-split .hp_img_div {
    margin: 0;
    height: auto;
}

/* Attribution for a licensed photo (CC BY / BY-SA), set under the split copy since the photo has no caption slot. */
.entry p.gl-photo-credit {
    margin-top: 1.25rem;
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0.8;
}

.gl-split .hp_img_div img,
.gl-split .hp_img {
    width: 100%;
    height: auto;
    border-radius: var(--gl-radius);
    display: block;
}

@media (max-width: 991px) {
    .gl-split__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .gl-split--img-right .gl-split__media {
        order: 0;
    }
}

/* ---- Image block ---- */
.gl-image {
    margin: 0 0 30px;
}

.gl-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--gl-radius);
}

.gl-image--16-9 img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.gl-image--4-3 img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.gl-image--1-1 img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.gl-image--3-4 img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.gl-image--square img {
    border-radius: 0;
}

.gl-image--medium {
    max-width: 650px;
}

.gl-image--small {
    max-width: 400px;
}

.gl-image--center {
    margin-left: auto;
    margin-right: auto;
}

.gl-image--right {
    margin-left: auto;
}

.gl-image figcaption {
    font-style: italic;
    text-align: center;
    margin-top: 12px;
    font-size: 0.95rem;
}

/* ---- FAQ (native details/summary) ---- */
.gl-faq {
    border-top: 1px solid rgba(0, 69, 126, 0.18);
    margin-bottom: 30px;
}

.gl-faq-item {
    border-bottom: 1px solid rgba(0, 69, 126, 0.18);
}

.gl-faq-item > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--blue);
    line-height: 1.35;
}

.gl-faq-item > summary::-webkit-details-marker {
    display: none;
}

.gl-faq-item > summary::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-right: 2.5px solid var(--cyan);
    border-bottom: 2.5px solid var(--cyan);
    transform: rotate(45deg);
    transition: transform 0.25s;
    margin-right: 6px;
}

.gl-faq-item[open] > summary::after {
    transform: rotate(-135deg);
}

.gl-faq-item > summary:hover {
    color: var(--cyan);
}

.gl-faq-body {
    padding: 0 0 24px;
    line-height: 1.6;
}

.gl-faq-body > * + * {
    margin-top: 12px;
}

:is(.gl-section--dark, .gl-section--navy) .gl-faq,
:is(.gl-section--dark, .gl-section--navy) .gl-faq-item {
    border-color: rgba(255, 255, 255, 0.25);
}

:is(.gl-section--dark, .gl-section--navy) .gl-faq-item > summary {
    color: var(--white);
}

:is(.gl-section--dark, .gl-section--navy) .gl-faq-item > summary::after {
    border-color: var(--yellow);
}

/* ---- Accordion (glacial/accordion + accordion-item) ----
   <hN class="gl-accordion-heading"> only carries the heading semantics; the row's look lives on the <button>.
   .gl-accordion-header also matches the editor canvas, where the toggle is a <div> (see accordion-item/index.js). */
.gl-accordion {
    border-top: 1px solid rgba(0, 69, 126, 0.18);
    margin-bottom: 30px;
}

.gl-accordion-item {
    border-bottom: 1px solid rgba(0, 69, 126, 0.18);
}

.gl-accordion-heading,
.entry .gl-accordion-heading {
    margin: 0;
    padding: 0;
    background: none;
    font-size: inherit;
    line-height: inherit;
}

.gl-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 22px 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--blue);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.gl-accordion-title {
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.65rem);
    line-height: 1.25;
}

h3.gl-accordion-heading .gl-accordion-title,
h4.gl-accordion-heading .gl-accordion-title {
    font-size: 1.2rem;
}

button.gl-accordion-header:hover {
    color: var(--cyan);
}

/* plus → minus, drawn in CSS; the state comes from aria-expanded, so it can never disagree with what is announced.
   Same cyan and 2.5px stroke as the FAQ caret (.gl-faq-item > summary::after) so the two disclosures read as a set. */
.gl-accordion-icon {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    border: 2.5px solid var(--cyan);
    border-radius: 50%;
}

.gl-accordion-icon::before,
.gl-accordion-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2.5px;
    margin: -1.25px 0 0 -7px;
    background: var(--cyan);
    border-radius: 1px;
    transition: transform 0.25s;
}

.gl-accordion-icon::after {
    transform: rotate(90deg);
}

.gl-accordion-header[aria-expanded="true"] .gl-accordion-icon::after {
    transform: rotate(0deg);
}

.gl-accordion-inner {
    padding: 0 0 32px;
    font-size: 0.95rem;
}

.gl-accordion-inner > :first-child {
    margin-top: 0;
}

.gl-accordion-inner > :last-child {
    margin-bottom: 0;
}

.gl-accordion-inner > .gl-grid,
.gl-accordion-inner > .gl-steps,
.gl-accordion-inner > .gl-checklist,
.gl-accordion-inner > figure {
    margin-top: 1.5rem;
}

.gl-accordion-inner > .gl-grid:first-child,
.gl-accordion-inner > .gl-steps:first-child,
.gl-accordion-inner > .gl-checklist:first-child,
.gl-accordion-inner > figure:first-child {
    margin-top: 0;
}

.entry .gl-accordion-inner h2,
.entry .gl-accordion-inner h3 {
    padding-top: 0;
}

.gl-accordion-inner > * + h3,
.gl-accordion-inner > * + .gl-heading {
    margin-top: 1.75rem;
}

:is(.gl-section--dark, .gl-section--navy) .gl-accordion,
:is(.gl-section--dark, .gl-section--navy) .gl-accordion-item {
    border-color: rgba(255, 255, 255, 0.25);
}

:is(.gl-section--dark, .gl-section--navy) .gl-accordion-header {
    color: var(--white);
}

:is(.gl-section--dark, .gl-section--navy) button.gl-accordion-header:hover {
    color: var(--yellow);
}

:is(.gl-section--dark, .gl-section--navy) .gl-accordion-icon {
    border-color: var(--yellow);
}

:is(.gl-section--dark, .gl-section--navy) .gl-accordion-icon::before,
:is(.gl-section--dark, .gl-section--navy) .gl-accordion-icon::after {
    background: var(--yellow);
}

/* Printing a condition page should print all of it. */
@media print {
    .gl-accordion-body[hidden] {
        display: block !important;
        content-visibility: visible !important;
    }

    .gl-accordion-icon {
        display: none;
    }
}

/* ---- Steps (numbered process) ---- */
.gl-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    counter-reset: gl-step;
    display: grid;
    gap: 28px;
}

.gl-steps--grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
}

.gl-step {
    counter-increment: gl-step;
    position: relative;
    padding-left: 76px;
    margin: 0;
}

.gl-steps--grid .gl-step {
    padding-left: 0;
    padding-top: 72px;
}

.gl-step::before {
    content: counter(gl-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-image: var(--gl-grad-warm);
    color: var(--block);
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.entry .gl-step__title {
    margin: 0 0 10px;
    padding-top: 0;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--blue);
    min-height: 56px;
    display: flex;
    align-items: center;
}

.gl-steps--grid .gl-step__title {
    min-height: 0;
}

:is(.gl-section--dark, .gl-section--navy) .gl-step__title {
    color: var(--white);
}

/* ---- Icon list (glacial/checklist): dot (default) / check / arrow markers ---- */
.gl-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: grid;
    gap: 12px;
}

.gl-checklist--cols-2 {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
}

.gl-checklist li,
.entry .gl-checklist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    line-height: 1.6;
}

.gl-tick {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-image: var(--gl-grad-warm);
    color: var(--block);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.gl-tick svg {
    width: 14px;
    height: 14px;
}

/* dot marker = the design's .dot_div (coral 10px circle); the li gap provides the spacing */
.gl-checklist .dot_div.gl-marker {
    flex: none;
    margin: 0.55em 4px 0 0;
}

.gl-arrow {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--cyan);
    margin-top: 3px;
    display: inline-flex;
}

.gl-arrow svg {
    width: 100%;
    height: 100%;
}

:is(.gl-section--dark, .gl-section--navy) .gl-arrow {
    color: var(--yellow);
}

@media (max-width: 767px) {
    .gl-checklist--cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Content lists — the coral .dot_div is the bullet everywhere
   Core list blocks (`ul.wp-block-list`) carry a plain disc, so every content
   bullet is redrawn as the design's 10px coral circle (.dot_div, --light-red)
   via ::before — the same marker `.gl-checklist` places inline as a real span.
   Nested levels keep the coral, one size down, so hierarchy still reads.
   `.gl-checklist` and the nav/related/sidebar lists never match: every
   selector below is keyed to `.wp-block-list`.

   --gl-marker-shift carries any padding-top the li adds (the card variant
   below separates entries with a hairline), because an absolutely positioned
   ::before offsets from the li's padding edge, not from its first text line.
   ========================================================================== */
.entry :is(ul, ol).wp-block-list {
    list-style: none;
    padding-left: 0;
}

.entry .wp-block-list > li {
    --gl-marker-shift: 0px;
    position: relative;
    padding-left: 24px;
}

.entry .wp-block-list > li + li {
    margin-top: 0.45rem;
}

.entry ul.wp-block-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    /* centre the dot on the first line: half of the 1.8 line-height, less half the dot */
    top: calc(var(--gl-marker-shift) + 0.9em - 5px);
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: var(--light-red);
}

/* numbered lists: coral numerals instead of the browser's black decimals */
.entry ol.wp-block-list {
    counter-reset: gl-num;
}

.entry ol.wp-block-list > li {
    counter-increment: gl-num;
    padding-left: 28px;
}

.entry ol.wp-block-list > li::before {
    content: counter(gl-num) ".";
    position: absolute;
    left: 0;
    top: var(--gl-marker-shift);
    color: var(--light-red);
    font-weight: 700;
}

/* sub-points: `.entry ul` hands every list a 30px bottom margin — far too much
   for a list nested inside a list item — and the dot steps down a size */
.entry .wp-block-list .wp-block-list {
    margin: 8px 0 0;
    font-size: 0.95em;
}

.entry .wp-block-list .wp-block-list > li::before {
    width: 8px;
    height: 8px;
    top: calc(var(--gl-marker-shift) + 0.9em - 4px);
}

/* ==========================================================================
   Card lists (Types/Stages, Related Complications and any card built the same way)
   A list that is the body of a card is a short run of records, not prose: each
   entry gets a hairline rule, its leading <strong> is promoted to a navy label
   line, and ordered entries get the warm gradient number badge that .gl-tick
   uses — so a stage list reads as numbered steps.
   ========================================================================== */
.entry .gl-card__body > :is(ul, ol).wp-block-list {
    margin-bottom: 0;
}

.entry .gl-card__body > :is(ul, ol).wp-block-list > li + li {
    --gl-marker-shift: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(1, 41, 74, 0.12);
}

.entry .gl-card__body > :is(ul, ol).wp-block-list > li > strong:first-child {
    display: block;
    color: var(--blue);
    line-height: 1.35;
    margin-bottom: 2px;
}

/* dark surfaces: the navy hairline disappears — use a light one */
:is(.gl-card--glass, .gl-section--dark, .gl-section--navy) .gl-card__body > :is(ul, ol).wp-block-list > li + li {
    border-top-color: rgba(255, 255, 255, 0.18);
}

.gl-section--dark :is(.gl-card--light, .gl-card--white) .gl-card__body > :is(ul, ol).wp-block-list > li + li {
    border-top-color: rgba(1, 41, 74, 0.12);
}


/* glass/dark cards already repaint their text white — keep the label readable */
:is(.gl-card--glass, .gl-section--dark, .gl-section--navy) .gl-card__body > :is(ul, ol).wp-block-list > li > strong:first-child {
    color: var(--yellow);
}

.gl-section--dark :is(.gl-card--light, .gl-card--white) .gl-card__body > :is(ul, ol).wp-block-list > li > strong:first-child {
    color: var(--blue);
}

/* numbered stage badge */
.entry .gl-card__body > ol.wp-block-list {
    counter-reset: gl-stage;
}

.entry .gl-card__body > ol.wp-block-list > li {
    counter-increment: gl-stage;
    padding-left: 44px;
}

.entry .gl-card__body > ol.wp-block-list > li::before {
    content: counter(gl-stage);
    top: calc(var(--gl-marker-shift) + 0.1em);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-image: var(--gl-grad-warm);
    color: var(--block);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

/* sub-points hang off the label, not off the badge */
.entry .gl-card__body > ol.wp-block-list .wp-block-list {
    margin-top: 6px;
}

/* a card whose body is a list gets the warm accent rule under its title */
.entry .gl-card:has(> .gl-card__body > :is(ul, ol).wp-block-list) .gl-card__title {
    margin-bottom: 18px;
}

.entry .gl-card:has(> .gl-card__body > :is(ul, ol).wp-block-list) .gl-card__title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    margin-top: 12px;
    background-image: var(--gl-grad-warm);
}

/* ---- Appointment callout / CTA band ---- */
.gl-cta {
    padding: var(--gl-section-pad) 0;
    text-align: center;
}

.gl-cta--dark {
    background-color: var(--blue);
    background-image: var(--gl-grad-dark);
    color: var(--white);
}

.gl-cta--light {
    background-color: var(--gl-light);
}

.gl-cta--warm {
    background-image: var(--gl-grad-warm);
    color: var(--block);
}

.gl-cta__inner {
    max-width: 860px;
}

.entry .gl-cta__title {
    margin: 0 0 14px;
    padding-top: 0;
    color: inherit;
    -webkit-text-fill-color: inherit;
    background-image: none;
}

.gl-cta--light .gl-cta__title {
    color: var(--blue);
}

.gl-cta__text {
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 0 30px;
    color: inherit;
}

.gl-cta--dark .gl-cta__text {
    color: var(--white);
}

.gl-cta .gl-buttons {
    justify-content: center;
    margin-bottom: 0;
}

.gl-cta--warm .entry a.button.gl-btn,
.entry .gl-cta--warm a.button.gl-btn:not(._2) {
    background-image: var(--gl-grad-brand);
    color: var(--white);
}

/* ---- Quote ---- */
.gl-quote {
    border-left: 4px solid var(--cyan);
    padding: 6px 0 6px 24px;
    margin: 0 0 30px;
    font-style: italic;
    color: var(--blue);
}

.gl-quote--card {
    border-left: 0;
    background-color: var(--gl-light);
    border-radius: var(--gl-radius);
    padding: 30px;
    height: 100%;
}

.gl-grid .gl-quote {
    margin-bottom: 0;
}

.gl-quote__stars {
    color: var(--yellow);
    letter-spacing: 3px;
    font-style: normal;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.gl-quote__text,
.entry .gl-quote__text {
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 0 14px;
    color: inherit;
}

.gl-quote__author {
    font-style: normal;
    font-weight: 700;
    color: var(--blue);
}

:is(.gl-section--dark, .gl-section--navy) .gl-quote:not(.gl-quote--card),
:is(.gl-section--dark, .gl-section--navy) .gl-quote:not(.gl-quote--card) .gl-quote__author {
    color: var(--white);
}

:is(.gl-section--dark, .gl-section--navy) .gl-quote--card {
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--white);
}

:is(.gl-section--dark, .gl-section--navy) .gl-quote--card .gl-quote__author {
    color: var(--yellow);
}

/* ---- Latest posts cards ---- */
.gl-latest-posts {
    margin-bottom: 30px;
}

.gl-post-card {
    background: var(--white);
    border-radius: var(--gl-radius);
    box-shadow: var(--gl-shadow-soft);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.gl-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gl-shadow);
}

.gl-post-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--gl-light);
}

.gl-post-card__media img,
.entry .gl-post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.gl-post-card__body {
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gl-post-card__date {
    font-size: 0.85rem;
    color: #5c6670;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.entry .gl-post-card__title {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0;
    padding-top: 0;
    color: var(--blue);
}

.entry .gl-post-card__title a {
    color: var(--blue);
    text-decoration: none;
}

.entry .gl-post-card__title a:hover {
    color: var(--cyan);
}

.gl-post-card__excerpt,
.entry .gl-post-card__excerpt {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    color: var(--block);
}

.gl-latest-posts .gl-buttons {
    margin-top: 30px;
}

/* ---- Doctors grid (.doc_btn cards from the Doctors post type) ---- */
.gl-doctors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.gl-doctors--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gl-doctors--cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gl-doctors .w-layout-cell {
    align-items: stretch;
}

.gl-doctors .doc_btn {
    height: 100%;
}

@media (max-width: 991px) {
    .gl-doctors,
    .gl-doctors--cols-3,
    .gl-doctors--cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .gl-doctors,
    .gl-doctors--cols-3,
    .gl-doctors--cols-5 {
        grid-template-columns: 1fr;
    }
}

/* ---- Locations grid (.location_cell cards from the Locations post type) ---- */
.gl-locations {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.gl-locations--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gl-locations--cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gl-locations .location_cell {
    height: 100%;
}

.gl-locations .address_text {
    height: auto;
    min-height: 72px;
}

.entry .gl-locations .address_text a,
.entry .gl-locations .directions_link,
.entry .gl-locations .location_name a,
.entry .gl-locations .phone_link {
    text-decoration: none;
}

.entry .gl-locations .location_name a:hover,
.entry .gl-locations .location_name a:focus-visible,
.entry .gl-locations .phone_link:hover,
.entry .gl-locations .phone_link:focus-visible {
    text-decoration: underline;
}

/* light tone: for white/light bands (the design's cards are translucent black for dark bands) */
.gl-locations--light .location_cell {
    background-color: var(--gl-light);
}

.gl-locations--light .address_text,
.gl-locations--light .address_text a,
.gl-locations--light .directions_link,
.entry .gl-locations--light .address_text a,
.entry .gl-locations--light .directions_link {
    color: var(--block);
}

.gl-locations--light .location_name a,
.gl-locations--light .phone_link,
.entry .gl-locations--light .location_name a,
.entry .gl-locations--light .phone_link {
    color: var(--blue);
}

/* showImage: the building photo on top of the card */
.gl-location__img {
    margin: -20px -20px 16px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.gl-location__img img,
.entry .gl-location__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* allPhones: every phone_numbers row with its label (Phone, Fax, …) */
.gl-location__phones,
.entry ul.gl-location__phones {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.gl-location__phones li,
.entry .gl-location__phones li {
    margin: 0 0 4px;
    padding: 0;
    line-height: 1.5;
}

.gl-location__phones li::before,
.entry .gl-location__phones li::before {
    content: none;
}

.gl-location__phone-label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gl-location__phones .phone_link {
    font-size: 1.1rem;
}

@media (max-width: 991px) {
    .gl-locations,
    .gl-locations--cols-3,
    .gl-locations--cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .gl-locations,
    .gl-locations--cols-3,
    .gl-locations--cols-5 {
        grid-template-columns: 1fr;
    }
}

/* ---- Child-page / page-link cards ---- */
.gl-page-cards {
    margin-bottom: 30px;
}

.gl-page-card,
.entry a.gl-page-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border-radius: var(--gl-radius);
    background-color: var(--gl-light);
    color: var(--block);
    text-decoration: none;
    height: 100%;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.gl-page-card:hover,
.entry a.gl-page-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gl-shadow-soft);
    color: var(--block);
}

.entry .gl-page-card__title {
    margin: 0;
    padding-top: 0;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--blue);
}

.gl-page-card__text,
.entry .gl-page-card__text {
    margin: 0;
    line-height: 1.55;
}

.gl-page-card__more {
    margin-top: auto;
    color: var(--cyan);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gl-page-card__more svg {
    width: 20px;
    height: 20px;
    transition: transform 150ms ease;
}

.gl-page-card:hover .gl-page-card__more svg {
    transform: translateX(4px);
}

:is(.gl-section--dark, .gl-section--navy) .gl-page-card,
.entry :is(.gl-section--dark, .gl-section--navy) a.gl-page-card {
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--white);
}

:is(.gl-section--dark, .gl-section--navy) .gl-page-card__title {
    color: var(--white);
}

:is(.gl-section--dark, .gl-section--navy) .gl-page-card__more {
    color: var(--yellow);
}

/* ---- Visibility (Advanced tab) — Webflow medium/small breakpoints ---- */
@media (min-width: 992px) {
    .gl-hide-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .gl-hide-tablet {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .gl-hide-mobile {
        display: none !important;
    }
}

/* ---- Two-column order swapping — breakpoint = the grid collapse point (991px) ---- */
@media (min-width: 992px) {
    .gl-swap-desktop > :first-child {
        order: 2;
    }

    .gl-swap-desktop > :last-child {
        order: 1;
    }
}

@media (max-width: 991px) {
    .gl-swap-mobile > :first-child {
        order: 2;
    }

    .gl-swap-mobile > :last-child {
        order: 1;
    }

    .gl-split.gl-swap-mobile .gl-split__media {
        order: 2;
    }

    .gl-split.gl-swap-mobile .gl-split__body {
        order: 1;
    }
}

/* ---- Focus visibility (never removed, only styled) ---- */
.gl-btn:focus-visible,
.gl-arrow-link:focus-visible,
.gl-faq-item > summary:focus-visible,
.gl-accordion-header:focus-visible,
.gl-page-card:focus-visible,
.doc_btn:focus-visible,
.gl-post-card a:focus-visible,
.location_cell a:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 3px;
}

:is(.gl-section--dark, .gl-section--navy, .gl-cta--dark) :is(.gl-btn, .gl-arrow-link, .gl-page-card, .doc_btn, summary, a, .gl-accordion-header):focus-visible {
    outline-color: var(--yellow);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .gl-btn,
    .gl-post-card,
    .gl-page-card,
    .gl-arrow-link .arrow_icon,
    .gl-page-card__more svg,
    .gl-faq-item > summary::after,
    .gl-accordion-icon::before,
    .gl-accordion-icon::after {
        transition: none;
    }

    .gl-post-card:hover,
    .gl-page-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   EDITOR ONLY — keep the canvas honest and editable
   ========================================================================== */
.editor-styles-wrapper {
    font-size: 18px;
}

.editor-styles-wrapper :is(h2, h3, h4, p, ul, ol) {
    margin-bottom: 30px;
}

.editor-styles-wrapper .gl-section :is(h2, h3, h4, p, ul, ol) {
    margin-top: 0;
}

/* Canvas content width. Was `.wp-block { max-width: 1200px }` in admin/css/glacial-editor-style.css, where it
   never reached the iframed canvas. theme.json owns the layout (contentSize 1280px / wideSize 1500px), so this has
   to out-specify core's constrained-layout rule — `:where(.is-layout-constrained) > :not(.alignleft):not(.alignright):not(.alignfull)`
   at (0,3,0) — hence the two attribute :not()s, which also keep the align:full section blocks full-bleed. */
.editor-styles-wrapper .wp-block:not([data-align="full"]):not([data-align="wide"]) {
    max-width: 1200px;

}

.wp-block.alignfull {
    width: 100% !important;
}

.editor-styles-wrapper .wp-block[data-align="full"] {
    margin-left: 0;
    margin-right: 0;
}

.editor-styles-wrapper .alignfull {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
}

.editor-styles-wrapper .gl-hide-desktop,
.editor-styles-wrapper .gl-hide-tablet,
.editor-styles-wrapper .gl-hide-mobile {
    display: revert !important;
    opacity: 0.55;
}

.editor-styles-wrapper .gl-editor-hint {
    font-size: 12px;
    color: #7a7a7a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
}

.editor-styles-wrapper img[data-gl-swap] {
    cursor: pointer;
}

.editor-styles-wrapper .gl-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 2px dashed rgba(0, 69, 126, 0.3);
    border-radius: var(--gl-radius);
    color: #5c6670;
    font-size: 14px;
    cursor: pointer;
    background: var(--gl-light);
}

/* the faq-item canvas edits the question in a div, not a <summary> — give it the summary's look */
.editor-styles-wrapper .gl-faq-summary-edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--blue);
}

.editor-styles-wrapper .gl-faq-summary-edit > * {
    flex: 1 1 auto;
}

.editor-styles-wrapper .gl-faq-summary-edit::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-right: 2.5px solid var(--cyan);
    border-bottom: 2.5px solid var(--cyan);
    transform: rotate(-135deg);
    margin-right: 6px;
}

/* Accordion item in the canvas: the toggle is a <div> holding the editable title, and every panel is shown. */
.editor-styles-wrapper .gl-accordion-header {
    cursor: text;
}

.editor-styles-wrapper .gl-accordion-title {
    flex: 1 1 auto;
}

.editor-styles-wrapper :is(.gl-section--dark, .gl-section--navy) .gl-faq-summary-edit {
    color: var(--white);
}

/* the design's fixed nav offset / hero heights don't apply inside the canvas */
.editor-styles-wrapper .hero_section {
    height: 420px;
}

.editor-styles-wrapper .main_tagline_wrapper {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: -120px;
}