/* ==========================================================================
   How We Work (Figma frame 1:22) – design coordinates: 1rem = 10px at 1728px
   Hero, FAQ and Transform sections are shared (main.css).
   ========================================================================== */

/* Shared head row used by "Our process" + "Typical timeline":
   eyebrow + heading on the left, muted text starting at x=1074 on the right. */
.hww-head { display: flex; justify-content: space-between; align-items: flex-start; }
.hww-head .eyebrow { margin-bottom: 1.2rem; }
.hww-head__text { width: 46rem; margin-top: 6rem; line-height: 2.8rem; }
.hww-head--tl .hww-head__text { margin-top: 5rem; }

/* ---------- 02 Split cards ---------- */
.hww-split { padding: 16rem 0; overflow: hidden;
	background: radial-gradient(69.12rem 53.2rem at 138.24rem 38rem, rgba(110, 194, 227, .2), transparent),
		radial-gradient(60.48rem 53.2rem at 43.2rem 38rem, rgba(249, 112, 20, .18), transparent), #fff; }
.hww-split__grid { display: flex; justify-content: center; gap: 4rem; }
.split-card { position: relative; display: grid; grid-template-columns: 35.5rem 35.5rem; width: 71rem; height: 44rem; color: #fff; }

/* Left panel – cut top-left corner (35.5 × 61.6 from the Figma vector) */
.split-card__panel { position: relative; padding: 8rem 0 0 4.8rem; overflow: hidden; isolation: isolate;
	clip-path: polygon(3.55rem 0, 100% 0, 100% 100%, 0 100%, 0 6.16rem); }
.split-card--orange .split-card__panel { background: var(--orange); }
.split-card--navy .split-card__panel { background: radial-gradient(21.3rem 26.4rem at 7.1rem 8.8rem, rgba(249, 112, 20, .18), transparent), var(--canvas); }
/* Light sheen that sweeps across the panel on hover */
.split-card__panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%); transform: translateX(-100%); transition: transform 1.1s var(--ease-io); }
.split-card:hover .split-card__panel::after { transform: translateX(100%); }
.split-card__title { width: 27.5rem; font-size: 3.6rem; line-height: 4rem; letter-spacing: -.02em; }
.split-card__text { width: 26.5rem; margin-top: 2rem; font-size: var(--t-body); line-height: 2.4rem; opacity: .9; }

/* Right image – cut bottom-right corner (42.6 × 61.6) */
.split-card__media { position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 37.84rem, 31.24rem 100%, 0 100%); }
.split-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.2s var(--ease-out); }
.split-card:hover .split-card__media img { transform: scale(1.08); }
.split-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 15, 33, .55) 0%, rgba(5, 15, 33, 0) 50%); }
.split-card__n { position: absolute; left: 3.6rem; top: 3.2rem; font-family: var(--f-head); font-weight: 600; font-size: 5.2rem; line-height: 5.7rem; letter-spacing: -.03em; transition: transform .7s var(--ease-out), color .4s; }
.split-card:hover .split-card__n { transform: translateY(-.6rem); color: var(--orange); }
.split-card--orange:hover .split-card__n { color: #fff; }

/* ---------- 03 Our process ---------- */
.hww-process { position: relative; padding: 14rem 0 15rem; color: #fff;
	background: radial-gradient(51.84rem 58.4rem at 8.64rem 110.96rem, rgba(110, 194, 227, .08), transparent),
		radial-gradient(77.76rem 70.08rem at 86.4rem 35.04rem, rgba(249, 112, 20, .11), transparent), var(--canvas); }
.hww-process__line { position: relative; height: 2px; margin-top: 6rem; }
.hww-process__fill { position: absolute; inset: 0; background: linear-gradient(90deg, #f97014, rgba(249, 112, 20, .1)); transform-origin: left center; }
/* Dots sit 32px in from the left of each top-row card */
.hww-process__dot { position: absolute; top: -.6rem; left: calc(3.2rem + var(--i) * (100% + 2.4rem) / 3); width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--orange); }
.hww-process__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); opacity: 0; }
.hww-process__dot.is-on::after { animation: hww-ping 1.4s var(--ease-out); }
@keyframes hww-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }

