/* Loquat bundle: components — generated, do not edit. */

/* ── assets/css/components/faq.css ── */
/* ═════════════════════════════════════════════════════════════════
   COMPONENT — FAQ + Final CTA
   ═════════════════════════════════════════════════════════════════
   Shared accordion + orange CTA band. Used by front-page, BAO, and
   CAO. Markup comes from the reusable
   /template-parts/components/faq-section.php partial — same DOM on
   every page. Includes the optional briefing/contact form within the
   CTA.
   ───────────────────────────────────────────────────────────────── */

/* ── FAQ ── */
.faq {
	background: transparent;
	padding-bottom: 0;
	position: relative;
	/* `clip` (not `hidden`) lets `position: sticky` children still stick —
	   `overflow: hidden` would create a scroll container and break it. */
	overflow: clip;
}
/* Make sure the FAQ content sits above the sticky background video. */
.faq .section-wrap {
	position: relative;
	z-index: 2;
	padding: 150px var(--container-x);
}

/* ── FAQ sticky video background (shared across all pages) ──
   The `.section-bg-wrap` pins a muted video while the question list
   scrolls past. Previously these rules only loaded with the home cascade
   (pages/home/section-backgrounds.css); moved here so BAO and CAO get
   the same treatment automatically. Self-contained — does not depend on
   the generic `.section-bg-wrap` base rule in the home-only file.

   Use longhand top/right/bottom/left (not `inset`) — the negative
   `margin-bottom: -100vh` collapses the wrap out of the block flow so
   FAQ content starts at the top of the section instead of below the
   sticky element. */
.faq .section-bg-wrap {
	position: sticky;
	top: 0;
	right: auto;
	bottom: auto;
	left: auto;
	width: 100%;
	height: 100vh;
	margin-bottom: -100vh;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.faq .section-bg-inner {
	position: absolute;
	inset: -80px 0;
	will-change: transform;
}
.faq .section-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}
.faq .section-bg-inner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(245, 243, 239, 0.55);
	pointer-events: none;
	z-index: 1;
}
.faq-head { max-width: 100%; margin-bottom: clamp(48px, 6vw, 96px); }
.faq-head .display { font-size: clamp(48px, 6.8vw, 98px); }
.faq-head .display .hl-line { text-transform: uppercase; }
.faq-head .display .it-tail { font-size: clamp(48px, 7.4vw, 106px); 
	/* padding-top: 25px; */
}

.faq-list { max-width: none; display: flex; flex-direction: column; gap: 20px; }
.faq-item {
	border-radius: 14px;
	background: rgba(245, 243, 239, 0.60);
	backdrop-filter: blur(10px);
	padding: 0 clamp(20px, 2vw, 32px);
	transition: background .3s;
}

.faq-q {
	width: 100%;
	display: flex; justify-content: space-between; align-items: center;
	padding: clamp(20px, 2vw, 28px) 0;
	font-size: clamp(20px, 2vw, 30px);
	font-weight: 500;
	color: var(--ink);
	text-align: left;
	line-height: 1.3;
	cursor: pointer;
}
.faq-ico {
	display: inline-grid; place-items: center;
	flex-shrink: 0; margin-left: 1rem;
	color: var(--ink);
	transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-ico { transform: rotate(180deg); }

.faq-a {
	max-height: 0; overflow: hidden;
	transition: max-height .5s cubic-bezier(.16,1,.3,1);
}
.faq-item.open .faq-a { max-height: 500px; }
.faq-a-inner {
	padding: 0 0 clamp(20px, 2vw, 28px);
	color: var(--ink-soft);
	font-size: var(--fs-body);
	line-height: 1.6;
	max-width: 78ch;
}

/* ── Final CTA — orange band (standalone, outside .faq section) ── */
.finalcta {
	background: var(--orange);
	color: var(--cream);
	margin-top: 0;
	padding: clamp(72px, 10vw, 160px) 0;
	position: relative;
	overflow: hidden;
}
.finalcta-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--container-x); }
.finalcta h2 {
	font-size: clamp(48px, 7.8vw, 112px);
	font-weight: 500;
	text-transform: uppercase;
	line-height: clamp(46px, 6.94vw, 100px);
	letter-spacing: -.01em;
	color: var(--cream);
	margin: 0 0 1.5rem;
	white-space: pre-line;
}
.finalcta h2 .it-tail { font-size: clamp(48px, 8.3vw, 120px); display: inline; color: var(--cream); }
.finalcta p {
	font-size: var(--fs-lead);
	color: var(--cream);
	max-width: 78ch;
	margin: 1.5rem 0 2.5rem;
	line-height: 1.5;
}
.finalcta .btn { background: var(--green); color: var(--cream); }
/* .finalcta .btn:hover { background: #084d1a; } */

