/* ==========================================================================
   Biography Studio — page-home.css
   The website exists to deliver the copy. Design gets out of the way.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.bsh-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.bsh-reveal--in {
	opacity: 1;
	transform: none;
}



/* ==========================================================================
   1 · HERO
   Pure typography — no image. Words do the work.
   ========================================================================== */
.bsh-hero {
	background-color: var(--bs-cream);
	background-image:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,254,250,0.8) 0%, transparent 60%),
		radial-gradient(ellipse 50% 40% at 5% 95%, rgba(237,229,217,0.35) 0%, transparent 50%);
	padding: 96px 0 104px;
}

.bsh-hero__inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
}

.bsh-hero__label {
	font-family:    var(--bs-ui-font);
	font-size:      0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--bs-pink-dark);
	margin-bottom:  20px;
}

.bsh-hero__heading {
	font-family:    var(--bs-heading-font);
	font-size:      clamp(2.75rem, 5.5vw, 6.5rem);
	font-weight:    400;
	font-style:     italic;
	line-height:    1.06;
	letter-spacing: -0.015em;
	color:          var(--bs-navy);
	margin-bottom:  32px;
}

.bsh-hero__sub {
	font-family:   var(--bs-body-font);
	font-size:     1.125rem;
	line-height:   1.72;
	color:         var(--bs-text-muted);
	max-width:     44ch;
	margin-bottom: 48px;
}

.bsh-hero__ctas {
	display:         flex;
	flex-wrap:       wrap;
	gap:             14px;
	align-items:     center;
	justify-content: center;
}


/* ==========================================================================
   2 · EXPERIENCE
   Image constrained to container, then centred heading, then editorial copy.
   ========================================================================== */
.bsh-exp {
	background:  var(--bs-white);
	padding:     80px 0 96px;
	border-top:  1px solid var(--bs-border-light);
}

/* Image inside the container — rounded corners, cinematic crop */
.bsh-exp__image-wrap {
	overflow:      hidden;
	margin-bottom: 64px;
	border-radius: 2px;
}
.bsh-exp__image {
	display:         block;
	width:           100%;
	height:          clamp(400px, 55vw, 720px);
	object-fit:      cover;
	object-position: center 20%;
}

/* Opener — large italic, centred, sets the reading register */
.bsh-exp__opener {
	font-family:   var(--bs-heading-font);
	font-size:     clamp(1.75rem, 3vw, 2.75rem);
	font-weight:   400;
	font-style:    italic;
	line-height:   1.28;
	color:         var(--bs-navy);
	max-width:     32ch;
	margin:        0 auto 56px;
	text-align:    center;
}

/* Body copy — constrained width, reads like an essay */
.bsh-exp__copy {
	font-family: var(--bs-body-font);
	font-size:   1.0625rem;
	line-height: 1.85;
	color:       var(--bs-text);
	max-width:   66ch;
}
.bsh-exp__copy p {
	margin-bottom: 1.5em;
}
.bsh-exp__copy p:last-child { margin-bottom: 0; }

/* Pull quote — breaks the essay flow, creates a moment */
.bsh-exp__quote {
	margin-top:    64px;
	padding:       40px 0 0;
	border-top:    1px solid var(--bs-border-light);
}
.bsh-exp__quote blockquote p {
	font-family:   var(--bs-heading-font);
	font-size:     clamp(1.5rem, 2.5vw, 2.25rem);
	font-style:    italic;
	font-weight:   400;
	line-height:   1.35;
	color:         var(--bs-navy);
	max-width:     26ch;
	margin:        0;
}


/* ==========================================================================
   3 · DIFFERENTIATORS
   35 / 65 column split. Icons centred vertically in their column.
   ========================================================================== */
.bsh-diff {
	background-color: var(--bs-cream);
	background-image:
		radial-gradient(ellipse 70% 50% at 90% 10%, rgba(255,253,248,0.6) 0%, transparent 50%);
	padding:    104px 0;
	border-top: 1px solid var(--bs-border-light);
}

.bsh-diff__header {
	margin-bottom: 64px;
}
.bsh-diff__heading {
	font-family: var(--bs-heading-font);
	font-size:   clamp(2.25rem, 4vw, 4rem);
	font-weight: 400;
	line-height: 1.1;
	color:       var(--bs-navy);
}

.bsh-diff__list {
	list-style: none;
	padding:    0;
	margin:     0;
}

.bsh-diff__item {
	display:     grid;
	/* 35% icon column, 65% content */
	grid-template-columns: 35% 1fr;
	gap:         0;
	padding:     56px 0;
	border-top:  1px solid var(--bs-border-light);
	align-items: center; /* icon centred vertically */
}
.bsh-diff__item:last-child {
	border-bottom: 1px solid var(--bs-border-light);
}

/* Icon centred in its column */
.bsh-diff__icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding-right:   48px;
}
.bsh-diff__icon img {
	width:      clamp(120px, 14vw, 168px);
	height:     clamp(120px, 14vw, 168px);
	object-fit: contain;
	display:    block;
}

