/* Styles for the /pricing page only: the head and gallery (PricingHero —
   Orisa's portfolio-5 opening and about-3 gallery, on /services' hero type),
   the tier cards (PricingTable — Orisa's home-2/sec-12 pricing table), the
   add-ons (PricingAddons — Orisa's home-2 "Awards" list) and the pricing
   approach (PricingDetails — Orisa's services-details "What we do").

   Class prefix is pr_ (Pricing). Numbers that carry real meaning — the card
   padding/radius — are Orisa's own (compiled main.css:8290-8480). Palette and
   px-not-rem: same reasoning as every other page-specific stylesheet here.

   No .pr_toggle* rules here anymore — the Personal/Business price toggle
   they styled was placeholder scaffolding for numbers that didn't exist yet.
   Real pricing turned out to be a flat per-tier commission with nothing to
   toggle between; removed along with the markup and JS rather than left
   unused. Still in git history if a future toggle-able variant needs it. */

/* ===== Outer panel =========================================================
   Orisa's own wrapper here is plain Bootstrap utility classes (rounded-5
   overflow-hidden mx-lg-3 mx-2 mt-50 p-relative pt-100 pb-100) — no dedicated
   CSS of its own. Same floating-panel-on-charcoal treatment already used for
   .testimonials_panel and .sv_offer_inner, for consistency with those. */
.pr_table {
	background-color: var(--vv-charcoal);
	padding: 60px 0 90px;
}
.pr_table_inner {
	background-color: #232a35;
	border-radius: 2rem;
	margin: 0 0.75rem;
	padding: 70px 0;
}

/* ===== Head row: eyebrow + heading ========================================= */
.pr_table_head {
	padding-bottom: 48px;
}
.pr_table_heading {
	margin: 12px 0 0;
	color: var(--vv-off-white);
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(22px, 2.3vw, 34px);
	font-weight: 400;
	line-height: 1.2;
	max-width: 32rem;
}

/* ===== Cards row ===========================================================
   Orisa: three col-lg-4 cards, a col-lg-5 callout, a col-xxl-2 contact
   column, all in one row. Grid, not flex — auto-flow keeps the callout and
   contact column wrapping onto their own row under the three cards at every
   width without a separate breakpoint rule for it. */
.pr_cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
.pr_card {
	position: relative;
	background-color: #232a35;
	border-radius: 16px;
	padding: 15px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* Inside .pr_card_body now (PricingTable.astro), directly above the title,
   on the SAME lighter panel background as the rest of the card's own
   content — not a sibling of that panel sitting in .pr_card's darker outer
   padding above it, which is where the previous version of this fix left
   it: technically inside the card's own boundary already, but visually a
   different, disconnected surface floating over a gap above the title
   rather than reading as part of the same card.
   inline-flex, not a block/position: absolute — a <span> already shrinks to
   its own content and sits on its own line before the h3 (a block element)
   with nothing more than the margin below needed for spacing; nothing here
   needs to be pulled out of normal flow at all.
   align-self: flex-start is now load-bearing, not decorative — since
   .pr_card_body became display: flex; flex-direction: column (above), its
   children stretch to the full column WIDTH by default (flex's own
   align-items: stretch, cross-axis on a column container), which is what
   was blowing this pill out to the card's full width instead of hugging
   "MOST COMPETITIVE RATE". inline-flex only ever controlled the badge's
   OWN internal layout, never the outer box the parent was stretching —
   same fix, same reason, as .pr_card_cta's own align-self just below. */
.pr_card_badge {
	display: inline-flex;
	align-self: flex-start;
	margin-bottom: 14px;
	white-space: nowrap;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--vv-charcoal);
	background-color: var(--vv-gold);
	padding: 8px 16px;
	border-radius: 9999px;
}
/* min-height, not the .pr_card_desc-only fix this replaces — that one sized
   the description alone to the longest of the three (Minos Digital's, 5
   lines), which was right as far as it went, but didn't account for
   Absolute's own badge sitting above ITS title (align-self: center now,
   PricingTable.astro/git history) — a badge only that ONE card carries, and
   real height none of the other two owe anything back for. Fixing only the
   description left three still-different totals: Digital's own natural
   height, Hybrid's padded up to Digital's floor, Absolute's padded floor
   PLUS its badge on top of that.
   flex column + .pr_card_cta's own margin-top: auto (below) is what actually
   locks the three together now: whatever a card's real content adds up to
   short of min-height, the CTA absorbs it by sitting flush at the bottom
   instead of wherever the text happens to end — so the three buttons line
   up in a row too, not just the boxes around them. 380px comfortably clears
   Digital's own worst case (title + price + 5-line desc + button + this
   padding) with a little to spare, so it's the number every card actually
   grows to meet. */
