/* ==========================================================================
   Case Study template (Figma 1:26). Design coordinates: 1rem = 10px at 1728px.
   ========================================================================== */

/* ---------- 01 Hero – copy sits at 210px in this design ---------- */
.tpl-case-study .hero-box__copy { top: 21rem; }

/* ---------- 02 Project facts bar ---------- */
.cs-facts { position: relative; padding: 2.4rem; color: #fff; background: radial-gradient(86.4rem 10.68rem at 50% 0, rgba(249, 112, 20, .1), transparent), var(--canvas); }
.cs-facts__bar { display: flex; margin: 0; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cs-facts__item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .8rem; padding: 3.4rem 4rem; isolation: isolate; }
.cs-facts__item + .cs-facts__item { border-left: 1px solid var(--line-inv); }
/* a soft glow sweeps in under the hovered fact */
.cs-facts__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(249, 112, 21, 0), rgba(249, 112, 21, .14)); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-out); }
.cs-facts__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.cs-facts__item:hover::before { transform: none; }
.cs-facts__item:hover::after { transform: none; }
.cs-facts dt { font-weight: 600; font-size: var(--t-small); line-height: 2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted-inv); }
.cs-facts dd { margin: 0; font-family: var(--f-head); font-weight: 600; font-size: max(2.6rem, 19px); line-height: 3.2rem; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-facts dd.is-accent { color: var(--orange); }

/* ---------- 03 Story (three chapters) ---------- */
.cs-story { position: relative; padding: 13rem 0 13.2rem;
	background: radial-gradient(60.48rem 59.7rem at 25.92rem 179.1rem, rgba(249, 112, 20, .12), transparent),
		radial-gradient(60.48rem 69.65rem at 155.52rem 109.45rem, rgba(110, 194, 227, .18), transparent),
		radial-gradient(60.48rem 69.65rem at 17.28rem 29.85rem, rgba(249, 112, 20, .16), transparent), #fff; }
.cs-chapter { display: grid; grid-template-columns: 52rem 98.8rem; padding: 0 11rem; color: var(--text-strong); }
.cs-chapter__head { position: sticky; top: 12rem; align-self: start; display: flex; flex-direction: column; gap: 1.2rem; }
.cs-chapter__n { display: block; font-family: var(--f-head); font-weight: 600; font-size: 12rem; line-height: 13.2rem; letter-spacing: -.03em; color: var(--orange); opacity: .9;
	background: linear-gradient(90deg, var(--orange) 0 50%, rgba(249, 112, 21, .22) 50% 100%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cs-chapter__title { width: 44rem; font-size: 5.6rem; line-height: 6.2rem; letter-spacing: -.03em; color: var(--text-strong); }
.cs-chapter__body { display: flex; flex-direction: column; gap: 3.2rem; padding-top: 2.4rem; }
.cs-chapter__text { font-size: max(2rem, 16px); line-height: 3.4rem; opacity: .85; }
.cs-story__rule { height: 1px; margin: 7.2rem 11rem; border: 0; background: rgba(0, 0, 0, .1); }

.cs-chapter__img { position: relative; height: 42rem; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5.6rem), calc(100% - 5.6rem) 100%, 0 100%); }
.cs-chapter__img-in { position: absolute; inset: 0; overflow: hidden; }
.cs-chapter__img-in img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }

.cs-points { display: flex; gap: 1.6rem; }
.cs-points li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .6rem; padding: 2rem 2.2rem; border: 1px solid rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .5s, transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.cs-points li:hover { border-color: rgba(249, 112, 21, .5); transform: translateY(-.6rem); box-shadow: 0 2rem 4rem rgba(5, 20, 51, .08); }
.cs-points__label { font-weight: 600; font-size: var(--t-small); line-height: 2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.cs-points strong { font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 16px); line-height: 2.6rem; letter-spacing: -.01em; }

.cs-steps { display: flex; gap: 1.4rem; height: 23.2rem; counter-reset: step; }
.cs-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 2.4rem 2.2rem; overflow: hidden; background: var(--canvas); color: #fff; transition: transform .6s var(--ease-out); }
.cs-step::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.cs-step:hover { transform: translateY(-.8rem); }
.cs-step:hover::before { transform: none; }
.cs-step--accent { background: linear-gradient(135.55deg, #f97014 0%, #c74d05 71.43%); }
.cs-step--accent::before { background: #fff; }
.cs-step__icon { display: block; width: 3.6rem; height: 3.6rem; flex: none; transition: transform .6s var(--ease-out); }
.cs-step__icon img { width: 100%; height: 100%; }
.cs-step:hover .cs-step__icon { transform: rotate(-12deg) scale(1.1); }
.cs-step__label { font-weight: 600; font-size: var(--t-small); line-height: 2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); white-space: nowrap; }
.cs-step--accent .cs-step__label { color: #fff; }
.cs-step__title { font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 16px); line-height: 2.6rem; letter-spacing: -.01em; }
.cs-step__text { font-size: var(--t-small); line-height: 2rem; opacity: .75; }

.cs-callout { position: relative; height: 22.2rem; overflow: hidden; color: #fff; background: radial-gradient(49.4rem 15.54rem at 88.92rem 2.22rem, rgba(249, 112, 20, .3), transparent), var(--canvas); }
.cs-callout__quote { position: absolute; left: 4rem; top: 4rem; width: 62.8rem; font-family: var(--f-head); font-weight: 600; font-size: 3rem; line-height: 3.3rem; letter-spacing: -.02em; }
.cs-callout .cs-callout__btn { position: absolute; left: 4rem; top: 13.4rem; }
.cs-callout__big { position: absolute; left: 69.7rem; top: 3.4rem; font-family: var(--f-head); font-weight: 600; font-size: 14rem; line-height: 15.4rem; letter-spacing: -.03em; color: var(--orange); opacity: .9; white-space: nowrap; pointer-events: none; }

/* ---------- 04 Before / after ---------- */
.cs-compare { position: relative; padding: 14rem 0 15rem; color: #fff; background: radial-gradient(77.76rem 65.52rem at 50% 50%, rgba(249, 112, 20, .1), transparent), var(--canvas); }
.cs-compare__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cs-compare__head .eyebrow { margin-bottom: 1.2rem; }
.cs-compare__title { font-size: 6rem; line-height: 6.6rem; }
.ba { --pos: 50%; position: relative; height: 64rem; margin-top: 6.4rem; overflow: hidden; background: #fff; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ba__before, .ba__after { position: absolute; inset: 0; }
.ba__before img, .ba__after img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1.4s var(--ease-out); }
.ba--grey .ba__before img { filter: grayscale(1); }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba:hover .ba__before img, .ba:hover .ba__after img { transform: scale(1.03); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: #fff; pointer-events: none; }
.ba__handle { position: absolute; left: var(--pos); top: 50%; width: 7.2rem; height: 7.2rem; margin: -3.6rem 0 0 -3.6rem; border-radius: 50%; outline-offset: 4px; transition: transform .5s var(--ease-out); }
.ba__handle img { position: absolute; left: -3rem; top: -2rem; width: 13.2rem; height: 13.2rem; max-width: none; pointer-events: none; }
.ba:hover .ba__handle, .ba.is-dragging .ba__handle { transform: scale(1.12); }
.ba.is-dragging .ba__handle { transform: scale(.94); }
.ba__tag { position: absolute; top: 3.2rem; padding: .9rem 1.7rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 80px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--f-head); font-weight: 600; font-size: max(1.6rem, 13px); line-height: 2rem; letter-spacing: -.005em; color: #fff; pointer-events: none; transition: opacity .4s, transform .5s var(--ease-out); }
.ba__tag--before { left: 3.2rem; }
.ba__tag--after { right: 3.2rem; }
.ba.is-left .ba__tag--before { opacity: 0; transform: translateX(-1rem); }
.ba.is-right .ba__tag--after { opacity: 0; transform: translateX(1rem); }

/* ---------- 05 Results (orange) ---------- */
.cs-results { position: relative; padding: 13rem 0; color: #fff; overflow: hidden; background: radial-gradient(69.12rem 39.24rem at 146.88rem 0, rgba(255, 255, 255, .18), transparent), linear-gradient(153.22deg, #f97014 0%, #bd4705 71.43%); }
.cs-results__head { display: flex; justify-content: space-between; align-items: flex-end; }
.cs-results__eyebrow { margin-bottom: 1.4rem; font-weight: 600; font-size: var(--t-small); line-height: 1.6rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.cs-results__title { font-size: 6rem; line-height: 7.3rem; letter-spacing: -.025em; white-space: nowrap; }
.cs-results__text { width: 44rem; font-size: var(--t-body-lg); line-height: 2.2rem; color: rgba(255, 255, 255, .85); }
.cs-results__stats { display: flex; gap: 2rem; margin-top: 5.6rem; }
.cs-stat { flex: 1 1 0; min-width: 0; min-height: 23.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 3.2rem; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .5s, transform .6s var(--ease-out), border-color .5s; }
.cs-stat:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); transform: translateY(-.8rem); }
.cs-stat__num { display: flex; align-items: baseline; gap: .2rem; font-family: var(--f-head); font-weight: 600; font-size: 7.2rem; line-height: 7.6rem; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-stat__suffix { color: rgba(255, 255, 255, .7); }
.cs-stat__bar { display: block; width: 4.8rem; height: 3px; background: #fff; transition: width .7s var(--ease-out); }
.cs-stat:hover .cs-stat__bar { width: 9.6rem; }
.cs-stat__title { font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 16px); line-height: 1.21; }
.cs-stat__text { font-size: max(1.4rem, 13px); line-height: 1.26; color: rgba(255, 255, 255, .8); }

/* ---------- 06 Testimonial ---------- */
.cs-quote { position: relative; padding: 4rem 0 15rem; color: #fff; text-align: center;
	background: radial-gradient(51.84rem 26.24rem at 17.28rem 6.56rem, rgba(110, 194, 227, .08), transparent),
		radial-gradient(69.12rem 39.36rem at 50% 50%, rgba(249, 112, 20, .12), transparent), var(--canvas); }
.cs-quote__fig { margin: 0; }
.cs-quote__mark { display: block; height: 24.2rem; font-family: var(--f-head); font-weight: 600; font-size: 22rem; line-height: 24.2rem; letter-spacing: -.03em; color: var(--orange); }
.cs-quote__text { width: 100rem; max-width: 100%; margin: -3.2rem auto 0; font-family: var(--f-head); font-weight: 600; font-size: 4.4rem; line-height: 4.8rem; letter-spacing: -.025em; }
.cs-quote__text .w { transition: none; }
.cs-quote__cite { margin-top: 3.6rem; font-size: var(--t-body-lg); line-height: 2.8rem; color: var(--text-muted-inv); white-space: pre-wrap; }

/* ---------- 07 More projects ---------- */
.cs-more { position: relative; padding: 14rem 0 15rem; color: #fff; background: radial-gradient(60.48rem 52.32rem at 155.52rem 17.44rem, rgba(249, 112, 20, .1), transparent), var(--canvas); }
.cs-more .eyebrow { margin-bottom: 1.2rem; }
.cs-more__title { width: 80rem; font-size: 6rem; line-height: 6.6rem; }
.cs-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; margin-top: 6.4rem; }
.more-card { --cut: 2.4rem; position: relative; display: block; height: 42rem; overflow: hidden; isolation: isolate; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: clip-path .8s var(--ease-out); }
.more-card__img { position: absolute; inset: 0; z-index: -2; }
.more-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.more-card__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 20, 42, 0) 40%, rgba(6, 20, 42, .85) 100%); transition: opacity .6s; }
.more-card__shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(249, 112, 21, 0) 50%, rgba(249, 112, 21, .35) 100%); opacity: 0; transition: opacity .6s; }
.more-card__copy { position: absolute; left: 3.2rem; right: 3.2rem; bottom: 3.6rem; display: flex; flex-direction: column; gap: 1rem; transition: transform .7s var(--ease-out); }
.more-card__title { font-family: var(--f-head); font-weight: 600; font-size: max(2.6rem, 19px); line-height: 3.2rem; letter-spacing: -.015em; }
.more-card__meta { font-size: var(--t-small); line-height: 2rem; color: var(--text-muted-inv); }
.more-card__go { position: absolute; right: 2.4rem; top: 2.4rem; display: grid; place-items: center; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--orange); transform: scale(0) rotate(-45deg); transition: transform .6s var(--ease-out); }
.more-card__go svg { width: 1.8rem; height: 1.8rem; overflow: visible; }
.more-card:hover { --cut: 4.4rem; }
.more-card:hover .more-card__img img { transform: scale(1.08); }
.more-card:hover .more-card__shade::after { opacity: 1; }
.more-card:hover .more-card__copy { transform: translateY(-.8rem); }
.more-card:hover .more-card__go { transform: none; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 1023px) {
	.tpl-case-study .hero-box__copy { top: auto; }

	.cs-facts { padding: 1rem; }
	.cs-facts__bar { flex-wrap: wrap; }
	.cs-facts__item { flex: 1 1 50%; padding: 2.4rem 2rem; }
	.cs-facts__item + .cs-facts__item { border-left: 0; }
	.cs-facts__item:nth-child(even) { border-left: 1px solid var(--line-inv); }
	.cs-facts__item:nth-child(n+3) { border-top: 1px solid var(--line-inv); }
	.cs-facts__item:last-child:nth-child(odd) { flex-basis: 100%; }
	.cs-facts dd { font-size: 19px; line-height: 1.3; white-space: normal; }

	.cs-story { padding: 8rem 0; }
	.cs-chapter { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; padding: 0 2rem; }
	.cs-chapter__head { position: relative; top: auto; }
	.cs-chapter__n { font-size: 56px; line-height: 1; }
	.cs-chapter__title { width: auto; font-size: clamp(32px, 8.4vw, 48px); line-height: 1.1; }
	.cs-chapter__body { padding-top: 0; }
	.cs-chapter__text { font-size: 17px; line-height: 1.7; }
	.cs-story__rule { margin: 5.6rem 2rem; }
	.cs-chapter__img { height: auto; aspect-ratio: 988 / 420; min-height: 22rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2rem), calc(100% - 3.2rem) 100%, 0 100%); }
	.cs-points { flex-direction: column; gap: 1rem; }
	.cs-steps { display: grid; grid-template-columns: 1fr 1fr; height: auto; gap: 1rem; }
	.cs-step { min-height: 20rem; padding: 2rem 1.8rem; }
	.cs-callout { height: auto; padding: 3.2rem 2.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
	.cs-callout__quote, .cs-callout .cs-callout__btn, .cs-callout__big { position: relative; left: auto; top: auto; width: auto; }
	.cs-callout__quote { font-size: 22px; line-height: 1.2; }
	.cs-callout__big { order: -1; font-size: 72px; line-height: 1; }

	.cs-compare { padding: 8rem 0; }
	.cs-compare__title { font-size: clamp(32px, 8.4vw, 48px); line-height: 1.1; }
	.ba { height: auto; aspect-ratio: 4 / 3; margin-top: 4rem; }
	.ba__handle { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
	.ba__handle img { left: -23px; top: -16px; width: 102px; height: 102px; }
	.ba__tag { top: 1.6rem; }
	.ba__tag--before { left: 1.6rem; }
	.ba__tag--after { right: 1.6rem; }

	.cs-results { padding: 8rem 0; }
	.cs-results__head { flex-direction: column; align-items: flex-start; gap: 2rem; }
	.cs-results__title { font-size: clamp(34px, 9vw, 52px); line-height: 1.15; white-space: normal; }
	.cs-results__text { width: auto; line-height: 1.6; }
	.cs-results__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 4rem; }
	.cs-stat { min-height: 0; padding: 2.4rem 2rem; }
	.cs-stat__num { font-size: clamp(36px, 10vw, 56px); line-height: 1.05; }

	.cs-quote { padding: 2rem 2rem 8rem; }
	.cs-quote__mark { height: 15rem; font-size: 160px; line-height: 1.1; }
	.cs-quote__text { margin-top: -2rem; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.2; }

	.cs-more { padding: 8rem 0; }
	.cs-more__title { width: auto; font-size: clamp(32px, 8.4vw, 48px); line-height: 1.1; }
	.cs-more__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-top: 4rem; }
	.more-card { height: auto; aspect-ratio: 425 / 420; max-height: 46rem; }
}

@media (max-width: 600px) {
	.cs-facts__item { flex-basis: 100%; }
	.cs-facts__item:nth-child(even) { border-left: 0; }
	.cs-facts__item:nth-child(n+2) { border-top: 1px solid var(--line-inv); }
	.cs-steps, .cs-results__stats { grid-template-columns: minmax(0, 1fr); }
}