.hww-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 2.8rem; }
.hww-step { position: relative; display: flex; flex-direction: column; height: 30rem; padding: 2.7rem 3.1rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; transition: background .6s var(--ease-out), border-color .6s var(--ease-out); }
/* Orange rule that draws across the top of the active / hovered step */
.hww-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.hww-step.is-active, .hww-step:hover { background: rgba(255, 255, 255, .12); }
.hww-step:hover { border-color: rgba(249, 112, 21, .45); }
.hww-step.is-active::before, .hww-step:hover::before { transform: scaleX(1); }
.hww-step__n { font-family: var(--f-head); font-weight: 600; font-size: 5.6rem; line-height: 6.2rem; letter-spacing: -.03em; color: var(--orange); transition: transform .7s var(--ease-out); }
.hww-step:hover .hww-step__n, .hww-step.is-active .hww-step__n { transform: translateX(.8rem); }
.hww-step__title { margin-top: 6.2rem; font-size: max(2.6rem, 19px); line-height: 3.2rem; letter-spacing: -.015em; }
.hww-step__text { margin-top: 1.2rem; font-size: var(--t-body); line-height: 2.4rem; color: var(--text-muted-inv); transition: color .5s; }
.hww-step:hover .hww-step__text, .hww-step.is-active .hww-step__text { color: rgba(255, 255, 255, .8); }

/* ---------- 04 What we need ---------- */
.hww-need { display: grid; grid-template-columns: 64rem 64rem; column-gap: 10rem; padding: 14rem 0 14rem 15.4rem; overflow: hidden;
	background: radial-gradient(60.48rem 46.6rem at 103.68rem 93.2rem, rgba(15, 51, 102, .08), transparent),
		radial-gradient(69.12rem 65.24rem at 146.88rem 27.96rem, rgba(110, 194, 227, .24), transparent),
		radial-gradient(60.48rem 65.24rem at 25.92rem 37.28rem, rgba(249, 112, 20, .22), transparent), #fff; }
.hww-need__media { margin-top: 12.6rem; }
.hww-need__img { width: 64rem; height: 40rem; overflow: hidden; }
.hww-need__img img { width: 100%; height: 100%; object-fit: cover; }
.hww-need__copy .eyebrow { margin-bottom: 1.6rem; }
.hww-need__title { width: 64rem; font-size: 6rem; line-height: 6.6rem; letter-spacing: -.03em; color: var(--text-strong); }
.hww-need__text { width: 58rem; margin: 2.2rem 0 3.2rem; font-size: var(--t-body-lg); line-height: 2.8rem; color: var(--text-strong); }
.need-list { width: 58rem; margin-bottom: 3.6rem; }
.need-list li { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.need-list li:first-child { border-top: 1px solid rgba(0, 0, 0, .12); }
.need-list__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.2rem 0; color: var(--text-strong); }
/* Orange underline that grows on hover */
.need-list__row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
a.need-list__row:hover::after { transform: scaleX(1); }
.need-list__copy { display: flex; flex-direction: column; gap: .4rem; transition: transform .6s var(--ease-out); }
a.need-list__row:hover .need-list__copy { transform: translateX(1rem); }
.need-list__title { font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 16px); line-height: 2.6rem; letter-spacing: -.01em; }
.need-list__text { width: 46rem; font-size: var(--t-small); line-height: 2rem; }
.need-list__arrow { position: relative; display: block; width: 2.6rem; height: 3.2rem; overflow: hidden; flex: none; font-family: var(--f-head); font-weight: 600; font-size: max(2.6rem, 19px); line-height: 3.2rem; color: var(--orange); }
.need-list__arrow span { position: absolute; inset: 0; transition: transform .55s var(--ease-out); }
.need-list__arrow span + span { transform: translateX(-120%); }
a.need-list__row:hover .need-list__arrow span:first-child { transform: translateX(120%); }
a.need-list__row:hover .need-list__arrow span + span { transform: none; }

/* ---------- 05 Typical timeline ---------- */
.hww-tl { position: relative; padding: 14rem 0 15.4rem; color: #fff;
	background: radial-gradient(51.84rem 47.1rem at 155.52rem 84.78rem, rgba(110, 194, 227, .08), transparent),
		radial-gradient(77.76rem 56.52rem at 51.84rem 37.68rem, rgba(249, 112, 20, .12), transparent), var(--canvas); }
