/* ==========================================================================
   Synergice - Landing Page 1
   Custom styles (Bootstrap 5 overrides + components)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Root variables
   -------------------------------------------------------------------------- */
:root {
    --brand-green: #0A483B;
    --brand-yellow: #F9EE6A;
    --brand-lime: #E4E729;
    --body-font: "Montserrat", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
    font-family: var(--body-font);
    color: var(--brand-green);
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
}

/* At XXL the container is capped at 1320px, which already supplies the
   design's outer margin - drop the extra gutter so content aligns exactly. */
@media (min-width: 1400px) {
    .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
/* Sticks to the top of the viewport on scroll. The header is a direct child
   of body and already has an opaque background, so nothing shows through. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #FFFFFF;
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-logo {
    display: inline-block;
    line-height: 0;
}

.site-logo img {
    display: block;
    width: auto;
    height: 62px;
}

/* --------------------------------------------------------------------------
   4. Book a Meeting button
   -------------------------------------------------------------------------- */
.btn-meeting {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    background-color: var(--brand-green);
    border: 1px solid var(--brand-green);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 15px;
  font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    justify-content: center;
}

.btn-meeting:hover,
.btn-meeting:focus {
    background-color: #093629;
    border-color: #093629;
    color: #FFFFFF;
}

.btn-meeting:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(11, 72, 58, .25);
    outline: 0;
}

.btn-meeting__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Large variant - "Explore Our Products" */
.btn-meeting--lg {
    height: 47px;
    gap: 10px;
    padding: 0 22px;
    font-size: 17px;
}

/* Full-width variant - "Schedule a Meeting" */
.btn-meeting--block {
    width: 100%;
    height: 46px;
    gap: 10px;
    font-size: 17px;
}

/* --------------------------------------------------------------------------
   5. Banner
   -------------------------------------------------------------------------- */
.banner {
    position: relative;
    min-height: 588px;
    padding: 38px 0;
}

/* Banner image - sits behind the copy, fills the section */
.banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
}

.banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.banner__inner {
    position: relative;
    z-index: 1;
}

/* 5.1 Booth line -------------------------------------------------------- */
.booth-line__text {
    font-size: 42px;
    font-weight: 400;
    line-height: 1;
    color: var(--brand-green);
    font-family: "Montserrat", sans-serif;
}

.booth-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 179px;
    height: 62px;
    margin-left: 16px;
    padding: 0 18px;
    background-color: var(--brand-green);
    color: #E2E800;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    font-family: "Montserrat", sans-serif;
}

/* Decorative corner mark on the badge */
.booth-badge::after {
    content: "";
    position: absolute;
    top: -13px;
    right: -13px;
    width: 19px;
    height: 20px;
    background-image: url("../images/Vector-angle.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 5.2 Banner copy ------------------------------------------------------- */
.banner-title {
	margin-top: 40px;
	margin-bottom: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--brand-green);
	font-family: "Montserrat", sans-serif;
}

.banner-text {
    max-width: 575px;
    margin-top: 22px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--brand-green);
}

.banner-content .btn-meeting--lg {
    margin-top: 28px;
}

/* Optical alignment - the copy block sits slightly above centre */
@media (min-width: 992px) {
    .banner-content {
        padding-bottom: 28px;
    }
}

/* --------------------------------------------------------------------------
   6. Meeting card
   -------------------------------------------------------------------------- */
.meeting-card {
    width: 100%;
    max-width: 412px;
    padding: 16px 27px 24px;
    background-color: rgba(255, 255, 255, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 6px solid var(--brand-yellow);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
}

.meeting-card__title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-green);
}

.meeting-card__subtitle {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: var(--brand-green);
}

/* 6.1 Form fields ------------------------------------------------------- */
.meeting-form .form-label {
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #332C2B;
}

.meeting-form .form-control {
    height: 36px;
    padding: 0 12px;
    background-color: rgba(255, 255, 255, .55);
    border: 1px solid rgba(11, 72, 58, .15);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--brand-green);
    box-shadow: none;
}
#meetingDate {
	background-image: url(../images/down-chevron.png);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 98% 50%;
}
.meeting-form .form-control::placeholder {
    color: #9AA5A2;
    opacity: 1;
}

.meeting-form .form-control:focus {
    background-color: rgba(255, 255, 255, .8);
    border-color: rgba(11, 72, 58, .45);
    box-shadow: none;
}

.meeting-form .meeting-form__textarea {
    height: 44px;
    min-height: 44px;
    padding: 10px 12px;
    resize: none;
}

/* 6.2 Date field icon --------------------------------------------------- */
.field-with-icon {
    position: relative;
}

/* .field-with-icon .form-control {
    padding-right: 38px;
} */

.field-with-icon__icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--brand-green);
    pointer-events: none;
}

/* 6.3 Consent checkbox -------------------------------------------------- */
.meeting-form__consent {
    display: flex;
    gap: 10px;
    margin: 8px 0 6px;
    padding-left: 0;
}

.meeting-form__consent .form-check-input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, .55);
    border: 1px solid rgba(11, 72, 58, .3);
    border-radius: 4px;
}

.meeting-form__consent .form-check-input:checked {
    background-color: #7ACA78;
    border-color: #7ACA78;
}