.pr_card_body {
	display: flex;
	flex-direction: column;
	min-height: 380px;
	flex: 0 0 auto;
	padding: 25px;
	background-color: #333c4b;
	border-radius: 14px;
}
/* Gold border only, not a tinted background — Orisa tints its popular card's
   body with its own accent colour at 10% opacity; a flat colour block
   wouldn't read as a tint against this page's dark base the way it does
   against Orisa's light one, so the border carries the distinction instead. */
.pr_card--popular .pr_card_body {
	border: 1px solid rgba(184, 154, 107, 0.4);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.pr_card_title {
	font-size: 18px;
	font-weight: 600;
	color: var(--vv-off-white);
	margin: 0 0 16px;
}
.pr_card_price {
	margin-bottom: 16px;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px;
}
.pr_card_price_value {
	font-size: 44px;
	font-weight: 600;
	line-height: 1;
	color: var(--vv-off-white);
	letter-spacing: -0.03em;
}
.pr_card_price_period {
	font-size: 16px;
	font-weight: 500;
	color: var(--vv-off-white);
	opacity: 0.55;
}
.pr_card_desc {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--vv-off-white);
	opacity: 0.75;
	margin: 0 0 24px;
}

/* The CTA is the site-wide Button (.u-btn, base.css). Two things only this
   slot needs on top of it: align-self: flex-start, or .pr_card_body's flex
   column would stretch the pill to the card's full width; and margin-top:
   auto, which eats whatever space is left below the description and pins
   the pill to the body's own bottom edge (a shared min-height across all
   three cards, see .pr_card_body) — so the three CTAs line up in a row, not
   just the boxes around them. */
.pr_card_cta {
	align-self: flex-start;
	margin-top: auto;
}

.pr_card_features {
	list-style: none;
	margin: 32px 25px 25px;
	padding: 0;
	flex: 1 1 auto;
}
.pr_card_features li {
	display: flex;
	align-items: center;
	font-size: 15px;
	font-weight: 500;
	color: var(--vv-off-white);
	opacity: 0.8;
	margin-bottom: 14px;
}
.pr_card_features li:last-child {
	margin-bottom: 0;
}
.pr_card_feature_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 50%;
	margin-right: 12px;
	color: var(--vv-gold);
}

/* ===== Callout + contact column ============================================ */
.pr_note {
	grid-column: span 2;
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding-top: 20px;
}
.pr_note_icon {
	flex-shrink: 0;
	color: var(--vv-gold);
}
.pr_note_title {
	margin: 0 0 0.5rem;
	color: var(--vv-off-white);
	font-size: 1rem;
	font-weight: 600;
}
.pr_note_desc {
	margin: 0;
	color: var(--vv-off-white);
	opacity: 0.65;
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 34rem;
}
.pr_contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0.375rem;
	text-align: right;
}
.pr_contact_link {
	color: var(--vv-off-white);
	opacity: 0.7;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 0.9375rem;
}
.pr_contact_line {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}
.pr_contact_line a {
	color: var(--vv-off-white);
	text-decoration: none;
}
.pr_contact_line a:hover {
	color: var(--vv-gold);
}

@media screen and (max-width: 1199px) {
	.pr_cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pr_note {
		grid-column: span 2;
	}
	.pr_contact {
		grid-column: span 2;
		align-items: flex-start;
		text-align: left;
	}
}
@media screen and (max-width: 767px) {
	.pr_table_inner {
		border-radius: 1.5rem;
		padding: 48px 0;
	}
	.pr_table_head {
		padding-bottom: 32px;
	}
	.pr_cards {
		grid-template-columns: minmax(0, 1fr);
	}
	.pr_note,
	.pr_contact {
		grid-column: span 1;
	}
	.pr_card_price_value {
		font-size: 38px;
	}
}

/* The gallery in place of the banner — Orisa's about-3 .at-gallery-wrapper:
   a dark frame with rounded corners, three columns of rounded photos 30px
   apart, the frame cropping whatever the drifting columns carry past it.
   Heights are Orisa's (1110 / 630 / 430px), and its hover zoom is kept. */