/* ── Briefing / contact form (shown on user activation via JS) ── */
.briefing-form {
	margin-top: 2rem;
	display: none;
}
.briefing-form.open { display: grid; gap: 1rem; max-width: 540px; }
.briefing-form input,
.briefing-form textarea {
	width: 100%; padding: 14px 18px;
	border: 1px solid rgba(245,243,239,.35);
	border-radius: 12px;
	background: rgba(255,255,255,.1);
	color: var(--cream);
	font: inherit;
}
.briefing-form input::placeholder,
.briefing-form textarea::placeholder { color: rgba(245,243,239,.6); }
.briefing-form textarea { min-height: 110px; resize: vertical; }
.briefing-msg { font-size: 15px; min-height: 1.2em; }


/* ── assets/css/components/caps-grid.css ── */
/* ═════════════════════════════════════════════════════════════════
   COMPONENT — Capabilities Grid
   ═════════════════════════════════════════════════════════════════
   3×2 card grid section. Markup lives in
   /template-parts/components/caps-grid.php. Originally extracted from
   the product-opening cascade so other pages can reuse it with their
   own content.
   ───────────────────────────────────────────────────────────────── */

.po-caps { background: var(--cream); }
.po-caps-head { max-width: 1280px; margin-bottom: clamp(48px, 5vw, 80px); }
.po-caps-head .display { text-transform: uppercase; }
.po-caps-head .display .hl-line { display: inline; }
.po-caps-head .display .it-tail { display: inline; }

.po-caps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.2vw, 32px);
}
.po-cap {
	--shimmer-pos: 120%;

	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 20px;
	padding: clamp(28px, 2.8vw, 44px);
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.2vw, 18px);
	position: relative;
	overflow: hidden;

	transition:
		--shimmer-pos 0.55s ease,
		border-color  0.25s ease,
		transform     0.35s cubic-bezier(.16,1,.3,1),
		box-shadow    0.35s ease;
}

.po-cap::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		transparent                       0%,
		transparent                       calc(var(--shimmer-pos) - 28%),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) - 12%),
		rgba(255, 255, 255, 0.45)         var(--shimmer-pos),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) + 12%),
		transparent                       calc(var(--shimmer-pos) + 28%),
		transparent                       100%
	);
}

.po-cap:hover {
	border-color: var(--accent, var(--green));
	transform: translateY(-4px);
	box-shadow: 0 24px 50px rgba(0,0,0,.08);
	transition:
		--shimmer-pos 0.06s linear,
		border-color  0.25s ease,
		transform     0.35s cubic-bezier(.16,1,.3,1),
		box-shadow    0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.po-cap {
		transition: border-color 0.25s ease, transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease;
	}
	.po-cap::after { display: none; }
}
.po-cap-num {
	font-family: var(--f-sans);
	font-size: var(--fs-card-num);
	font-weight: 600;
	color: var(--orange);
	letter-spacing: .02em;
	line-height: 1;
}
.po-cap-num::after {
	content: ' /';
}
.po-cap-title {
	font-family: var(--f-sans);
	font-size: var(--fs-card-title);
	font-weight: 500;
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 0;
}
.po-cap-title sup {
	font-size: .55em;
	vertical-align: super;
	line-height: 1;
	margin-left: 1px;
}
.po-cap-body {
	font-size: var(--fs-body-sm);
	color: var(--ink-soft);
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 1024px) { .po-caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .po-caps-grid { grid-template-columns: 1fr; } }


/* ── assets/css/components/agents-grid.css ── */
/* ═════════════════════════════════════════════════════════════════
   COMPONENT — Agents Grid
   ═════════════════════════════════════════════════════════════════
   "Agentic orchestration" section: header + 2×2 agent cards + 4-up
   stats row. Markup lives in
   /template-parts/components/agents-grid.php. Originally extracted
   from the product-opening cascade so other pages can reuse it with
   their own data.
   ───────────────────────────────────────────────────────────────── */

.po-agents {
	background: var(--cream);
	position: relative;
	overflow: hidden;
}
.po-agents::after {
	content: '';
	position: absolute;
	right: -10vw; top: 30%;
	width: clamp(380px, 48vw, 720px);
	height: clamp(380px, 48vw, 720px);
	/* background: url(/wp-content/themes/Last/assets/img/object.webp) center/contain no-repeat; */
	opacity: .10;
	pointer-events: none;
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 68% 68% at 60% 45%, black 22%, transparent 65%);
	mask-image:         radial-gradient(ellipse 68% 68% at 60% 45%, black 22%, transparent 65%);
}
.po-agents > * { position: relative; z-index: 1; }

.po-agents-head { max-width: 1280px; margin-bottom: clamp(40px, 5.417vw, 78px); }
.po-agents-head .display { text-transform: uppercase; }
.po-agents-head .display .hl-line  { display: inline; }
.po-agents-head .display .it-tail  { display: inline; padding-top: 0; }

