.section_pillars {
	z-index: 4;
	flex-direction: column;
	/* Inert as far as vertical position goes: .pillars_container, the only
	   child, is height: 100% — it already fills this box regardless of what
	   justify-content says here. The centering that actually matters is
	   .pillars_container's own, below. */
	justify-content: center;
	width: 100vw;
	height: 100vh;
	display: flex;
	position: relative;
	/* Apertura didn't need this: its navbar was a ~2rem SVG wordmark, and this
	   section centers its content with no top clearance of its own. The current
	   navbar's logo runs up to 8rem plus a 1rem offset — tall enough that the
	   first pillar row rendered underneath it. 9rem clears that across the whole
	   desktop fluid-type range (checked from 992px up); the ≤991px rule below
	   already carries its own padding-top and overrides this. */
	/* 7rem, not the 9rem this was sized for the old centred 8rem logo: the
	   header is now Orisa's short bar (and by the time Pillars is on screen,
	   only the MENU pill, top 40px), and the 2rem freed here is what
	   .pillars_wrapper's extra bottom clearance (below) spends — this section
	   is exactly one viewport tall, so the two have to balance. */
	padding-top: 7rem;
	/* No background video. Apertura's own was an agency placeholder clip with
	   "APERTURE STUDIO — PLACEHOLDER" burned into the frame, in their red.
	   There's no Minos Host footage to put in its place, so this is flat
	   charcoal instead — the same treatment as Definitions and About. */
	background-color: var(--vv-charcoal);
}
/* Soft gold glow, drifting as you scroll — animated in about-stack.js. Pure
   decoration: sits behind .pillars_container, which needs the explicit
   z-index below to unambiguously paint above an absolutely positioned sibling
   sharing the same stacking context. */
.pillars_glow {
	z-index: 0;
	pointer-events: none;
	position: absolute;
	inset: 0;
	will-change: transform;
}
/* The actual gradient lives on a pseudo-element, not .pillars_glow itself, so
   it can carry its own perpetual CSS animation without fighting the parent's
   scroll-driven GSAP transform — both apply to different boxes, so they
   compose (drift-and-pulse on top of the scroll offset) instead of one
   overwriting the other's `transform`. Always playing, independent of scroll;
   the scroll tween in about-stack.js rides on top of it via the parent. */
.pillars_glow::before {
	content: "";
	position: absolute;
	inset: 0;
	/* 0.22 measured out at only 1.42:1 contrast against the charcoal even at the
	   gradient's own centre — invisible in practice. 0.55 is 2.41:1 at centre,
	   an actually-visible soft glow rather than a technically-present one.

	   Sized to fade out cleanly, not to be clipped: .section_pillars is
	   revealed through a hard clip-path polygon (about-stack.js's cross-fade
	   mask), which has no feathering at all, so any soft light that reaches
	   that edge gets sliced by a visible straight line instead of fading —
	   the "cut" this replaces. Giving .pillars_glow overflow room (inset:
	   -15%, the previous approach) does nothing against that: the mask clips
	   at the section's own bounds regardless of how far the glow's box
	   extends past them. The actual fix is to keep the light itself small
	   enough that it's already invisible well before it could ever reach the
	   mask's edge — 25vmin fading out by 60% is fully faded ~15vmin from
	   centre, comfortably inside a quarter-screen's clearance from every edge
	   on any realistic desktop window (checked 1920×1080 down to a
	   near-square 900×700). vmin, not vw: sizing off the SMALLER of width/
	   height is what keeps this safe on short/squarish windows too, not just
	   wide ones. */
	background: radial-gradient(25vmin 25vmin at 35% 40%, rgba(184, 154, 107, 0.55), transparent 60%);
	animation: pillars-glow-drift 16s ease-in-out infinite;
}
@keyframes pillars-glow-drift {
	0% {
		transform: translate(-2%, -2%) scale(1) rotate(0deg);
	}
	50% {
		transform: translate(3%, 4%) scale(1.15) rotate(8deg);
	}
	100% {
		transform: translate(-2%, -2%) scale(1) rotate(0deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.pillars_glow::before {
		animation: none;
	}
}
.pillars_container {
	z-index: 1;
	grid-row-gap: 1rem;
	flex-flow: column;
	align-items: center;
	/* flex-end, not center: height: 100% here doesn't fill with content — the
	   title/grid/fifth group is shorter than that box, and centering left an
	   unpredictable amount of empty charcoal below it (more on a tall
	   viewport, less on a short one), stacking on TOP of .section_brands's own
	   padding-top below. That stacked slack is why the Pillars→Brands gap kept
	   reading bigger than Brands→Services even after the two paddings were
	   made numerically equal (brands.css) — Services has no equivalent
	   centering on its side, so nothing was ever adding to it there.
	   Bottom-aligning here removes the slack entirely: Brands' own
	   padding-top becomes the WHOLE gap, the same way Brands' padding-bottom
	   already is on the Brands→Services side. */
	justify-content: flex-end;
	height: 100%;
	display: flex;
	position: relative;
}
/* The row of cards (Pillars.astro's .pillars_wrapper.pl_cards): the frame's
   own layer and hit-testing only — everything that lays the cards out is on
   .pl_cards below. (This used to carry Apertura's four-item interlace: two
   fixed columns with absolutely-placed paragraphs threaded between them. That
   whole block went when the section became the short price table, and its
   sizing rules went with it.) */
.pillars_wrapper {
	z-index: 3;
	pointer-events: auto;
	position: relative;
}
@media screen and (max-width: 991px) {
	/* padding-bottom: 0, not 4rem — cancels so Brands' own mobile padding-top
	   (3rem, brands.css) is the whole Pillars→Brands gap, matching the same
	   ownership rule as every other boundary in this chain. */
	/* 3rem, not 4rem — every other mobile section boundary on this page is
	   3rem (brands.css's own padding, services.css, whyus.css,
	   testimonials.css all match it), and measuring the built page showed
	   this one at 64px against everyone else's 48px: the About→Pillars gap
	   read a third deeper than every gap below it. Same value now, so the
	   whole column steps at one rhythm. */
	.section_pillars {
		height: auto;
		min-height: calc(var(--vh) * 100);
		padding-top: 3rem;
		padding-bottom: 0;
		overflow: hidden;
	}
}

/* ===== The short price table (Pillars.astro, on request) ====================
   Orisa's home-2 pricing cards, compact, in this section's frame: the same
   charcoal, the same gold glow drifting behind, the lifted #333c4b card of
   /pricing with the popular tier outlined in gold. Centred in the full-screen
   section the mask reveals (about-stack.js); every rule is scoped to the
   .pl_ classes, so the frame's own .pillars_* rules above don't apply to it. */
.pillars_container.pl_container {
	justify-content: center;
	gap: 40px;
	padding-block: 90px 60px;
}
.pl_head {
	text-align: center;
}
.pl_eyebrow {
	display: block;
	margin-bottom: 12px;
	color: var(--vv-gold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pl_heading {
	margin: 0;
	overflow: hidden;
	color: var(--vv-off-white);
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(28px, 3vw, 46px);
	font-weight: 400;
	line-height: 1.15;
}
.pillars_wrapper.pl_cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 24px;
	width: 100%;
	max-width: 1180px;
	height: auto;
	padding: 0;
}
.pl_card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px 30px;
	border: 1px solid rgba(184, 154, 107, 0.18);
	border-radius: 16px;
	background-color: #333c4b;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.pl_card--popular {
	border-color: rgba(184, 154, 107, 0.55);
}
.pl_card_top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 30px;
}
.pl_card_title {
	margin: 0;
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
}
.pl_card_badge {
	padding: 6px 12px;
	border-radius: 999px;
	background-color: var(--vv-gold);
	color: var(--vv-charcoal);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.pl_card_price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(184, 154, 107, 0.2);
}
.pl_card_value {
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
}
.pl_card_period {
	color: var(--vv-off-white);
	opacity: 0.55;
	font-size: 15px;
}
.pl_card_features {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pl_card_features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.pl_card_icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--vv-gold);
}
.pl_card_features p {
	margin: 0;
	color: var(--vv-off-white);
	opacity: 0.85;
	font-size: 15px;
	line-height: 1.45;
}
.pl_foot {
	display: flex;
	justify-content: center;
}
/* Short screens (a laptop at 125% display scaling is ~1536×700): tighter
   spacing so the whole table and its button fit the pinned screen. */