.meeting-form__consent .form-check-input:focus {
    border-color: rgba(11, 72, 58, .45);
    box-shadow: none;
}

.meeting-form__consent .form-check-label {
    font-size: 13px;
    font-weight: 400;
    line-height: 19px;
    color: var(--brand-green);
}

/* --------------------------------------------------------------------------
   7. Stats bar
   -------------------------------------------------------------------------- */
.stats-bar {
	padding: 32px 0;
	border-bottom: 0.8px solid #E6E8F2;
	background: #FFF;
	box-shadow: 0 4px 16px -4px rgba(14, 20, 48, 0.08);
}

/* Items are content-width and spread edge to edge, with the rules
   falling in the middle of each gap */
.stats-bar__list {
    justify-content: space-between;
}

.stat-item__icon {
    width: 56px;
    height: 56px;
    margin-right: 24px;
    flex-shrink: 0;
}

.stat-item__value,
.stat-item__label {
    display: block;
    color: var(--brand-green);
}

.stat-item__value {
    margin-bottom: 4px;
    font-size: 24px;
    font-weight: 700;
    line-height: 31px;
}

.stat-item__label {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
}

/* Vertical rule between items */
.stat-divider {
    width: 1px;
    height: 67px;
    background-color: #DDE1E0;
}

/* --------------------------------------------------------------------------
   8. Why book a meeting
   -------------------------------------------------------------------------- */
.why-meet {
    padding: 52px 0 40px;
    background-color: #FFFFFF;
}

/* 8.1 Section head ------------------------------------------------------ */
.section-eyebrow {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1.6px;
    color: var(--brand-green);
}

.section-title {
    margin-bottom: 14px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--brand-green);
    font-family: "Montserrat", sans-serif;
}

/* Decorative corner mark at the end of the heading */
.section-title::after {
    content: "";
    display: inline-block;
    vertical-align: top;
    position: relative;
    top: -6px;
    width: 26px;
    height: 27px;
    margin-left: 2px;
    background-image: url("../images/Vector-angle.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section-lead {
    margin-bottom: 32px;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: var(--brand-green);
}

/* 8.2 Cards ------------------------------------------------------------- */
.why-card {
    padding: 24px;
    background-color: #FFFFFF;
    border: 1px solid #E3E6E5;
    border-radius: 12px;
}

.why-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 23px;
    background-color: var(--brand-lime);
    border-radius: 9px;
}

.why-card__title {
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--brand-green);
}

.why-card__text {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: var(--brand-green);
}

/* --------------------------------------------------------------------------
   9. Team carousel
   -------------------------------------------------------------------------- */
.team {
    padding: 62px 0 70px;
    background-color: #F7F8F8;
}

.team__head {
    margin-bottom: 46px;
}

/* 9.1 Navigation arrows ------------------------------------------------- */
.team__nav {
    gap: 12px;
}

.team__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    background-color: #FFFFFF;
    border: 1px solid #DDE1E0;
    border-radius: 50%;
    color: var(--brand-green);
    font-size: 16px;
    line-height: 1;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.team__nav-btn:hover,
.team__nav-btn:focus {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #FFFFFF;
}

.team__nav-btn:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(11, 72, 58, .25);
    outline: 0;
}

/* Swiper greys out the buttons at the ends - loop mode never does, but keep
   the state honest if looping is ever turned off */
.team__nav-btn.swiper-button-disabled {
    opacity: .45;
    pointer-events: none;
}

/* 9.2 Cards ------------------------------------------------------------- */
.team-card {
    position: relative;
    height: auto;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
}

.team-card img {
    display: block;
    width: 100%;
    height: auto;
}

/* Bottom gradient carrying the name */
.team-card__name {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 20px;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	border-radius: 0 0 12px 12px;
	background: rgba(0, 0, 0, 0.24);
	backdrop-filter: blur(32.900001525878906px);
	font-family: "Montserrat", sans-serif;
}
.team-card__name span {
	display: block;
	font-size: 13px;
	font-weight: 400;
	margin: 7px 0 0 0;
}

/* --------------------------------------------------------------------------
   10. Video showcase
   -------------------------------------------------------------------------- */
.video-showcase {
    padding: 72px 0 80px;
    background-color: var(--brand-green);
    background-image: linear-gradient(118deg,
            rgba(255, 255, 255, .035) 0%,
            rgba(255, 255, 255, 0) 48%);
}

/* Section head runs light on the dark ground */
.video-showcase .section-eyebrow,
.video-showcase .section-title {
    color: #FFFFFF;
}

.video-showcase .section-lead {
    margin-bottom: 46px;
    color: #C9D8D2;
}

/* 10.1 Featured video --------------------------------------------------- */
.video-feature {
    margin: 0;
}

/* Capped to the artwork's natural width so the play disc centres on the
   image rather than the column, while still scaling down below 736px */
.video-feature__media {
    position: relative;
    display: block;
    width: 100%;
    max-width: 736px;
    line-height: 0;
}

.video-feature__img {
    border-radius: 8px;
}

/* The asset carries an offset drop shadow, so the visible disc sits at
   39.2% of the artwork height - pull it back onto the true centre */
.video-feature__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 106px;
    height: 106px;
    transform: translate(-50%, -39.2%);
    pointer-events: none;
}

