@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

.about-shell { --about-blue: #1766e8; --about-ink: #17243a; --about-muted: #738199; --about-line: #e5ebf4; background: #f7f9fd; font-family: 'DM Sans', 'Segoe UI', sans-serif; }
.about-shell .main-nav a:nth-child(3) { color: var(--about-blue); }
.about-shell .site-header { position: relative; z-index: 2; }
.about-page { width: min(1160px, calc(100% - 48px)); margin: 0 auto; color: var(--about-ink); }
.about-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 38px; padding: 45px 0 30px; }
.about-hero-copy { padding: 8px 0; }
.about-eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; color: var(--about-blue); font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.about-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #43bd91; }
.about-hero h1, .about-story h2, .about-section-heading h2, .about-contact h2 { font-family: 'Manrope', 'Segoe UI', sans-serif; font-weight: 800; letter-spacing: 0; }
.about-hero h1 { max-width: 500px; margin: 0 0 13px; font-size: 35px; line-height: 1.12; }
.about-intro { max-width: 440px; margin: 0; color: #6e7b91; font-size: 12px; line-height: 1.7; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 19px; }
.about-button { display: inline-flex; min-height: 31px; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #dce5f3; border-radius: 5px; color: #41516b; background: #fff; font-size: 9px; font-weight: 650; }
.about-button.primary { border-color: var(--about-blue); color: #fff; background: var(--about-blue); }
.about-hero-visual { position: relative; min-width: 0; overflow: hidden; border-radius: 7px; background: #dce5ec; box-shadow: 0 13px 30px rgba(28, 48, 79, .11); }
.about-hero-visual::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(11, 22, 37, .65)); content: ''; }
.about-hero-visual img { display: block; width: 100%; aspect-ratio: 1.75 / 1; object-fit: cover; }
.about-image-caption { position: absolute; z-index: 1; right: 18px; bottom: 16px; left: 18px; display: grid; gap: 4px; color: #fff; }
.about-image-caption span { font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.about-image-caption strong { font-family: 'Manrope', sans-serif; font-size: 14px; }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 0 36px; }
.about-stats article { min-height: 81px; padding: 13px 16px; border: 1px solid var(--about-line); border-radius: 6px; background: #fff; }
.about-stats article > strong { display: block; color: var(--about-blue); font-family: 'Manrope', sans-serif; font-size: 25px; line-height: 1; }
.about-stats article > strong span { color: #43bd91; }
.about-stats p { margin: 6px 0 2px; font-size: 10px; font-weight: 700; }
.about-stats small { color: var(--about-muted); font-size: 8px; }
.about-story { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 38px; padding: 18px 0 44px; }
.about-story-visual { position: relative; overflow: hidden; border-radius: 6px; background: #e3e9ef; }
.about-story-visual img { display: block; width: 100%; aspect-ratio: 1.42 / 1; object-fit: cover; }
.about-story-visual > span { position: absolute; bottom: 12px; left: 12px; padding: 6px 8px; border-radius: 3px; color: #fff; background: rgba(22, 37, 59, .72); font-size: 7px; font-weight: 700; letter-spacing: .7px; }
.about-story-copy .about-eyebrow { margin-bottom: 8px; }
.about-story h2 { max-width: 460px; margin: 0 0 12px; font-size: 23px; line-height: 1.2; }
.about-story-copy > p:not(.about-eyebrow) { margin: 0 0 9px; color: #718097; font-size: 9px; line-height: 1.7; }
.about-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.about-principles > div { display: flex; gap: 7px; align-items: flex-start; }
.about-principles > div > strong { color: var(--about-blue); font-size: 9px; }
.about-principles span { display: grid; gap: 3px; }
.about-principles b { font-size: 8px; }
.about-principles small { color: var(--about-muted); font-size: 7px; line-height: 1.45; }
.about-team { padding: 5px 0 42px; }
.about-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 15px; }
.about-section-heading .about-eyebrow { margin-bottom: 6px; }
.about-section-heading h2 { margin: 0; font-size: 20px; }
.about-section-heading > p { max-width: 390px; margin: 0; color: var(--about-muted); font-size: 9px; line-height: 1.6; }
.about-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.about-team-card { overflow: hidden; border: 1px solid var(--about-line); border-radius: 6px; background: #fff; }
.about-team-card img { display: block; width: 100%; aspect-ratio: 1.45 / 1; object-fit: cover; object-position: center 38%; background: #e7ecf2; }
.about-team-card > div { padding: 11px 12px 13px; }
.about-team-card small { color: var(--about-blue); font-size: 7px; font-weight: 700; letter-spacing: .6px; }
.about-team-card h3 { margin: 4px 0; font-family: 'Manrope', sans-serif; font-size: 12px; }
.about-team-card p { margin: 0; color: var(--about-muted); font-size: 8px; line-height: 1.5; }
.about-contact { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 16px; margin-bottom: 36px; padding: 16px; border: 1px solid var(--about-line); border-radius: 7px; background: #fff; }
.about-contact-copy { padding: 7px 8px; }
.about-contact .about-eyebrow { margin-bottom: 7px; }
.about-contact h2 { margin: 0 0 7px; font-size: 18px; }
.about-contact-copy > p:not(.about-eyebrow) { margin: 0 0 14px; color: var(--about-muted); font-size: 9px; line-height: 1.6; }
.about-contact-detail { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.about-contact-detail > span { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 5px; color: var(--about-blue); background: #edf4ff; font-size: 13px; }
.about-contact-detail > div { display: grid; gap: 2px; min-width: 0; }
.about-contact-detail small { color: #8290a5; font-size: 7px; font-weight: 700; letter-spacing: .6px; }
.about-contact-detail strong { overflow-wrap: anywhere; color: #35445c; font-size: 9px; }
.about-contact-hours { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.about-contact-hours > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #13b882; }
.about-contact-hours p { display: grid; gap: 2px; margin: 0; font-size: 8px; }
.about-contact-hours small { color: var(--about-muted); }
.about-map { position: relative; min-height: 230px; overflow: hidden; border-radius: 5px; background: #e9eef4; }
.about-map-canvas { position: absolute; inset: 0; overflow: hidden; background-color: #edf1e9; background-image: linear-gradient(28deg, transparent 47%, #c9d5d9 48%, #fff 48.4%, #fff 50%, #c9d5d9 50.4%, transparent 51%), linear-gradient(112deg, transparent 37%, #c9d5d9 37.5%, #fff 38%, #fff 39.6%, #c9d5d9 40.1%, transparent 40.6%), linear-gradient(72deg, transparent 66%, #c9d5d9 66.5%, #fff 67%, #fff 68.5%, #c9d5d9 69%, transparent 69.5%), repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.92) 35px 39px, #d5ddda 40px 41px, transparent 42px 67px), repeating-linear-gradient(90deg, transparent 0 41px, rgba(255,255,255,.92) 42px 46px, #d5ddda 47px 48px, transparent 49px 74px); }
.about-map-canvas::before { position: absolute; top: -25%; right: -15%; width: 31%; height: 150%; border-left: 7px solid rgba(255,255,255,.9); border-right: 2px solid #d6e0e3; background: rgba(171, 210, 220, .78); content: ''; transform: rotate(25deg); }
.map-neighborhood, .map-road { position: absolute; color: #7f8e88; font-size: 7px; font-weight: 600; letter-spacing: .4px; }
.neighborhood-one { top: 16%; left: 10%; }.neighborhood-two { top: 67%; left: 12%; }.neighborhood-three { top: 27%; right: 16%; }
.map-road { color: #9a8170; font-size: 6px; transform: rotate(28deg); }.road-one { top: 45%; left: 7%; }.road-two { top: 80%; right: 10%; transform: rotate(-24deg); }
.map-location-pin { position: absolute; top: 47%; left: 55%; width: 16px; height: 16px; border: 4px solid #fff; border-radius: 50% 50% 50% 0; background: #e54848; box-shadow: 0 2px 7px rgba(33,50,76,.28); transform: rotate(-45deg); }
.about-map-label { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #e7edf5; border-radius: 5px; background: rgba(255,255,255,.95); box-shadow: 0 2px 9px rgba(28, 48, 79, .12); }
.about-map-label > span { color: #e34848; font-size: 14px; }
.about-map-label div { display: grid; gap: 2px; }
.about-map-label strong { font-size: 8px; }
.about-map-label small { color: var(--about-muted); font-size: 7px; }

@media (max-width: 760px) {
	.about-page { width: calc(100% - 32px); }
	.about-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; }
	.about-hero h1 { max-width: 570px; font-size: 30px; }
	.about-hero-visual img { aspect-ratio: 1.75 / 1; }
	.about-story { gap: 22px; padding-bottom: 34px; }
	.about-contact { grid-template-columns: 1fr 1fr; }
	.about-shell .main-nav a:nth-child(3), .about-shell .main-nav a:nth-child(4) { display: inline; }
}

@media (max-width: 520px) {
	.about-page { width: calc(100% - 28px); }
	.about-hero { padding-top: 23px; }
	.about-hero h1 { font-size: 27px; }
	.about-intro { font-size: 11px; }
	.about-stats { gap: 7px; padding-bottom: 25px; }
	.about-stats article { min-height: 76px; padding: 10px 8px; }
	.about-stats article > strong { font-size: 20px; }
	.about-stats p { font-size: 8px; }
	.about-stats small { font-size: 7px; line-height: 1.4; }
	.about-story { grid-template-columns: 1fr; gap: 17px; padding: 5px 0 30px; }
	.about-story h2 { font-size: 21px; }
	.about-principles { gap: 7px; }
	.about-principles > div { gap: 4px; }
	.about-principles b { font-size: 7px; }
	.about-principles small { font-size: 6px; }
	.about-section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
	.about-section-heading h2 { font-size: 18px; }
	.about-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
	.about-team-card > div { padding: 8px; }
	.about-team-card h3 { font-size: 10px; }
	.about-team-card p { font-size: 7px; }
	.about-team-card small { font-size: 6px; }
	.about-contact { grid-template-columns: 1fr; gap: 13px; margin-bottom: 24px; padding: 12px; }
	.about-contact-copy { padding: 4px; }
	.about-map { min-height: 190px; }
	.about-map-canvas { min-height: 190px; }
}

@media (max-width: 360px) {
	.about-stats { grid-template-columns: 1fr; }
	.about-stats article { min-height: 68px; }
	.about-stats article > strong { font-size: 22px; }
	.about-team-grid { grid-template-columns: 1fr; }
	.about-team-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
	.about-team-card img { height: 100%; min-height: 110px; aspect-ratio: auto; }
	.about-team-card > div { align-self: center; }
}