:root{
    /* Text */
    --brook-ink:         #3F2A63;

    /* Primary Purple */
    --brook-forest:      #6A2A9A;
    --brook-forest-dark: #522677;

    /* Background */
    --brook-sand:        #F9FBFB;
    --brook-sand-deep:   #EEF8F7;

    /* Secondary Teal */
    --brook-clay:        #0C928C;
    --brook-clay-dark:   #108679;

    /* Accent */
    --brook-gold:        #E22E70;

    /* Optional Extra Colors */
    --brook-green:       #5AB013;
    --brook-green-light: #8FD34A;
    --brook-purple-light:#8E58C7;
}

.brook-mission-vision-widget{
	background: var(--brook-sand);
	padding: 5.5rem 0;
	font-family: var(--brook-font-body);
}

/* ============ HEADER ============ */
.mv-header{
	max-width: 640px;
	margin: 0 auto 3.5rem;
	text-align: center;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.mv-header.is-visible{
	opacity: 1;
	transform: translateY(0);
}

.mv-eyebrow{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(47,69,56,0.07);
	border: 1px solid rgba(184,112,74,0.35);
	color: var(--brook-clay-dark);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 50px;
	margin-bottom: 1.25rem;
}

.mv-heading{
	font-family: var(--brook-font-display);
	color: var(--brook-ink);
	font-weight: 500;
	font-size: 2.5rem;
	line-height: 1.16;
	letter-spacing: -0.01em;
	margin-bottom: 1rem;
}

.mv-intro{
	color: #5B5648;
	font-size: 1.05rem;
	line-height: 1.7;
	margin-bottom: 0;
}

/* ============ PANELS ROW ============ */
.mv-panels{
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}

/* thin seam between the two panels, like a shared door frame — desktop only */
.mv-panels::before{
	content: "";
	position: absolute;
	top: 2rem;
	bottom: 2rem;
	left: 50%;
	width: 1px;
	background: linear-gradient(to bottom, rgba(203,164,92,0) 0%, rgba(203,164,92,0.5) 20%, rgba(203,164,92,0.5) 80%, rgba(203,164,92,0) 100%);
	display: none;
}

@media (min-width: 992px){
	.mv-panels::before{ display: block; }
}

/* ============ CARD ============ */
.mv-card{
	height: 100%;
	padding: 0 2.5rem;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.mv-card.is-visible{
	opacity: 1;
	transform: translateY(0);
}

.mv-card--window{
	transition-delay: 0.12s;
}

/* Icon frame: door shape (arched top) vs window shape (rounded square) */
.mv-frame{
	width: 84px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brook-forest);
	margin-bottom: 1.5rem;
	box-shadow: 0 14px 30px rgba(47,69,56,0.22);
	transition: transform 0.35s ease;
}

.mv-card--door .mv-frame{
	border-radius: 50px 50px 10px 10px;
}

.mv-card--window .mv-frame{
	border-radius: 16px;
	background: var(--brook-clay);
	box-shadow: 0 14px 30px rgba(184,112,74,0.25);
}

.mv-card:hover .mv-frame{
	transform: translateY(-4px);
}

.mv-icon {
    color: #ffffff;
    font-size: 1.7rem;
}

.mv-card--window .mv-icon{
	color: var(--brook-sand);
}

.mv-label {
    display: block;
    color: var(--brook-clay-dark);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.mv-title{
	color: var(--brook-ink);
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.28;
	margin-bottom: 0.9rem;
}

.mv-text {
    color: #000000;
    font-size: 18px;
    line-height: 1.75;
    max-width: 420px;
    margin-bottom: 0;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px){
	.brook-mission-vision-widget{
		padding: 4rem 0;
	}
	.mv-heading{
		font-size: 2rem;
	}
	.mv-card{
		padding: 0;
		border-top: 1px solid rgba(203,164,92,0.3);
		padding-top: 2.25rem;
	}
	.mv-card--door{
		border-top: none;
		padding-top: 0;
	}
}

@media (max-width: 575.98px){
	.mv-heading{
		font-size: 1.65rem;
	}
	.mv-frame{
		width: 68px;
		height: 68px;
	}
	.mv-icon{
		font-size: 1.4rem;
	}
	.mv-title{
		font-size: 1.35rem;
	}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
	.mv-header,
	.mv-card{
		opacity: 1;
		transform: none;
		transition: none;
	}
	.mv-frame{
		transition: none;
	}
}