/* ==========================================================================
   Biography Studio — page-hiw.css
   How It Works — centre-line timeline, cards straddle at 75:25.
   Background sequence: cream → white → cream → white → cream
   ========================================================================== */


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


/* ==========================================================================
   1 · HERO
   ========================================================================== */
.bshi-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;
}
.bshi-hero__inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
}
.bshi-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;
}
.bshi-hero__heading {
	font-family:    var(--bs-heading-font);
	font-size:      clamp(2.5rem, 5vw, 5.5rem);
	font-weight:    400;
	font-style:     italic;
	line-height:    1.08;
	letter-spacing: -0.015em;
	color:          var(--bs-navy);
	margin-bottom:  28px;
}
.bshi-hero__intro {
	font-family: var(--bs-body-font);
	font-size:   1.125rem;
	line-height: 1.75;
	color:       var(--bs-text-muted);
	max-width:   44ch;
}


/* ==========================================================================
   2 · SIX STEPS
   Centre line at 50%. Each step is a 2-col grid (1fr 3fr or 3fr 1fr).
   The card takes the 3fr column (75%) and straddles the centre line.
   The dot sits on the centre line, pseudo-element on .bshi-step.
   The opposite column (1fr = 25%) holds the image or stays empty.
   No gap is injected between card and image within the same step.
   ========================================================================== */
.bshi-steps {
	background:  var(--bs-white);
	padding:     104px 0 80px;
	border-top:  1px solid var(--bs-border-light);
}

/* ── Timeline: vertical centre line ── */
.bshi-timeline {
	position: relative;
}
.bshi-timeline::before {
	content:    '';
	position:   absolute;
	left:       50%;
	top:        0;
	bottom:     0;
	width:      1px;
	background: var(--bs-border-light);
	transform:  translateX(-50%);
	z-index:    0;
}

/* ── Each step ── */
.bshi-step {
	display:        grid;
	align-items:    center;
	margin-bottom:  40px;
	position:       relative;
}
/* Right step: opposite (25%) left, card (75%) right */
.bshi-step--right {
	grid-template-columns: 1fr 3fr;
}
/* Left step: card (75%) left, opposite (25%) right */
.bshi-step--left {
	grid-template-columns: 3fr 1fr;
}
.bshi-step:last-child { margin-bottom: 0; }

/* ── Content card ── */
.bshi-step__card {
	background:    rgba(9, 58, 102, 0.04);
	border:        1px solid rgba(9, 58, 102, 0.09);
	border-radius: 4px;
	padding:       32px 40px 36px;
	position:      relative;
	z-index:       2;
}

/* ── Step number — decorative large italic ── */
.bshi-step__num {
	font-family:    var(--bs-heading-font);
	font-style:     italic;
	font-weight:    700;
	font-size:      clamp(2.5rem, 4vw, 3.75rem);
	line-height:    1;
	letter-spacing: -0.02em;
	color:          rgba(9, 58, 102, 0.28);
	margin-bottom:  10px;
}

/* ── Step heading ── */
.bshi-step__heading {
	font-family:    var(--bs-ui-font);
	font-size:      0.8125rem;
	font-weight:    600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--bs-navy);
	margin-bottom:  14px;
}

/* ── Step copy ── */
.bshi-step__copy {
	font-family: var(--bs-body-font);
	font-size:   1rem;
	line-height: 1.8;
	color:       var(--bs-text);
	max-width:   54ch;
}
.bshi-step__copy p            { margin-bottom: 1.25em; }
.bshi-step__copy p:last-child { margin-bottom: 0; }

/* ── Opposite column (image or empty) ──
   Images stay close to the centre line — pushed inward in each case.  */
.bshi-step__opposite {
	display:         flex;
	align-items:     center;
	justify-content: center;
}
/* Right step: opposite is on the LEFT — nudge image toward centre line */
.bshi-step--right .bshi-step__opposite {
	padding-right: 16px;
}
/* Left step: opposite is on the RIGHT — nudge image toward centre line */
.bshi-step--left .bshi-step__opposite {
	padding-left: 16px;
}

