/* Rich motion layer. Every rule is gated by .rich-on, which motion.js adds, so the page is unchanged without it. */

.rich-progress { position: fixed; z-index: 300; left: 0; top: 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--c-accent), color-mix(in srgb, var(--c-accent) 55%, #fff)); pointer-events: none; }

/* Header hides while scrolling down and returns on the way up. */
.rich-on .site-header { transition: background .25s, box-shadow .25s, color .25s, transform .45s cubic-bezier(.2, .7, .2, 1); }
.rich-on .site-header.is-hidden { transform: translateY(-110%); }

/* Word by word headings */
.rich-on .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.rich-on .split .w > span { display: inline-block; transform: translate3d(0, 112%, 0) rotate(5deg); transform-origin: 0 100%; transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--wi, 0) * 70ms); }
.rich-on .split.is-in .w > span { transform: none; }

/* Hero image: slow settle on load, then a gentle drift with the scroll */
.rich-on .hero .hero-img { translate: 0 var(--py, 0px); transform: scale(1.12); animation: rich-settle 2.8s cubic-bezier(.2, .7, .2, 1) both; will-change: translate; }
@keyframes rich-settle { from { transform: scale(1.34); } to { transform: scale(1.12); } }

/* Photos unmask as they come into view and drift at different speeds */
.rich-on [data-scrub] { clip-path: inset(calc((1 - var(--r, 1)) * 24%) calc((1 - var(--r, 1)) * 24%) round calc(var(--radius) * 1.4)); translate: 0 var(--py, 0px); }
.rich-on [data-scrub] img { transform: scale(calc(1.3 - .3 * var(--r, 1))); }
.rich-on .about-photo[data-scrub] img { translate: 0 var(--py, 0px); }
.rich-on .gallery-item[data-scrub]:hover img { transform: scale(1.05); }

/* Counters keep a steady width while the digits change */
.rich-on .stat strong { font-variant-numeric: tabular-nums; }

/* Ticker: two rows of huge service names that move with the scroll */
.ticker { overflow: hidden; padding: clamp(1.4rem, 3vw, 2.4rem) 0; background: var(--c-bg); }
.ticker-row { overflow: hidden; white-space: nowrap; }
.ticker-line { display: inline-flex; align-items: center; will-change: transform; }
.ticker-line span { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.8rem, 8.4vw, 7.4rem); line-height: 1.32; letter-spacing: -.02em; padding-right: .5em; }
.ticker-line span::after { content: ""; flex: none; width: .26em; height: .26em; margin-left: .5em; border-radius: 50%; background: var(--c-accent); }
.ticker-a .ticker-line span { color: var(--c-bg); -webkit-text-stroke: 3px var(--c-primary); paint-order: stroke fill; }
.ticker-b .ticker-line span { color: color-mix(in srgb, var(--c-primary) 14%, var(--c-bg)); }

/* Soft ring that follows the pointer */
.rich-cursor { position: fixed; z-index: 400; left: -20px; top: -20px; width: 40px; height: 40px; border: 1.5px solid var(--c-accent); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s, width .3s, height .3s, margin .3s, background .3s; }
.rich-cursor.is-on { opacity: .9; }
.rich-cursor.is-grow { width: 64px; height: 64px; margin: -12px 0 0 -12px; background: color-mix(in srgb, var(--c-accent) 18%, transparent); }
.rich-on .btn { transition: transform .15s, box-shadow .15s, background .15s, translate .35s cubic-bezier(.2, .8, .2, 1); }