.video-feature__title {
    margin-top: 28px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

/* 10.2 Video list ------------------------------------------------------- */
.video-tabs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 485px;
    /* Three tabs are in view, the rest are reached by scrolling. The exact
       height is measured off the tabs in custom.js - this is the fallback */
    max-height: 480px;
    overflow-y: auto;
}

/* 10.2.1 mCustomScrollbar skin ------------------------------------------
   Same treatment the filter lists get, toned for the dark section. The
   plugin takes over overflow once initialised, so the rule above is only
   the pre-init / no-JS fallback. */
.video-tabs.mCustomScrollbar {
    overflow: hidden !important;
}

/* The plugin wraps the tabs in .mCSB_container, so the column that spaces
   them moves down with them - same gap, same rows */
.video-tabs .mCSB_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* The minimal theme overlays its rail, so the tabs keep their full width */
    margin-right: 0;
}

.video-tabs .mCSB_scrollTools {
    width: 4px;
    opacity: 1;
}

.video-tabs .mCSB_scrollTools .mCSB_draggerRail {
    width: 4px;
    background-color: rgba(255, 255, 255, .08);
    border-radius: 2px;
}

.video-tabs .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 4px;
    background-color: rgba(255, 255, 255, .28);
    border-radius: 2px;
}

.video-tabs .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.video-tabs .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: var(--brand-lime);
}

.video-tab {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 19px;
    background-color: rgba(255, 255, 255, .05);
    /* Transparent on rest so the active state never shifts the layout */
    border: 1px solid transparent;
    border-radius: 10px;
    text-align: left;
    transition: border-color .25s ease, background-color .25s ease;
}

.video-tab:hover {
    background-color: rgba(255, 255, 255, .08);
}

.video-tab.is-active {
    border-color: var(--brand-lime);
}

.video-tab:focus-visible {
    outline: 2px solid var(--brand-lime);
    outline-offset: 2px;
}

.video-tab__thumb {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}

.video-tab__thumb img {
    display: block;
    width: 164px;
    height: auto;
    border-radius: 6px;
}

/* Scoped to beat the thumbnail's own img sizing */
.video-tab__thumb .video-tab__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -39.2%);
}

.video-tab__text {
    display: block;
}