.bsh-diff__title {
	font-family:   var(--bs-heading-font);
	font-size:     clamp(1.25rem, 1.8vw, 1.625rem);
	font-weight:   700;
	line-height:   1.25;
	color:         var(--bs-navy);
	margin-bottom: 16px;
}
.bsh-diff__content p {
	font-family: var(--bs-body-font);
	font-size:   1rem;
	line-height: 1.82;
	color:       var(--bs-text);
	max-width:   58ch;
}


/* ==========================================================================
   4 · PATHWAYS
   Solid blue-grey — sampled from linen_texture_lightblue, no pixellation.
   Icons larger and centred in each card.
   ========================================================================== */
.bsh-paths {
	background: #ccd8e2;
	padding:    104px 0;
}

.bsh-paths__header {
	margin-bottom: 56px;
}
.bsh-paths__heading {
	font-family:   var(--bs-heading-font);
	font-size:     clamp(2.25rem, 4vw, 4rem);
	font-weight:   400;
	color:         var(--bs-navy);
	line-height:   1.1;
	margin-bottom: 20px;
}
.bsh-paths__intro {
	font-family: var(--bs-body-font);
	font-size:   1rem;
	line-height: 1.75;
	color:       #3a5060;
	max-width:   56ch;
}

/* Three-column grid */
.bsh-paths__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   2px;
	margin-bottom:         48px;
}

.bsh-path {
	background: rgba(255,255,255,0.82);
	padding:    44px 36px 48px;
	border-top: 3px solid var(--bs-navy);
}

/* Icon: larger, centred horizontally */
.bsh-path__icon {
	display:         flex;
	justify-content: center;
	margin-bottom:   28px;
}
.bsh-path__icon img {
	width:      clamp(96px, 10vw, 128px);
	height:     clamp(96px, 10vw, 128px);
	object-fit: contain;
	display:    block;
}

.bsh-path__head {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	margin-bottom:   14px;
}
.bsh-path__name {
	font-family:    var(--bs-ui-font);
	font-size:      0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight:    600;
	color:          var(--bs-navy);
}
.bsh-path__ch {
	font-family:    var(--bs-ui-font);
	font-size:      0.6875rem;
	letter-spacing: 0.06em;
	color:          #3a5060;
}
.bsh-path__title {
	font-family:   var(--bs-heading-font);
	font-size:     1.125rem;
	font-weight:   700;
	color:         var(--bs-navy);
	line-height:   1.3;
	margin-bottom: 10px;
}
.bsh-path__tag {
	font-family:   var(--bs-body-font);
	font-size:     0.9375rem;
	font-style:    italic;
	line-height:   1.62;
	color:         #3a5060;
	margin-bottom: 14px;
}
.bsh-path__copy {
	font-family: var(--bs-body-font);
	font-size:   0.9375rem;
	line-height: 1.75;
	color:       var(--bs-text);
}

.bsh-paths__foot { text-align: center; }


/* ==========================================================================
   5 · GIFT
   ========================================================================== */
.bsh-gift {
	background:  var(--bs-cream);
	padding:     96px 0;
	border-top:  1px solid var(--bs-border-light);
}
.bsh-gift__inner {
	display:     grid;
	grid-template-columns: 280px 1fr;
	gap:         64px;
	align-items: center;
	max-width:   960px;
}
.bsh-gift__art-img {
	width:   260px;
	height:  auto;
	display: block;
}
.bsh-gift__heading {
	font-family:   var(--bs-heading-font);
	font-size:     clamp(1.75rem, 2.8vw, 2.5rem);
	font-weight:   400;
	font-style:    italic;
	line-height:   1.2;
	color:         var(--bs-navy);
	margin-bottom: 18px;
}
.bsh-gift__text p {
	font-family:   var(--bs-body-font);
	font-size:     1.0625rem;
	line-height:   1.75;
	color:         var(--bs-text);
	max-width:     46ch;
	margin-bottom: 28px;
}


/* ==========================================================================
   6 · TRUST
   ========================================================================== */
.bsh-trust {
	background:  var(--bs-white);
	padding:     96px 0;
	border-top:  1px solid var(--bs-border-light);
}
.bsh-trust__heading {
	font-family:   var(--bs-heading-font);
	font-size:     clamp(2rem, 3.5vw, 3.25rem);
	font-weight:   400;
	color:         var(--bs-navy);
	line-height:   1.15;
	margin-bottom: 56px;
}
.bsh-trust__grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap:            72px;
}
.bsh-trust__item {
	padding:    36px 0;
	border-top: 1px solid var(--bs-border-light);
}
.bsh-trust__item::before {
	content:      '';
	display:      block;
	width:        28px;
	height:       2px;
	background:   var(--bs-pink);
	margin-bottom: 18px;
}
.bsh-trust__item dt {
	font-family:   var(--bs-heading-font);
	font-size:     1.1875rem;
	font-weight:   700;
	color:         var(--bs-navy);
	line-height:   1.3;
	margin-bottom: 10px;
}
.bsh-trust__item dd {
	font-family: var(--bs-body-font);
	font-size:   0.9375rem;
	line-height: 1.78;
	color:       var(--bs-text);
	max-width:   38ch;
	margin-left: 0;
}


