/******************************************************************
  Little Lambs Preschool — About page styles
  Loaded ONLY by html/lambs-about.html (served as /lambs-about.php).
  Brand colors:  gray-blue #7393b3   deep blue #335686
*******************************************************************/
:root {
	--llp-blue:      #335686;
	--llp-grayblue:  #7393b3;
	--llp-sun:       #f6c453;
	--llp-mint:      #7fc8a9;
	--llp-coral:     #ef8a7b;
	--llp-cream:     #fff8ef;
	--llp-ink:       #2c3b41;
	--llp-radius:    22px;
	--llp-shadow:    0 10px 28px rgba(51, 86, 134, 0.13);
}

/* ---------- page basics ---------- */
.about-page { background-color: #ffffff; color: var(--llp-ink); }
.about-page h1,
.about-page h2,
.about-page h3 {
	font-family: 'Love Ya Like A Sister', cursive;
	color: var(--llp-blue);
	font-weight: 700;
}
.about-page h2 { font-size: 2.1rem; margin-bottom: .35em; }
.about-page .section-lead {
	font-size: 1.08rem;
	max-width: 780px;
	color: #4a5560;
}
.about-page .mainsection { padding: 64px 0; min-height: 0; }
.about-page .soft-bg { background-color: var(--llp-cream); }

/* playful little underline under each section heading */
.about-page .section-head { position: relative; margin-bottom: 26px; }
.about-page .section-head::after {
	content: "";
	display: block;
	width: 78px; height: 6px;
	margin-top: 10px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--llp-sun), var(--llp-mint));
}
.about-page .section-head.centered { text-align: center; }
.about-page .section-head.centered::after { margin-left: auto; margin-right: auto; }

/* ---------- hero ----------
   The hero background, nav bar, headline, eyebrow badge and wave now live in
   css/lambs.css under "HERO BAND" so the home page and this page stay identical.
   Only the bobbing lamb is defined here.                                     */
.lamb-hero-img {
	max-width: 230px;
	width: 100%;
	background: #fff;
	border-radius: 50%;
	border: 8px solid #fff;
	box-shadow: 0 12px 30px rgba(0,0,0,.22);
	animation: lamb-bob 5s ease-in-out infinite;
}
@keyframes lamb-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
	.lamb-hero-img { animation: none; }
}

/* ---------- stat cards ---------- */
.stat-card {
	background: #fff;
	border-radius: var(--llp-radius);
	box-shadow: var(--llp-shadow);
	padding: 30px 20px;
	text-align: center;
	height: 100%;
	border-top: 7px solid var(--llp-grayblue);
	transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:nth-child(2n) .num { color: var(--llp-grayblue); }
.stat-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(51,86,134,.18); }
.stat-card .num {
	display: block;
	font-family: 'Love Ya Like A Sister', cursive;
	font-size: 3rem;
	line-height: 1;
	font-weight: 700;
	color: var(--llp-blue);
	margin-bottom: 8px;
}
.stat-card .label { font-size: .98rem; color: #55606a; }

/* ---------- quotes ---------- */
.impact-quote {
	position: relative;
	background: #fff;
	border-left: 6px solid var(--llp-sun);
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(51,86,134,.10);
	padding: 22px 24px 20px;
	font-size: 1.04rem;
	font-style: italic;
	color: #3d4750;
	margin-bottom: 20px;
}
.impact-quote cite {
	display: block;
	margin-top: 10px;
	font-style: normal;
	font-weight: 700;
	font-size: .88rem;
	color: var(--llp-grayblue);
}
.impact-quote.alt { border-left-color: var(--llp-mint); }
.impact-quote.alt2 { border-left-color: var(--llp-coral); }

/* ---------- "how we do it" pillars ---------- */
.pillar {
	background: #fff;
	border-radius: var(--llp-radius);
	box-shadow: 0 6px 18px rgba(51,86,134,.10);
	padding: 26px 22px;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pillar:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(51,86,134,.16); }
.pillar h3 { font-size: 1.25rem; margin-bottom: .4em; }
.pillar p { font-size: .97rem; color: #55606a; margin-bottom: 0; }
.pillar .dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	font-size: 1.35rem;
	margin-bottom: 14px;
	background: var(--llp-cream);
}
.pillar.c1 .dot { background: #e3ecf6; }
.pillar.c2 .dot { background: #e6f5ee; }
.pillar.c3 .dot { background: #fdefdc; }
.pillar.c4 .dot { background: #fbe8e4; }
.pillar.c5 .dot { background: #eae7f6; }
.pillar.c6 .dot { background: #e0f2f5; }

/* ---------- document / resource cards ---------- */
.resource-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e8ecf1;
	border-radius: var(--llp-radius);
	box-shadow: 0 6px 18px rgba(51,86,134,.08);
	padding: 26px 24px;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.resource-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(51,86,134,.16); }
.resource-card h3 { font-size: 1.2rem; }
.resource-card p { font-size: .96rem; color: #55606a; flex-grow: 1; }
.resource-card .pdf-tag {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--llp-grayblue);
	border: 1px solid var(--llp-grayblue);
	border-radius: 99px;
	padding: 3px 10px;
	margin-bottom: 12px;
}

/* ---------- buttons ---------- */
.btn-lamb,
.about-page .btn-lamb {
	display: inline-block;
	background-color: var(--llp-blue);
	color: #fff !important;
	font-weight: 700;
	border: 0;
	border-radius: 99px;
	padding: 12px 28px;
	box-shadow: 0 6px 14px rgba(51,86,134,.28);
	transition: background-color .2s ease, transform .2s ease;
}
.btn-lamb:hover,
.btn-lamb:focus { background-color: var(--llp-grayblue); color: #fff !important; text-decoration: none; transform: translateY(-2px); }
.btn-lamb-sun {
	background-color: var(--llp-sun);
	color: #4a3608 !important;
	box-shadow: 0 6px 14px rgba(246,196,83,.45);
}
.btn-lamb-sun:hover, .btn-lamb-sun:focus { background-color: #f2b62f; color: #4a3608 !important; }
.btn-lamb-outline {
	background: transparent;
	color: var(--llp-blue) !important;
	border: 2px solid var(--llp-blue);
	box-shadow: none;
}
.btn-lamb-outline:hover { background: var(--llp-blue); color: #fff !important; }

/* ---------- C.A.R.E. callout ---------- */
.care-callout {
	background: #fff;
	border-radius: var(--llp-radius);
	box-shadow: var(--llp-shadow);
	border-left: 8px solid var(--llp-mint);
	padding: 28px 30px;
	margin-top: 34px;
}
.care-callout h3 { margin-bottom: .35em; }
.care-callout p { margin-bottom: 0; color: #55606a; }

/* ---------- closing call to action ---------- */
.cta-band {
	background: linear-gradient(135deg, #335686 0%, #43689c 100%);
	color: #fff;
	padding: 66px 0;
	text-align: center;
}
.cta-band h2 { color: #fff; font-size: 2.3rem; }
.cta-band p { color: rgba(255,255,255,.93); max-width: 760px; margin: 0 auto 26px; font-size: 1.06rem; }
.cta-band .contact-line { font-size: .95rem; margin-top: 22px; color: rgba(255,255,255,.85); }
.cta-band .contact-line a { color: #fff; text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
	.about-page .mainsection { padding: 46px 0; }
	.about-page h2 { font-size: 1.7rem; }
	.section-head::after { margin-left: auto; margin-right: auto; }
	.about-page .section-head { text-align: center; }
	.about-page .section-lead { margin-left: auto; margin-right: auto; }
}