.video-tab__title {
    display: block;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.video-tab__label {
    display: block;
    margin-top: 13px;
    color: #A9C0B6;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   12. About Synergice
   -------------------------------------------------------------------------- */
.about {
    padding: 52px 0 56px;
    background-color: #F4F5F5;
}

/* This section sits on a narrower measure than the rest of the page */
.about .container {
    max-width: 1210px;
}

.about .section-lead {
    margin-bottom: 37px;
}

.about__card {
    padding: 30px;
    background-color: #FFFFFF;
    border-radius: 12px;
}

/* 12.1 Pill tabs -------------------------------------------------------- */
.about__tabs {
    display: inline-flex;
    padding: 2px;
    background-color: #F1F2F2;
    border: 0;
    border-radius: 26px;
}

.about__tabs .nav-link {
    height: 48px;
    padding: 0 18px;
    background-color: transparent;
    border: 0;
    border-radius: 24px;
    color: #6B7A76;
    font-size: 16px;
    font-weight: 400;
    line-height: 48px;
    transition: background-color .25s ease, color .25s ease;
}

.about__tabs .nav-link.active {
    background-color: #FFFFFF;
    color: var(--brand-green);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(11, 72, 58, .07);
}

.about__tabs .nav-link:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

/* 12.2 Tab copy --------------------------------------------------------- */
.about__panes {
    margin-top: 51px;
}

.about__pane-title {
    margin-bottom: 20px;
    color: var(--brand-green);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.about__pane-text {
    max-width: 540px;
    margin-bottom: 0;
    color: var(--brand-green);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
}

/* 12.3 Static image ----------------------------------------------------- */
.about__image {
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   13. Closing CTA
   -------------------------------------------------------------------------- */

/* Palette is taken from frame-corner.svg so the decoration seams
   perfectly into the background and the button */
.cta {
    --cta-lime: #E3E827;
    --cta-green: #003F2D;

    padding: 57px 0;
    background-color: var(--cta-lime);
}

/* The white border IS the frame - the corner asset overlays its top right */
.cta__frame {
    position: relative;
    max-width: 646px;
    border: 20px solid #FFFFFF;
}

.cta__corner {
    position: absolute;
    top: -20px;
    right: -20px;
    display: block;
}

.cta__inner {
    padding: 45px 30px 28px;
}

/* 13.1 Copy ------------------------------------------------------------- */
.cta__eyebrow {
    margin-bottom: 10px;
    color: var(--cta-green);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1.6px;
}

.cta__title {
    margin-bottom: 10px;
    color: var(--cta-green);
    font-size: 34px;
    font-weight: 700;
    line-height: 53px;
}

.cta__text {
    margin-bottom: 18px;
    color: var(--cta-green);
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
}

.cta__note {
    margin-bottom: 0;
    margin-top: 20px;
    color: var(--cta-green);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}

/* 13.2 Button ----------------------------------------------------------- */
.cta__button {
    height: 51px;
    background-color: var(--cta-green);
    border-color: var(--cta-green);
}

.cta__button:hover,
.cta__button:focus {
    background-color: #002D20;
    border-color: #002D20;
}

/* --------------------------------------------------------------------------
   13.1 Thank you page

   The card borrows the frame width of the CTA below it and the card
   treatment of the product cards, so the page reads as one system.
   -------------------------------------------------------------------------- */
.thankyou {
    padding: 66px 0 58px;
    background-color: #FFFFFF;
}

.thankyou__card {
    max-width: 646px;
    padding: 48px 30px 44px;
    background-color: #FFFFFF;
    border: 1px solid #EFF0EF;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(11, 72, 58, .04);
}

.thankyou__title {
    margin-bottom: 12px;
}

.thankyou__text {
    max-width: 430px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 26px;
    font-size: 15px;
}

.thankyou__prompt {
    margin-bottom: 0;
    color: var(--brand-green);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

/* Side by side, dropping to a stack once the row runs out of width */
.thankyou__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
}

/* --------------------------------------------------------------------------
   14. Product finder
   -------------------------------------------------------------------------- */
.finder {
    --finder-line: #E9ECEB;
    --finder-muted: #5A6E68;

    padding: 56px 0 60px;
    background-color: #FFFFFF;
    /* Arriving on #product-finder, clear the sticky header */
    scroll-margin-top: 102px;
}

.finder .section-lead {
    max-width: 1030px;
    margin-bottom: 30px;
}

/* Fixed rail on the left, product area takes the rest */
.finder__sidebar-col {
    width: 280px;
}

.finder__main-col {
    padding-left: 50px;
}

/* The rail rides along with the products (Bootstrap's .sticky-lg-top, so it
   only applies from lg up and the mobile collapse is untouched). Two things
   the utility cannot know: the site header is sticky too, so the rail starts
   below it and stays under it; and the filters are taller than most screens,
   so they keep their own scroll - without it the last group would sit off the
   bottom of the window with no way to reach it. On tall screens the max-height
   is never met and no scrollbar appears. */
@media (min-width: 992px) {
    .finder-filters.sticky-lg-top {
        top: 102px;
        z-index: 900;
        max-height: calc(100vh - 118px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* 14.1 Mobile filter trigger ------------------------------------------- */
.finder__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin-bottom: 16px;
    padding: 0 18px;
    background-color: var(--brand-green);
    border: 0;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
}

/* 14.2 Filter rail ------------------------------------------------------ */
.finder-filters__head {
    height: 49px;
    padding: 0 16px;
    background-color: var(--brand-green);
    border-radius: 10px 10px 0 0;
}

.finder-filters__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 600;
	font-family: "Montserrat", sans-serif;
}

.finder-filters__clear {
    padding: 0;
    background: none;
    border: 0;
    color: var(--brand-lime);
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
}

.finder-filters__body {
    background-color: #FFFFFF;
    border: 1px solid var(--finder-line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
}

.filter-group {
    padding: 16px 18px;
    border-bottom: 1px solid var(--finder-line);
}

.filter-group:last-child {
    border-bottom: 0;
}

.filter-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--brand-green);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.filter-group__title .bi {
    margin-left: auto;
    font-size: 10px;
}

.filter-group__badge {
    padding: 2px 6px;
    background-color: #F3F6D8;
    border-radius: 3px;
    color: var(--brand-green);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .4px;
}

.filter-group__search {
    width: 100%;
    height: 34px;
    margin-bottom: 12px;
    padding: 0 12px;
    background-color: #FFFFFF;
    border: 1px solid var(--finder-line);
    border-radius: 6px;
    color: var(--brand-green);
    font-size: 13px;
}

.filter-group__search::placeholder {
    color: #9AA5A2;
}

/* Long lists scroll inside the group - the clipped last row is the
   scroll affordance shown in the design */
.filter-group__list {
    max-height: 240px;
    overflow-y: auto;
}

/* 14.2.1 mCustomScrollbar skin ------------------------------------------
   Tones the plugin's default rail down to the section's palette. The
   plugin takes over overflow once initialised, so the rule above is only
   the pre-init / no-JS fallback. */
.filter-group__list.mCustomScrollbar {
    overflow: hidden !important;
}

.filter-group__list .mCSB_scrollTools {
    width: 4px;
    opacity: 1;
}

.filter-group__list .mCSB_scrollTools .mCSB_draggerRail {
    width: 4px;
    background-color: #EDF0EF;
    border-radius: 2px;
}

.filter-group__list .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 4px;
    background-color: #C3CFCB;
    border-radius: 2px;
}

.filter-group__list .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.filter-group__list .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: var(--brand-green);
}

/* Keep the rows clear of the rail */
.filter-group__list .mCSB_container {
    margin-right: 10px;
}

.filter-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	color: var(--finder-muted);
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
}

.filter-option .form-check-input {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin: 0;
    border-color: #C9D2CF;
}

.filter-option .form-check-input:checked {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.filter-option .form-check-input:focus {
    box-shadow: none;
}

/* 14.3 Search bar ------------------------------------------------------- */
.finder-search {
    position: relative;
    margin-bottom: 16px;
}

.finder-search__icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
}

.finder-search__input {
    width: 100%;
    height: 47px;
    padding: 0 16px 0 44px;
    background-color: #FFFFFF;
    border: 1px solid var(--finder-line);
    border-radius: 10px;
    color: var(--brand-green);
    font-size: 14px;
}

.finder-search__input::placeholder {
    color: #8A9A95;
}

.finder-search__input:focus {
    border-color: rgba(11, 72, 58, .35);
    outline: 0;
}

/* 14.4 Toolbar ---------------------------------------------------------- */
.finder-toolbar {
    gap: 20px;
    min-height: 61px;
    margin-bottom: 24px;
    padding: 8px 16px;
    background-color: var(--brand-green);
    border-radius: 10px;
    flex-wrap: wrap;
}

.finder-toolbar__count {
    margin-bottom: 0;
    color: #FFFFFF;
    font-size: 14px;
}

.finder-toolbar__count strong {
    color: var(--brand-lime);
    font-weight: 700;
}

.finder-toolbar__link {
    padding: 0;
    background: none;
    border: 0;
    color: #FFFFFF;
    font-size: 13px;
    text-decoration: underline;
}

.finder-toolbar__link--muted {
    color: #7E9C90;
}

.finder-toolbar__submit {
    height: 38px;
    padding: 0 18px;
    background-color: #3B6C5C;
    border: 0;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    transition: background-color .25s ease;
}

.finder-toolbar__submit:hover {
    background-color: #4A7D6C;
}

/* Nothing is selected yet - the same button, dimmed. :hover still matches a
   disabled button, so the lift is cancelled here too. */
.finder-toolbar__submit:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.finder-toolbar__submit:disabled:hover {
    background-color: #3B6C5C;
}

/* 14.5 Product cards ---------------------------------------------------- */
.finder-grid {
    --bs-gutter-x: 36px;
    --bs-gutter-y: 30px;
}

.finder-card {
    display: flex;
    gap: 12px;
    /* The rows set the height now - no reserved space under the badge */
    height: 100%;
    padding: 20px;
    background-color: #FFFFFF;
    border: 1px solid #EFF0EF;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

/* Selected state - driven by the checkbox, no JS */
.finder-card:has(.finder-card__check:checked) {
    background-color: #FBFCE8;
    border-color: var(--brand-lime);
}

.finder-card__check-hit {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 3px;
    cursor: pointer;
}

.finder-card__check {
    width: 18px;
    height: 18px;
    margin: 0;
    border-color: #C9D2CF;
    border-radius: 4px;
    /* Shows whether the product has any strength selected - the strengths
       below are what the visitor ticks, so the box itself never receives
       the click (a real checkbox toggles on the native click before our
       handler runs, then reverts that on preventDefault, undoing whatever
       we set) - .finder-card__check-hit owns the click instead */
    pointer-events: none;
}

.finder-card__check:checked {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime);
    /* Dark tick, since the lime fill is light */
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230A483B' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.finder-card__check:focus {
    box-shadow: none;
}

.finder-card__body {
    display: flex;
    flex-direction: column;
    /* The body carries the rows, so it takes the width the head row splits */
    flex: 1;
    min-width: 0;
}

/* Name on the left, dosage form on the right - it drops to its own line
   when the card gets too narrow to hold both */
.finder-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 12px;
}

.finder-card__name {
    color: var(--brand-green);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

/* The strengths this product comes in, between its name and its form. Each
   one is still its own checkbox - the box itself is taken out of sight and
   its label carries the button, so any number of them can be on at once */
.finder-card__strengths {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* The rule under the buttons, drawn by the row that sits on it */
    padding-bottom: 14px;
    border-bottom: 1px solid #EFF0EF;
    margin-bottom: 14px;
}

.finder-card__strength {
    position: relative;
    display: inline-flex;
}

/* Out of sight but still the control: it keeps the focus and the label
   drives it, so clicks and the keyboard both go through the checkbox */
.finder-card__strength-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.finder-card__strength-label {
    margin: 0;
    padding: 3px 12px;
    background-color: #FFFFFF;
    border: 1px solid #E3E8E6;
    /* Capsule ends, as the reference has them */
    border-radius: 999px;
    color: var(--brand-green);
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.finder-card__strength-label:hover {
    border-color: var(--brand-green);
    transform: scale(1.12);
    z-index: 1;
}

.finder-card__strengths--shake {
    animation: finder-strengths-shake .5s ease;
}

@keyframes finder-strengths-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Centre-of-viewport alert, shown when a visitor clicks the product-level
   checkbox instead of ticking a strength below it */
.finder-center-alert-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.finder-center-alert-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.finder-center-alert {
    max-width: min(420px, 90vw);
    padding: 16px 24px;
    background-color: var(--brand-green);
    color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(10, 72, 59, .35);
    font-size: 15px;
    line-height: 22px;
    text-align: center;
}

.finder-center-alert-overlay.is-visible .finder-center-alert {
    animation: finder-center-alert-pop .2s ease;
}

@keyframes finder-center-alert-pop {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: scale(1); }
}

.finder-card__strength-input:checked + .finder-card__strength-label {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #FFFFFF;
}

/* The box is invisible, so its focus ring has to show on the button */
.finder-card__strength-input:focus-visible + .finder-card__strength-label {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}

/* Sits at the top right of the card, behind a small lime dot */
.finder-card__form {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--finder-muted);
    font-size: 13px;
    line-height: 20px;
}

.finder-card__form::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    background-color: var(--brand-lime);
    border-radius: 50%;
}