/* ==========================================================================
   7 · STORIES MAKE FAMILIES
   Float layout: tree right, heading wraps left, ground line ≈ end of "families."
   ========================================================================== */
.bsh-stories {
	background:  var(--bs-cream);
	padding:     96px 0;
	border-top:  1px solid var(--bs-border-light);
}
/* overflow:hidden contains the float */
.bsh-stories__inner {
	overflow: hidden;
}
/* Art first in DOM — floats right, offset down ~1/3 so ground line sits mid-section */
.bsh-stories__art {
	float:       right;
	width:       clamp(300px, 30vw, 420px);
	margin-left: 52px;
	margin-top:  clamp(80px, 10vw, 140px);
}
.bsh-stories__art-img {
	display: block;
	width:   100%;
	height:  auto;
}
.bsh-stories__heading {
	font-family:    var(--bs-heading-font);
	font-size:      clamp(2.75rem, 6vw, 6rem);
	font-weight:    400;
	font-style:     italic;
	line-height:    1.05;
	letter-spacing: -0.01em;
	color:          var(--bs-navy);
	margin-bottom:  40px;
}
.bsh-stories__inner > p {
	font-family:   var(--bs-body-font);
	font-size:     1.0625rem;
	line-height:   1.82;
	color:         var(--bs-text);
	max-width:     56ch;
	margin-bottom: 1.4em;
}
.bsh-stories__inner > p:last-child { margin-bottom: 0; }


/* ==========================================================================
   8 · CLOSING CTA
   Cream — prevents merging with the navy footer immediately below.
   ========================================================================== */
.bsh-close {
	background:  var(--bs-white);
	padding:     112px 0;
	border-top:  1px solid var(--bs-border-light);
	text-align:  center;
}
.bsh-close__inner {
	max-width: 640px;
	margin:    0 auto;
}
.bsh-close__heading {
	font-family:    var(--bs-heading-font);
	font-size:      clamp(2.25rem, 5vw, 5rem);
	font-weight:    400;
	font-style:     italic;
	line-height:    1.1;
	letter-spacing: -0.01em;
	color:          var(--bs-navy);
	margin-bottom:  36px;
}
.bsh-close__rule {
	width:      40px;
	height:     2px;
	background: var(--bs-pink);
	margin:     0 auto 28px;
}
.bsh-close__sub {
	font-family:   var(--bs-body-font);
	font-size:     1.0625rem;
	line-height:   1.7;
	color:         var(--bs-text-muted);
	margin-bottom: 40px;
}
.bsh-close__ctas {
	display:         flex;
	flex-wrap:       wrap;
	gap:             14px;
	justify-content: center;
}


/* ==========================================================================
   RESPONSIVE — below 1024px
   ========================================================================== */
@media ( max-width: 1024px ) {

	/* Differentiators: narrower icon col on tablet */
	.bsh-diff__item {
		grid-template-columns: 28% 1fr;
	}
	.bsh-diff__icon { padding-right: 32px; }

	/* Pathways: single column */
	.bsh-paths__grid {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	/* Stories: collapse float, hide tree */
	.bsh-stories__art {
		float:   none;
		display: none;
	}

}


/* ==========================================================================
   RESPONSIVE — below 768px
   ========================================================================== */
@media ( max-width: 768px ) {

	.bsh-hero { padding: 64px 0 72px; }
	.bsh-hero__ctas {
		flex-direction: column;
		width:          100%;
	}
	.bsh-hero__ctas .bsh-btn { width: 100%; text-align: center; }

	/* Experience: shorter image on mobile */
	.bsh-exp__image {
		height: clamp(220px, 55vw, 360px);
	}
	.bsh-exp__image-wrap { margin-bottom: 48px; }

	.bsh-diff__item {
		grid-template-columns: 1fr;
		gap:                   24px;
	}
	.bsh-diff__icon {
		justify-content: flex-start;
		padding-right:   0;
	}

	.bsh-gift__inner {
		grid-template-columns: 1fr;
		gap:                   32px;
	}
	.bsh-gift__art { display: none; }

	.bsh-trust__grid { grid-template-columns: 1fr; }

	.bsh-close { padding: 80px 0; }
	.bsh-close__ctas { flex-direction: column; align-items: center; }
	.bsh-close__ctas .bsh-btn { width: 100%; max-width: 320px; text-align: center; }

	.bsh-diff,
	.bsh-paths,
	.bsh-gift,
	.bsh-trust,
	.bsh-stories {
		padding-top:    64px;
		padding-bottom: 56px;
	}

}


/* ==========================================================================
   9 · BANNER PHOTO — cream background, sits below closing CTA
   ========================================================================== */
.bsh-banner {
	padding:    80px 0;
	border-top: 1px solid var(--bs-border-light);
}

.bsh-banner__img {
	width:      100%;
	object-fit: cover;
	display:    block;
}

@media ( max-width: 768px ) {
	.bsh-banner { padding: 56px 0; }
}