.pr_gallery {
	padding-bottom: 20px;
}
.pr_gallery_frame {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	height: 1110px;
	overflow: hidden;
	border-radius: 30px;
	background-color: #1f252f;
	padding: 0 30px;
}
.pr_gallery_col {
	display: flex;
	flex-direction: column;
	gap: 30px;
	will-change: transform;
}
.pr_gallery_item {
	overflow: hidden;
	border-radius: 20px;
}
.pr_gallery_item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
	transition: transform 0.6s ease;
}
.pr_gallery_item:nth-child(3n + 2) img {
	aspect-ratio: 3 / 4;
}
.pr_gallery_item:hover img {
	transform: scale(1.1);
}
@media screen and (max-width: 1199px) {
	.pr_gallery_frame {
		height: 630px;
		gap: 16px;
		padding: 0 16px;
	}
	.pr_gallery_col {
		gap: 16px;
	}
}
@media screen and (max-width: 767px) {
	.pr_gallery_frame {
		height: 430px;
		gap: 10px;
		padding: 0 10px;
		border-radius: 20px;
	}
	.pr_gallery_col {
		gap: 10px;
	}
	.pr_gallery_item,
	.pr_gallery_item img {
		border-radius: 12px;
	}
}

/* ===== Tier cards: one shared set of rows, stepped ==========================
   Every card spans the same two grid rows (the text panel, then the feature
   list) through subgrid, so the three panels are one height and the three
   lists start on one line; inside each panel the badge row is held even
   where there's no badge, so titles and prices sit level too. On desktop
   the cards step up left to right — 11% lowest, 19% highest — the tiers
   climbing like a staircase. The step is the end point of the cards' wave
   in (pricing-page.js), not CSS: GSAP owns their transform, and it clears a
   CSS `translate` the moment it takes over. */
.pr_cards .pr_card {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0;
	height: auto;
}
.pr_cards .pr_card_body {
	min-height: 0;
}
.pr_card_badge--empty {
	visibility: hidden;
}
@media screen and (min-width: 1200px) {
	.pr_cards {
		padding-bottom: 20px;
	}
	.pr_note,
	.pr_contact {
		margin-top: 80px;
	}
}

/* ===== Add-ons (PricingAddons.astro) — Orisa's home-2 "Awards" list ========
   On the cream of the /services deck, so it breaks the run of charcoal
   sections: charcoal type, white rows, gold only as line and icon. Each row
   turns charcoal on hover (Orisa's .card-award:hover). Its transition is on
   colours only — GSAP moves the rows (their rise, pricing-page.js), and a
   CSS transition on transform would fight it. */