.finder-card__badge {
    align-self: flex-start;
    padding: 5px 12px;
    background-color: #F3F6D8;
    border-radius: 6px;
    color: var(--brand-green);
    font-size: 12px;
    line-height: 18px;
}

/* 14.6 Load more -------------------------------------------------------- */
.finder-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    margin-top: 30px;
    padding: 0 18px;
    background-color: var(--brand-lime);
    border: 0;
    border-radius: 6px;
    color: var(--brand-green);
    font-size: 15px;
    font-weight: 600;
    transition: filter .25s ease;
}

.finder-loadmore:hover {
    filter: brightness(.94);
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

/* Laptop */
@media (max-width: 1399.98px) {
    .booth-line__text {
        font-size: 38px;
    }

    .booth-badge {
        min-width: 165px;
        height: 58px;
        font-size: 33px;
    }

    .banner-title {
        margin-top: 32px;
        font-size: 28px;
        line-height: 38px;
    }
}

@media (max-width: 1199.98px) {
    .site-logo img {
        height: 58px;
    }

    .banner {
        min-height: 0;
        padding: 50px 0;
    }

    .booth-line__text {
        font-size: 34px;
    }

    .booth-badge {
        min-width: 148px;
        height: 54px;
        font-size: 30px;
    }

    .banner-title {
        font-size: 26px;
        line-height: 36px;
    }

    .section-title {
        font-size: 30px;
    }

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

    /* Not enough room for one row - wrap and drop the vertical rules */
    .stats-bar__list {
        justify-content: flex-start;
        gap: 30px 40px;
    }

    .stat-divider {
        display: none;
    }

    .stat-item {
        flex: 0 0 calc(33.333% - 27px);
    }
}

/* Tablet */
@media (max-width: 991.98px) {
    .site-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .site-logo img {
        height: 52px;
    }

    .btn-meeting {
        height: 42px;
        padding: 0 20px;
        font-size: 15px;
    }

    .banner {
        padding: 45px 0;
    }

    /* Hold the pale left side of the artwork behind the copy */
    .banner__media img {
        object-position: left center;
    }

    .banner-content {
        margin-bottom: 10px;
    }

    .banner-text {
        max-width: 100%;
    }

    .meeting-card {
        max-width: 480px;
        margin: 0 auto;
    }

    .btn-meeting--lg {
        height: 45px;
        font-size: 16px;
    }

    .stat-item {
        flex: 0 0 calc(50% - 20px);
    }

    .why-meet {
        padding: 45px 0 40px;
    }

    .section-title {
        font-size: 26px;
    }

    .video-showcase {
        padding: 50px 0 56px;
    }

    /* Stacked - let the list fill the column */
    .video-tabs {
        max-width: 100%;
    }

    .about {
        padding: 45px 0 48px;
    }

    /* Image drops below the copy */
    .about__image {
        margin-top: 28px;
    }

    /* Filters stack above the products */
    .finder {
        padding: 45px 0 48px;
    }

    .finder__sidebar-col {
        width: 100%;
    }

    .finder__main-col {
        padding-left: 0;
        padding-top: 24px;
    }

    .thankyou {
        padding: 45px 0;
    }

    .cta {
        padding: 45px 0;
    }

    .cta__title {
        font-size: 30px;
        line-height: 46px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .site-logo img {
        height: 42px;
    }

    .btn-meeting {
        height: 38px;
        gap: 6px;
        padding: 0 14px;
        font-size: 13px;
    }

    .btn-meeting__icon {
        width: 18px;
        height: 18px;
    }

    .banner {
        padding: 35px 0;
    }

    .booth-line__text {
        font-size: 26px;
    }

    .booth-badge {
        min-width: 115px;
        height: 42px;
        margin-left: 12px;
        font-size: 23px;
    }

    .booth-badge::after {
        top: -10px;
        right: -10px;
        width: 15px;
        height: 16px;
    }

    .banner-title {
        margin-top: 24px;
        font-size: 22px;
        line-height: 32px;
    }

    .banner-text {
        margin-top: 16px;
        font-size: 15px;
        line-height: 25px;
    }

    .banner-content .btn-meeting--lg {
        margin-top: 22px;
    }

    .btn-meeting--lg {
        height: 44px;
        padding: 0 20px;
        font-size: 15px;
    }

    .btn-meeting--block {
        height: 46px;
        font-size: 15px;
    }

    .meeting-card {
        padding: 18px 18px 22px;
    }

    .stats-bar {
        padding: 28px 0;
    }

    .stats-bar__list {
        gap: 24px;
    }

    .stat-item {
        flex: 0 0 100%;
    }

    .stat-item__icon {
        width: 48px;
        height: 48px;
        margin-right: 16px;
    }

    .stat-item__value {
        font-size: 22px;
        line-height: 28px;
    }

    .why-meet {
        padding: 35px 0 32px;
    }

    .section-title {
        font-size: 22px;
    }

    .section-title::after {
        top: -4px;
        width: 18px;
        height: 19px;
    }

    .section-lead {
        margin-bottom: 24px;
    }

    .video-showcase {
        padding: 35px 0 40px;
    }

    .video-showcase .section-lead {
        margin-bottom: 28px;
    }

    .video-feature__play {
        width: 74px;
        height: 74px;
    }

    .video-feature__title {
        margin-top: 20px;
        font-size: 19px;
    }

    .video-tab {
        gap: 14px;
        padding: 14px;
    }

    .video-tab__thumb img {
        width: 116px;
    }

    .video-tab__thumb .video-tab__play {
        width: 32px;
        height: 32px;
    }

    .video-tab__title {
        font-size: 15px;
        line-height: 22px;
    }

    .video-tab__label {
        margin-top: 8px;
        font-size: 14px;
    }

    .about {
        padding: 35px 0 40px;
    }

    .about__card {
        padding: 18px;
    }

    .about__tabs .nav-link {
        height: 42px;
        padding: 0 14px;
        font-size: 15px;
        line-height: 42px;
    }

    .about__panes {
        margin-top: 28px;
    }

    .about__pane-title {
        margin-bottom: 14px;
        font-size: 18px;
    }

    .finder {
        padding: 35px 0 40px;
    }

    .finder-grid {
        --bs-gutter-x: 16px;
        --bs-gutter-y: 16px;
    }

    .finder-card {
        min-height: 0;
        padding: 16px;
    }

    .finder-toolbar {
        gap: 12px;
        padding: 12px 14px;
    }

    .finder-toolbar__submit {
        width: 100%;
        margin-left: 0 !important;
    }

    /* Keep some background visible around the frame on small screens */
    .thankyou {
        padding: 32px 0;
    }

    .thankyou__card {
        padding: 30px 18px 28px;
    }

    .cta {
        padding: 32px 16px;
    }

    .cta__frame {
        border-width: 12px;
    }

    .cta__corner {
        top: -12px;
        right: -12px;
        width: 44px;
        height: 44px;
    }

    .cta__inner {
        padding: 28px 16px 20px;
    }

    .cta__title {
        font-size: 23px;
        line-height: 34px;
    }

    .cta__note {
        font-size: 14px;
    }
}

/* Very small phones - stack the paired fields */
@media (max-width: 400px) {
    .meeting-form .col-6 {
        width: 100%;
    }
}

.footer {
	padding: 15px 0;
    background: var(--brand-green);
}
.footer p {
	margin: 0;
	color: #fff;
	font-size: 15px;
}

/* --------------------------------------------------------------------------
   Product inquiry modal

   Ported as-is from the approved inquiry-modal reference. Every rule is
   scoped under .modal-back so none of it can reach the product finder or
   any other section, and the palette is kept local to the modal.
   -------------------------------------------------------------------------- */
.modal-back {
    --m-dg: #0A483B;
    --m-dg2: #061F19;
    --m-by: #E3E829;
    --m-py: #F9FAD4;
    --m-white: #FFF;
    --m-bg: #F7FAF8;
    --m-text: #1A2E28;
    --m-muted: #5A6E68;
    --m-light: #E8EFEC;
    --m-line: #DCE6E1;
    --m-teal: #0D7377;

    position: fixed;
    inset: 0;
    background: rgba(6, 31, 25, .6);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 18px;
    overflow-y: auto;
    color: var(--m-text);
    line-height: 1.6;
}

.modal-back.open {
    display: flex;
}

/* Bootstrap also ships a .modal rule - reset what it would impose here */
.modal-back .modal {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    overflow: hidden;
    background: var(--m-white);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(6, 31, 25, .4);
    margin: auto;
}

.modal-back .modal-head {
    background: var(--m-dg);
    color: var(--m-white);
    padding: 22px 26px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.modal-back .modal-head h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.modal-back .modal-head p {
    color: rgba(255, 255, 255, .72);
    font-size: 13.5px;
    margin: 0;
}

.modal-back .modal-x {
    background: rgba(255, 255, 255, .12);
    border: none;
    color: var(--m-white);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.modal-back .modal-x:hover {
    background: rgba(255, 255, 255, .22);
}

/* Bootstrap also ships .modal-body - reset its flex/padding here */
.modal-back .modal-body {
    position: static;
    flex: none;
    padding: 24px 26px 26px;
}

.modal-back .sel-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--m-dg);
    margin-bottom: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-back .sel-label .n {
    color: var(--m-teal);
}

.modal-back .sel-box {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    border-radius: 10px;
    padding: 11px;
    margin-bottom: 20px;
    max-height: 128px;
    overflow-y: auto;
}

.modal-back .sel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--m-white);
    border: 1px solid var(--m-line);
    border-radius: 8px;
    padding: 5px 6px 5px 11px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--m-dg);
}