@media (min-width: 901px) {
	/* Pinned steps: the section is tall, the stage inside it stays on screen */
	.rich-on .steps-section[data-pin] { padding: 0; }
	.rich-on [data-pin] .pin-track { height: calc(var(--n, 3) * 85vh + 15vh); }
	.rich-on [data-pin] .pin-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
	.rich-on [data-pin] .pin-stage > .container { position: relative; }
	.rich-on [data-pin] .steps { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; min-height: 21rem; }
	.rich-on [data-pin] .step { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto auto; column-gap: 3rem; align-content: center; align-items: center; padding: 0; border: 0; background: none; box-shadow: none; opacity: 0; transform: translate3d(0, 60px, 0); filter: blur(10px); pointer-events: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1), filter .7s ease; }
	.rich-on [data-pin] .step.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
	.rich-on [data-pin] .step.is-past { transform: translate3d(0, -60px, 0); }
	.rich-on [data-pin] .step-num { grid-row: 1 / span 2; justify-self: start; width: auto; height: auto; background: none; border-radius: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(9rem, 22vw, 19rem); line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--c-primary); }
	.rich-on [data-pin] .step.is-active .step-num { color: color-mix(in srgb, var(--c-accent) 85%, transparent); -webkit-text-stroke-color: transparent; transition: color .8s ease .1s; }
	.rich-on [data-pin] .step h3 { grid-column: 2; align-self: end; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; margin: 0 0 .8rem; }
	.rich-on [data-pin] .step p { grid-column: 2; align-self: start; font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 34rem; margin: 0; }
	.rich-on [data-pin] .pin-bar { position: absolute; left: 0; right: 0; bottom: -3.2rem; height: 3px; border-radius: 3px; background: var(--c-line); overflow: hidden; }
	.rich-on [data-pin] .pin-bar span { display: block; height: 100%; transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; background: var(--c-accent); }

	/* Horizontal scroll: the sticky stage keeps the cards in place while the row slides */
	.rich-on .svc-hscroll { padding: 0; }
	.rich-on .svc-hscroll .svc-items { overflow: visible; scroll-snap-type: none; }
	.rich-on .svc-hscroll .hs-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; overflow: hidden; padding-top: calc(var(--header-h) * .6); }
	.rich-on .svc-hscroll .section-head { margin-bottom: 0; }
	.rich-on .svc-hscroll .svc-items { display: flex; gap: 1.4rem; width: 100%; padding-inline: max(var(--gutter), calc((100vw - 1160px) / 2)); transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
	.rich-on .svc-hscroll .hs-progress { align-self: center; width: min(1160px, 100% - 2 * var(--gutter)); height: 3px; border-radius: 3px; background: var(--c-line); overflow: hidden; }
	.rich-on .svc-hscroll .hs-progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--c-accent); }
}

/* Cards of the horizontal row (also used as the native swipe row on small screens) */
.svc-hscroll .svc-items { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 1rem; scrollbar-width: none; }
.svc-hscroll .card { position: relative; flex: 0 0 min(80vw, 470px); height: min(58vh, 520px); padding: 0; overflow: hidden; border: 0; color: #fff; justify-content: flex-end; background: var(--c-primary-dark); border-radius: calc(var(--radius) * 1.6); scroll-snap-align: start; }
.svc-hscroll .card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 18, 30, .85), rgba(8, 18, 30, .05) 62%); }
.svc-hscroll .card-media { position: absolute; inset: 0; display: block; }
.svc-hscroll .card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.svc-hscroll .card:hover .card-img { transform: scale(1.07); }
.svc-hscroll .card-index { display: block; position: absolute; z-index: 1; top: 1rem; left: 1.4rem; font-family: var(--font-head); font-weight: 700; font-size: clamp(3.4rem, 7vw, 5.4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); }
.svc-hscroll .card-body { display: block; position: relative; z-index: 1; padding: 1.6rem 1.6rem 1.8rem; }
.svc-hscroll .card-title { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 .5rem; }
.svc-hscroll .card p { flex: none; margin: 0 0 .8rem; color: rgba(255, 255, 255, .9); }
.svc-hscroll .card-more { color: #fff; font-weight: 600; }
.svc-hscroll .hs-progress { display: none; }
.rich-on .svc-hscroll .hs-progress { display: block; }

@media (max-width: 900px) {
	.rich-on .svc-hscroll .hs-progress { display: none; }
	.svc-hscroll .container { margin-bottom: 0; }
	.ticker-line span { font-size: clamp(2.2rem, 12vw, 3.6rem); }
}

@media (hover: none), (pointer: coarse) {
	.rich-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.rich-progress, .rich-cursor, .ticker { display: none; }
}

/* Photos that drift need room between rows so neighbours never touch */
.rich-on .gal-grid .gallery { row-gap: 2.2rem; }