/* ------------------------------------------------------------------
   About Page Styles (merged edition)
   Scoped additions for the merged About page.
   Uses existing skin.css typography, grid & colour classes.
   Only rules with no existing equivalent live here.
   ------------------------------------------------------------------ */


/* ------------------------------------------------------------------
   1. Hero Overrides
   ------------------------------------------------------------------ */

.about-hero {
	background-image: url('../images/slider/PH-About-fw.jpg');
	background-size: cover;
	background-position: center;
	position: relative;
}

.about-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000000;
	opacity: 0.6;
}

.about-hero-content {
	position: relative;
	z-index: 1;
}


/* ------------------------------------------------------------------
   2. Editorial Sections (intro, background, now, working together)
   ------------------------------------------------------------------ */

.about-lead-title {
	font-size: 2.2rem;
	line-height: 1.3;
}

.about-body-text {
	font-size: 1.5rem;
	color: #666;
	line-height: 1.7;
}

.about-section-header {
	font-size: 1.8rem;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
}

.about-section-label {
	font-size: 1.1rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #232323;
}


/* ------------------------------------------------------------------
   3. Capability Grid (2x2 bordered boxes)
   ------------------------------------------------------------------ */

.capability-box {
	border: 1px solid #b3b3b3;
	border-radius: 4px;
	padding: 2.5rem;
	height: 100%;
}

.capability-box .cap-number {
	font-family: 'Lato', 'Helvetica Neue', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: #999;
	letter-spacing: 0.1em;
	margin-bottom: 0.8rem;
}

.capability-box h4 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.8rem;
	text-transform: none;
	line-height: 1.3;
}

.capability-box p {
	font-size: 1.3rem;
	color: #666;
	line-height: 1.6;
	margin-bottom: 0;
}


/* ------------------------------------------------------------------
   4. Career Timeline
   ------------------------------------------------------------------ */

.career-chapter {
	margin-bottom: 1rem;
}

.career-chapter-label {
	font-family: 'Lato', 'Helvetica Neue', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #232323;
	margin-bottom: 0.2rem;
}

.career-chapter-sub {
	font-family: 'Lato', 'Helvetica Neue', sans-serif;
	font-size: 1.2rem;
	font-weight: 400;
	color: #999;
	font-style: italic;
}

.career-date {
	font-family: 'Lato', 'Helvetica Neue', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	color: #999;
	letter-spacing: 0.05em;
}

.career-entry {
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid #f0f0f0;
}

.career-entry:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.career-logos {
	display: flex;
	gap: 1.2rem;
	align-items: center;
	margin: 1rem 0 1.2rem;
	flex-wrap: wrap;
}

.career-logos img {
	height: 22px;
	width: auto;
	opacity: 0.5;
	border-radius: 0;
}

.career-entry p {
	font-size: 1.4rem;
	line-height: 1.7;
	color: #666;
	margin-bottom: 0.8rem;
}

.career-entry p:last-child {
	margin-bottom: 0;
}


/* ------------------------------------------------------------------
   5. Planned Break
   ------------------------------------------------------------------ */

.planned-break {
	padding: 2.5rem 0;
}

.planned-break-label {
	font-family: 'Lato', 'Helvetica Neue', sans-serif;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #232323;
	margin-bottom: 0.2rem;
}

.planned-break-sub {
	font-family: 'Lato', 'Helvetica Neue', sans-serif;
	font-size: 1.2rem;
	font-weight: 400;
	color: #999;
	font-style: italic;
}


/* ------------------------------------------------------------------
   6. Modal Status Icon — initial hidden state
   (replaces inline style="display:none" on #statusIcon)
   ------------------------------------------------------------------ */

#statusIcon.hidden {
	display: none;
}


/* ------------------------------------------------------------------
   7. Responsive
   ------------------------------------------------------------------ */

@media only screen and (max-width: 768px) {
	.about-lead-title {
		font-size: 1.8rem;
	}
	.about-section-header {
		font-size: 1.6rem;
	}
	.capability-box {
		margin-bottom: 1.5rem;
	}
	.career-entry {
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}
}