.modal-back .sel-chip .x {
    background: var(--m-light);
    border: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--m-muted);
    font-size: 12px;
    line-height: 1;
    display: grid;
    place-items: center;
}

.modal-back .sel-chip .x:hover {
    background: var(--m-dg);
    color: var(--m-by);
}

.modal-back .sel-empty {
    font-size: 13px;
    color: var(--m-muted);
    font-style: italic;
}

.modal-back .fgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.modal-back .field {
    margin-bottom: 14px;
}

.modal-back .field.full {
    grid-column: 1/-1;
}

.modal-back .field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--m-text);
    margin-bottom: 6px;
}

.modal-back .field label .req {
    color: #c0392b;
}

.modal-back .field label .opt-tag {
    color: var(--m-muted);
    font-weight: 400;
    font-size: 12px;
}

.modal-back .field input,
.modal-back .field select,
.modal-back .field textarea {
    width: 100%;
    border: 1.5px solid var(--m-line);
    border-radius: 9px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--m-text);
    background: var(--m-white);
    transition: border-color .14s;
}

.modal-back .field input:focus,
.modal-back .field select:focus,
.modal-back .field textarea:focus {
    border-color: var(--m-dg);
    outline: none;
}

.modal-back .field textarea {
    resize: vertical;
    min-height: 74px;
}