.po-agents-sub {
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: clamp(24px, 2.917vw, 42px);
	line-height: 1.095;
	color: var(--ink);
	letter-spacing: -0.03em;
	margin: 0 0 clamp(40px, 5.417vw, 78px);
}

.po-agent-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: clamp(40px, 5.417vw, 78px);
}
.po-agent {
	--shimmer-pos: 120%;        /* off-screen right; JS updates this */

	background: rgba(255, 255, 255, 0.60);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid transparent;
	border-radius: 14px;
	padding: 30px 30px 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	position: relative;
	overflow: hidden;

	transition:
		--shimmer-pos 0.55s ease,
		border-color  0.25s ease,
		transform     0.35s cubic-bezier(.16,1,.3,1),
		box-shadow    0.35s ease;
}

/* Shimmer band — scroll-driven and cursor-tracked on hover. */
.po-agent::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		120deg,
		transparent                       0%,
		transparent                       calc(var(--shimmer-pos) - 28%),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) - 12%),
		rgba(255, 255, 255, 0.45)         var(--shimmer-pos),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) + 12%),
		transparent                       calc(var(--shimmer-pos) + 28%),
		transparent                       100%
	);
}

.po-agent:hover {
	border-color: var(--accent, var(--green));
	transform: translateY(-4px);
	box-shadow: 0 24px 50px rgba(0,0,0,.08);
	transition:
		--shimmer-pos 0.06s linear,
		border-color  0.25s ease,
		transform     0.35s cubic-bezier(.16,1,.3,1),
		box-shadow    0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.po-agent {
		transition: border-color 0.25s ease, transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease;
	}
	.po-agent::after { display: none; }
}
.po-agent-main {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
.po-agent-head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-right: 80px;
	/* Reserve height for 3-line title so .po-agent-body always starts
	   at the same level regardless of how many lines the title wraps to.
	   Formula: eyebrow (22px) + gap (8px) + 3 × title-line-height.
	   Title: clamp(16px, 1.667vw, 24px) × line-height 1.3 = 6.5vw per 3 lines. */
	min-height: clamp(92px, calc(6.5vw + 30px), 124px);
}
.po-agent-eyebrow {
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	line-height: 1.1;
	/* Pinned to the canonical green across BOTH variants —
	   agent eyebrows stay consistent regardless of page accent. */
	color: var(--green);
	text-transform: uppercase;
}
.po-agent-title {
	font-family: var(--f-sans);
	font-size: clamp(16px, 1.667vw, 24px);
	font-weight: 400;
	line-height: 1.3;
	color: var(--ink);
	letter-spacing: -0.02em;
	margin: 0;
}
.po-agent-num {
	position: absolute;
	top: 0;
	right: 0;
	font-family: var(--f-sans);
	font-size: clamp(28px, 3.056vw, 44px);
	font-weight: 800;
	line-height: 1.045;
	color: rgba(82, 82, 81, 0.4);
	letter-spacing: -0.03em;
	text-align: right;
}
.po-agent-body {
	font-family: var(--f-sans);
	font-size: clamp(13px, 1.25vw, 18px);
	font-weight: 400;
	line-height: 1.44;
	color: rgba(26, 26, 26, 0.75);
	margin: 0;
}
.po-agent-timing {
	font-family: var(--f-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: 2;
	/* Pinned to canonical green across BOTH variants — same pattern as
	   .po-stat-val, .po-agent-eyebrow, and .po-agent-stat-val. */
	color: var(--green);
	text-transform: uppercase;
	letter-spacing: normal;
	white-space: nowrap;
}

/* Stats row under the agent grid. Auto-fit columns (adapts to 3 or 4
   items), each with a big accent-coloured value, a sentence-case label,
   and a 1-px rule underneath. */
.po-agent-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 20px;
}
.po-agent-stat {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule);
}
.po-agent-stat-val {
	font-family: var(--f-sans);
	font-size: clamp(36px, 4.8vw, 68px);
	font-weight: 500;
	/* Pinned to canonical green across BOTH variants — same pattern as
	   .po-stat-val and .po-agent-eyebrow. */
	color: var(--green);
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
	width: 100%;
	text-align: center;
}
.po-agent-stat-lbl {
	font-family: var(--f-sans);
	font-size: clamp(16px, 1.7vw, 24px);
	color: rgba(26, 26, 26, 0.75);
	line-height: 1.54;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	width: 100%;
	text-align: center;
}
/* When a stat label is composed of explicit line spans, each span renders
   on its own line and never wraps — guarantees the label stays at the
   intended line count regardless of column width. */
.po-agent-stat-lbl .lbl-line {
	display: block;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.po-agent-grid     { grid-template-columns: 1fr; }
	.po-agent-stats    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.po-agent-stats    { grid-template-columns: 1fr; }
}