.bshi-step__image {
	display:       block;
	width:         100%;
	height:        auto;
	border-radius: 2px;
}


/* ==========================================================================
   3 · SAMPLE PAGES STRIP
   ========================================================================== */
.bshi-sample {
	background:  var(--bs-cream);
	padding:     48px 0;
	border-top:  1px solid var(--bs-border-light);
}
.bshi-sample__text {
	font-family: var(--bs-body-font);
	font-size:   1.0625rem;
	line-height: 1.7;
	color:       var(--bs-text-muted);
	text-align:  center;
}
.bshi-sample__link {
	color:                 var(--bs-navy);
	text-decoration:       underline;
	text-underline-offset: 3px;
}
.bshi-sample__link:hover { color: var(--bs-pink-dark); }


/* ==========================================================================
   4 · WHAT'S IN THE BOX
   ========================================================================== */
.bshi-box {
	background:  var(--bs-white);
	padding:     104px 0;
	border-top:  1px solid var(--bs-border-light);
}
.bshi-box__inner {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   80px;
	align-items:           center;
}
.bshi-box__art {
	overflow: hidden;
}
.bshi-box__image {
	display:         block;
	width:           100%;
	height:          clamp(320px, 38vw, 520px);
	object-fit:      cover;
	object-position: center;
	border-radius:   2px;
}
.bshi-box__heading {
	font-family:   var(--bs-heading-font);
	font-size:     clamp(1.875rem, 3vw, 2.75rem);
	font-weight:   400;
	line-height:   1.2;
	color:         var(--bs-navy);
	margin-bottom: 8px;
}
.bshi-box__sub {
	font-family:   var(--bs-body-font);
	font-size:     1rem;
	font-style:    italic;
	color:         var(--bs-text-muted);
	margin-bottom: 28px;
}
.bshi-box__list {
	list-style: none;
	padding:    0;
	margin:     0;
}
.bshi-box__list li {
	font-family:   var(--bs-body-font);
	font-size:     0.9375rem;
	line-height:   1.5;
	color:         var(--bs-text);
	padding:       11px 0 11px 24px;
	border-bottom: 1px solid var(--bs-border-light);
	position:      relative;
}
.bshi-box__list li:first-child { border-top: 1px solid var(--bs-border-light); }
.bshi-box__list li::before {
	content:    '';
	position:   absolute;
	left:       0;
	top:        50%;
	transform:  translateY(-50%);
	width:      8px;
	height:     1px;
	background: var(--bs-pink);
}


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


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

	.bshi-box__inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.bshi-box__image {
		height: clamp(260px, 55vw, 420px);
	}

}


/* ==========================================================================
   RESPONSIVE — below 768px
   Timeline collapses to a left-edge vertical bar. Cards go full width.
   ========================================================================== */
@media ( max-width: 768px ) {

	.bshi-hero { padding: 64px 0 72px; }

	.bshi-timeline::before { display: none; }

	.bshi-step {
		display:       block;
		margin-bottom: 40px;
		padding-left:  24px;
		border-left:   2px solid var(--bs-border-light);
		position:      relative;
	}
	/* Dot on left edge */
	.bshi-step::before {
		left:      -5px;
		top:       20px;
		transform: none;
	}

	/* Card full width */
	.bshi-step__card {
		padding: 24px 20px 28px;
	}

	/* Opposite column: image below card */
	.bshi-step__opposite {
		margin-top:      20px;
		justify-content: flex-start !important;
		padding:         0 !important;
	}
	/* Hide empty opposite columns on mobile */
	.bshi-step__opposite:empty { display: none; }

	.bshi-steps  { padding: 64px 0 48px; }
	.bshi-sample { padding: 36px 0; }
	.bshi-box    { padding: 64px 0 56px; }

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

}