/* =========================================================================
   Athath Express — 02 COMPONENTS
   Media frames, surfaces, lists, steps, FAQ, quotes, CTA.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Media frames — images are treated as composed objects, never bare rectangles
   ---------------------------------------------------------------------- */

.a-frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--a-r-md);
	background: var(--a-sand);
	box-shadow: var(--a-sh-2);
	isolation: isolate;
}
.a-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 1.1s var(--a-ease);
}
.a-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 -70px 90px -60px rgba(10, 61, 32, .45);
	pointer-events: none;
	z-index: 2;
}
.a-frame--tall { aspect-ratio: 4 / 5; }
.a-frame--portrait { aspect-ratio: 3 / 4; }
.a-frame--square { aspect-ratio: 1 / 1; }
.a-frame--landscape { aspect-ratio: 3 / 2; }
.a-frame--wide { aspect-ratio: 16 / 9; }
.a-frame--pano { aspect-ratio: 21 / 9; }
.a-frame--soft { border-radius: var(--a-r-lg); }
.a-frame--flat { box-shadow: var(--a-sh-1); }
a:hover > .a-frame img,
.a-lift:hover .a-frame img,
.a-frame:hover img { transform: scale(1.045); }

/* Caption chip that sits on the frame instead of below it */
.a-frame__cap {
	position: absolute;
	inset-inline-start: 16px;
	inset-block-end: 16px;
	z-index: 3;
	max-width: min(84%, 340px);
	padding: 11px 16px;
	border-radius: var(--a-r-sm);
	background: rgba(255, 255, 255, .93);
	backdrop-filter: blur(8px);
	color: var(--a-ink);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.6;
	box-shadow: 0 12px 28px -16px rgba(10, 61, 32, .6);
}

/* Floating proof pill used on layered hero compositions */
.a-float {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 18px;
	border-radius: var(--a-r-sm);
	background: rgba(255, 255, 255, .96);
	box-shadow: var(--a-sh-2);
	backdrop-filter: blur(10px);
}
.a-float strong {
	font-size: 1.28rem;
	font-weight: 800;
	color: var(--a-green-dark);
	line-height: 1.1;
}
.a-float span {
	font-size: .84rem;
	font-weight: 600;
	color: var(--a-muted);
	line-height: 1.45;
}
.a-float .a-icon { color: var(--a-green); width: 22px; height: 22px; }

/* -------------------------------------------------------------------------
   Surfaces
   ---------------------------------------------------------------------- */

/* Hairline panel — the default "container" (light, not a heavy white box) */
.a-panel {
	padding: clamp(22px, 2.4vw, 34px);
	border: 1px solid var(--a-line);
	border-radius: var(--a-r-md);
	background: var(--a-white);
}
.a-panel--cream { background: var(--a-cream); border-color: rgba(22, 36, 29, .07); }
.a-panel--glass {
	border-color: var(--a-line-light);
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(10px);
}

/* Elevated card, used sparingly */
.a-card {
	position: relative;
	padding: clamp(22px, 2.3vw, 32px);
	border: 1px solid var(--a-line);
	border-radius: var(--a-r-md);
	background: var(--a-white);
	box-shadow: var(--a-sh-1);
	transition: transform .5s var(--a-ease), box-shadow .5s var(--a-ease), border-color .5s var(--a-ease);
}
.a-card:hover {
	transform: translateY(-5px);
	border-color: rgba(21, 122, 61, .22);
	box-shadow: var(--a-sh-2);
}
.a-card h3 { margin-bottom: .4em; }
.a-card p { color: var(--a-muted); font-size: .98rem; line-height: 1.75; }

.a-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-block-end: 18px;
	border-radius: 15px;
	background: linear-gradient(150deg, var(--a-tint), #dfeee4);
	color: var(--a-green-dark);
	box-shadow: inset 0 0 0 1px rgba(21, 122, 61, .12);
}
.a-card__icon .a-icon { width: 24px; height: 24px; }