/* ─── 3-up variant ─────────────────────────────────────────────────
   Used by the CALM Portal "Continue exploring" section (links to
   Loquat IQ / Business onboarding / Consumer onboarding). Steps
   down to 1 column at the narrow breakpoint. */
.po-agent-grid--3up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
	.po-agent-grid--3up { grid-template-columns: 1fr; }
}

/* ─── 4-up "process step" variant ──────────────────────────────────
   Used by the lending lifecycle (Originate / Underwrite / Decide /
   Disburse). Steps down to 2 then 1 columns at the standard
   breakpoints below. */
.po-agent-grid--4up { grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) {
	.po-agent-grid--4up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.po-agent-grid--4up { grid-template-columns: 1fr; }
}

/* When a card has no top-right ordinal (process-step layout where the
   number lives in the eyebrow as "01 /"), the head no longer needs
   to reserve 70px of right padding for it — recover that width. */
.po-agent--no-num .po-agent-head { padding-right: 0; }
.po-agent--no-num .po-agent-main { gap: 16px; }

/* Quote / sub-callout card rendered below the stats row. Same
   white/blur treatment as the agent cards above so it reads as part
   of the section. Inline HTML is allowed in the .po-agent-callout-text
   block — bold and underlined-link helpers are scoped here.

   When the caller passes `callout_icon`, the card becomes a flex row:
   the icon (e.g. /assets/icons/exclamation-mark.svg) sits on the left
   and the text wraps on the right with a 44px gap (Figma value).
   Without an icon, the text fills the full width. */
.po-agent-callout {
	margin-top: clamp(40px, 6vw, 80px);
	background: rgba(255, 255, 255, 0.60);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 14px;
	padding: 34px 30px 28px;
}
.po-agent-callout--with-icon {
	display: flex;
	align-items: center;
	gap: 44px;
}
.po-agent-callout-icon {
	flex-shrink: 0;
	width: 19px;
	height: auto;
	display: block;
}
.po-agent-callout-text {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--f-sans);
	/* Figma callout body — 26px / 40px line-height. --fs-body-sm caps
	   at exactly 26px at the 1440 design width and scales down on
	   narrower viewports. */
	font-size: var(--fs-body-sm);
	font-weight: 400;
	line-height: 40px;
	color: rgba(26, 26, 26, 0.75);
}
.po-agent-callout-text strong {
	color: var(--ink);
	font-weight: 700;
}
.po-agent-callout-text a {
	color: var(--ink);
	font-weight: 700;
	text-decoration: underline;
}
.po-agent-callout-text a:hover { color: var(--accent, var(--green)); }

/* When two callouts stack (e.g. consumer-lending lifecycle has both
   a thin-file message and the "Not a bank?" message), keep them
   visually paired with a tighter gap than the section-to-callout
   margin above. */
.po-agent-callout + .po-agent-callout {
	margin-top: clamp(20px, 2vw, 32px);
}


/* ── assets/css/components/stats-row.css ── */
/* ═════════════════════════════════════════════════════════════════
   COMPONENT — Stats Row
   ═════════════════════════════════════════════════════════════════
   4-up grid of "big numeral + short body" cards with a 1px rule under
   each card. Markup lives in /template-parts/components/stats-row.php.
   Originally extracted from the product-opening cascade so other pages
   can reuse it with their own content.
   ───────────────────────────────────────────────────────────────── */

.po-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 20px gap so the per-card bottom borders sit 20px apart. */
	gap: 20px;
}
.po-stat {
	padding: clamp(32px, 3.5vw, 56px) 0 clamp(20px, 2vw, 28px);
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.4vw, 20px);
	border-bottom: 1px solid rgba(80, 80, 79, 0.51);
	width: 272px;
}
.po-stat-val {
	font-family: var(--f-sans);
	font-size: clamp(40px, 7vw, 100px);
	font-weight: 500;
	line-height: 1;
	color: var(--accent, var(--green));
	letter-spacing: -.02em;
	white-space: nowrap;
	text-align: center;
	width: 100%;
}
.po-stat-val sup {
	font-size: .55em;
	vertical-align: super;
	line-height: 1;
	margin-left: 2px;
}
.po-stat-body {
	font-size: var(--fs-body-sm);
	color: var(--ink-soft);
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

@media (max-width: 1024px) {
	.po-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.po-stats {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.po-stat {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		align-items: center;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		background: rgba(255, 255, 255, 0.35);
		border-bottom: none;
		position: relative;
	}
	.po-stat::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 20px;
		right: 20px;
		height: 1px;
		background: rgba(80, 80, 79, 0.51);
	}
	.po-stat:last-child::after { display: none; }
	.po-stat-val { text-align: center; }
	.po-stat-body { text-align: center; }
}


/* ── assets/css/components/head-band.css ── */
/* ═════════════════════════════════════════════════════════════════
   COMPONENT — Head Band
   ═════════════════════════════════════════════════════════════════
   Full-bleed accent-coloured stripe with a giant uppercase headline
   and a single-line lede underneath. Used as a "section title" band
   between the hero and the body sections on product pages. Was
   inline as `.po-adv-head` (BAO/CAO) and `.pc-band` (BCP) — lifted
   here so the markup + CSS lives in one place.

   Background tones — default is `accent`, which picks up the page's
   `var(--accent)` so the band turns green on BAO/business pages and
   orange on CAO. Hardcoded `green` / `orange` / `ink` modifiers exist
   for cases where the band shouldn't follow the page accent.

   Markup: /template-parts/components/head-band.php
   ───────────────────────────────────────────────────────────────── */

.head-band {
	position: relative;
	padding: clamp(48px, 5vw, 72px) 0;
	overflow: hidden;
}

.head-band--accent { background: var(--accent, var(--green)); }
.head-band--green  { background: var(--green); }
.head-band--orange { background: var(--orange); }
.head-band--ink    { background: var(--ink); }

.head-band-wrap {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.5vw, 28px);
	color: #FFF;
}