.modal-back .field input.err,
.modal-back .field select.err {
    border-color: #c0392b;
    background: #fdf3f2;
}

.modal-back .field .msg {
    color: #c0392b;
    font-size: 12px;
    margin-top: 5px;
    display: none;
}

.modal-back .field .msg.show {
    display: block;
}

.modal-back .captcha {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    border-radius: 10px;
    padding: 13px 14px;
    margin-bottom: 18px;
}

.modal-back .captcha .q {
    font-weight: 700;
    color: var(--m-dg);
    font-size: 16px;
    white-space: nowrap;
    padding-bottom: 11px;
}

.modal-back .captcha .cap-field {
    flex: 1;
    margin: 0;
}

.modal-back .modal-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Scoped so it beats Bootstrap's own .btn-primary */
.modal-back .btn-primary {
    display: inline-block;
    background: var(--m-by);
    color: var(--m-dg);
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: transform .15s, background .15s;
    border: none;
    cursor: pointer;
    font-family: inherit;
    flex: 1;
    text-align: center;
}

.modal-back .btn-primary:hover {
    background: var(--m-white);
    transform: translateY(-2px);
}

.modal-back .btn-cancel {
    background: none;
    border: 1.5px solid var(--m-line);
    color: var(--m-muted);
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 22px;
    border-radius: 8px;
    cursor: pointer;
}

