/* ==================== Shared tokens (scoped, won't leak) ==================== */
.cd-about-timeline, .cd-about-mission, .cd-about-testi, .cd-about-video-lb {
	--navy: #0B2545; --gold: #F9A825; --blue: #1565C0; --teal: #00897B;
	--muted: #64748B; --border: #E2E8F0; --text: #1E293B; --light: #F0F6FF;
}
.cd-about-timeline *, .cd-about-mission *, .cd-about-testi * { box-sizing: border-box; }
.cd-about-empty { color: #64748B; font-size: 14px; }

/* ==================== Timeline ==================== */
/*
 * Full-bleed: breaks this out to the full browser width even though its
 * parent container is a centered, max-width content wrapper (like every
 * other section on this page). Standard technique — width:100vw plus
 * pulling back by 50vw from each edge of a relatively-positioned,
 * 50%-shifted box always spans the true viewport width, regardless of
 * how deeply nested the element is.
 */
.cd-about-timeline {
	border-radius: 14px; overflow: visible;
	width: 100vw; position: relative; left: 50%; right: 50%;
	margin-left: -50vw; margin-right: -50vw;
}

.cd-about-timeline__head {
	background-color: #0B2545 !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	/* No blend-mode / darkening overlay — a dark source photo blended
	   with multiply against an already-dark navy background was
	   crushing it down to nearly invisible. The raw photo shows through
	   directly now. */
	padding: 40px 32px 16px; text-align: center; position: relative;
	border-radius: 14px 14px 0 0; overflow: hidden;
}
.cd-about-timeline__eyebrow { font-family: monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #F9A825; margin-bottom: 14px; }
.cd-about-timeline__heading { color: #fff; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; margin: 0 0 30px; line-height: 1.25; }

.cd-about-timeline__tabs {
	display: inline-flex; background: #fff !important; border-radius: 30px;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
	margin: 0 auto; max-width: 100%; overflow-x: auto;
}
/*
 * Hardened with !important and hardcoded colors (not CSS variables) —
 * on the live site these buttons were picking up an unstyled, pink-
 * bordered appearance from theme/global button CSS loading after this
 * stylesheet. !important on the properties that matter (border,
 * background, color, outline) guarantees this design wins regardless
 * of load order or theme specificity.
 */
.cd-about-timeline__tabs .cd-about-tab {
	padding: 14px 26px !important; margin: 0 !important;
	border: none !important; outline: none !important; box-shadow: none !important;
	background: transparent !important; color: #0B2545 !important;
	font-weight: 700 !important; font-size: 13.5px !important; line-height: 1.2 !important;
	cursor: pointer; font-family: inherit; white-space: nowrap;
	border-radius: 0 !important; text-transform: uppercase;
}
.cd-about-timeline__tabs .cd-about-tab:first-child { border-radius: 30px 0 0 30px !important; }
.cd-about-timeline__tabs .cd-about-tab:last-child { border-radius: 0 30px 30px 0 !important; }
/*
 * Deliberately does NOT set border-radius here. The three reference
 * screenshots showed the active tab keeps whatever shape its POSITION
 * already gives it — rounded-left if it's the first tab, square if
 * it's a middle tab, rounded-right if it's the last tab — not a fully
 * rounded pill regardless of position. Only background/text color
 * change when a tab becomes active; the shape rules above (first-
 * child / last-child / the default square from .cd-about-tab) are left
 * completely alone.
 */
.cd-about-timeline__tabs .cd-about-tab.is-active {
	background: #F9A825 !important; color: #0B2545 !important;
}

/*
 * Straddle math, worked through explicitly this time: the tab pill is
 * roughly 48px tall (14px padding top+bottom + ~20px text line-height).
 * The header above now ends with only 16px of padding after the
 * heading, so with no margin the pill would sit almost flush against
 * the dark/white boundary. Pulling it up by 34px puts roughly the top
 * 34px of the pill over the dark image and the remaining ~14px below
 * the boundary over white — a real, visible straddle in both
 * directions, not a net-zero cancellation like the previous attempt.
 */
.cd-about-timeline__tabs-wrap {
	display: flex; justify-content: center; position: relative; z-index: 5;
	margin-top: -22px; margin-bottom: 20px; /* pill is ~44px tall; -22px puts exactly half above the boundary, half below */
}

.cd-about-timeline__arrow {
	text-align: center; color: #F9A825; font-size: 26px; line-height: 1;
	margin: 20px auto 0; position: relative; z-index: 2;
}

.cd-about-timeline__panels { background: #fff; padding: 20px 32px 10px; border-radius: 0 0 14px 14px; position: relative; z-index: 1; }

.cd-about-tl__panel { display: none; position: relative; }
.cd-about-tl__panel.is-active { display: block; }

/* One genuinely continuous dashed line spanning every row in the active
   panel, with dots layered on top — rather than a per-row line, which
   risked visible gaps between rows. */
.cd-about-tl__panel-line {
	position: absolute; top: 14px; bottom: 14px; left: 50%;
	width: 0; border-left: 2px dashed var(--border);
	transform: translateX(-50%); z-index: 0;
}

.cd-about-tl__row { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; position: relative; z-index: 1; }
.cd-about-tl__spine { display: flex; align-items: center; justify-content: center; }
.cd-about-tl__dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); }

.cd-about-tl__side { padding: 22px 30px; }
.cd-about-tl__side--left { text-align: right; }
.cd-about-tl__side--right { text-align: left; }
.cd-about-tl__card--empty { min-height: 1px; }
.cd-about-tl__date { color: var(--gold); font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.cd-about-tl__title { font-size: 17px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.cd-about-tl__desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }

@media (max-width: 760px) {
	.cd-about-tl__row { grid-template-columns: 40px 1fr; }
	.cd-about-tl__panel-line { left: 20px; }
	.cd-about-tl__side--left, .cd-about-tl__side--right { text-align: left; }
	.cd-about-tl__side--left { display: none; } /* stack: show only the right column on narrow screens to avoid a cramped 40px-wide left column */
}

/* ==================== Mission Section ==================== */
.cd-about-mission__stats {
	background-color: #0B2545 !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	/* No blend-mode here either — same fix as the timeline section. */
	border-radius: 14px;
	padding: 40px 40px 20px;
	min-height: 220px; /* explicit, known height — makes the overlap math in .cd-about-mission__row below exact and checkable */
	display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-content: flex-start;
	/* Full-bleed: same technique as the timeline section above. */
	width: 100vw; position: relative; left: 50%; right: 50%;
	margin-left: -50vw; margin-right: -50vw;
}
.cd-about-mission__stat-num { color: var(--gold); font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; line-height: 1; }
.cd-about-mission__stat-lbl { color: #E3E9F5; font-size: 13px; margin-top: 6px; }

.cd-about-mission__row {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
	margin-top: -51px; /* exactly 23% of .cd-about-mission__stats' 220px min-height — within the requested 22-25% */
	position: relative; z-index: 2;
	box-shadow: 0 20px 50px rgba(11,37,69,.16);
}
.cd-about-mission__copy {
	background: #fff; border-radius: 0; /* sharp corners, matching the reference exactly */
	padding: 40px 40px;
}
.cd-about-mission__eyebrow { font-family: monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; text-decoration: underline; text-underline-offset: 4px; }
.cd-about-mission__heading { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: var(--navy); line-height: 1.2; margin: 0 0 16px; }
.cd-about-mission__body { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 26px; }
.cd-about-mission__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cd-about-mission__brochure { font-size: 14px; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }

/* Self-contained so this button looks right regardless of what other
   plugin/theme CSS is or isn't loaded on the page — it doesn't depend
   on a class defined elsewhere. Uppercase + arrow to match the
   reference button's actual shape ("SEE PACKAGES | →"), not just a
   plain rounded rectangle. */
.cd-about-mission__cta {
	display: inline-flex !important; align-items: center; gap: 10px;
	text-transform: uppercase !important; letter-spacing: .02em;
	background: #F9A825 !important; color: #0B2545 !important;
	font-weight: 700 !important; font-size: 14px !important; padding: 13px 26px !important;
	border-radius: 7px !important; border: none !important; text-decoration: none !important; cursor: pointer;
}
.cd-about-mission__cta:hover { background: #e08e00 !important; }
.cd-about-mission__cta::after {
	content: "|  \2192"; /* vertical divider + right arrow, matching "SEE PACKAGES | →" */
	margin-left: 4px; opacity: .85;
}

/* Equal height, aligned with the text card, sharp corners — same
   treatment as .cd-about-mission__copy above. Previously this had a
   large negative margin to sit "taller" than the text card, which was
   a misreading; the reference shows both boxes precisely aligned. */
.cd-about-mission__media {
	position: relative; background: var(--light);
	border-radius: 0; overflow: hidden; min-height: 260px;
}
.cd-about-mission__media img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.cd-about-mission__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 68px !important; height: 68px !important; min-width: 68px !important; min-height: 68px !important;
	max-width: 68px !important; max-height: 68px !important; flex-shrink: 0;
	border-radius: 50% !important; background: rgba(255,255,255,.92) !important;
	border: none !important; outline: none !important; display: flex !important; align-items: center; justify-content: center;
	font-size: 22px; color: #0B2545 !important; line-height: 1 !important;
	cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.25) !important; padding: 0 !important; margin: 0 !important;
}
/*
 * Pulsing ring, pure CSS — a ::before pseudo-element that repeatedly
 * scales up and fades out behind the button. This is a native browser
 * animation, not JS on a timer, so it carries none of the "infinite
 * loop" risk that mattered when this addon was built — the browser's
 * own rendering engine handles the repetition, the same way it handles
 * any CSS transition or animation.
 */
.cd-about-mission__play::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: rgba(249,168,37,.55);
	animation: cd-about-pulse 1.8s ease-out infinite;
	z-index: -1;
}
@keyframes cd-about-pulse {
	0%   { transform: scale(1);    opacity: .7; }
	100% { transform: scale(1.9);  opacity: 0; }
}

@media (max-width: 820px) {
	.cd-about-mission__row { grid-template-columns: 1fr; }
	.cd-about-mission__media { min-height: 240px; }
}

.cd-about-video-lb { display: none; position: fixed; inset: 0; background: rgba(10,10,14,.88); z-index: 99998; align-items: center; justify-content: center; padding: 24px; }
.cd-about-video-lb.is-open { display: flex; }
.cd-about-video-lb__inner { width: 100%; max-width: 900px; aspect-ratio: 16/9; position: relative; background: #000; border-radius: 10px; overflow: hidden; }
.cd-about-video-lb__inner iframe { width: 100%; height: 100%; border: 0; }
.cd-about-video-lb__close { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; }

/* ==================== Testimonials ==================== */
.cd-about-testi__page { display: none; }
.cd-about-testi__page.is-active { display: block; }
.cd-about-testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cd-about-testi__card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 26px 24px; }
.cd-about-testi__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cd-about-testi__avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.cd-about-testi__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.cd-about-testi__avatar-fallback { width: 100%; height: 100%; background: var(--light); color: var(--blue); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.cd-about-testi__name { font-weight: 800; font-size: 15px; color: var(--navy); }
.cd-about-testi__role { font-size: 12.5px; color: var(--muted); }
.cd-about-testi__quote-mark { margin-left: auto; font-size: 34px; color: var(--gold); opacity: .5; line-height: 1; font-family: Georgia, serif; }
.cd-about-testi__text { font-size: 13.5px; color: var(--muted); font-style: italic; line-height: 1.7; margin: 0 0 18px; }
.cd-about-testi__foot { display: flex; align-items: center; gap: 8px; }
.cd-about-testi__stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.cd-about-testi__label { font-size: 12.5px; color: var(--muted); }

.cd-about-testi__dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.cd-about-testi__dot { width: 9px !important; height: 9px !important; min-width: 9px !important; flex-shrink: 0; border-radius: 50% !important; border: none !important; outline: none !important; background: #E2E8F0 !important; cursor: pointer; padding: 0 !important; margin: 0 !important; }
.cd-about-testi__dot.is-active { background: #F9A825 !important; width: 22px !important; border-radius: 5px !important; }

@media (max-width: 900px) { .cd-about-testi__grid { grid-template-columns: 1fr; } }