.a-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid rgba(21, 122, 61, .16);
	border-radius: var(--a-r-pill);
	background: var(--a-tint);
	color: var(--a-green-dark);
	font-size: .84rem;
	font-weight: 700;
	line-height: 1.4;
}
.a-badge .a-icon { width: 16px; height: 16px; }
.a-badge--gold { background: #fbf4de; border-color: rgba(201, 162, 39, .3); color: #7a6112; }
.a-badge--light {
	background: rgba(255, 255, 255, .1);
	border-color: var(--a-line-light);
	color: #e5f2e9;
}

/* -------------------------------------------------------------------------
   Lists
   ---------------------------------------------------------------------- */

.a-checks { display: grid; gap: 12px; }
.a-checks li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--a-ink);
}
.a-checks .a-icon {
	width: 21px;
	height: 21px;
	margin-block-start: .3em;
	padding: 3px;
	border-radius: 50%;
	background: var(--a-tint);
	color: var(--a-green);
	box-shadow: inset 0 0 0 1px rgba(21, 122, 61, .16);
}
.a-bg-deep .a-checks li { color: rgba(233, 243, 236, .9); }
.a-bg-deep .a-checks .a-icon {
	background: rgba(46, 204, 113, .16);
	color: var(--a-green-bright);
	box-shadow: inset 0 0 0 1px rgba(46, 204, 113, .3);
}

/* Numbered editorial list (no cards) */
.a-numbers { display: grid; gap: 0; }
.a-numbers li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: baseline;
	padding-block: 16px;
	border-block-end: 1px solid var(--a-line);
	font-size: 1rem;
	line-height: 1.72;
	color: var(--a-ink);
}
.a-numbers li:last-child { border-block-end: 0; padding-block-end: 0; }
.a-numbers li:first-child { padding-block-start: 0; }
.a-numbers li::before {
	content: counter(a-num, decimal-leading-zero);
	counter-increment: a-num;
	font-size: .84rem;
	font-weight: 800;
	color: var(--a-gold);
}
.a-numbers { counter-reset: a-num; }

/* Chips */
.a-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.a-chips span,
.a-chips a {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--a-line-2);
	border-radius: var(--a-r-pill);
	background: var(--a-white);
	color: var(--a-ink);
	font-size: .92rem;
	font-weight: 600;
	transition: all .3s var(--a-ease);
}
.a-chips a:hover {
	border-color: var(--a-green);
	background: var(--a-tint);
	color: var(--a-green-dark);
}

/* -------------------------------------------------------------------------
   Stats
   ---------------------------------------------------------------------- */