.modal-back .btn-cancel:hover {
    border-color: var(--m-muted);
    color: var(--m-text);
}

.modal-back .privacy {
    font-size: 11.5px;
    color: var(--m-muted);
    margin: 14px 0 0;
    text-align: center;
    line-height: 1.5;
}

.modal-back .thanks {
    text-align: center;
    padding: 14px 8px 8px;
}

.modal-back .thanks .tick {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--m-py);
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
}

.modal-back .thanks .tick svg {
    width: 34px;
    height: 34px;
    color: var(--m-dg);
}

.modal-back .thanks h3 {
    font-size: 23px;
    color: var(--m-dg);
    margin-bottom: 10px;
}

.modal-back .thanks p {
    color: var(--m-muted);
    font-size: 15px;
    max-width: 400px;
    margin: 0 auto 8px;
    line-height: 1.65;
}

.modal-back .thanks .ref {
    display: inline-block;
    background: var(--m-bg);
    border: 1px solid var(--m-line);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--m-dg);
    font-weight: 600;
    margin: 14px 0 22px;
}

@media (max-width: 560px) {
    .modal-back .fgrid {
        grid-template-columns: 1fr;
    }

    .modal-back .modal-actions {
        flex-wrap: wrap;
    }

    .modal-back .btn-cancel {
        width: 100%;
        order: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-back * {
        transition: none !important;
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Floating "Schedule a Meeting" button

   The page's own .btn-meeting, turned on its side into a tall tab that sits
   against the right edge of the viewport once the banner has scrolled away.
   Fixed, so it stays out of the page's layout, and it only ever slides a
   short distance so it cannot widen the document.

   The label runs top to bottom with writing-mode rather than a rotation, so
   the button is genuinely tall and narrow and the text stays selectable and
   readable. In vertical writing the flex main axis turns with it, so the
   label and its arrow stack down the tab on their own.
   -------------------------------------------------------------------------- */
.floating-meeting {
    position: fixed;
    top: 50%;
    /* Flush to the edge - the tab reads as attached to the screen */
    right: 0;
    /* Under the sticky header (1000) and well under the modal (9999) */
    z-index: 995;

    writing-mode: vertical-rl;
    width: auto;
    height: auto;
    min-height: 190px;
    /* Tall and narrow: the pair is top/bottom then left/right, as ever */
    padding: 26px 14px;
    gap: 12px;
    /* Only the corners that leave the edge are rounded */
    border-radius: 10px 0 0 10px;
    border-right-color: transparent;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    /* Cast to the left, away from the edge it is sitting on */
    box-shadow: -6px 0 20px rgba(10, 72, 59, .22);

    /* Resting state: a touch to the right, faded out and unreachable */
    transform: translate(24px, -50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease, visibility .28s ease,
        background-color .25s ease, border-color .25s ease, color .25s ease;
}

.floating-meeting.is-visible {
    transform: translate(0, -50%);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Point the arrow the way the label now reads */
.floating-meeting .btn-meeting__icon {
    transform: rotate(90deg);
}

/* Tablet - the same tab, trimmed so it takes less of the edge */
@media (max-width: 991.98px) {
    .floating-meeting {
        min-height: 170px;
        padding: 22px 12px;
        gap: 10px;
        font-size: 14px;
    }
}

/* Phone - narrower still, so it leaves the reading column alone */
@media (max-width: 575.98px) {
    .floating-meeting {
        min-height: 150px;
        max-height: calc(100vh - 32px);
        padding: 18px 9px;
        gap: 8px;
        font-size: 12px;
    }

    .floating-meeting .btn-meeting__icon {
        width: 16px;
        height: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-meeting {
        transition: none;
    }
}