/* Styles for the /about page only:

     AboutHero.astro  — Orisa's services-details opening: display title,
                        pill links, lead, then a drifting photo carousel.
     AboutStory.astro — Orisa's home-3 "Our Growth Process": a pinned
                        section, heading and thumbnails left, a stack of
                        cards right.

   Orisa's layout and measured sizes (services-details.html and index-3.html
   at 1440px), on this site's palette. The head is /services' own hero — the
   charcoal ground, its title and lead classes, its character reveal — and
   the story section the cream, charcoal and gold of the /services card deck:
   gold only as fill, line or glow, never as type on a light ground
   (base.css). Jost stands in
   for Orisa's DM Sans, as everywhere on the site. px, not rem, for the
   fluid-root reason in base.css. Effects: about-page.js. */

.as_story {
	--ab-ink: var(--vv-charcoal);
	--ab-muted: var(--vv-gray);
	--ab-card: var(--vv-cream-card);
	--ab-ground: var(--vv-cream);
	--ab-line: rgba(46, 54, 68, 0.1);
	color: var(--ab-ink);
}

/* ===== Head (Orisa services-details/sec-1) ================================
   .pt-150, then .row.g-4.align-items-end: title and pills left, lead right. */
.ab_hero {
	background-color: var(--vv-charcoal);
	color: var(--vv-off-white);
	padding-top: 160px;
	overflow: hidden;
}
.ab_hero_row {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 1.5rem 3rem;
	align-items: end;
}
/* Type, size and case come from /services' .sv_hero_title (type.css). */
.ab_hero .ab_hero_title {
	margin: 0 0 40px;
	color: var(--vv-off-white);
}
.ab_hero_brand {
	display: inline-block;
	white-space: nowrap;
}
/* Orisa's .at-hero-social.style-2: outlined pills, filled on hover. */
.ab_hero_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ab_hero_tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 20px;
	border: 1px solid rgba(245, 242, 237, 0.55);
	border-radius: 20px;
	background-color: transparent;
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}
.ab_hero_tag:hover,
.ab_hero_tag:focus-visible {
	border-color: var(--vv-off-white);
	background-color: var(--vv-cream);
	color: var(--vv-charcoal);
}
.ab_hero_tag svg {
	flex-shrink: 0;
}
/* Type and colour from /services' .sv_hero_lead. */
.ab_hero .ab_hero_lead {
	margin: 0;
}

/* ===== Carousel (Orisa services-details/sec-2) ============================
   .pt-100.pb-120 around .about-me-slider-active: two photos to a view, 30px
   apart, rounded 16px, at Orisa's own 698×507 frame. */
.ab_carousel {
	padding: 100px 0 120px;
}
.ab_carousel_thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 698 / 507;
	object-fit: cover;
	border-radius: 16px;
}
.ab_carousel_thumb {
	will-change: transform;
}

/* ===== Story (Orisa home-3/sec-10) ========================================
   .container.section-fix.pt-100.pb-100 is what pins; inside it col-lg-5
   (eyebrow, heading, thumbnails) and col-xxl-6 col-lg-7 ms-auto (label and
   the card stack). */