.head-band-headline {
	margin: 0;
	color: #FFF;
	font-family: var(--f-sans);
	font-size: clamp(32px, 5vw, 72px);
	font-style: normal;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.head-band-lede {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--f-sans);
	font-size: var(--fs-lead);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

@media (max-width: 768px) {
	.head-band      { padding: clamp(40px, 9vw, 64px) 0; }
	.head-band-wrap { gap: 14px; }
}
@media (max-width: 480px) {
	.head-band-headline { white-space: normal; }
}


/* ── assets/css/components/ops-view.css ── */
/* ═════════════════════════════════════════════════════════════════
   COMPONENT — Operations View
   ═════════════════════════════════════════════════════════════════
   The "What your operations team sees" section on the CALM Portal
   page — section header (eyebrow + display headline + lede) plus a
   big "screenshot" card that mocks the CALM Portal Operations view:
   green title bar at the top, then 4 columns underneath, each with
   a section title, a bulleted list, and a closing stat (orange
   numeric value + label).

   Markup: /template-parts/components/ops-view.php
   ───────────────────────────────────────────────────────────────── */

.ops-view {
	background: var(--cream);
}

.ops-view-head {
	max-width: 1280px;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 1.8vw, 32px);
	margin-bottom: clamp(40px, 5vw, 80px);
}

/* Headline — uppercase like other .display headlines, but the inline
   italic insets (.it-mid) stay at the parent font-size so "One portal.
   *Every product.* Full visibility." reads as one continuous line
   rather than the bigger-italic-tail treatment used elsewhere. */
.ops-view-headline {
	text-transform: uppercase;
	/* Replicate the inter-line gap of .hl-line blocks. Visible gap in a
	   single block = line-height − font-size. Target = split-word
	   margin-bottom (clamp(6px,0.7vw,10px)).
	   line-height = fs-display-xl + margin = clamp(52+6, 7.8+0.7vw, 112+10). */
	line-height: clamp(58px, 8.5vw, 122px);
}
.ops-view-headline .it-mid {
	font-family: var(--f-serif);
	font-style: italic;
	font-size: inherit;
	line-height: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: inherit;
}
.ops-view-headline .it-mid.green  { color: var(--green); }
.ops-view-headline .it-mid.orange { color: var(--orange); }

/* The big "screenshot" card. */
.ops-view-card {
	border-radius: 14px;
	overflow: hidden;
	opacity: 0.9;
	filter: drop-shadow(0 16px 19px rgba(0,0,0,0.2))
	        drop-shadow(0 30px 45px rgba(0,0,0,0.05));
}
.ops-view-card-head {
	background: var(--green);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 10px 30px 8px;
	color: var(--cream);
	font-family: var(--f-sans);
	font-weight: 500;
	line-height: 1.55;
}
.ops-view-card-title {
	margin: 0;
	font-size: var(--fs-body-sm);
}
.ops-view-card-subtitle {
	margin: 0;
	font-size: 16px;
	opacity: 0.92;
}

/* Flat 4-column grid — each bullet occupies a shared grid row so dots
   are guaranteed to align horizontally across all columns. */
.ops-view-card-body {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(26,26,26,0.3);
	border-top: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
}

/* Column separators: right border on every cell except the 4th in each row */
.ops-view-card-body > *:not(:nth-child(4n)) {
	border-right: 1px solid var(--rule);
}

/* Base horizontal padding; first and last columns get extra */
.ops-view-card-body > * {
	padding-left: 20px;
	padding-right: 20px;
}
.ops-view-card-body > *:nth-child(4n+1) { padding-left: 24px; }
.ops-view-card-body > *:nth-child(4n)   { padding-right: 24px; }

