/* SOL section rhythm: dividers between sections, textured and dark bands, section heads and
   scroll-in animations. Applies to every SOL page; the home page uses all of it. */

/* ---------- Section heads ---------- */
.sol-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.sol-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sol-harvest), #fbbf24); flex-shrink: 0; }
.sol-head--center .sol-eyebrow::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(270deg, var(--sol-harvest), #fbbf24); flex-shrink: 0; }
.sol-title { letter-spacing: -.02em; }
.sol-rule { width: 96px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sol-harvest), #fbbf24 60%, rgba(251, 191, 36, 0)); transform-origin: left center; }
.sol-head--center .sol-rule { transform-origin: center; background: linear-gradient(90deg, rgba(251, 191, 36, 0), var(--sol-harvest) 30%, #fbbf24 70%, rgba(251, 191, 36, 0)); }

/* The intro sits under the title, at a comfortable reading width. */
.sol-head .sol-intro { max-width: 680px; }
.sol-head--center .sol-intro { margin-left: auto; margin-right: auto; }

/* ---------- Dividers ---------- */
/* Two sections in a row with the same light background get a divider instead of running together. */
.sol-section.sol-bg-white + .sol-section.sol-bg-white,
.sol-section.sol-bg-chalk + .sol-section.sol-bg-chalk { padding-top: 72px; }
@media (min-width: 768px) {
	.sol-section.sol-bg-white + .sol-section.sol-bg-white,
	.sol-section.sol-bg-chalk + .sol-section.sol-bg-chalk { padding-top: 88px; }
}
.sol-section.sol-bg-white + .sol-section.sol-bg-white::before,
.sol-section.sol-bg-chalk + .sol-section.sol-bg-chalk::before {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: min(1216px, calc(100% - 2 * var(--sol-gutter))); height: 1px;
	background: linear-gradient(90deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .12) 18%, rgba(217, 119, 6, .55) 50%, rgba(15, 23, 42, .12) 82%, rgba(15, 23, 42, 0));
}
.sol-section.sol-bg-white + .sol-section.sol-bg-white::after,
.sol-section.sol-bg-chalk + .sol-section.sol-bg-chalk::after {
	content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
	transform: rotate(45deg); border: 2px solid var(--sol-harvest); background-color: #fff; border-radius: 2px;
}
.sol-section.sol-bg-chalk + .sol-section.sol-bg-chalk::after { background-color: var(--sol-chalk); }

/* ---------- Light grey bands ---------- */
.sol-section.sol-bg-chalk {
	background-color: #f6f8fb;
	background-image: radial-gradient(rgba(15, 23, 42, .075) 1px, transparent 1.3px);
	background-size: 24px 24px;
	background-position: center top;
	box-shadow: inset 0 1px 0 rgba(15, 23, 42, .05), inset 0 -1px 0 rgba(15, 23, 42, .05);
}
.sol-section.sol-bg-chalk + .sol-section.sol-bg-chalk { box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .05); }
.sol-section.sol-bg-chalk .sol-card:not(.sol-card--dark):not(.sol-card--plain) { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* ---------- Dark bands ---------- */
.sol-main > .sol-section.sol-bg-ink { isolation: isolate; overflow: hidden; }
/* Glows are kept away from any edge that touches another dark section, and every dark section
   gets the same grain, so a run of dark sections reads as one seamless band with no visible joins. */
.sol-main > .sol-section.sol-bg-ink::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(600px 360px at 88% 0%, rgba(217, 119, 6, .2), transparent 70%),
		radial-gradient(500px 320px at 0% 100%, rgba(59, 130, 246, .09), transparent 70%);
}
.sol-main > .sol-section.sol-bg-ink::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: var(--sol-grain); background-size: 200px 200px;
}
/* First of a run: top glow only (its bottom edge joins the next dark section). */
.sol-main > .sol-section.sol-bg-ink:has(+ .sol-section.sol-bg-ink)::before { background: radial-gradient(600px 360px at 88% 0%, rgba(217, 119, 6, .2), transparent 70%); }
/* Middle of a run: no glow. */
.sol-main > .sol-section.sol-bg-ink + .sol-section.sol-bg-ink::before { background: none; }
/* Last of a run: a soft glow at the bottom only. */
.sol-main > .sol-section.sol-bg-ink + .sol-section.sol-bg-ink:not(:has(+ .sol-section.sol-bg-ink))::before { background: radial-gradient(520px 320px at 0% 100%, rgba(59, 130, 246, .08), transparent 70%); }
/* Breathing room between joined dark sections, without a visible edge. The 1px overlap stops the white
   page showing through as a hairline when section heights land on fractional pixels. */
