/*
 * Medical Solutions — site specific styles.
 *
 * The Mediox stylesheets are left untouched so the template can be re-imported
 * cleanly; everything project specific belongs here. Loaded last.
 */

/* Inner page content ------------------------------------------------------- */
.page-content .sec-title {
	margin-bottom: 24px;
	margin-top: 40px;
}
.page-content .sec-title:first-child {
	margin-top: 0;
}
.page-content p {
	margin-bottom: 18px;
	max-width: 74ch;
}
/* Text written in the panel's rich text editor. Headings take the theme's
   section-title styling, so a policy page reads like the rest of the site. */
.page-prose h2,
.page-prose h3 {
	margin: 40px 0 24px;
	font-size: 45px;
	font-weight: 800;
	text-transform: capitalize;
	line-height: 1.222;
}
.page-prose h2:first-child,
.page-prose h3:first-child {
	margin-top: 0;
}
.page-prose ul,
.page-prose ol {
	margin: 0 0 18px;
	max-width: 74ch;
}
.page-prose blockquote {
	margin: 0 0 18px;
	padding-left: 20px;
	border-left: 3px solid var(--mediox-base, #1b5fb9);
}
.page-prose--narrow {
	max-width: 760px;
}
@media (max-width: 767px) {
	.page-prose h2,
	.page-prose h3 {
		font-size: 40px;
	}
}
@media (max-width: 575px) {
	.page-prose h2,
	.page-prose h3 {
		font-size: 35px;
	}
}
.page-lead {
	font-size: 19px;
	line-height: 1.7;
	font-weight: 500;
	margin-bottom: 26px !important;
}

.page-list {
	margin: 0 0 26px;
	padding: 0;
	/* The tick icon is the marker; without this the browser adds its own
	   bullet beside it wherever the list is not also .list-unstyled. */
	list-style: none;
}
.page-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
	line-height: 1.7;
}
.page-list li i {
	position: absolute;
	left: 0;
	top: 6px;
	font-size: 14px;
}

/* Card grid used on the overview pages ------------------------------------- */
.page-card {
	height: 100%;
	padding: 32px 30px;
	border-radius: 10px;
	background: #f6f8fb;
	transition: transform .25s ease, box-shadow .25s ease;
}
.page-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -24px rgba(16, 32, 56, .35);
}
.page-card__title {
	font-size: 20px;
	margin-bottom: 12px;
}
.page-card__text {
	margin-bottom: 0 !important;
}

/* Contact page ------------------------------------------------------------- */
.page-contact {
	margin: 0 0 30px;
	padding: 0;
}
.page-contact li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	font-size: 18px;
	font-weight: 600;
}
.page-contact__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #f6f8fb;
	flex: none;
}
.page-address {
	margin-bottom: 18px;
	line-height: 1.8;
	font-style: normal;
}

/* Forms -------------------------------------------------------------------- */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select {
	width: 100%;
	border: 1px solid #dde3ec;
	border-radius: 10px;
	background: #fbfcfe;
	padding: 16px 20px;
	transition: border-color .18s, box-shadow .18s, background .18s;
}
.contact-form textarea {
	min-height: 160px;
	resize: vertical;
}
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover {
	border-color: #bcc7d8;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	outline: none;
	background: #fff;
	border-color: #102038;
	box-shadow: 0 0 0 3px rgba(16, 32, 56, .1);
}

/* A native <select> so it inherits the field styling above. bootstrap-select
   (.selectpicker) hides the real control and swaps in its own button, which
   sits outside these rules and renders narrow and short next to the inputs. */
.contact-form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 46px;
	color: #102038;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236A7C94' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	cursor: pointer;
}

/* Until something is picked the control shows its disabled placeholder, which
   should read like the inputs' placeholder text rather than an entered value. */
.contact-form select:has(option[value=""]:checked) {
	color: #8a97a8;
}

.contact-form select::-ms-expand {
	display: none;
}