@media screen and (min-width: 992px) and (max-height: 820px) {
	.pillars_container.pl_container {
		padding-block: 64px 32px;
		gap: 26px;
	}
	.pl_card {
		gap: 14px;
		padding: 22px 26px;
	}
	.pl_card_value {
		font-size: 40px;
	}
	.pl_card_price {
		padding-bottom: 12px;
	}
}
@media screen and (max-width: 991px) {
	.pillars_container.pl_container {
		padding-block: 0 48px;
		gap: 28px;
	}
	.pillars_wrapper.pl_cards {
		grid-template-columns: minmax(0, 1fr);
		max-width: 520px;
		gap: 16px;
	}
	.pl_card_value {
		font-size: 40px;
	}
}

/* ===== On the site's soft white (on request) ================================
   The short price table sits on the cream like the /services and /about
   decks: white cards with a hairline, charcoal type, gold only as fill, line
   and icon — never as type on the light ground (base.css). The drifting
   gold glow behind it is switched off. */
.section_pillars {
	background-color: var(--vv-cream);
}
.section_pillars .pillars_glow {
	display: none;
}
.pl_eyebrow {
	color: var(--vv-gray);
}
.pl_heading {
	color: var(--vv-charcoal);
}
.pl_card {
	border-color: rgba(46, 54, 68, 0.1);
	background-color: var(--vv-cream-card);
	box-shadow: 0 18px 40px -30px rgba(46, 54, 68, 0.35);
}
.pl_card--popular {
	border-color: var(--vv-gold);
}
.pl_card_title,
.pl_card_value {
	color: var(--vv-charcoal);
}
.pl_card_period {
	color: var(--vv-gray);
	opacity: 1;
}
.pl_card_price {
	border-bottom-color: rgba(184, 154, 107, 0.45);
}
.pl_card_features p {
	color: var(--vv-gray);
	opacity: 1;
}

/* Large screens (1800px and up): the short price table was drawn at its
   laptop size in the middle of a 2560px screen, with most of the full-screen
   section left empty around it. It grows with the screen instead. */
@media screen and (min-width: 1800px) {
	.pillars_container.pl_container {
		gap: 56px;
	}
	.pl_heading {
		font-size: clamp(46px, 2.6vw, 72px);
	}
	.pl_eyebrow {
		font-size: 15px;
	}
	.pillars_wrapper.pl_cards {
		max-width: min(1760px, 72vw);
		gap: 32px;
	}
	.pl_card {
		gap: 24px;
		padding: 40px 44px;
	}
	.pl_card_title {
		font-size: 24px;
	}
	.pl_card_badge {
		font-size: 12px;
	}
	.pl_card_value {
		font-size: 68px;
	}
	.pl_card_period {
		font-size: 18px;
	}
	.pl_card_features p {
		font-size: 18px;
	}
}