.sol-main > .sol-section.sol-bg-ink + .sol-section.sol-bg-ink { padding-top: 8px; margin-top: -1px; }

/* Curved top edge where a light section meets a dark band. */
.sol-main > .sol-section:not(.sol-bg-ink):not(.sol-hero) + .sol-section.sol-bg-ink { border-radius: 44px 44px 0 0; margin-top: -1px; }
@media (max-width: 767px) { .sol-main > .sol-section:not(.sol-bg-ink):not(.sol-hero) + .sol-section.sol-bg-ink { border-radius: 28px 28px 0 0; } }

/* ---------- Call-to-action boxes ---------- */
.sol-cta__box { overflow: hidden; isolation: isolate; }
.sol-cta--dark .sol-cta__box::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(420px 260px at 100% 0%, rgba(217, 119, 6, .28), transparent 70%), radial-gradient(380px 240px at 0% 100%, rgba(251, 191, 36, .08), transparent 70%);
}
.sol-cta--light .sol-cta__box { background: linear-gradient(135deg, #fff 0%, #fffbeb 100%); }

/* ---------- Cards ---------- */
.sol-card { will-change: auto; }
.sol-card:hover { transform: translateY(-4px); }
/* Hover: a soft amber glow follows the cursor inside the card, and the border warms up around it.
   (sol.js sets --mx / --my; without it the glow sits in the top-right corner.) */
.sol-card--bordered, .sol-card--numbered, .sol-card--tagged, .sol-card--feature { isolation: isolate; }
.sol-card--bordered::after, .sol-card--numbered::after, .sol-card--tagged::after, .sol-card--feature::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(260px circle at var(--mx, 85%) var(--my, 0%), rgba(251, 191, 36, .16), rgba(251, 191, 36, .05) 45%, transparent 70%);
	opacity: 0; transition: opacity .45s ease;
}
.sol-card--bordered::before, .sol-card--numbered::before, .sol-card--tagged::before, .sol-card--feature::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
	background: radial-gradient(220px circle at var(--mx, 85%) var(--my, 0%), rgba(217, 119, 6, .85), rgba(217, 119, 6, 0) 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0; transition: opacity .45s ease;
}
.sol-card--bordered:hover::after, .sol-card--numbered:hover::after, .sol-card--tagged:hover::after, .sol-card--feature:hover::after,
.sol-card--bordered:hover::before, .sol-card--numbered:hover::before, .sol-card--tagged:hover::before, .sol-card--feature:hover::before { opacity: 1; }

/* ---------- Scroll-in animations ----------
   Content is never hidden by default. sol.js adds .sol-in to an element only at the moment it is
   about to scroll into view; the animation then plays once. If the script is delayed, blocked or
   never runs, or this rule is stripped by an optimisation plugin, everything simply shows. */
@media (prefers-reduced-motion: no-preference) {
	.sol-in { animation: sol-in-up .75s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--sol-d, 0) * 90ms); }
	.sol-in.sol-in--left { animation-name: sol-in-left; }
	.sol-in.sol-in--right { animation-name: sol-in-right; }
	.sol-in.sol-in--zoom { animation-name: sol-in-zoom; }
	.sol-head.sol-in .sol-rule { animation: sol-in-rule 1s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
}
@keyframes sol-in-up { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes sol-in-left { from { opacity: 0; transform: translate3d(-36px, 0, 0); } }
@keyframes sol-in-right { from { opacity: 0; transform: translate3d(36px, 0, 0); } }
@keyframes sol-in-zoom { from { opacity: 0; transform: scale(.96); } }
@keyframes sol-in-rule { from { transform: scaleX(0); } }

/* Scroll progress bar under the header. */
.sol-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: left; transform: scaleX(var(--sol-progress, 0)); background: linear-gradient(90deg, var(--sol-harvest), #fbbf24); pointer-events: none; }

/* ---------- Brighter sections (v2.7) ---------- */
/* Grey bands: a light, warm wash with soft colour glows instead of flat grey. */
.sol-section.sol-bg-chalk {
	background-color: #f8fafc;
	background-image:
		radial-gradient(700px 380px at 100% 0%, rgba(251, 191, 36, .14), transparent 70%),
		radial-gradient(640px 360px at 0% 100%, rgba(56, 189, 248, .08), transparent 70%),
		radial-gradient(rgba(15, 23, 42, .055) 1px, transparent 1.3px),
		linear-gradient(180deg, #fffdf8 0%, #f8fafc 45%, #f6f8fb 100%);
	background-size: auto, auto, 24px 24px, auto;
	background-position: 0 0, 0 0, center top, 0 0;
}
/* Cards: crisp white with a soft lift, so they stand out from the band. */
.sol-card--bordered, .sol-card--numbered, .sol-card--tagged, .sol-card--feature, .sol-card--post { border-color: #e6ebf2; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 30px -24px rgba(15, 23, 42, .35); }
.sol-card:hover { box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 44px -24px rgba(217, 119, 6, .45); }
.sol-card__icon { background: linear-gradient(135deg, #fff7e0, #fde68a); color: var(--sol-harvest-dark); box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .15); }
/* Photo banner: the picture shows through on the right, text stays readable on the left. */
.sol-cta--image .sol-cta__box::after { background: linear-gradient(100deg, rgba(15, 23, 42, .9) 0%, rgba(15, 23, 42, .62) 50%, rgba(217, 119, 6, .28) 100%); }
.sol-cta--image .sol-cta__bg { filter: saturate(1.15) brightness(1.05); transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.sol-cta--image .sol-cta__box:hover .sol-cta__bg { transform: scale(1.06); }
.sol-cta--image .sol-cta__text { color: rgba(255, 255, 255, .88); }
/* Dark bands: brighter text and cards so nothing looks washed out. */
.sol-bg-ink .sol-intro, .sol-bg-ink .sol-muted, .sol-cta--dark .sol-cta__text { color: rgba(255, 255, 255, .82); }
.sol-card--dark { background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: rgba(255, 255, 255, .14); }
.sol-card--dark .sol-card__text { color: rgba(255, 255, 255, .8); }
.sol-card--dark:hover { border-color: rgba(251, 191, 36, .45); box-shadow: 0 20px 40px -24px rgba(217, 119, 6, .6); }
.sol-bg-ink .sol-checks, .sol-bg-ink .sol-checks li { color: rgba(255, 255, 255, .88); }
/* Pills: white chips with an amber dot. */
.sol-pills li { background: #fff; color: var(--sol-ink-2); border-color: #e6ebf2; box-shadow: 0 6px 16px -14px rgba(15, 23, 42, .5); display: inline-flex; align-items: center; gap: 8px; }
.sol-pills li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #fbbf24, var(--sol-harvest)); flex-shrink: 0; }
.sol-bg-amber .sol-pills li::before { display: none; }
/* Light call-to-action: warm glow instead of plain white. */
.sol-cta--light .sol-cta__box { background: radial-gradient(500px 260px at 100% 0%, rgba(251, 191, 36, .22), transparent 70%), linear-gradient(135deg, #fff 0%, #fffbeb 100%); border-color: rgba(217, 119, 6, .3); box-shadow: 0 18px 40px -30px rgba(217, 119, 6, .6); }
/* Body text a touch darker for crisper contrast on light backgrounds. */
.sol-bg-white .sol-intro, .sol-bg-chalk .sol-intro, .sol-card:not(.sol-card--dark) .sol-card__text { color: #556579; }
.sol-card:not(.sol-card--dark):hover .sol-card__icon { color: #fff; box-shadow: inset 0 0 0 30px var(--sol-harvest), 0 8px 18px -10px rgba(217, 119, 6, .75); }
.sol-card__icon { transition: color .35s ease, box-shadow .45s cubic-bezier(.2, .8, .2, 1); }
.sol-card__num { color: transparent; -webkit-text-stroke: 1.5px rgba(217, 119, 6, .35); background: linear-gradient(180deg, rgba(251, 191, 36, .22), rgba(251, 191, 36, 0)); -webkit-background-clip: text; background-clip: text; }
.sol-card:hover .sol-card__num { color: transparent; -webkit-text-stroke-color: var(--sol-harvest); background-image: linear-gradient(180deg, rgba(251, 191, 36, .55), rgba(251, 191, 36, .1)); }

/* ---------- Timeline steps: light icons and a calm light that travels down the line ---------- */
.sol-steps--timeline .sol-step__marker {
	position: relative; color: var(--sol-harvest-dark);
	background: linear-gradient(135deg, #fffbeb, #fde68a);
	box-shadow: 0 0 0 6px rgba(251, 191, 36, .12), inset 0 0 0 1px rgba(217, 119, 6, .2);
}
.sol-steps--timeline .sol-step__marker .sol-icon { width: 19px; height: 19px; }
.sol-steps--timeline .sol-step::before {
	width: 2px; border-radius: 2px;
	background-color: rgba(217, 119, 6, .12);
	background-image: linear-gradient(180deg, rgba(251, 191, 36, 0) 0%, rgba(251, 191, 36, 0) 34%, rgba(251, 191, 36, .45) 45%, rgba(217, 119, 6, .6) 50%, rgba(251, 191, 36, .45) 55%, rgba(251, 191, 36, 0) 66%, rgba(251, 191, 36, 0) 100%);
	background-size: 100% 300%; background-repeat: no-repeat; background-position: 0 100%;
}
.sol-bg-ink .sol-steps--timeline .sol-step::before, .sol-steps--timeline.sol-bg-ink .sol-step::before { background-color: rgba(255, 255, 255, .12); }
/* One light at a time: each line segment takes 1.8s, the cycle is 9s, so there's a pause before it starts again. */
@media (prefers-reduced-motion: no-preference) {
	.sol-steps--timeline .sol-step::before { animation: sol-tl-flow 9s ease-in-out infinite; animation-delay: var(--sol-tl, 0s); }
	.sol-steps--timeline .sol-step__marker { animation: sol-tl-glow 9s ease-in-out infinite; animation-delay: var(--sol-tl, 0s); }
}
.sol-steps--timeline .sol-step:nth-child(2) { --sol-tl: 1.8s; }
.sol-steps--timeline .sol-step:nth-child(3) { --sol-tl: 3.6s; }
.sol-steps--timeline .sol-step:nth-child(4) { --sol-tl: 5.4s; }
.sol-steps--timeline .sol-step:nth-child(5) { --sol-tl: 7.2s; }
.sol-steps--timeline .sol-step:nth-child(n+6) { --sol-tl: 9s; }
@keyframes sol-tl-flow { 0% { background-position: 0 100%; } 20%, 100% { background-position: 0 0; } }
/* The icon only warms slightly as the light arrives: same ring size, a touch more colour. */
@keyframes sol-tl-glow {
	0%, 14%, 100% { box-shadow: 0 0 0 6px rgba(251, 191, 36, .12), inset 0 0 0 1px rgba(217, 119, 6, .2); }
	5% { box-shadow: 0 0 0 6px rgba(251, 191, 36, .24), inset 0 0 0 1px rgba(217, 119, 6, .35); }
}

/* ---------- Plain cards (number + title + text under a top line) ---------- */
.sol-card--plain { padding: 30px 28px 28px; border-top: 2px solid rgba(217, 119, 6, .28); border-radius: 0 0 18px 18px; background: transparent; transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, transform .35s ease; }
.sol-card--plain .sol-card__num { margin-bottom: 6px; }
.sol-card--plain:hover { background: #fff; border-top-color: var(--sol-harvest); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -26px rgba(217, 119, 6, .45); transform: translateY(-3px); }
.sol-bg-chalk .sol-card--plain { background: rgba(255, 255, 255, .55); }
.sol-bg-chalk .sol-card--plain:hover { background: #fff; }
@media (max-width: 639px) { .sol-card--plain { padding: 24px 20px; } }

/* ---------- Step cards: same hover family as the service cards ---------- */
.sol-steps--cards .sol-step,
.sol-steps--numbered .sol-step-group:not(.sol-step-group--boxed) .sol-step {
	position: relative; isolation: isolate; border-color: #e6ebf2;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 30px -24px rgba(15, 23, 42, .35);
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.sol-steps--cards .sol-step:hover,
.sol-steps--numbered .sol-step-group:not(.sol-step-group--boxed) .sol-step:hover {
	transform: translateY(-4px); border-color: rgba(217, 119, 6, .3);
	box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 44px -24px rgba(217, 119, 6, .45);
}
.sol-steps--cards .sol-step::after,
.sol-steps--numbered .sol-step-group:not(.sol-step-group--boxed) .sol-step::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(260px circle at var(--mx, 85%) var(--my, 0%), rgba(251, 191, 36, .16), rgba(251, 191, 36, .05) 45%, transparent 70%);
	opacity: 0; transition: opacity .45s ease;
}
.sol-steps--cards .sol-step:hover::after,
.sol-steps--numbered .sol-step-group:not(.sol-step-group--boxed) .sol-step:hover::after { opacity: 1; }
.sol-steps--cards .sol-step__marker,
.sol-steps--numbered .sol-step-group:not(.sol-step-group--boxed) .sol-step__marker {
	background: linear-gradient(135deg, #fff7e0, #fde68a); color: var(--sol-harvest-dark);
	box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .15);
	transition: color .35s ease, box-shadow .45s cubic-bezier(.2, .8, .2, 1);
}
.sol-steps--cards .sol-step:hover .sol-step__marker,
.sol-steps--numbered .sol-step-group:not(.sol-step-group--boxed) .sol-step:hover .sol-step__marker {
	color: #fff; box-shadow: inset 0 0 0 30px var(--sol-harvest), 0 8px 18px -10px rgba(217, 119, 6, .75);
}
.sol-steps--cards .sol-step__title { transition: color .3s ease; }
.sol-steps--cards .sol-step:hover .sol-step__title { color: var(--sol-harvest-dark); }

/* ---------- CTA "soft": a centred, warm invitation for page endings ---------- */
.sol-cta--soft { padding: 64px 0 88px; }
.sol-cta--soft .sol-cta__box {
	max-width: 900px; margin: 0 auto; padding: 56px 24px; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0;
	border-radius: 32px; border: 1px solid rgba(217, 119, 6, .16);
	background: radial-gradient(60% 70% at 50% 0%, rgba(251, 191, 36, .2), transparent 70%), linear-gradient(180deg, #fffaf0 0%, #fff 70%);
	box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .35), 0 1px 2px rgba(15, 23, 42, .04);
}
@media (min-width: 768px) { .sol-cta--soft .sol-cta__box { padding: 72px 64px; } }
.sol-cta--soft .sol-cta__box::before { content: ""; position: absolute; left: 50%; top: -220px; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; border: 1px dashed rgba(217, 119, 6, .18); pointer-events: none; }
.sol-cta--soft .sol-cta__box::after { content: ""; position: absolute; left: 50%; top: -150px; width: 380px; height: 380px; margin-left: -190px; border-radius: 50%; border: 1px solid rgba(217, 119, 6, .1); pointer-events: none; }
.sol-cta--soft .sol-cta__content { max-width: 620px; display: flex; flex-direction: column; align-items: center; }
.sol-cta--soft .sol-eyebrow { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #fef3c7; color: var(--sol-harvest-dark); }
.sol-cta--soft .sol-cta__title { margin-top: 18px; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; letter-spacing: -.025em; }
.sol-cta--soft .sol-cta__text { max-width: 520px; margin-top: 16px; font-size: 1.06rem; line-height: 1.65; color: var(--sol-mist); }
.sol-cta--soft .sol-checks--inline { justify-content: center; gap: 10px; margin-top: 24px; }
.sol-cta--soft .sol-checks--inline li { align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--sol-border); font-size: .88rem; font-weight: 600; color: var(--sol-ink-2); box-shadow: 0 4px 12px -10px rgba(15, 23, 42, .4); }
.sol-cta--soft .sol-checks__icon { margin-top: 0; width: 16px; height: 16px; color: var(--sol-green); }
.sol-cta--soft .sol-cta__buttons { justify-content: center; margin-top: 32px; }
.sol-cta--soft .sol-btn--light { background: #fff; color: var(--sol-ink) !important; border-color: rgba(15, 23, 42, .15); }
.sol-cta--soft .sol-btn--light:hover { border-color: var(--sol-ink); }
.sol-cta--soft .sol-cta__note { margin-top: 18px; text-align: center; }