/**
 * ============================================================
 * ABOUT PAGE — CSS
 * Interior Conception Theme
 * ============================================================
 *
 * Inherits all design tokens from style.css:
 *   --color-bg, --color-text, --color-border, --color-accent
 *   --font-serif (Cormorant Garamond), --font-sans (Hanken Grotesk)
 *   --container-pad, --transition-fade
 *
 * Hero classes (.project-hero, .project-hero__*) are inherited
 * from project.css which is also loaded on this page.
 * ============================================================ */


/* ============================================================
   ABOUT HERO — modifier only (base from project.css)
   ============================================================ */

/* Portrait images are object-position: top to keep face visible */
.about-hero__img {
	object-position: center top;
}


/* ============================================================
   ABOUT CONTENT WRAPPER
   ============================================================ */
.about-content {
	position: relative;
	z-index: 2;
	background: var(--color-bg);
	width: 100%;
	overflow: hidden;
}


/* ============================================================
   STATEMENT
   ============================================================ */
.about-statement {
	background: var(--color-bg);
	padding: 8rem 0;
}

.about-statement__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 3rem;
}

.about-statement__rule {
	display: block;
	width: 3rem;
	height: 1px;
	background: var(--color-border);
}

.about-statement__quote {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 300;
	font-style: normal;
	line-height: 1.55;
	letter-spacing: 0.02em;
	color: var(--color-text);
	max-width: 42ch;
	margin: 0;
}

.about-statement__quote em {
	font-style: italic;
	color: var(--color-text);
	opacity: 0.7;
}

@media (max-width: 768px) {
	.about-statement { padding: 5rem 0; }
	.about-statement__quote { font-size: 1.4rem; }
}


/* ============================================================
   BIOGRAPHY
   ============================================================ */
.about-bio {
	background: var(--color-bg);
	padding: 2rem 0 8rem;
}

.about-bio__grid {
	display: grid;
	grid-template-columns: 45fr 55fr;
	gap: clamp(3rem, 6vw, 7rem);
	align-items: start;
}

/* ── Portrait column ── */
.about-bio__image-col {
	position: sticky;
	top: 7rem; /* clears fixed header */
}

.about-bio__portrait-wrap {
	width: 100%;
	overflow: hidden;
}

.about-bio__portrait {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 3/4;
	object-fit: cover;
	object-position: center top;
}

/* Placeholder shown when no ACF image is set */
.about-bio__portrait-placeholder {
	width: 100%;
	aspect-ratio: 3/4;
	background: var(--color-border);
	position: relative;
}

.about-bio__portrait-placeholder::after {
	content: 'Add portrait via WordPress Admin → About → Portrait Image';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	padding: 2rem;
	line-height: 2;
}

.about-bio__caption {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text);
	opacity: 0.5;
	margin-top: 1rem;
}

/* ── Text column ── */
.about-bio__section-label {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-text);
	opacity: 0.55;
	margin-bottom: 2.5rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.about-bio__section-label::before {
	content: '';
	display: block;
	width: 2rem;
	height: 1px;
	background: var(--color-border);
	flex-shrink: 0;
}

.about-bio__heading {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 3.5vw, 3rem);
	font-weight: 300;
	letter-spacing: 0.05em;
	line-height: 1.2;
	color: var(--color-text);
	margin-bottom: 3rem;
}

.about-bio__body {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.about-bio__body p {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.45;
	color: var(--color-text);
	letter-spacing: 0.01em;
	max-width: 62ch;
	margin-bottom: 1.2em;
}

.about-bio__body p strong {
	font-weight: 500;
	color: var(--color-text);
}

/* WYSIWYG output spacing */
.about-bio__body p:last-child { margin-bottom: 0; }



/* ── Award block ── */
.about-award {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--color-border);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2rem;
	align-items: center;
}

.about-award__year {
	font-family: var(--font-serif);
	font-size: 3.5rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--color-text);
	line-height: 1;
	opacity: 0.4;
}

.about-award__label {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--color-text);
	opacity: 0.5;
	margin-bottom: 0.5rem;
}

.about-award__name {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text);
	line-height: 1.6;
	max-width: none;
}

@media (max-width: 1024px) {
	.about-bio__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.about-bio__image-col {
		position: static;
		max-width: 480px;
	}
}

@media (max-width: 768px) {
	.about-bio { padding-bottom: 5rem; }
}


/* ============================================================
   PHILOSOPHY (dark section)
   ============================================================ */
.about-philosophy {
	background: #1E1B18;
	padding: 9rem 0;
	color: #F7F5F2;
}