.hww-tl .h2 { white-space: nowrap; }
.hww-tl__scroll { margin-top: 8rem; }
/* Label column = 260px, then the week grid fills the rest (6 × 180px) */
.hww-tl__chart { --label: 26rem; position: relative; height: calc(5.8rem + var(--rows) * 7.2rem - 2rem); }
.hww-tl__weeks { position: absolute; left: var(--label); right: 0; top: 0; bottom: 0; }
.hww-tl__week { position: absolute; top: 0; bottom: 0; left: calc(var(--w) * 100% / var(--weeks)); }
.hww-tl__week i { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-inv); transform-origin: top; }
.hww-tl__week b { position: absolute; left: 1.6rem; top: 1rem; font-weight: 600; font-size: var(--t-small); line-height: 2rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--text-muted-inv); }
.hww-tl__rows { position: absolute; left: 0; right: 0; top: 5.8rem; display: flex; flex-direction: column; gap: 1.6rem; }
.hww-tl__row { display: grid; grid-template-columns: var(--label) 1fr; align-items: center; height: 5.6rem; }
.hww-tl__label { width: 24rem; font-family: var(--f-head); font-weight: 600; font-size: max(2rem, 16px); line-height: 2.6rem; letter-spacing: -.01em; transition: color .4s, transform .6s var(--ease-out); }
.hww-tl__row:hover .hww-tl__label { color: var(--orange); transform: translateX(.8rem); }
.hww-tl__track { position: relative; height: 100%; }
.hww-tl__bar { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--wd); border-radius: 80px; background: rgba(255, 255, 255, var(--a)); border: 1px solid rgba(249, 112, 20, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; transform-origin: left center; transition: background .5s, border-color .5s, box-shadow .5s; }
.hww-tl__row:hover .hww-tl__bar { background: rgba(249, 112, 20, .22); border-color: var(--orange); box-shadow: 0 1rem 3rem rgba(249, 112, 20, .2); }
.hww-tl__row.is-final .hww-tl__bar { background: linear-gradient(90deg, #f97014, #e05e0a); border: 0; }
.hww-tl__row.is-final:hover .hww-tl__bar { box-shadow: 0 1.2rem 3.6rem rgba(249, 112, 20, .45); }
.hww-tl__note { font-size: var(--t-small); line-height: 2rem; white-space: nowrap; }
.hww-tl__note--in { position: absolute; left: 1.9rem; top: 50%; transform: translateY(-50%); color: #fff; font-size: max(1.2rem, 11px); }
.hww-tl__row.is-final .hww-tl__note--in { left: 2rem; }
.hww-tl__note--out { position: absolute; left: calc(var(--l) + 1.4rem); top: 50%; transform: translateY(-50%); color: var(--text-muted-inv); transition: color .4s; }
.hww-tl__row:hover .hww-tl__note--out { color: #fff; }

/* ==========================================================================
   How We Work – mobile
   ========================================================================== */
@media (max-width: 1023px) {
	.hww-head { flex-direction: column; gap: 2rem; }
	.hww-head__text, .hww-head--tl .hww-head__text { width: auto; margin-top: 0; }

	.hww-split { padding: 6rem 2rem; }
	.hww-split__grid { flex-direction: column; gap: 2.4rem; }
	.split-card { width: 100%; height: auto; grid-template-columns: minmax(0, 1fr); }
	.split-card__panel { padding: 4rem 2.4rem 4.4rem; clip-path: polygon(3.2rem 0, 100% 0, 100% 100%, 0 100%, 0 5.6rem); }
	.split-card__title, .split-card__text { width: auto; }
	.split-card__title { font-size: 30px; line-height: 1.12; }
	.split-card__media { height: 60vw; min-height: 24rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5.6rem), calc(100% - 3.9rem) 100%, 0 100%); }
	.split-card__n { left: 2.4rem; top: 2rem; font-size: 40px; line-height: 1.1; }

	.hww-process { padding: 8rem 0; }
	.hww-process__line { margin-top: 4rem; }
	.hww-process__dot { display: none; }
	.hww-steps { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
	.hww-step { height: auto; padding: 2.4rem 2.4rem 2.8rem; }
	.hww-step__n { font-size: 40px; line-height: 1.1; }
	.hww-step__title { margin-top: 2.4rem; font-size: 21px; line-height: 1.25; }

	.hww-need { grid-template-columns: minmax(0, 1fr); padding: 8rem 2rem; row-gap: 4rem; }
	.hww-need__media { margin-top: 0; }
	.hww-need__img { width: 100%; height: auto; aspect-ratio: 640 / 400; }
	.hww-need__title { width: auto; font-size: clamp(34px, 8.6vw, 52px); line-height: 1.1; }
	.hww-need__text, .need-list, .need-list__text { width: auto; }

	.hww-tl { padding: 8rem 0; }
	.hww-tl .h2 { white-space: normal; }
	/* The Gantt keeps its shape and scrolls sideways on small screens */
	.hww-tl__scroll { margin: 4.8rem -2rem 0; padding: 0 2rem 1.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.hww-tl__chart { --label: 18rem; width: 92rem; }
	.hww-tl__label { width: 16rem; font-size: 15px; line-height: 1.3; }
}