.a-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.a-stat {
	padding: clamp(20px, 2.2vw, 30px) clamp(14px, 2vw, 30px);
	border-inline-end: 1px solid var(--a-line);
	text-align: center;
}
.a-stat:last-child { border-inline-end: 0; }
.a-stat strong {
	display: block;
	direction: ltr;
	unicode-bidi: isolate;
	font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.6rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--a-green-dark);
	font-feature-settings: "tnum";
}
.a-stat span {
	display: block;
	margin-block-start: 6px;
	font-size: .95rem;
	font-weight: 700;
	color: var(--a-ink);
}
.a-stat small {
	display: block;
	margin-block-start: 2px;
	font-size: .8rem;
	font-weight: 500;
	color: var(--a-muted);
}
.a-bg-deep .a-stat { border-color: var(--a-line-light); }
.a-bg-deep .a-stat strong { color: var(--a-gold-soft); }
.a-bg-deep .a-stat span { color: #fff; }
.a-bg-deep .a-stat small { color: rgba(233, 243, 236, .62); }

@media (max-width: 720px) {
	.a-stats { grid-template-columns: repeat(2, 1fr); }
	.a-stat:nth-child(2n) { border-inline-end: 0; }
	.a-stat:nth-child(-n+2) { border-block-end: 1px solid var(--a-line); }
	.a-bg-deep .a-stat:nth-child(-n+2) { border-block-end-color: var(--a-line-light); }
}

/* Single metric block */
.a-metric {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.a-metric strong {
	direction: ltr;
	unicode-bidi: isolate;
	font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--a-gold-soft);
}
.a-metric span { font-size: .98rem; font-weight: 600; }

/* -------------------------------------------------------------------------
   Process steps
   ---------------------------------------------------------------------- */

.a-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 28px);
}
.a-steps::before {
	content: "";
	position: absolute;
	inset-block-start: 27px;
	inset-inline: 8%;
	height: 2px;
	background: repeating-linear-gradient(to left, var(--a-line-2) 0 7px, transparent 7px 15px);
	z-index: 0;
}
.a-step { position: relative; z-index: 1; }
.a-step__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-block-end: 18px;
	border-radius: 18px;
	background: var(--a-white);
	border: 1px solid var(--a-line-2);
	color: var(--a-green-dark);
	font-size: .95rem;
	font-weight: 800;
	box-shadow: var(--a-sh-1);
	transition: transform .45s var(--a-ease), box-shadow .45s var(--a-ease), border-color .45s var(--a-ease);
}
.a-step:hover .a-step__dot {
	transform: translateY(-4px) rotateX(8deg);
	border-color: rgba(21, 122, 61, .3);
	box-shadow: var(--a-sh-2);
}
.a-step h3 { margin-bottom: .35em; font-size: 1.1rem; }
.a-step p { color: var(--a-muted); font-size: .96rem; line-height: 1.72; }
.a-step__num {
	display: block;
	margin-block-end: 7px;
	color: var(--a-gold);
	font-size: .82rem;
	font-weight: 800;
	line-height: 1;
}
.a-bg-cream .a-step__num,
.a-bg-sand .a-step__num { color: #a8851a; }

@media (max-width: 900px) {
	.a-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
	.a-steps::before { display: none; }
}
@media (max-width: 540px) {
	.a-steps { grid-template-columns: 1fr; gap: 22px; }
	.a-step {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 4px 16px;
		align-items: start;
	}
	.a-step__dot { grid-row: span 3; margin-block-end: 0; width: 48px; height: 48px; }
	.a-step__num { margin-block-end: 2px; }
}

/* -------------------------------------------------------------------------
   FAQ — editorial accordion, no giant white boxes
   ---------------------------------------------------------------------- */

.a-faq { border-block-start: 1px solid var(--a-line-2); }
.a-faq__item { border-block-end: 1px solid var(--a-line-2); }
.a-faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 22px 0;
	text-align: start;
	font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
	font-weight: 700;
	line-height: 1.55;
	color: var(--a-ink);
	transition: color .3s var(--a-ease);
}
.a-faq__q > span:first-child { flex: 1; }
.a-faq__q:hover { color: var(--a-green); }
.a-faq__sign {
	position: relative;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--a-line-2);
	transition: all .35s var(--a-ease);
}
.a-faq__sign::before,
.a-faq__sign::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 13px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(50%, -50%);
	transition: transform .35s var(--a-ease), opacity .35s var(--a-ease);
}
html[dir="ltr"] .a-faq__sign::before,
html[dir="ltr"] .a-faq__sign::after { transform: translate(-50%, -50%); }
.a-faq__sign::after { transform: translate(50%, -50%) rotate(90deg); }
html[dir="ltr"] .a-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.a-faq__q[aria-expanded="true"] { color: var(--a-green-dark); }
.a-faq__q[aria-expanded="true"] .a-faq__sign {
	background: var(--a-green-dark);
	border-color: var(--a-green-dark);
	color: #fff;
}
.a-faq__q[aria-expanded="true"] .a-faq__sign::after { transform: translate(50%, -50%) rotate(0deg); opacity: 0; }
html[dir="ltr"] .a-faq__q[aria-expanded="true"] .a-faq__sign::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.a-faq__a {
	overflow: hidden;
	max-height: 0;
	transition: max-height .5s var(--a-ease);
}
.a-faq__a > div {
	padding-block-end: 24px;
	padding-inline-end: 50px;
	color: var(--a-muted);
	font-size: 1rem;
	line-height: 1.85;
}
@media (max-width: 640px) {
	.a-faq__a > div { padding-inline-end: 0; }
}

/* -------------------------------------------------------------------------
   Testimonials
   ---------------------------------------------------------------------- */