.as_story {
	background-color: var(--ab-ground);
	overflow: hidden;
}
.as_story_container {
	padding-top: 56px;
	padding-bottom: 44px;
}
.as_story_row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: calc(100% / 12);
	align-items: start;
}
@media screen and (min-width: 1400px) {
	.as_story_row {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}
.as_story_eyebrow {
	margin-bottom: 10px;
	color: var(--ab-ink);
}
.as_story_eyebrow .sv_eyebrow_icon {
	color: var(--vv-gold);
}
.as_story_heading {
	margin: 0;
	color: var(--ab-ink);
	font-family: Jost, Arial, sans-serif;
	font-size: clamp(32px, 3.2vw, 48px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.05em;
}
.as_story_label {
	padding-bottom: 30px;
	color: var(--ab-ink);
	font-family: Jost, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

/* The stack — Orisa's .scroll-section .wrapper/.item: the first card in flow,
   every other one absolutely on top of it in a screen-tall transparent box,
   so the cards waiting their turn sit a whole screen down, out of sight. */
.as_story_deck {
	position: relative;
}
.as_card {
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
}
/* Orisa's .container.bg-neutral-0.rounded-4.border-100 + .p-md-5. */
.as_card_box {
	position: relative;
	padding: 40px;
	border: 1px solid var(--ab-line);
	border-radius: 16px;
	background-color: var(--ab-card);
}
/* Orisa's .block-number.icon-shape.size-50.rounded-3: gold on the card on
   top (Orisa's orange), with charcoal type on it. */
.as_card_num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: 16px;
	border-radius: 8px;
	background-color: #e2e7ec;
	color: var(--ab-ink);
	font-family: Jost, Arial, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.3s ease;
}
.as_card.is-active .as_card_num {
	background-color: var(--vv-gold);
}
.as_card_title {
	margin: 0 0 18px;
	color: var(--ab-ink);
	font-family: Jost, Arial, sans-serif;
	font-size: 34px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.05em;
}
/* The card's text, in full. */
.as_card_desc {
	margin: 0 0 12px;
	color: var(--ab-muted);
	font-family: Jost, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.01em;
}
.as_card_desc:last-of-type {
	margin-bottom: 0;
}
/* Orisa's .rectangular: a second card peeking out 12px under this one, with
   a glow behind it on the card on top. A soft radial gradient rather than
   Orisa's 125px blur filter — the cards scale every frame of the pin, and a
   blur that size had to be redrawn with them. */
.as_card_plate {
	position: absolute;
	bottom: -12px;
	left: 50%;
	z-index: -1;
	width: 90%;
	height: 50px;
	transform: translateX(-50%);
	border: 1px solid var(--ab-line);
	border-radius: 16px;
	background-color: var(--ab-card);
}
.as_card_plate::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -40px;
	width: 320px;
	height: 120px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(184, 154, 107, 0.55), rgba(184, 154, 107, 0));
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.as_card.is-active .as_card_plate::after {
	opacity: 1;
}

/* Pinned — the queries about-page.js uses: wide enough for the two columns
   and tall enough for the tallest card whole. */
@media screen and (min-width: 1200px) and (min-height: 640px), screen and (min-width: 992px) and (min-height: 760px) {
	.as_card:not(:first-child) {
		position: absolute;
		min-height: 100vh;
	}
	.as_card {
		will-change: transform, opacity;
	}
}
/* In normal flow everywhere else: cards one under another, each washing in
   as it arrives. The thumbnails only mark the pinned card on top, so they
   go with the pin. */
@media screen and (max-width: 1199px) and (max-height: 759px), screen and (max-width: 991px), screen and (max-height: 639px) {
	/* As on /services: the cards overlap so the deck's stacking still reads
	   where it can't be pinned (about-page.js, reveal.js's addFlowStack). */
	.as_card + .as_card {
		margin-top: -28px;
	}
	.as_card {
		position: relative;
		will-change: transform, opacity;
	}
}
/* Short screens (a laptop at 125% display scaling is ~1536×700): tighter
   spacing so the pinned section still fits whole. */
@media screen and (max-height: 820px) {
	.as_story_container {
		padding-top: 40px;
		padding-bottom: 32px;
	}
	.as_story_label {
		padding-bottom: 20px;
	}
	.as_card_box {
		padding: 32px 36px;
	}
}
@media screen and (max-width: 991px) {
	.ab_hero {
		padding-top: 130px;
	}
	.ab_hero_row {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	.ab_hero .ab_hero_title {
		margin-bottom: 28px;
	}
	.ab_carousel {
		padding: 60px 0 80px;
	}
	.as_story_row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}
	.as_story_container {
		padding-top: 70px;
		padding-bottom: 60px;
	}
}
@media screen and (max-width: 767px) {
	.ab_hero {
		padding-top: 110px;
	}

	.as_card_box {
		padding: 28px 22px;
	}
	.as_card_title {
		font-size: 26px;
		margin-bottom: 16px;
	}
	.as_card_desc {
		font-size: 17px;
	}
}

/* A CSS shadow along the top of this section — the charcoal head above
   casting it onto the light ground. Even across the full width (on
   request): a firm band at the join easing out into a long, soft falloff,
   in a deep charcoal rather than pure black. */
.as_story {
	position: relative;
}
.as_story_shadow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 120px;
	background: linear-gradient(
		to bottom,
		rgba(22, 27, 36, 0.42) 0,
		rgba(22, 27, 36, 0.26) 14%,
		rgba(22, 27, 36, 0.12) 42%,
		rgba(22, 27, 36, 0.04) 72%,
		rgba(22, 27, 36, 0) 100%
	);
	pointer-events: none;
}
@media screen and (max-width: 767px) {
	.as_story_shadow {
		height: 72px;
	}
}
/* The gold glow under the card on top, removed on request. */
.as_card_plate::after {
	display: none;
}

/* The large photo beside the deck (in place of the thumbnail row): the
   photos stacked in one rounded frame, each sliding up into it with its
   card (about-page.js). Sized to what's left of the pinned screen under the
   heading. In normal flow (no pin) it's hidden, like the thumbnails were. */
.as_story_media {
	position: relative;
	margin-top: 40px;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 16 / 11;
	max-height: 40vh;
	overflow: hidden;
	border-radius: 16px;
	background-color: var(--vv-charcoal);
}
.as_story_slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	will-change: transform;
}
.as_story_slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}
@media screen and (max-width: 1199px) and (max-height: 759px), screen and (max-width: 991px), screen and (max-height: 639px) {
	.as_story_media {
		display: none;
	}
}