.pr_addons {
	--pa-ink: var(--vv-charcoal);
	--pa-muted: var(--vv-gray);
	background-color: var(--vv-cream);
	color: var(--pa-ink);
	padding: 120px 0 120px;
}
.pr_addons_head {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 4rem;
	padding-bottom: 80px;
}
.pr_addons_heading {
	margin: 0 0 14px;
	color: var(--pa-ink);
	font-family: Jost, Arial, sans-serif;
	font-size: clamp(30px, 3.4vw, 56px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.04em;
}
.pr_addons_sub {
	margin: 0;
	max-width: 30rem;
	color: var(--pa-muted);
	font-size: 17px;
	line-height: 1.55;
}
.pr_award {
	margin-bottom: 24px;
	padding: 20px 42px;
	border: 1px solid rgba(46, 54, 68, 0.1);
	border-radius: 16px;
	background-color: var(--vv-cream-card);
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}
.pr_award:hover {
	border-color: var(--pa-ink);
	background-color: var(--pa-ink);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pr_award_link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	color: inherit;
	text-decoration: none;
}
.pr_award_num {
	flex: 0 0 110px;
	color: var(--pa-muted);
	font-size: 14px;
	white-space: nowrap;
	transition: color 0.3s ease;
}
.pr_award_content {
	display: flex;
	flex: 0 0 420px;
	align-items: center;
	gap: 16px;
	min-width: 0;
}
.pr_award_image {
	flex-shrink: 0;
	width: 90px;
	height: 62px;
	overflow: hidden;
	border-radius: 8px;
}
.pr_award_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.pr_award_title {
	color: var(--pa-ink);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	transition: color 0.3s ease;
}
.pr_award_detail {
	flex: 1 1 200px;
	color: var(--pa-muted);
	font-size: 16px;
	transition: color 0.3s ease;
}
.pr_award_group {
	flex: 0 0 auto;
	color: var(--pa-ink);
	font-size: 14px;
	font-weight: 500;
	transition: color 0.3s ease;
}
.pr_award_icon {
	display: flex;
	flex-shrink: 0;
	margin-left: auto;
	color: var(--vv-gold);
	transition: transform 0.3s ease;
}
.pr_award:hover .pr_award_num,
.pr_award:hover .pr_award_detail,
.pr_award:hover .pr_award_group {
	color: rgba(245, 242, 237, 0.7);
}
.pr_award:hover .pr_award_title {
	color: var(--vv-off-white);
}
.pr_award:hover .pr_award_image img {
	transform: scale(1.2);
}
.pr_award:hover .pr_award_icon {
	transform: rotate(45deg);
}
/* Orisa's .card-award-preview: the larger photo that follows the cursor. */
.pr_award_preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 280px;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform-origin: left bottom;
	will-change: transform;
}
.pr_award_preview img {
	display: block;
	width: 100%;
	height: auto;
}
.pr_addons_cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid rgba(184, 154, 107, 0.45);
}
.pr_addons_cta_text {
	margin: 0;
	color: var(--pa-ink);
	font-family: Jost, Arial, sans-serif;
	font-size: clamp(20px, 1.8vw, 28px);
	font-weight: 500;
	letter-spacing: -0.02em;
}
@media screen and (max-width: 1199px) {
	.pr_award_content {
		flex: 1 1 320px;
	}
}
@media screen and (max-width: 991px) {
	.pr_addons {
		padding: 80px 0;
	}
	.pr_addons_head {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 48px;
	}
	.pr_award {
		padding: 18px 22px;
	}
	.pr_award_num {
		flex-basis: auto;
	}
	.pr_award_group {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.pr_award_preview {
		display: none;
	}
	.pr_award_content {
		flex: 1 1 100%;
	}
	.pr_award_image {
		width: 60px;
		height: 42px;
	}
	.pr_award_title {
		font-size: 17px;
	}
	.pr_award_detail {
		font-size: 14px;
	}
	.pr_award_icon {
		display: none;
	}
}

/* ===== Pricing approach (PricingDetails.astro) — Orisa's services-details
   "What we do": the heading side held still while the blocks pass as cards
   beside it (pricing-page.js pins .pr_details_pin). Charcoal ground; the
   cards one step lifted, gold number boxes and a plate peeking out under
   each. Type from type.css. */
.pr_details {
	background-color: var(--vv-charcoal);
	padding: 120px 0 120px;
}
.pr_details_row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: calc(100% / 12);
	align-items: start;
}
.pr_details_heading {
	margin: 12px 0 24px;
	color: var(--vv-off-white);
}
.pr_details_closing_text {
	margin: 0 0 28px;
	max-width: 30rem;
	color: var(--vv-off-white);
	opacity: 0.8;
}
.pr_details_grid {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.pr_details_box {
	position: relative;
	padding: 44px 48px;
	border: 1px solid rgba(184, 154, 107, 0.22);
	border-radius: 16px;
	background-color: #333c4b;
}
.pr_details_box .pr_details_num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: 20px;
	border-radius: 8px;
	background-color: var(--vv-gold);
	color: var(--vv-charcoal);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0;
}
.pr_details_title {
	margin: 0 0 16px;
	color: var(--vv-off-white);
}
.pr_details_text {
	margin: 0 0 12px;
	color: var(--vv-off-white);
	opacity: 0.8;
}
.pr_details_list {
	margin: 4px 0 16px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.pr_details_list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--vv-off-white);
	opacity: 0.85;
}
.pr_details_list .pr_addon_icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--vv-gold);
}
/* Orisa's .rectangular under each card. */
.pr_details_plate {
	position: absolute;
	bottom: -12px;
	left: 50%;
	z-index: -1;
	width: 90%;
	height: 50px;
	transform: translateX(-50%);
	border: 1px solid rgba(184, 154, 107, 0.18);
	border-radius: 16px;
	background-color: #2a313d;
}
.pr_details_block {
	position: relative;
	z-index: 0;
}
@media screen and (max-width: 991px) {
	.pr_details {
		padding: 80px 0;
	}
	.pr_details_row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}
	.pr_details_box {
		padding: 28px 24px;
	}
}