.a-quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 26px);
}
.a-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(24px, 2.4vw, 34px);
	border: 1px solid var(--a-line);
	border-radius: var(--a-r-md);
	background: var(--a-white);
	box-shadow: var(--a-sh-1);
	transition: transform .5s var(--a-ease), box-shadow .5s var(--a-ease);
}
.a-quote:hover { transform: translateY(-6px); box-shadow: var(--a-sh-2); }
.a-quote__mark {
	color: var(--a-gold);
	opacity: .85;
}
.a-quote__mark .a-icon { width: 28px; height: 28px; }
.a-quote p {
	flex: 1;
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.85;
	color: var(--a-ink);
}
.a-quote__by {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--a-line);
	font-style: normal;
}
.a-quote__av {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--a-green), var(--a-green-deep));
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
}
.a-quote__by strong { display: block; font-size: .98rem; font-weight: 700; }
.a-quote__by small { display: block; color: var(--a-muted); font-size: .85rem; }

@media (max-width: 900px) { .a-quotes { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Final CTA band
   ---------------------------------------------------------------------- */

.a-cta { position: relative; overflow: hidden; color: #fff; }
.a-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.a-cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
}
.a-cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 120% at 82% 10%, rgba(46, 204, 113, .22), transparent 60%),
		linear-gradient(105deg, rgba(7, 45, 24, .96) 30%, rgba(10, 61, 32, .86) 62%, rgba(10, 61, 32, .55) 100%);
}
.a-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(26px, 4vw, 60px);
	align-items: center;
	padding-block: clamp(52px, 6vw, 88px);
}
.a-cta h2 { color: #fff; max-width: 18ch; }
.a-cta p { color: rgba(233, 243, 236, .84); max-width: 52ch; }
.a-cta__side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
	width: 100%;
	max-width: 400px;
	margin-inline-start: auto;
}
.a-cta__side .a-btn { width: 100%; }
.a-cta__note {
	display: flex;
	align-items: center;
	gap: 9px;
	color: rgba(233, 243, 236, .75);
	font-size: .9rem;
	font-weight: 600;
}
.a-cta__note .a-icon { color: var(--a-gold-soft); width: 18px; height: 18px; }

@media (max-width: 860px) {
	.a-cta__inner { grid-template-columns: 1fr; }
	.a-cta h2 { max-width: none; }
}

/* -------------------------------------------------------------------------
   Page hero (inner pages)
   ---------------------------------------------------------------------- */

.a-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(46px, 5.4vw, 86px) clamp(46px, 5vw, 78px);
	background:
		radial-gradient(78% 120% at 92% 0%, rgba(46, 204, 113, .10), transparent 62%),
		linear-gradient(180deg, var(--a-cream), #fdfcfa);
	border-block-end: 1px solid var(--a-line);
}
.a-page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(26px, 4vw, 60px);
	align-items: center;
}
.a-page-hero h1 { margin-bottom: .35em; }
.a-page-hero__crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 18px;
	font-size: .86rem;
	font-weight: 600;
	color: var(--a-muted);
}
.a-page-hero__crumb a { color: var(--a-muted); }
.a-page-hero__crumb a:hover { color: var(--a-green); }
.a-page-hero__crumb span[aria-current] { color: var(--a-green-dark); font-weight: 700; }
.a-page-hero__visual { position: relative; }
.a-page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 26px;
}

@media (max-width: 900px) {
	.a-page-hero__grid { grid-template-columns: 1fr; }
	.a-page-hero__visual { order: -1; }
}

/* -------------------------------------------------------------------------
   Split editorial layout
   ---------------------------------------------------------------------- */

.a-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4.2vw, 68px);
	align-items: center;
}
.a-split--media-first > *:first-child { order: -1; }
.a-split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.a-split--wide-media { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.a-split--top { align-items: start; }

@media (max-width: 900px) {
	.a-split,
	.a-split--wide-text,
	.a-split--wide-media { grid-template-columns: 1fr; gap: 30px; }
	.a-split--stack-media-first > *:last-child { order: -1; }
}

/* -------------------------------------------------------------------------
   Builder (Elementor) content wrapper
   ---------------------------------------------------------------------- */

.a-builder { padding-block: clamp(30px, 4vw, 56px); }
.a-builder > .elementor { margin-inline: auto; }