.about-philosophy__grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: clamp(3rem, 8vw, 8rem);
	align-items: start;
}

/* ── Left column ── */
.about-philosophy__label {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(247, 245, 242, 0.4);
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.about-philosophy__label::before {
	content: '';
	display: block;
	width: 2rem;
	height: 1px;
	background: rgba(247, 245, 242, 0.2);
	flex-shrink: 0;
}

.about-philosophy__heading {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 3.5vw, 3.25rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: #F7F5F2;
}

.about-philosophy__heading span {
	display: block;
	color: var(--color-accent);
}

/* ── Right column ── */
.about-philosophy__body {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.about-philosophy__body p {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.45;
	color: rgba(247, 245, 242, 0.65);
	letter-spacing: 0.01em;
	max-width: 62ch;
	margin-bottom: 1.2em;
}

.about-philosophy__body p strong {
	font-weight: 400;
	color: #F7F5F2;
}

.about-philosophy__rule {
	border: none;
	border-top: 1px solid rgba(247, 245, 242, 0.1);
	margin: 3rem 0;
}

.about-philosophy__locations {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(247, 245, 242, 0.3);
	line-height: 2.2;
	max-width: none;
}

@media (max-width: 1024px) {
	.about-philosophy__grid {
		grid-template-columns: 1fr;
		gap: 3.5rem;
	}
}

@media (max-width: 768px) {
	.about-philosophy { padding: 6rem 0; }
}


/* ============================================================
   SERVICES
   ============================================================ */
.about-services {
	background: var(--color-bg);
	padding: 8rem 0;
}

.about-services__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 3rem;
	margin-bottom: 0;
	border-bottom: 1px solid var(--color-border);
}

.about-services__heading {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 3.5vw, 3rem);
	font-weight: 300;
	letter-spacing: 0.05em;
	color: var(--color-text);
}

.about-services__sub {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	color: var(--color-text);
	opacity: 0.55;
	max-width: 28ch;
	text-align: right;
	line-height: 1.8;
}

.about-services__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.about-services__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--color-border);
	transition: padding-left 0.3s ease, opacity 0.2s ease;
	cursor: default;
}

/* Right column items get a left border */
.about-services__item:nth-child(even) {
	padding-left: 3rem;
	border-left: 1px solid var(--color-border);
}
.about-services__item:nth-child(odd) {
	padding-right: 3rem;
}

.about-services__item:hover {
	padding-left: 0.75rem;
	opacity: 0.7;
}
.about-services__item:nth-child(even):hover {
	padding-left: calc(3rem + 0.75rem);
}

.about-services__name {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text);
}

.about-services__num {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: var(--color-text);
	opacity: 0.35;
	flex-shrink: 0;
	margin-left: 1rem;
}

@media (max-width: 768px) {
	.about-services { padding: 5rem 0; }
	.about-services__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.about-services__sub { text-align: left; max-width: none; }
	.about-services__grid { grid-template-columns: 1fr; }
	.about-services__item:nth-child(even) {
		border-left: none;
		padding-left: 0;
	}
	.about-services__item:hover { padding-left: 0.75rem; }
	.about-services__item:nth-child(even):hover { padding-left: 0.75rem; }
	.about-services__item:nth-child(odd) { padding-right: 0; }
}


/* ============================================================
   CTA
   ============================================================ */
.about-cta {
	background: var(--color-bg);
	padding: 10rem 0;
	text-align: center;
	border-top: 1px solid var(--color-border);
}

.about-cta__inner {
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.about-cta__eyebrow {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--color-text);
	opacity: 0.5;
	margin-bottom: 2rem;
	max-width: none;
}

.about-cta__heading {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 1.35;
	color: var(--color-text);
	margin-bottom: 3rem;
}

.about-cta__rule {
	display: block;
	width: 3rem;
	height: 1px;
	background: var(--color-border);
	margin-bottom: 3rem;
}

.about-cta__contact {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: 3rem;
}

.about-cta__contact a {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 300;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-text);
	text-decoration: none;
	transition: var(--transition-fade);
}

.about-cta__contact a:hover { opacity: 0.5; }

.about-cta__btn {
	display: inline-block;
	padding: 1rem 2.75rem;
	border: 1px solid var(--color-text);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--color-text);
	text-decoration: none;
	transition: background 0.35s ease, color 0.35s ease;
}

.about-cta__btn:hover {
	background: var(--color-text);
	color: var(--color-bg);
}

@media (max-width: 768px) {
	.about-cta { padding: 6rem 0; }
}