/* Captcha ------------------------------------------------------------------ */
.captcha-grp {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.captcha-grp .captcha-code {
	flex: none;
	padding: 15px 22px;
	border-radius: 10px;
	background: #102038;
	color: #fff;
	font-family: "Courier New", ui-monospace, monospace;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .32em;
	text-indent: .32em;
	line-height: 1.2;
	user-select: none;
	transform: skewX(-6deg);
}
.captcha-grp .captcha-refresh {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid #dde3ec;
	transition: background .18s, color .18s;
}
.captcha-grp .captcha-refresh:hover,
.captcha-grp .captcha-refresh:focus-visible {
	background: #102038;
	color: #fff;
}
.captcha-grp input {
	flex: 1 1 180px;
	min-width: 0;
}

@media (max-width: 575px) {
	.captcha-grp .captcha-code { font-size: 18px; padding: 13px 18px; }
}

/* Gallery viewer ----------------------------------------------------------- */
/* Lifted from the template's gallery-filter.html so the design matches exactly. */
.gallery-page.section-space {
        padding-top: 0;
        padding-bottom: 0;
        height: 800px;
        max-height: 800px;
        overflow: hidden;
    }

    .gallery-filter-viewer__fullbleed {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    .gallery-filter-viewer__shell {
        position: relative;
        --gallery-viewer-height: 800px;
    }

    .gallery-filter-viewer__filter {
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 5;
    }

    .gallery-filter-viewer__dropdown {
        width: min(280px, 100%);
    }

    .gallery-filter-viewer__dropdown[open] .gallery-filter-viewer__dropdown-summary {
        background-color: rgba(10, 34, 65, 0.98);
    }

    .gallery-filter-viewer__dropdown-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        list-style: none;
        padding: 16px 18px;
        border-radius: 18px;
        background-color: rgba(10, 34, 65, 0.9);
        color: var(--mediox-white, #FFFFFF);
        box-shadow: 0 18px 40px rgba(10, 34, 65, 0.18);
        cursor: pointer;
    }

    .gallery-filter-viewer__dropdown-summary::-webkit-details-marker {
        display: none;
    }

    .gallery-filter-viewer__dropdown-label {
        display: block;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.66);
    }

    .gallery-filter-viewer__dropdown-value {
        display: block;
        margin-top: 4px;
        font-size: 18px;
        font-weight: 700;
        text-transform: capitalize;
        color: var(--mediox-white, #FFFFFF);
    }

    .gallery-filter-viewer__dropdown-icon {
        font-size: 14px;
        color: var(--mediox-base, #33C1ED);
        transition: transform 220ms ease;
    }

    .gallery-filter-viewer__dropdown[open] .gallery-filter-viewer__dropdown-icon {
        transform: rotate(180deg);
    }

    .gallery-filter-viewer__dropdown-menu {
        margin-top: 10px;
        padding: 10px;
        border-radius: 18px;
        background-color: rgba(10, 34, 65, 0.94);
        box-shadow: 0 18px 40px rgba(10, 34, 65, 0.18);
    }

    .gallery-filter-viewer__dropdown-menu li + li {
        margin-top: 6px;
    }

    .gallery-filter-viewer__dropdown-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: rgba(255, 255, 255, 0.82);
        font: inherit;
        text-transform: capitalize;
        transition: background-color 220ms ease, color 220ms ease;
    }

    .gallery-filter-viewer__dropdown-item.active {
        background-color: rgba(51, 193, 237, 0.16);
        color: var(--mediox-white, #FFFFFF);
    }

    .gallery-filter-viewer__dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.08);
        color: var(--mediox-white, #FFFFFF);
    }

    .gallery-filter-viewer {
        /* Vertical scrolling stays with the page; sideways gestures are ours,
           which also stops the browser's own back/forward swipe firing here. */
        touch-action: pan-y;
        overscroll-behavior-x: contain;
        position: relative;
        height: var(--gallery-viewer-height);
        max-height: 100%;
        background-color: var(--mediox-black, #0A2241);
        overflow: hidden;
    }

    .gallery-filter-viewer__image-wrap {
        position: relative;
        height: 100%;
        max-height: 100%;
    }

    .gallery-filter-viewer__image-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(10, 34, 65, 0.12) 0%, rgba(10, 34, 65, 0.78) 100%);
        pointer-events: none;
    }

    .gallery-filter-viewer__image {
        display: block;
        width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: cover;
        transition: opacity 320ms ease, transform 320ms ease;
    }

    .gallery-filter-viewer__image {
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .gallery-filter-viewer.is-fading .gallery-filter-viewer__image {
        opacity: 0;
        transform: scale(1.03);
    }

    /* The incoming photograph slides in from the side the viewer moved
       towards, so stepping forwards and back feel different. */
    .gallery-filter-viewer.is-enter-next .gallery-filter-viewer__image {
        animation: galleryEnterNext 460ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    .gallery-filter-viewer.is-enter-prev .gallery-filter-viewer__image {
        animation: galleryEnterPrev 460ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    @keyframes galleryEnterNext {
        from { opacity: 0; transform: translateX(3.5%) scale(1.04); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes galleryEnterPrev {
        from { opacity: 0; transform: translateX(-3.5%) scale(1.04); }
        to   { opacity: 1; transform: none; }
    }

    /* The caption follows a beat later, so the two do not move as one block. */
    .gallery-filter-viewer.is-enter-next .gallery-filter-viewer__copy > *,
    .gallery-filter-viewer.is-enter-prev .gallery-filter-viewer__copy > * {
        animation: galleryCopyIn 460ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    .gallery-filter-viewer__copy > *:nth-child(2) { animation-delay: 60ms; }
    .gallery-filter-viewer__copy > *:nth-child(3) { animation-delay: 110ms; }

    @keyframes galleryCopyIn {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        .gallery-filter-viewer__image,
        .gallery-filter-viewer.is-enter-next .gallery-filter-viewer__image,
        .gallery-filter-viewer.is-enter-prev .gallery-filter-viewer__image,
        .gallery-filter-viewer__copy > * {
            animation: none !important;
            transition: none !important;
        }
    }

    /* The rule above sets display:block, which beats the browser's own styling
       for [hidden]. Without this the hidden <img> still occupies the frame. */
    .gallery-filter-viewer__image[hidden] {
        display: none;
    }

    /* Stands in for the photograph when a filter has nothing uploaded yet,
       filling the same space so the viewer does not collapse. */
    .gallery-filter-viewer__empty {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 320px;
        background: linear-gradient(160deg, #123a63 0%, #0a2241 100%);
    }

    .gallery-filter-viewer__empty-text {
        margin: 0;
        padding: 0 1rem;
        text-align: center;
        color: rgba(255, 255, 255, 0.72);
        font-size: 1.05rem;
        letter-spacing: 0.02em;
    }

    .gallery-filter-viewer__overlay {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 32px 24px;
    }

    .gallery-filter-viewer__panel {
        max-width: 680px;
        display: flex;
        flex-direction: column;
        gap: 22px;
        color: var(--mediox-white, #FFFFFF);
    }

    .gallery-filter-viewer__eyebrow {
        margin: 0 0 10px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--mediox-base, #33C1ED);
    }

    .gallery-filter-viewer__title {
        margin: 0 0 10px;
        color: inherit;
        font-size: clamp(30px, 4vw, 54px);
        line-height: 1.05;
    }

    .gallery-filter-viewer__text {
        margin: 0;
        max-width: 52ch;
        color: rgba(255, 255, 255, 0.82);
    }

    /* Thumbnails sit in one row that scrolls sideways, between prev/next
       buttons. Wrapping them let a large filter stack rows up the photograph. */
    .gallery-filter-viewer__strip {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "prev thumbs next"
            ".    count  .";
        align-items: center;
        column-gap: 12px;
        row-gap: 4px;
    }

    .gallery-filter-viewer__thumbs {
        grid-area: thumbs;
        /* Positioned so each thumb's offsetLeft is measured from this row,
           which is what the script uses to centre the active one. */
        position: relative;
        display: flex;
        gap: 14px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        /* Room for the active thumb's lift and shadow, which overflow would clip. */
        padding: 8px 2px 14px;
        scrollbar-width: none;
    }

    .gallery-filter-viewer__thumbs::-webkit-scrollbar {
        display: none;
    }

    /* White on the photograph rather than translucent navy: the viewer sits
       on whatever was uploaded, and a dark button on a dark image disappears. */
    .gallery-filter-viewer__nav {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: var(--mediox-white, #FFFFFF);
        color: var(--mediox-black, #0A2241);
        font-size: 15px;
        /* A dark rim keeps the white edge legible against a pale sky too. */
        box-shadow: 0 10px 28px rgba(10, 34, 65, 0.45), 0 0 0 1px rgba(10, 34, 65, 0.08);
        cursor: pointer;
        transition: background-color 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
    }

    .gallery-filter-viewer__nav--prev { grid-area: prev; }
    .gallery-filter-viewer__nav--next { grid-area: next; }

    .gallery-filter-viewer__nav:hover:not(:disabled),
    .gallery-filter-viewer__nav:focus-visible {
        background-color: var(--mediox-base, #33C1ED);
        color: var(--mediox-white, #FFFFFF);
        transform: scale(1.08);
        box-shadow: 0 14px 34px rgba(10, 34, 65, 0.5);
    }

    .gallery-filter-viewer__nav:focus-visible {
        outline: 3px solid var(--mediox-white, #FFFFFF);
        outline-offset: 3px;
    }

    .gallery-filter-viewer__nav:active:not(:disabled) {
        transform: scale(0.96);
    }

    .gallery-filter-viewer__nav:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .gallery-filter-viewer__count {
        grid-area: count;
        font-size: 13px;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.72);
    }

    .gallery-filter-viewer.is-empty .gallery-filter-viewer__strip {
        display: none;
    }

    .gallery-filter-viewer__thumb {
        flex: none;
        scroll-snap-align: start;
        width: 94px;
        height: 94px;
        padding: 0;
        border: 2px solid transparent;
        border-radius: 18px;
        overflow: hidden;
        background: transparent;
        transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    }

    .gallery-filter-viewer__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .gallery-filter-viewer__thumb.active {
        border-color: var(--mediox-base, #33C1ED);
        box-shadow: 0 14px 30px rgba(10, 34, 65, 0.28);
        transform: translateY(-4px);
    }

    .gallery-filter-viewer__thumb:hover {
        transform: translateY(-4px);
    }

    @media (max-width: 767px) {
        .gallery-page.section-space {
            height: 800px;
        }

        .gallery-filter-viewer__shell {
            --gallery-viewer-height: 800px;
        }

        .gallery-filter-viewer {
            height: var(--gallery-viewer-height);
        }

        .gallery-filter-viewer__image-wrap,
        .gallery-filter-viewer__image {
            height: 100%;
        }

        .gallery-filter-viewer__overlay {
            padding: 24px 18px;
        }

        .gallery-filter-viewer__filter {
            top: 12px;
            right: 12px;
        }

        .gallery-filter-viewer__dropdown {
            width: min(240px, 100%);
        }

        .gallery-filter-viewer__dropdown-summary {
            padding: 14px 16px;
            border-radius: 16px;
        }

        .gallery-filter-viewer__dropdown-value {
            font-size: 16px;
        }

        .gallery-filter-viewer__panel {
            gap: 18px;
        }

        .gallery-filter-viewer__thumb {
            width: 78px;
            height: 78px;
            border-radius: 14px;
        }

        .gallery-filter-viewer__thumbs {
            gap: 10px;
        }

        .gallery-filter-viewer__strip {
            column-gap: 8px;
        }

        .gallery-filter-viewer__nav {
            width: 34px;
            height: 34px;
            font-size: 12px;
        }
    }

/* Footer intro -------------------------------------------------------------- */
/*
 * The theme capitalises every word here, which suits a one-line tagline but
 * reads badly across a full paragraph of company copy.
 */
.footer-widget__about-text {
	text-transform: none;
	line-height: 1.8;
}


/* ------------------------------------------------------------------
   Team / personnel cards
   ------------------------------------------------------------------
   The Mediox team-card-three label is set in writing-mode: vertical-rl
   with a 180deg rotation. That is readable for a short person's name
   ("Mike Hardson") but our cards carry role names such as
   "Doctors & Nurses", which forced the reader to tilt their head.
   Reset it to horizontal and let the label span the card width.
   ------------------------------------------------------------------ */
.team-card-three__identity {
    left: 30px;
    right: 30px;
    padding: 16px 20px;
    writing-mode: horizontal-tb;
    transform: none;
    text-align: left;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .team-card-three__identity { left: 25px; right: 25px; }
}

@media (max-width: 360px) {
    .team-card-three__identity { left: 25px; right: 25px; }
}

.team-card-three__name {
    margin: 0 0 4px;
    font-size: 20px;
}

.team-card-three__designation {
    font-size: 15px;
    line-height: 1.5;
}

/* Intro / closing copy on the Medical Personnel grid. */
.team-page__lead {
    max-width: 720px;
    margin: -20px auto 50px;
    text-align: center;
}

.team-page__note {
    margin-top: 45px;
    text-align: center;
}

.team-page__note p {
    margin: 0;
    font-weight: 600;
    color: var(--mediox-black, #0A2241);
}

/* Shared inner-page sections (page-intro / page-points / page-cta) --------- */
.page-points__lead {
    max-width: 760px;
    margin: -20px auto 55px;
    text-align: center;
}

.page-points__note {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid RGBA(var(--mediox-black-rgb, 10, 34, 65), 0.1);
    text-align: center;
}

.page-points__note p {
    margin: 0;
    font-weight: 600;
    color: var(--mediox-black, #0A2241);
}

.page-points .why-choose-one__item {
    height: 100%;
}

/* The intro section already carries section-space; drop the doubled gap when
   a points grid follows it. */
.about-one + .page-points {
    padding-top: 0;
}

.page-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px 50px;
    padding: 50px 60px;
    border-radius: var(--mediox-radius, 20px);
    background-color: var(--mediox-white2, #ECF0F5);
}

@media (max-width: 767px) {
    .page-cta__inner { padding: 40px 30px; }
}

.page-cta__content { flex: 1 1 420px; }

.page-cta__title {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--mediox-black, #0A2241);
}

@media (max-width: 575px) {
    .page-cta__title { font-size: 26px; }
}

.page-cta__text {
    margin: 0;
    max-width: 62ch;
}

.page-cta__btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 35px;
}

.page-cta__call {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--mediox-black, #0A2241);
}

.page-cta__call:hover { color: var(--mediox-base, #33C1ED); }

.page-cta__call__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    color: var(--mediox-white, #FFFFFF);
    background-color: var(--mediox-base, #33C1ED);
    border-radius: 50%;
}

.page-cta__call__text { display: flex; flex-direction: column; }

.page-cta__call__label {
    font-size: 14px;
    line-height: 1.4;
    color: var(--mediox-text, #6A7C94);
}

.page-cta__call__number {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
}

/* Client list on the Testimonials page ------------------------------------ */
.client-list__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
}

.client-list__item {
    padding: 16px 22px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mediox-black, #0A2241);
    background-color: var(--mediox-white2, #ECF0F5);
    border-radius: 10px;
    transition: background-color 400ms ease, color 400ms ease;
}

.client-list__item:hover {
    color: var(--mediox-white, #FFFFFF);
    background-color: var(--mediox-base, #33C1ED);
}

.client-list__more {
    margin: 26px 0 0;
    text-align: center;
    font-weight: 600;
    color: var(--mediox-text, #6A7C94);
}

/* Blog ---------------------------------------------------------------------- */
/* The theme ships blog-card styles but no listing page, so these fill the gaps
   the listing and single-post views need. */

.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.blog-filter__item {
    padding: 10px 20px;
    border-radius: 999px;
    background: #f6f8fb;
    color: #102038;
    font-weight: 600;
    line-height: 1.2;
    transition: background .18s, color .18s;
}
.blog-filter__item:hover {
    background: #e4eaf3;
    color: #102038;
}
.blog-filter__item.active {
    background: #102038;
    color: #fff;
}

/* Stands in for a cover that was never uploaded, keeping the card's shape. */
.blog-card-four__placeholder {
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: inherit;
    background: linear-gradient(160deg, #123a63 0%, #0a2241 100%);
}

.blog-pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}
.blog-pagination .pagination {
    margin: 0;
    gap: 6px;
}
.blog-pagination .page-link {
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    color: #102038;
    background: #f6f8fb;
    font-weight: 600;
}
.blog-pagination .page-item.active .page-link {
    background: #102038;
    color: #fff;
}
.blog-pagination .page-item.disabled .page-link {
    opacity: .45;
}

/* Single post ---------------------------------------------------------------- */
.blog-details__body {
    line-height: 1.875;
}
.blog-details__body > * + * {
    margin-top: 22px;
}
.blog-details__body h2,
.blog-details__body h3,
.blog-details__body h4 {
    margin-top: 34px;
    margin-bottom: 14px;
}
.blog-details__body img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}
.blog-details__body ul,
.blog-details__body ol {
    padding-left: 22px;
}
.blog-details__body li + li {
    margin-top: 8px;
}
.blog-details__body blockquote {
    margin: 28px 0;
    padding: 18px 24px;
    border-left: 3px solid #33C1ED;
    background: #f6f8fb;
    border-radius: 0 12px 12px 0;
}

.blog-sidebar__widget {
    padding: 28px 26px;
    border-radius: 16px;
    background: #f6f8fb;
}
.blog-sidebar__widget + .blog-sidebar__widget {
    margin-top: 30px;
}
.blog-sidebar__title {
    font-size: 20px;
    margin-bottom: 20px;
}
.blog-sidebar__posts__item {
    display: flex;
    gap: 14px;
    align-items: center;
}
.blog-sidebar__posts__item + .blog-sidebar__posts__item {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f1;
}
.blog-sidebar__posts__image {
    flex: none;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
}
.blog-sidebar__posts__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-sidebar__posts__date {
    margin: 0 0 4px;
    font-size: 13px;
    color: #5c6b82;
}
.blog-sidebar__posts__title {
    font-size: 16px;
    margin: 0;
    line-height: 1.45;
}
.blog-sidebar__categories li + li {
    margin-top: 10px;
}
.blog-sidebar__categories a {
    color: #102038;
    font-weight: 600;
}
.blog-sidebar__categories a:hover {
    color: #33C1ED;
}

/* Blog images --------------------------------------------------------------- */
/* The theme's rule is `width: 100%` with no height, which is fine for its own
   pre-cropped artwork but lets a full resolution upload run to any height.
   Both views below feed it whatever the author uploaded, so the shape is
   pinned here instead. */

.blog-card-four__image img {
    aspect-ratio: 16 / 11;
    object-fit: cover;
    height: auto;
}

/* The single post leads with a wider, shallower cover. */
.blog-details .blog-card-four__image img {
    aspect-ratio: 16 / 9;
    max-height: 460px;
}

.blog-details .blog-card-four__title {
    font-size: 34px;
    line-height: 1.25;
}

.blog-details .page-lead {
    margin-top: 14px;
}

.blog-details__body {
    max-width: 68ch;
}

@media (min-width: 992px) {
    /* Keeps the sidebar in view while reading a long post. */
    .blog-sidebar {
        position: sticky;
        top: 110px;
    }
}

@media (max-width: 767px) {
    .blog-details .blog-card-four__title {
        font-size: 26px;
    }
    .blog-details .blog-card-four__image img {
        aspect-ratio: 4 / 3;
    }
}

/* Gallery thumbnail strip on smaller screens ---------------------------------- */
@media (max-width: 575px) {
    .gallery-filter-viewer__thumb {
        width: 72px;
        height: 72px;
    }
    .gallery-filter-viewer__nav {
        width: 44px;
        height: 44px;
    }
}

/* Home hero video --------------------------------------------------------- */
/* Ported from the video-hero prototype in the standalone template. Every rule
   is scoped to .main-slider-one--video, so the plain slider is unaffected. */
.main-slider-one--video {
    position: relative;
    overflow: hidden;
    background-color: #08111d;
}

.main-slider-one__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.main-slider-one__carousel {
    position: relative;
    z-index: 1;
}

.main-slider-one__video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 17, 29, 0.78) 0%, rgba(8, 17, 29, 0.5) 45%, rgba(8, 17, 29, 0.32) 100%);
}

.main-slider-one__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-slider-one--video .main-slider-one__item {
    background-color: transparent;
}

.main-slider-one--video .main-slider-one__bg {
    opacity: 0.22;
}

.main-slider-one--video .main-slider-one__title,
.main-slider-one--video .main-slider-one__title__hover {
    color: #ffffff;
    text-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
}

.main-slider-one--video .main-slider-one__sub-title {
    color: #7ed8ff;
}

.main-slider-one--video .main-slider-one__text {
    color: rgba(255, 255, 255, 0.84);
}

.main-slider-one--video .main-slider-one__content {
    padding-right: 140px;
}

/* Play button. The theme pins the button itself absolutely to the top-left
   of its wrapper, so moving only the wrapper (as this file used to) left it
   hanging off wherever the zero-sized wrapper landed: over the title on
   tablets, off-screen on phones. The button now sits in flow inside its
   wrapper, and only the wrapper is placed:
     1300px and up  centred vertically in the gutter reserved beside the headline
     below 1300px   its own row at the top of the hero copy, centred */
.main-slider-one--video .main-slider-one__content__video {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 4;
    width: 140px;
    display: flex;
    justify-content: center;
    transform: translateY(-50%);
}

.main-slider-one--video .main-slider-one__title__video {
    position: relative;
    top: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background-color: rgba(51, 193, 237, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

.main-slider-one--video .main-slider-one__image {
    right: 30px;
    bottom: 35px;
    z-index: 3;
}

.main-slider-one--video .main-slider-one__patients {
    position: relative;
    left: auto;
    bottom: auto;
    margin-left: auto;
    max-width: min(100%, 320px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

@media (max-width: 1299px) {
    .main-slider-one--video .main-slider-one__image {
        display: block;
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 30px;
    }

    .main-slider-one--video .main-slider-one__patients {
        margin-left: 0;
    }

    .main-slider-one--video .main-slider-one__content {
        padding-right: 0;
    }

    /* Copy stacks in a column so the button can lead it, centred. */
    .main-slider-one--video .main-slider-one__content {
        display: flex;
        flex-direction: column;
    }

    .main-slider-one--video .main-slider-one__content__video {
        position: relative;
        top: auto;
        right: auto;
        order: -1;
        width: 100%;
        transform: none;
        margin: 0 0 28px;
    }
}

@media (max-width: 767px) {
    .main-slider-one--video .main-slider-one__content__video {
        margin-bottom: 22px;
    }

    .main-slider-one--video .main-slider-one__title__video {
        width: 68px;
        height: 68px;
        font-size: 20px;
    }

    .main-slider-one--video .main-slider-one__patients {
        max-width: 100%;
    }
}

/* Hero headline sizing.
   .main-slider-one__content reserves 140px on the right for the play button,
   leaving 908px for the title at every large viewport (the container is
   capped, so this does not grow with the screen). Our headline is longer than
   the template's two-word one, so at the theme's 100px the first line wraps,
   the hero becomes three lines tall and the CTA drops below the fold.
   82px is the largest size that keeps it to two lines. */
@media (min-width: 1600px) {
    .main-slider-one--video .main-slider-one__title {
        font-size: 82px;
    }
}

/* Same problem in the 1300-1599 band: the container has narrowed to 660px but
   the 140px play-button reserve is still in force (it is only dropped below
   1300px), so the theme's 70px wraps to three lines here too. */
@media (min-width: 1300px) and (max-width: 1599px) {
    .main-slider-one--video .main-slider-one__title {
        font-size: 58px;
    }
}

/* Narrow phones: 470px of room, where the theme's 50px runs to three lines. */
@media (max-width: 575px) {
    .main-slider-one--video .main-slider-one__title {
        font-size: 44px;
    }
}

/* Small phones (390px and under): even 44px cannot fit "Professionals" on
   one line, and the title clips the word rather than wrapping it. */
@media (max-width: 420px) {
    .main-slider-one--video .main-slider-one__title {
        font-size: 34px;
    }
}

/* Hero video lightbox ----------------------------------------------------- */
.hero-video {
    position: relative;
    width: auto;
    max-width: 1000px;
    margin: 20px auto;
}

.hero-video__player {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    border-radius: var(--mediox-radius, 20px);
    background-color: #000;
}

/* Deep blue in place of the theme cyan ------------------------------------
   The figures band and the footer contact bar both sit on --mediox-base
   (#33C1ED, cyan) with their photograph laid over at mix-blend-mode: multiply.
   Our photographs are of yellow ambulances, and yellow multiplied over cyan
   reads green. Moving the base to --mediox-primary (#2C51A3) keeps the blend
   but lands it in the brand's deep blue instead. */
.funfact-one,
.main-footer__info {
    background-color: var(--mediox-primary, #2C51A3);
}

/* multiply keeps the photo's own hue, so a yellow vehicle over blue still
   pulls toward green. luminosity takes only the brightness and lets the blue
   underneath supply the colour -- the same duotone as the page banners. */
.funfact-one__bg,
.main-footer__info__bg {
    mix-blend-mode: luminosity;
    opacity: 0.38;
}

/* The quote band takes its colour straight from its photograph, with no
   colour base underneath, so a warm picture turns the whole band olive. Same
   duotone treatment as the banners and the figures band. */
.appointment-one__bg {
    background-color: var(--mediox-primary, #2C51A3);
}

/* This band is a jarallax parallax layer: the plugin strips the element's
   background-image and re-hangs it on a child, so background-blend-mode here
   has nothing to blend. An overlay set to mix-blend-mode: color does the same
   job -- it contributes hue and saturation while the photograph underneath
   keeps supplying the luminosity. */
.appointment-one__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--mediox-primary, #2C51A3);
    mix-blend-mode: color;
    pointer-events: none;
    z-index: 3;
}

/* Inner page banner -------------------------------------------------------
   The theme veils the banner photograph with near-white at 0.8, which leaves
   the picture barely visible and, over warm subjects, muddy. A deep blue veil
   at 0.68 keeps the photograph readable and matches the bands above. The text
   below it has to flip to light, since it was set for a near-white ground. */
/* Square corners: the rounded banner sat awkwardly on the square-edged
   section below it. __bg and its ::before inherit this radius. */
.page-header__inner {
    border-radius: 0;
}

.page-header__bg {
    /* Duotone rather than a flat veil. The banner photographs are warm (yellow
       vehicles, warm interior light) and a blue sheet over yellow cancels to a
       muddy teal. Blending the image's luminosity into the brand blue keeps all
       the detail and lands the colour true, whatever photo sits behind it.
       Note this must not be done with filter: grayscale() on this element --
       a filter applies to its ::before as well, and would grey out the veil. */
    background-color: var(--mediox-primary, #2C51A3);
    background-blend-mode: luminosity;
}

.page-header__bg::before {
    /* Light hold on top purely for text contrast. */
    background-color: RGBA(var(--mediox-black-rgb, 10, 34, 65), 0.42);
}

.page-header__title {
    color: var(--mediox-white, #FFFFFF);
}

.mediox-breadcrumb li {
    color: RGBA(255, 255, 255, 0.88);
}

.mediox-breadcrumb li a {
    color: var(--mediox-white, #FFFFFF);
}

.mediox-breadcrumb li a:hover,
.mediox-breadcrumb li:not(:first-child) span,
.mediox-breadcrumb__icon {
    color: var(--mediox-base, #33C1ED);
}

.mediox-breadcrumb li:not(:last-of-type)::after {
    color: RGBA(255, 255, 255, 0.6);
}

/* Client marks ----------------------------------------------------------------
   A client's logo, or its initials in a brand-blue badge when no logo is
   published (resources/views/web/includes/client-mark.blade.php). The theme's
   frames were sized for cropped headshots; a logo has to sit whole inside,
   so it gets a white ground with padding and is scaled to fit. Each container
   below sets the size and shape. */
.client-mark {
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(10, 34, 65, 0.1);
}

.client-mark--logo {
    background-color: var(--mediox-white, #FFFFFF);
    object-fit: contain;
}

.client-mark--initials {
    background-color: var(--mediox-primary, #2C51A3);
    color: var(--mediox-white, #FFFFFF);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Home: circle beside the card. */
.testimonial-card__image .client-mark {
    width: 86px !important;
    height: 86px;
    padding: 14px;
    border-radius: 50%;
    font-size: 24px;
}

@media (max-width: 991px) {
    .testimonial-card__image .client-mark {
        width: 70px !important;
        height: 70px;
        padding: 10px;
        font-size: 20px;
    }
}

/* About: the theme's arch, at the headshot's 200 x 120. */
.testimonial-card-two__image .client-mark {
    position: relative;
    z-index: 1;
    width: 200px;
    max-width: 100%;
    height: 120px;
    padding: 24px 30px 14px;
    border-radius: 1000px 1000px 0 0;
    font-size: 36px;
}

/* Testimonials: small badge in front of each name. */
.client-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.client-list__item .client-mark {
    flex: none;
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 50%;
    font-size: 14px;
    box-shadow: none;
}

.client-list__item .client-mark--initials {
    padding: 0;
    font-size: 13px;
    letter-spacing: 0;
}

/* Mobile X-ray (home) ---------------------------------------------------------
   Follows page 9 of newversion.pptx.pdf: a dark photo panel for the headline
   capability, four capability cards, then the plan/image/report/decide steps. */
.xray-one__lead {
    max-width: 760px;
    margin: -20px auto 50px;
    text-align: center;
    font-size: 18px;
    line-height: 1.7;
}

.xray-one__feature {
    position: relative;
    height: 100%;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: var(--mediox-radius, 20px);
    background-color: var(--mediox-black, #0A2241);
}

.xray-one__feature__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xray-one__feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 34, 65, 0) 20%, rgba(10, 34, 65, 0.94) 72%);
}

.xray-one__feature__content {
    position: relative;
    z-index: 1;
    padding: 34px 32px;
    color: var(--mediox-white, #FFFFFF);
}

.xray-one__feature__eyebrow {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mediox-base, #33C1ED);
}

.xray-one__feature__title {
    margin: 0 0 14px;
    font-size: 32px;
    line-height: 1.15;
    color: inherit;
}

.xray-one__feature__text {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.84);
}

.xray-one__feature__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background-color: var(--mediox-base, #33C1ED);
    color: var(--mediox-black, #0A2241);
    font-size: 14px;
    font-weight: 700;
}

.xray-one__card {
    height: 100%;
    padding: 32px 30px;
    border-radius: var(--mediox-radius, 20px);
    background-color: var(--mediox-white2, #ECF0F5);
    transition: background-color 400ms ease, transform 400ms ease;
}

.xray-one__card:hover {
    transform: translateY(-4px);
}

.xray-one__card__icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 20px;
    border-radius: 50%;
    background-color: var(--mediox-primary, #2C51A3);
    color: var(--mediox-white, #FFFFFF);
    font-size: 28px;
}

.xray-one__card__title {
    margin: 0 0 10px;
    font-size: 22px;
}

.xray-one__card__text {
    margin: 0;
}

.xray-one__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    margin: 50px 0 0;
    padding: 34px 32px;
    border-radius: var(--mediox-radius, 20px);
    border: 1px solid var(--mediox-border-color, #D9E1EB);
}

.xray-one__step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.xray-one__step__number {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--mediox-base, #33C1ED);
    color: var(--mediox-white, #FFFFFF);
    font-weight: 700;
}

.xray-one__step__title {
    margin: 0 0 6px;
    font-size: 18px;
}

.xray-one__step__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .xray-one__feature {
        min-height: 460px;
    }

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

@media (max-width: 575px) {
    .xray-one__lead {
        margin-top: -10px;
        font-size: 16px;
    }

    .xray-one__feature__content {
        padding: 26px 22px;
    }

    .xray-one__feature__title {
        font-size: 26px;
    }

    .xray-one__steps {
        grid-template-columns: minmax(0, 1fr);
        padding: 26px 22px;
    }
}

/* Banner spacing --------------------------------------------------------------
   The banner no longer has rounded corners, so a section with its own
   background -- the blue "Our Story" band on Why Choose Us -- butted straight
   against the photograph. Pages whose next section is plain white already have
   that section's own padding and are left alone. */
.page-header + .history-one,
.page-header + .funfact-one,
.page-header + .team-one {
    margin-top: 60px;
}

@media (max-width: 767px) {
    .page-header + .history-one,
    .page-header + .funfact-one,
    .page-header + .team-one {
        margin-top: 40px;
    }
}

/* Testimonial card shape ------------------------------------------------------
   The theme cuts the card's notched corner with one square SVG mask scaled to
   the card, so the notch grows and shrinks with the card's size. Sized `auto`
   the square only spans the card's height and clips the text on wide cards;
   stretched to `cover` the notch shrinks and the card paints over the client
   mark. Instead the notch is drawn at a fixed size around the 86px mark: a
   130px corner piece holds the notch, and two plain layers fill the rest of
   the card. */
@media (min-width: 1200px) {
    .testimonial-card__content {
        -webkit-mask: none;
        mask: none;
        -webkit-mask-image:
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='130'><path d='M0 0H10A20 20 0 0 1 30 20V70A30 30 0 0 0 60 100H110A20 20 0 0 1 130 120V130H0Z'/></svg>"),
            linear-gradient(#000, #000),
            linear-gradient(#000, #000);
        mask-image:
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='130'><path d='M0 0H10A20 20 0 0 1 30 20V70A30 30 0 0 0 60 100H110A20 20 0 0 1 130 120V130H0Z'/></svg>"),
            linear-gradient(#000, #000),
            linear-gradient(#000, #000);
        -webkit-mask-size: 130px 130px, calc(100% - 130px) 100%, 100% calc(100% - 130px);
        mask-size: 130px 130px, calc(100% - 130px) 100%, 100% calc(100% - 130px);
        -webkit-mask-position: right top, left top, left bottom;
        mask-position: right top, left top, left bottom;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /* Keep the name and category clear of the notch. */
    .testimonial-card__identity {
        padding-right: 80px;
    }
}