/* ── Title row ──────────────────────────────────────────────── */
.ops-view-col-head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 20px;
	padding-bottom: 24px;
}
.ops-view-col-title {
	margin: 0;
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: clamp(18px, 1.944vw, 28px);
	line-height: 1.095;
	color: var(--ink);
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.ops-view-col-rule {
	height: 1px;
	width: 100%;
	border: 0;
	margin: 0;
	background: var(--rule);
}

/* ── Bullet cells ───────────────────────────────────────────── */
.ops-view-col-bullet {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: clamp(12px, 1.0vw, 14px);
	line-height: 1.4;
	color: var(--ink);
	white-space: nowrap;
}
/* First bullet row: no extra top gap (title already has padding-bottom) */
.ops-view-col-bullet--first { padding-top: 0; }
/* Last bullet row: no extra bottom gap (stat has its own padding-top) */
.ops-view-col-bullet--last  { padding-bottom: 0; }
.ops-view-col-bullet--empty { visibility: hidden; }

.ops-view-col-bullet::before {
	content: '';
	flex-shrink: 0;
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
	margin-top: calc((1.4em - 6px) / 2);
}
.ops-view-col-bullet--orange::before { background: var(--orange); }
.ops-view-col-bullet--empty::before  { display: none; }

/* ── Stat row ───────────────────────────────────────────────── */
.ops-view-col-stat {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 24px;
	padding-bottom: 30px;
}
.ops-view-col-stat-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.ops-view-col-stat-val {
	font-family: var(--f-sans);
	font-weight: 700;
	font-size: clamp(36px, 4vw, 58px);
	line-height: 1;
	color: var(--orange);
	white-space: nowrap;
	text-align: center;
}
.ops-view-col-stat-lbl {
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: var(--fs-card-body);
	line-height: 1.2;
	color: var(--ink);
	text-align: center;
}

/* ── Mobile accordion — hidden on desktop ──────────────────────── */
.ops-view-mob { display: none; }

.ops-view-mob-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}
.ops-view-mob-trigger .ops-view-col-title { white-space: normal; }

.ops-view-mob-chevron {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ops-view-mob-chevron::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	border-right: 2px solid rgba(26,26,26,0.55);
	border-bottom: 2px solid rgba(26,26,26,0.55);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.3s ease;
}
.ops-view-mob-item.is-open .ops-view-mob-chevron::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.ops-view-mob-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.ops-view-mob-item.is-open .ops-view-mob-panel { max-height: 600px; }

.ops-view-mob-bullets {
	list-style: none;
	margin: 0;
	padding: 4px 20px 16px;
}
.ops-view-mob-bullets .ops-view-col-bullet {
	white-space: normal;
	font-size: 14px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.ops-view-mob-bullets .ops-view-col-bullet:first-child { padding-top: 0; }
.ops-view-mob-bullets .ops-view-col-bullet:last-child  { padding-bottom: 0; }

.ops-view-mob-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px 20px 24px;
	border-top: 1px solid var(--rule);
}

/* ── Responsive: separate cards below 1024 px ───────────────── */
@media (max-width: 1024px) {
	/* Unwrap the unified card — become a flex column of individual cards */
	.ops-view-card {
		border-radius: 0;
		overflow: visible;
		opacity: 1;
		filter: none;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	/* Header bar gets its own card treatment */
	.ops-view-card-head {
		border-radius: 14px;
		filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 24px;
		background: #FBFAF9;
	}
	.ops-view-card-title {
		color: var(--green);
		font-size: 16px;
	}
	.ops-view-card-subtitle {
		color: rgba(102, 102, 102, 1);
		font-size: 14px;
		opacity: 1;
	}

	/* Hide the desktop grid */
	.ops-view-card-body { display: none; }

	/* Stack of column cards */
	.ops-view-mob {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
.ops-view-mob-trigger {
	padding: 24px;
}


	.ops-view-mob-trigger .ops-view-col-title { font-size: 20px; }

	.ops-view-mob-bullets .ops-view-col-bullet { font-size: 14px; }

	.ops-view-mob-stat {
		border: none;
		padding-top: 8px;
	}

	.ops-view-mob-stat .ops-view-col-stat-val {
		font-size: 44px;
		color: rgba(11, 102, 35, 1);
	}
	.ops-view-mob-stat .ops-view-col-stat-lbl {
		font-size: 14px;
		color: rgba(102, 102, 102, 1);
	}

	/* Each column = its own standalone card */
	.ops-view-mob-item {
		border-radius: 14px;
		overflow: hidden;
		border: 1px solid rgba(26,26,26,0.18);
		background: rgba(255, 255, 255, 0.75);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08));
		transition: background 0.3s ease, border-color 0.3s ease;
	}
	.ops-view-mob-item.is-open {
		background: rgba(11, 102, 35, 0.09);
		border-color: rgba(11, 102, 35, 0.22);
	}
}


