/*
 * 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;
    }

    /* On a screen wide enough for it, the photograph fills the frame and is
       cropped to do so: the viewer is full bleed and a fixed height, and the
       caption is laid over the foot of the picture, which only reads if the
       picture reaches both edges.

       Showing the whole photograph instead is right where the frame cannot be
       that shape — below 992px, where the frame takes the photograph's own
       shape and the caption sits underneath. Those rules are further down.
       Applied here it letterboxes every desktop, which is not what the design
       does. */
    .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;
        /* The thumbnails take the width they need, not the width available.
           As 1fr the row always filled the viewer, so a filter holding two
           photographs put the next button against the far edge with a gulf
           of nothing between it and the thumbnails. max-content keeps the
           arrows either side of the thumbnails they belong to, and still
           shrinks — and lets the row scroll — once there are enough. */
        grid-template-columns: auto minmax(0, max-content) auto;
        grid-template-areas:
            "prev thumbs next"
            ".    count  .";
        justify-content: start;
        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; }

    /* The rules above set display, which beats the browser's own styling for
       [hidden]. The script hides the arrows and the counter when a filter
       holds one photograph; without this they would stay on screen. */
    .gallery-filter-viewer__nav[hidden],
    .gallery-filter-viewer__count[hidden] {
        display: none;
    }

    .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);
    }

    /* ------------------------------------------------------------------
       Tablet and below
       ------------------------------------------------------------------
       The desktop viewer is a fixed 800px-tall frame with the photograph
       cropped to fill it (object-fit: cover) and the caption laid over the
       bottom. That works while the frame is wider than it is tall. On a
       phone the same 800px frame is portrait, so a landscape photograph
       cropped to fill it shows a narrow vertical slice — most of the
       picture cut away, which is the bug this fixes.

       Below 992px the frame stops being a fixed height and takes the
       photograph's own shape (--gallery-image-ratio, set on the section
       from the gallery crop preset), and the caption moves out from on top
       of the picture to underneath it. Nothing is cropped, nothing covered.
       ------------------------------------------------------------------ */
    @media (max-width: 991px) {
        .gallery-page.section-space {
            /* The fixed height held the 800px frame; with the frame sized by
               the photograph the section grows to fit instead, so the caption
               below it is not clipped. overflow stays hidden: the full-bleed
               wrapper inside is 100vw, and letting that escape puts a
               sideways scrollbar on the whole page. */
            height: auto;
            max-height: none;
        }

        .gallery-filter-viewer__shell,
        .gallery-filter-viewer,
        .gallery-filter-viewer__image-wrap {
            height: auto;
            max-height: none;
        }

        .gallery-filter-viewer__image {
            /* The frame is the photograph's shape, so cover and contain agree
               for anything cropped to the preset; contain is the safety net
               for a gallery built from arbitrary assets, where letterboxing
               still beats losing half the picture. */
            aspect-ratio: var(--gallery-image-ratio, 1140 / 832);
            width: 100%;
            height: auto;
            max-height: none;
            object-fit: contain;
            background-color: var(--mediox-black, #0A2241);
        }

        /* Darkened the foot of the photograph so laid-over text stayed
           readable. The text is no longer laid over it. */
        .gallery-filter-viewer__image-wrap::after {
            display: none;
        }

        .gallery-filter-viewer__empty {
            aspect-ratio: var(--gallery-image-ratio, 1140 / 832);
            height: auto;
            min-height: 0;
        }

        .gallery-filter-viewer__overlay {
            position: static;
            padding: 24px 20px 28px;
            background-color: var(--mediox-black, #0A2241);
        }

        .gallery-filter-viewer__overlay > .container {
            padding-left: 0;
            padding-right: 0;
        }

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

        .gallery-filter-viewer__title {
            font-size: clamp(24px, 5vw, 36px);
        }

        /* The dropdown still floats over the photograph: it is the one thing
           here that cannot push anything out of the way. */
        .gallery-filter-viewer__filter {
            top: 12px;
            right: 12px;
        }

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

    @media (max-width: 767px) {
        .gallery-filter-viewer__overlay {
            padding: 20px 16px 24px;
        }

        /* The control sat at nearly desktop size over a much smaller
           photograph, covering a good part of it. Here it shrinks to its own
           label instead of holding a fixed width, and the open list is taken
           out of flow so the closed control stays the size of its text rather
           than widening to whatever the longest filter name is. */
        .gallery-filter-viewer__filter {
            top: 10px;
            right: 10px;
        }

        .gallery-filter-viewer__dropdown {
            position: relative;
            width: auto;
            max-width: calc(100vw - 20px);
        }

        .gallery-filter-viewer__dropdown-summary {
            gap: 10px;
            padding: 8px 12px;
            border-radius: 12px;
        }

        .gallery-filter-viewer__dropdown-label {
            font-size: 9px;
            letter-spacing: 0.14em;
        }

        .gallery-filter-viewer__dropdown-value {
            margin-top: 1px;
            font-size: 13px;
        }

        .gallery-filter-viewer__dropdown-icon {
            font-size: 11px;
        }

        .gallery-filter-viewer__dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            min-width: 100%;
            width: max-content;
            max-width: calc(100vw - 20px);
            /* A gallery with many filters must not run off the bottom of the
               photograph, which the section clips. */
            max-height: 60vh;
            overflow-y: auto;
            margin-top: 6px;
            padding: 6px;
            border-radius: 12px;
        }

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

        .gallery-filter-viewer__dropdown-item {
            gap: 8px;
            padding: 8px 10px;
            border-radius: 9px;
            font-size: 13px;
        }

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

        .gallery-filter-viewer__title {
            font-size: clamp(19px, 4.6vw, 26px);
            line-height: 1.2;
        }

        .gallery-filter-viewer__eyebrow {
            margin-bottom: 6px;
            font-size: 11px;
            letter-spacing: 0.16em;
        }

        .gallery-filter-viewer__text {
            font-size: 14px;
            line-height: 1.55;
        }

        .gallery-filter-viewer__count {
            font-size: 12px;
        }

        .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;
        }
    }

    @media (max-width: 480px) {
        .gallery-filter-viewer__thumb {
            width: 64px;
            height: 64px;
            border-radius: 12px;
        }

        .gallery-filter-viewer__eyebrow {
            font-size: 10px;
            letter-spacing: 0.14em;
        }

        .gallery-filter-viewer__title {
            font-size: clamp(17px, 4.8vw, 22px);
        }

        .gallery-filter-viewer__text {
            font-size: 13px;
        }

        .gallery-filter-viewer__dropdown-summary {
            gap: 8px;
            padding: 7px 10px;
        }

        .gallery-filter-viewer__dropdown-label {
            font-size: 8px;
        }

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

        .gallery-filter-viewer__dropdown-item {
            padding: 7px 9px;
            font-size: 12px;
        }
    }

    /* ------------------------------------------------------------------
       A phone turned sideways
       ------------------------------------------------------------------
       Wide and very short — 844x390 on a typical handset. By width that is
       the tablet range above, which stacks the caption under a photograph
       sized by its own ratio: at 844px wide that photograph is some 600px
       tall on a 390px screen, so the picture alone is one and a half
       screenfuls and the caption is somewhere below the fold.

       The shape that suits a wide, short viewport is two columns, so here
       the photograph takes the left and the caption the right, each capped
       to the height of the screen. Keyed on height rather than width, so a
       tablet in landscape — which has the room to stack — keeps the layout
       above.
       ------------------------------------------------------------------ */
    @media (orientation: landscape) and (max-height: 575px) {
        .gallery-filter-viewer__image-wrap {
            display: grid;
            /* The caption is a sidebar, not half the screen. Capped in pixels
               as well as percent so it neither sprawls on a wide handset nor
               squeezes shut on a narrow one. */
            grid-template-columns: minmax(0, 1fr) clamp(165px, 24%, 240px);
            align-items: stretch;
            height: 100vh;
            background-color: var(--mediox-black, #0A2241);
        }

        .gallery-filter-viewer__image,
        .gallery-filter-viewer__empty {
            /* The one place the viewer crops, and deliberately.
            
               A fixed caption width and a photograph that fills the rest of
               the screen exactly cannot both hold unless the space left over
               happens to match the photograph's shape. object-position only
               decides which side the mismatch shows on; it cannot remove it.
               So here the photograph fills its side and loses a little from
               the long edges, rather than sitting in the middle of the dark
               with a strip either side.
            
               Only in landscape: upright and on tablets the frame is still
               sized by the photograph, where nothing is lost. */
            aspect-ratio: auto;
            width: 100%;
            height: 100%;
            max-height: none;
            object-fit: cover;
            object-position: center;
        }

        .gallery-filter-viewer__overlay {
            display: flex;
            align-items: center;
            padding: 12px 14px;
            max-height: 100vh;
            overflow-y: auto;
        }

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

        .gallery-filter-viewer__title {
            font-size: clamp(14px, 1.9vw, 18px);
            line-height: 1.2;
            margin-bottom: 5px;
        }

        .gallery-filter-viewer__eyebrow {
            margin-bottom: 3px;
            font-size: 9px;
            letter-spacing: 0.12em;
        }

        .gallery-filter-viewer__text {
            font-size: 11.5px;
            line-height: 1.45;
        }

        /* Two lines of description, so a long caption cannot push the
           thumbnails off a 390px-tall screen. */
        .gallery-filter-viewer__text {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .gallery-filter-viewer__thumb {
            width: 44px;
            height: 44px;
            border-radius: 9px;
        }

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

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

        .gallery-filter-viewer__nav {
            width: 26px;
            height: 26px;
            font-size: 10px;
        }

        .gallery-filter-viewer__count {
            font-size: 10px;
        }

        /* Top right is now the caption column; keep the control over the
           photograph, where it has something to sit on. */
        .gallery-filter-viewer__filter {
            top: 10px;
            left: 10px;
            right: auto;
        }

        .gallery-filter-viewer__dropdown {
            position: relative;
            width: auto;
            max-width: calc(50vw - 20px);
        }

        .gallery-filter-viewer__dropdown-summary {
            gap: 8px;
            padding: 7px 10px;
            border-radius: 11px;
        }

        .gallery-filter-viewer__dropdown-label {
            font-size: 8px;
            letter-spacing: 0.14em;
        }

        .gallery-filter-viewer__dropdown-value {
            margin-top: 1px;
            font-size: 12px;
        }

        .gallery-filter-viewer__dropdown-icon {
            font-size: 10px;
        }

        .gallery-filter-viewer__dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            right: auto;
            min-width: 100%;
            width: max-content;
            max-width: calc(50vw - 20px);
            max-height: 60vh;
            overflow-y: auto;
            margin-top: 5px;
            padding: 5px;
            border-radius: 11px;
        }

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

        .gallery-filter-viewer__dropdown-item {
            gap: 8px;
            padding: 7px 9px;
            border-radius: 9px;
            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;
    }
}

/* The thumbnail strip's sizes at each width live with the rest of the gallery
   above — 78px thumbs on a phone, 64px on a small one, 44px sideways, with the
   arrows scaled to match. A second set down here would win by being later in
   the file, which is how a 480px phone ended up with 64px thumbnails beside
   44px arrows. */

/* 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;
    }
}

/* ------------------------------------------------------------------
   Header height on small screens
   ------------------------------------------------------------------
   The theme gives the header 25px of padding top and bottom below
   1199px, which with the logo makes a bar of around 110px. On a phone
   held upright that is a lot of the first screenful; turned sideways,
   where the whole viewport is about 390px, it is more than a quarter of
   the screen before any content starts.

   The logo is capped rather than left at its natural height, since the
   padding alone is not what makes the bar tall.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .main-header__inner {
        padding: 14px 0;
    }

    .main-header__logo img {
        max-height: 42px;
        width: auto;
    }
}

@media (orientation: landscape) and (max-height: 575px) {
    .main-header__inner {
        padding: 8px 0;
    }

    .main-header__logo img {
        max-height: 32px;
        width: auto;
    }
}

/* Banner crop on phones ---------------------------------------------------
   The banner photographs are 1800x316. At 390px wide the theme's banner is
   still ~260px tall, so `cover` scales the photo to 1537px and shows only its
   middle quarter -- a vehicle becomes a wall of yellow. A shorter band at
   phone widths keeps the same design but shows far more of the picture. */
@media (max-width: 575px) {
    .page-header__inner {
        padding-top: 34px;
        padding-bottom: 36px;
    }

    .page-header__title {
        font-size: 32px;
    }
}

/* Cards keep one shape ----------------------------------------------------
   A card's height follows its photograph, and both of these sit in rows of
   three, so a single picture of a different shape leaves the whole row
   ragged. The theme's own photographs are 370x398 for the carousel and
   370x265 for the grids, and the notch cut into the top of a carousel card
   is drawn to the first of those, so each photograph is held to the shape
   its card expects and cropped to fill instead of setting the height.

   This is what stops a correct picture of the wrong proportions from
   breaking the row again. */
.service-card__image img {
    aspect-ratio: 370 / 398;
    object-fit: cover;
}

.service-card-three__image img {
    aspect-ratio: 370 / 265;
    object-fit: cover;
}

/* Room under the gallery --------------------------------------------------
   A section that pads only its bottom edge is relying on the section above
   to have padded its own. The gallery viewer pads neither: it is full bleed
   and held to a fixed height, so a photograph's hard bottom edge ran
   straight into whatever followed, with the counter pinned against the join.

   The gap is given to the section below rather than to the gallery, so the
   pages whose next section already pads its top are left exactly as they
   are. */
.gallery-page + .section-space-bottom {
    padding-top: var(--section-space, 120px);
}

@media (max-width: 767px) {
    .gallery-page + .section-space-bottom {
        padding-top: 100px;
    }
}

/* The gallery's own responsive rules live with the rest of the gallery, in
   the block above: the frame takes the shape of the open photograph below
   992px, and a phone held sideways gets two columns. A second set of rules
   down here would win on every property they share simply by being later in
   the file, which is how a landscape phone ended up with a photograph capped
   to 82vh inside a frame already sized for it. */

/* "Read more" on a card ----------------------------------------------------
   The card's heading has always been a link, but nothing on the card looked
   like one, so the page behind it -- where the rest of a vehicle's
   photographs live -- went unfound. */
.service-card-three__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--mediox-base, #33C1ED);
    transition: gap 200ms ease, color 200ms ease;
}

.service-card-three__more i {
    font-size: 11px;
}

.service-card-three__more:hover,
.service-card-three:hover .service-card-three__more {
    gap: 13px;
    color: var(--mediox-black, #0A2241);
}

/* ------------------------------------------------------------------
   People carousel
   ------------------------------------------------------------------
   
*/
.team-card__image {
    object-fit: cover;
    object-position: center top;
}

@media (min-width: 992px) {
    .team-one__col--navs {
        flex: 0 0 50%;
        max-width: 50%;
        margin-left: auto;
    }
}

@media (max-width: 991px) {
    .team-one__custome-navs {
        justify-content: center;
        gap: 14px;
        margin-top: 28px;
    }
}

/* The glyph is an icon font inside the button; left clickable, a tap
   landing on the arrow itself rather than the circle did nothing, which
   reads as an unresponsive control. */
.team-one__custome-navs button span {
    pointer-events: none;
}