/**
 * Case Study (2026) template.
 *
 * Section styling is inline in the partials, ported 1:1 from the design.
 * This sheet holds the design's own <style> block (scoped to .csl), the hover
 * states it expressed as style-hover attributes, and the resets that keep
 * bb-theme's element styles out.
 */

/* ---------- Design globals, scoped ---------- */
.csl { background: #ffffff; color: #222222; font-family: "Open Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; --csl-top: 0px; }
.csl *, .csl *::before, .csl *::after { box-sizing: border-box; }
.csl h1, .csl h2, .csl h3, .csl h4, .csl h5 { font-family: "Poppins", system-ui, sans-serif; margin: 0; text-wrap: balance; }
.csl p { margin: 0; text-wrap: pretty; }
.csl a { color: #1b6493; text-decoration: none; }
.csl a:hover { color: #13a89e; }
.csl summary::-webkit-details-marker { display: none; }
.csl summary::marker { content: ""; }
.csl details[open] > summary span:last-child { color: #fff; background: #1b6493; border-color: #1b6493; }
.csl details[open] > summary span:last-child::after { content: "−"; color: #fff; }
.csl details:not([open]) > summary span:last-child::after { content: "+"; }
html:has(.csl) { interpolate-size: allow-keywords; scroll-behavior: smooth; }
.csl details[name="faq"] > summary span:last-child { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.csl details[name="faq"][open] > summary span:last-child { transform: rotate(180deg); }
.csl details[name="faq"]::details-content {
	block-size: 0;
	overflow: clip;
	opacity: 0;
	transition: block-size 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease, content-visibility 0.32s allow-discrete;
}
.csl details[name="faq"][open]::details-content { block-size: auto; opacity: 1; }
@supports not (interpolate-size: allow-keywords) {
	.csl details[name="faq"][open] > div { animation: faqReveal 0.3s cubic-bezier(0.32, 0.72, 0, 1) both; }
}

/* Timeline rail: hidden until drawn — only when JS is there to draw it */
.csl-js #timeline [data-rail] { transform: scaleX(0); transform-origin: left center; }
.csl-js #timeline [data-dot] { transform: scale(0.35); opacity: 0; }
.csl-js #timeline[data-drawn="1"] [data-dot] { animation: railDot 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; }
.csl-js #timeline[data-drawn="1"] [data-rail] { animation: railDraw 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.csl #timeline-steps { grid-template-columns: repeat(var(--csl-steps, 4), minmax(0, 1fr)); }
@media (max-width: 1080px) {
	.csl #timeline-steps { grid-template-columns: 1fr; }
	.csl #timeline-steps [data-rail] { display: none; }
	.csl #timeline-steps > div { position: relative; padding-left: 36px; padding-bottom: 34px; }
	.csl #timeline-steps > div::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 0; width: 2px; background: #58c2e3; }
	.csl #timeline-steps > div:last-child { padding-bottom: 0; }
	.csl #timeline-steps > div:last-child::before { display: none; }
	.csl #timeline-steps > div > div:first-child { position: absolute; left: 0; top: 0; }
	.csl #timeline-steps > div > div:last-child { padding-top: 0; padding-right: 0; }
}
@keyframes railDraw { to { transform: scaleX(1); } }
@keyframes railDot { to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.csl-js #timeline [data-rail] { transform: scaleX(1); }
	.csl-js #timeline [data-dot] { transform: none; opacity: 1; }
	.csl-js #timeline[data-drawn="1"] [data-rail], .csl-js #timeline[data-drawn="1"] [data-dot] { animation: none; }
}
@keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Page Performance ticks start low and rise when scrolled into view (JS) */
.csl-js .csl [data-tick] { transform: scaleY(0.18); opacity: 0.35; }

/* ---------- Sticky pieces sit below the site header (offset set by JS) ---------- */
.csl .csl-subnav { top: var(--csl-top); }
.csl .csl-faq-photo { top: calc(var(--csl-top) + 78px); }
.csl section[id] { scroll-margin-top: calc(var(--csl-top) + 64px); }

/* ---------- Hover states (style-hover in the design) ---------- */
.csl .csl-h-lift3:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,58,85,0.10); }
.csl .csl-h-lift4:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 30px rgba(15,58,85,0.12) !important; }
.csl .csl-h-card:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 30px rgba(15,58,85,0.12) !important; border-color: var(--csl-accent) !important; }
.csl .csl-h-faq:hover { color: #1b6493 !important; }
.csl .csl-h-btn-dark:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(0,0,0,0.3) !important; color: #ffffff !important; }
.csl .csl-h-btn-outline:hover { background: #0f3a55 !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(15,58,85,0.24) !important; }
.csl .csl-h-btn-sky:hover { background: #58c2e3 !important; color: #0f3a55 !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px rgba(0,0,0,0.24) !important; }
.csl .csl-h-submit:hover { background: #7FD3EE !important; }

/* ---------- bb-theme resets — element styles the inline design styles don't cover ---------- */
.csl h1, .csl h2, .csl h3, .csl h4, .csl h5 { color: inherit; text-transform: none; }
.csl li { padding-bottom: 0; }
/* bb-theme-child/style.css sets li { padding-bottom: 0 !important } — restore the audit steps' spacing */
.csl [data-audit-list] > li:not(:last-child) { padding-bottom: 20px !important; }
.csl ul, .csl ol { margin: 0; }
.csl blockquote { border: 0; padding: 0; background: none; font-style: normal; quotes: none; }
.csl figure { margin: 0; }
.csl img { max-width: 100%; }
.csl button { line-height: normal; text-transform: none; letter-spacing: normal; text-shadow: none; box-shadow: none; }
.csl input[type="text"] { height: auto; box-shadow: none; }