/* ── assets/css/components/journey-steps.css ── */
/* ═════════════════════════════════════════════════════════════════
   COMPONENT: Journey Steps
   "Client journey — step by step" block (BAO & CAO pages).

   Shimmer model:
   --shimmer-pos is a registered custom property (<percentage>) set
   by product-opening.js. Scroll moves the band across all cards in
   sync; mousemove overrides it per-card so the band follows the cursor.
   @property enables CSS transitions on the custom property so both
   motions ease smoothly.
   ═════════════════════════════════════════════════════════════════ */

@property --shimmer-pos {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 120%;
}


/* ─────────────────────────────────────────────────────────────────
   SECTION SHELL
   ───────────────────────────────────────────────────────────────── */
.po-journey {
	background: var(--cream);
	position: relative;
	padding-top: 40px;
}

.po-journey-head {
	max-width: 1280px;
	margin-bottom: clamp(48px, 5vw, 80px);
}

.po-journey-head .display {
	text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────────
   STEPS WRAP — stacked grid: header → cards → footer
   ───────────────────────────────────────────────────────────────── */
.po-steps-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(12px, 1.2vw, 16px);
}


/* ─────────────────────────────────────────────────────────────────
   HEADER CARD
   ───────────────────────────────────────────────────────────────── */
.po-steps-header {
	background: rgba(255, 255, 255, 0.60);
	border: 1px solid var(--rule);
	border-radius: 20px;
	padding: clamp(16px, 1.6vw, 22px) clamp(24px, 2.5vw, 36px);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(12px, 2vw, 28px);
}

.po-steps-header-eyebrow {
	font-family: var(--f-sans);
	font-weight: 600;
	font-size: var(--fs-label-md);
	color: var(--green);
	text-transform: uppercase;
	margin: 0;
}

.po-steps-header-body {
	font-size: var(--fs-card-body);
	color: rgba(26, 26, 26, 0.56);
	line-height: 1.5;
	margin: 0;
	text-align: right;
}


/* ─────────────────────────────────────────────────────────────────
   STEP CARDS GRID
   ───────────────────────────────────────────────────────────────── */
.po-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(10px, 1.2vw, 16px);
}

/* ── Individual step card ── */
.po-step {
	--shimmer-pos: 120%;        /* off-screen right; JS updates this */

	height: clamp(200px, 22vw, 316px);
	position: relative;
	overflow: hidden;           /* clips shimmer to rounded corners */
	background: var(--cream);
	border: 1px solid #d7d5d0;
	border-radius: 20px;
	padding: clamp(20px, 2vw, 30px) clamp(16px, 1.6vw, 24px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;

	/* Smooth scroll-driven shimmer; fast border + lift transitions. */
	transition:
		--shimmer-pos 0.55s ease,
		border-color  0.25s ease,
		transform     0.25s ease,
		box-shadow    0.25s ease;
}

/* ── Shimmer band ──
   ::after sits in front of the cream base. Its background is a
   narrow white highlight centred at var(--shimmer-pos). When
   --shimmer-pos is outside 0-100% the band is invisible; as JS
   moves it into range the highlight sweeps across the card. */
.po-step::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		110deg,
		transparent                       0%,
		transparent                       calc(var(--shimmer-pos) - 28%),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) - 12%),
		rgba(255, 255, 255, 0.45)         var(--shimmer-pos),
		rgba(255, 255, 255, 0.18)         calc(var(--shimmer-pos) + 12%),
		transparent                       calc(var(--shimmer-pos) + 28%),
		transparent                       100%
	);
}

/* ── Hover: fast-follow cursor, green outline, subtle lift ── */
.po-step:hover {
	border-color: var(--green);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
	/* Tighten --shimmer-pos transition so the band tracks the mouse
	   in near real-time instead of lagging behind. */
	transition:
		--shimmer-pos 0.06s linear,
		border-color  0.25s ease,
		transform     0.25s ease,
		box-shadow    0.25s ease;
}

/* ── Active / open: green outline only, no fill change ── */
.po-step.is-open {
	border-color: var(--green);
}

/* ── Step card internals ── */
.po-step-num {
	font-family: var(--f-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	color: var(--green);
	letter-spacing: -.01em;
	line-height: 1;
	position: absolute;
	top: clamp(18px, 1.8vw, 26px);
	left: clamp(16px, 1.6vw, 24px);
}

.po-step-num::after {
	content: ' /';
}

.po-step-title {
	font-family: var(--f-sans);
	font-size: var(--fs-card-title);
	font-weight: 500;
	color: var(--ink);
	line-height: 1.05;
	letter-spacing: -.03em;
}

.po-step-sub {
	font-family: var(--f-sans);
	font-style: normal;
	font-size: var(--fs-card-body);
	font-weight: 400;
	color: var(--ink-soft);
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.po-step {
		transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	}
	.po-step::after {
		display: none;
	}
}


/* ─────────────────────────────────────────────────────────────────
   FOOTER PANEL — crossfading bullet list
   Single-cell CSS grid so panels stack in the same spot; only
   .is-active is visible. Three bullets always on one row:
   flex-wrap: nowrap + flex: 1 1 0 on each li so they share width
   equally regardless of text length.
   ───────────────────────────────────────────────────────────────── */
.po-steps-footer {
	background: rgba(11, 102, 35, 0.16);
	border: 1px solid var(--rule);
	border-radius: 20px;
	padding: clamp(20px, 2vw, 30px) clamp(28px, 3vw, 48px);
	display: grid;
	grid-template-areas: 'stack';
}

.po-steps-footer-panel {
	grid-area: stack;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;          /* all bullets on one row */
	gap: clamp(16px, 2.5vw, 40px);
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition:
		opacity    0.25s ease,
		transform  0.25s ease,
		visibility 0s linear 0.35s;
	pointer-events: none;
}

.po-steps-footer-panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	z-index: 1;
	transition:
		opacity    0.25s ease,
		transform  0.25s ease,
		visibility 0s linear 0s;
}

.po-steps-footer li {
	flex: 1 1 0;                /* equal-width columns; text wraps within */
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--f-sans);
	font-size: clamp(10px, 0.85vw, 12px);
	color: var(--ink-soft);
	line-height: 1;
	white-space: nowrap;
}

.po-steps-footer li::before {
	content: '';
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
}

@media (prefers-reduced-motion: reduce) {
	.po-steps-footer-panel,
	.po-steps-footer-panel.is-active {
		transition: none;
		transform: none;
	}
}


/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.po-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.po-steps-footer-panel {
		flex-wrap: wrap;        /* allow bullet wrap on tablet/mobile */
	}

	.po-steps-footer li {
		flex: 0 1 auto;
	}
}

@media (max-width: 600px) {
	.po-steps {
		grid-template-columns: 1fr;
	}
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE ACCORDION — mirrors ops-view-mob; hidden on desktop
   ───────────────────────────────────────────────────────────────── */
.po-steps-mob { display: none; }

@media (max-width: 768px) {
	.po-steps,
	.po-steps-footer { display: none; }

	.po-steps-mob {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

		.po-steps-header-body {
		text-align: left;
	}
	
	.po-steps-mob-item {
		border-radius: 14px;
		overflow: hidden;
		border: 1px solid rgba(26, 26, 26, 0.18);
		background: rgba(255, 255, 255, 0.75);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
		transition: background 0.3s ease, border-color 0.3s ease;
	}

	.po-steps-mob-item.is-open {
		background: rgba(11, 102, 35, 0.09);
		border-color: rgba(11, 102, 35, 0.22);
	}

	.po-steps-mob-trigger {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 20px 24px;
		background: none;
		border: none;
		cursor: pointer;
		text-align: left;
	}

	.po-steps-mob-trigger-body {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.po-steps-mob-trigger-inner {
		display: flex;
		align-items: baseline;
		gap: 6px;
	}

	.po-steps-mob-trigger .po-step-sub {
		font-size: 14px;
		color: var(--ink-soft);
		line-height: 1.4;
	}

	.po-steps-mob-trigger .po-step-num {
		position: static;
		font-size: var(--fs-eyebrow);
		font-weight: 600;
		color: var(--green);
		line-height: 1;
	}


	.po-steps-mob-trigger .po-step-num::after { content: ' /'; }

	.po-steps-mob-trigger .po-step-title {
		font-size: 20px;
		font-weight: 500;
		color: var(--ink);
		line-height: 1.1;
		letter-spacing: -.03em;
	}

	.po-steps-mob-chevron {
		flex-shrink: 0;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.po-steps-mob-chevron::before {
		content: '';
		display: block;
		width: 9px;
		height: 9px;
		border-right: 2px solid rgba(26, 26, 26, 0.55);
		border-bottom: 2px solid rgba(26, 26, 26, 0.55);
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform 0.3s ease;
	}

	.po-steps-mob-item.is-open .po-steps-mob-chevron::before {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	.po-steps-mob-panel {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s ease;
	}

	.po-steps-mob-item.is-open .po-steps-mob-panel { max-height: 600px; }

	.po-steps-mob-bullets {
		list-style: none;
		margin: 0;
		padding: 4px 24px 20px;
	}

	.po-steps-mob-bullets li {
		display: flex;
		align-items: center;
		gap: 0.6em;
		font-size: 14px;
		color: var(--ink-soft);
		line-height: 1.4;
		padding: 5px 0;
	}

	.po-steps-mob-bullets li::before {
		content: '';
		flex-shrink: 0;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--green);
	}
}