/* workstyle section: eight cards on an ellipse around the START circle (one viewport), the card-stack modal and
   the tick/cross Fit Check. Look and motion follow ACTBE's Workstyle scene; the composition is our own. */
:root.is-scroll-lock { overflow: hidden; }

.cr-workstyle { position: relative; margin-top: 80px; }
.cr-ws__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-height-constant) + 2.5svh) 0 3svh; overflow: hidden; transition: color .4s var(--ease-out-cubic); }
.cr-workstyle.is-black .cr-ws__inner { color: var(--color-text-inverse); }
.cr-ws__sr, .cr-wsm__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cr-ws__headline { padding: 0 var(--padding-wrapper); }
.cr-ws__headline-inner { position: relative; display: flex; align-items: center; justify-content: flex-start; padding-left: 2rem; }
.cr-ws__headline-inner::before { position: absolute; left: .25rem; content: "/"; background: none; width: auto; height: auto; border-radius: 0; color: currentColor; font: inherit; }
.cr-ws__headline-text { margin: 0; font: var(--t-label-14-mono); font-size: 1rem; line-height: 1; letter-spacing: 0; color: inherit; }
.cr-ws__headline-text .-main-text { display: flex; flex-wrap: wrap; align-items: center; }
.cr-ws__headline-text .-char { display: block; flex-shrink: 0; }
.cr-ws__slash { position: absolute; top: 50%; left: 2rem; width: 1px; height: 1rem; margin-top: -.5rem; pointer-events: none; background-color: currentcolor; opacity: 0; }
.cr-ws__slash.is-typing { animation: cr-ws-blink .7s steps(1) infinite; }
@keyframes cr-ws-blink { 50% { opacity: 0; } }

/* Small screens: START, caption, then the cards in two tidy columns */
.cr-ws__stage { width: 100%; padding: 0 var(--padding-wrapper); margin-top: 1.5rem; }
.cr-ws__ring { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cr-ws__center { display: flex; flex-direction: column; align-items: center; grid-column: 1 / -1; padding: 1.25rem 0 1.5rem; }
.cr-ws__card-item { min-height: 7.25rem; }
.cr-ws__card-inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .75rem; width: 100%; height: 100%; padding: .875rem; margin: 0; font: inherit; color: var(--c-ink); text-align: left; cursor: pointer; background: var(--c-white); border: 0; border-radius: var(--radius-sm); box-shadow: 0 0 20px color-mix(in srgb, var(--gray-9) 20%, transparent); transform: rotate(var(--_rotate, 0deg)); transition: transform .3s var(--ease-out-cubic); }
.cr-ws__card-item:nth-of-type(odd) { --_rotate: -2.5deg; }
.cr-ws__card-item:nth-of-type(even) { --_rotate: 2.5deg; }
.cr-ws__card-index { font-family: var(--f-roboto-mono); font-size: .625rem; line-height: 1; color: var(--c-gray); }
.cr-ws__card-headline { display: block; font: var(--t-label-14); font-size: .9375rem; line-height: 1.15; letter-spacing: -.02em; color: var(--c-ink); }
@media (any-hover: hover) {
  .cr-ws__card-inner:hover { transform: rotate(0deg) scale(1.03); }
}

.cr-ws__start { position: relative; z-index: 2; width: var(--_d, 7.5rem); height: var(--_d, 7.5rem); padding: 0; color: inherit; cursor: pointer; background: none; border: 0; }
.cr-ws__start-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cr-ws__start-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-color: var(--surface-inverse); border-radius: 50%; }
.cr-workstyle.is-black .cr-ws__start-bg { background-color: var(--color-text-inverse); }
.cr-ws__start-circle { position: absolute; width: 128%; height: 128%; font-family: var(--f-roboto-mono); pointer-events: none; animation: cr-ws-spin 24s linear infinite; }
.cr-ws__start-circle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cr-ws__start-circle text { font-size: 7.4px; text-transform: uppercase; }
@keyframes cr-ws-spin { to { transform: rotate(360deg); } }
.cr-ws__start-text { position: absolute; z-index: 1; font: var(--t-label-16); font-size: max(1rem, calc(var(--_d, 7.5rem) * .17)); line-height: 1; letter-spacing: .02em; color: var(--color-text-inverse); text-transform: uppercase; }
.cr-workstyle.is-black .cr-ws__start-text { color: var(--color-text); }
.cr-ws__caption { max-width: 22rem; margin: calc(var(--_d, 7.5rem) * .3 + .75rem) 0 0; font: var(--t-copy-14); font-size: .875rem; line-height: 1.6; text-align: center; color: inherit; }
.cr-ws__start:focus-visible, .cr-ws__card-inner:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

/* Desktop: the START circle in the centre, eight cards evenly around an ellipse, each tilted +-2.5deg */
@media screen and (min-width: 960px) {
  .cr-ws__inner { height: 100vh; height: 100svh; min-height: 34rem; }
  .cr-ws__headline-text { font-size: min(1.17vw, 1rem * var(--r-max-scale)); }
  .cr-ws__stage { flex: 1; min-height: 0; margin-top: .5rem; container-type: size; }
  .cr-ws__ring { --cw: min(19.5cqw, 32cqh); --ch: calc(var(--cw) / 1.45); --rx: calc(50cqw - var(--cw) / 2 - 12px); --ry: calc(50cqh - var(--ch) / 2 - 4px); --_d: clamp(6.25rem, min(9cqw, 20cqh), 10rem); position: absolute; inset: 0; display: block; padding: 0; }
  .cr-ws__center { position: absolute; inset: 0; display: block; padding: 0; pointer-events: none; }
  .cr-ws__start { position: absolute; top: calc(50% - var(--_d) / 2); left: calc(50% - var(--_d) / 2); pointer-events: auto; }
  .cr-ws__caption { position: absolute; top: calc(50% + var(--_d) * .5 + var(--_d) * .2 + .75rem); left: calc(50% - 10.5rem); width: 21rem; max-width: none; margin: 0; font-size: clamp(.75rem, 1.05vw, .9375rem); pointer-events: auto; }
  .cr-ws__card-item { position: absolute; width: var(--cw); height: var(--ch); min-height: 0; left: calc(50% + var(--rx) * cos(var(--a)) - var(--cw) / 2); top: calc(50% + var(--ry) * sin(var(--a)) - var(--ch) / 2); }
  .cr-ws__card-item[data-id="1"] { --a: -90deg; }
  .cr-ws__card-item[data-id="2"] { --a: -45deg; }
  .cr-ws__card-item[data-id="3"] { --a: 0deg; }
  .cr-ws__card-item[data-id="4"] { --a: 45deg; }
  .cr-ws__card-item[data-id="5"] { --a: 90deg; }
  .cr-ws__card-item[data-id="6"] { --a: 135deg; }
  .cr-ws__card-item[data-id="7"] { --a: 180deg; }
  .cr-ws__card-item[data-id="8"] { --a: 225deg; }
  .cr-ws__card-inner { gap: .5rem; padding: calc(var(--cw) * .07); }
  .cr-ws__card-index { font-size: clamp(.625rem, calc(var(--cw) * .045), .8125rem); }
  .cr-ws__card-headline { font-size: clamp(.9375rem, calc(var(--cw) * .1), 1.875rem); line-height: 1.1; }
}

/* Modals (card stack + fit check) share one frame */
.cr-wsm { position: fixed; inset: 0; z-index: 106; overflow: hidden; pointer-events: none; opacity: 0; }
.cr-wsm[hidden] { display: none; }
.cr-wsm.cr-fit { z-index: 107; }
.cr-wsm.is-open { pointer-events: auto; }
.cr-wsm__wrapper { position: relative; width: 100%; height: 100%; outline: none; }
.cr-wsm__overlay { position: absolute; z-index: 1; width: 100%; height: 100%; background-color: var(--c-base-background); }
.cr-wsm__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 1.5rem; }
.cr-wsm__title { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 1rem; margin: 0; font: var(--t-heading-64); font-size: 14.5vw; line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: var(--c-ink); }
.cr-wsm__title-text { display: flex; flex-direction: column; align-items: flex-start; }
.cr-wsm__title-text .-main-text { display: flex; justify-content: flex-start; padding-bottom: .2em; overflow: hidden; }
.cr-wsm__title-text .-second { margin-top: -.2em; }
.cr-wsm__title-text .-char { display: inline-block; }
.cr-wsm__card { position: relative; z-index: 1; width: 100%; height: 67.57svh; margin-top: 4.32svh; touch-action: pan-y; }
.cr-wsm__card-item { position: absolute; inset: 0; transform-origin: bottom center; -webkit-user-select: none; user-select: none; }
.cr-wsm__card-inner { width: 100%; height: 100%; padding: 3.24svh 1rem 8.65svh; color: var(--c-ink); background-color: var(--c-white); border-radius: var(--radius-md); box-shadow: 0 0 30px color-mix(in srgb, var(--gray-9) 25%, transparent); opacity: 0; opacity: var(--_opacity, 0); transform: translateY(var(--_y, -5.68svh)) scale(var(--_scale, .85)); transform-origin: top center; transition: none; transition: var(--_inner-transition, none); }
.cr-wsm__card.is-ready { --_inner-transition: transform .6s var(--ease-out-expo), opacity .6s var(--ease-out-expo); }
.cr-wsm__card-index { display: flex; gap: 2.5rem; align-items: baseline; justify-content: space-between; }
.cr-wsm__card-index-current, .cr-wsm__card-index-total { font: var(--t-heading-32); font-size: 5.41svh; line-height: 1; letter-spacing: 0; }
.cr-wsm__card-index-total { color: var(--gray-5); }
.cr-wsm__card-headline { margin: 3.24svh 0 0; font: var(--t-heading-32); font-size: 3.7svh; line-height: 1.12; letter-spacing: -.03em; color: inherit; }
.cr-wsm__card-paragraph { display: grid; gap: 2em; margin-top: 2.16svh; font: var(--t-copy-14); font-size: max(.75rem, 1.89svh); line-height: 1.7; color: var(--color-text-body); }
.cr-wsm__card-paragraph p { margin: 0; }
.cr-wsm__card-item.is-current { --_y: 0px; --_scale: 1; --_opacity: 1; z-index: 3; }
.cr-wsm__card-item.is-next-1 { --_y: -2.16svh; --_scale: .95; --_opacity: 1; z-index: 2; }
.cr-wsm__card-item.is-next-2 { --_y: -4.05svh; --_scale: .9; --_opacity: 1; z-index: 1; }
.cr-wsm__card-item.is-prev { --_y: 0px; --_scale: 1; --_opacity: 0; z-index: 4; pointer-events: none; }
.cr-wsm__card-item.is-prev .cr-wsm__card-inner { transition: none; }
.cr-wsm__card-item:not(.is-current) { pointer-events: none; }
/* Navigation circles straddle the bottom edge of the card; close sits underneath */
.cr-wsm__nav { position: absolute; top: 100%; left: 0; z-index: 5; display: grid; grid-template-columns: auto auto; column-gap: 3.24svh; justify-content: center; align-items: center; width: 100%; margin-top: -5.4svh; pointer-events: none; }
.cr-wsm.is-open .cr-wsm__nav button { pointer-events: auto; }
.cr-wsm__round { grid-row: 1; display: flex; align-items: center; justify-content: center; width: 10.81svh; height: 10.81svh; padding: 0; color: var(--color-text-inverse); cursor: pointer; background-color: var(--surface-inverse); border: 0; border-radius: 50%; box-shadow: inset 0 4px 4px color-mix(in srgb, var(--gray-5) 50%, transparent); transition: background-color .4s var(--ease-out-expo), transform .3s var(--ease-out-expo); }
.cr-wsm__round:active { transform: scale(.96); }
.cr-wsm__arrow { width: 3.24svh; height: 1.35svh; }
.cr-wsm__arrow.-prev { transform: rotate(180deg); }
.cr-wsm__close { display: flex; grid-row: 2; grid-column: 1 / 3; align-items: center; justify-content: center; justify-self: center; width: 4.32svh; height: 4.32svh; padding: 0; margin-top: 3svh; color: var(--c-ink); cursor: pointer; background: none; border: 0; }
.cr-wsm__close-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 2.16svh; height: 2.16svh; }
.cr-wsm__close-icon span { position: absolute; width: 100%; height: 1px; background-color: currentcolor; }
.cr-wsm__close-icon span:first-child { transform: rotate(-45deg); }
.cr-wsm__close-icon span:last-child { transform: rotate(45deg); }
.cr-wsm__round:focus-visible, .cr-wsm__close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
@media (any-hover: hover) { .cr-wsm__round:hover { background-color: var(--surface-inverse-hover); } .cr-wsm__card-item.is-current { cursor: grab; } }


/* Fit check: tick / cross cards, progress, reactions, result */
.cr-fit__statement { font-size: 3.7svh; }
.cr-fit__hint { margin: 2.2svh 0 0; font: var(--t-label-12-mono); font-size: .6875rem; line-height: 1.3; text-transform: uppercase; color: var(--c-gray); }
.cr-wsm__card-inner { position: relative; }
.cr-fit__stamp { position: absolute; left: 50%; bottom: 17svh; display: flex; align-items: center; justify-content: center; width: 12svh; height: 12svh; margin-left: -6svh; pointer-events: none; border: 3px solid currentcolor; border-radius: 50%; }
.cr-fit__stamp svg { width: 55%; height: 55%; }
.cr-fit__stamp.-yes { color: var(--c-ink); opacity: var(--yes, 0); transform: rotate(10deg) scale(calc(.8 + var(--yes, 0) * .2)); }
.cr-fit__stamp.-no { color: var(--color-accent); opacity: var(--no, 0); transform: rotate(-10deg) scale(calc(.8 + var(--no, 0) * .2)); }
.cr-fit__dots { position: absolute; top: calc(3.24svh + 2.7svh - 3px); left: 50%; z-index: 4; display: flex; gap: 4px; transform: translateX(-50%); pointer-events: none; }
.cr-fit__dot { width: 6px; height: 6px; background: var(--gray-3); border-radius: 50%; transition: background-color .3s var(--ease-out-cubic), transform .3s var(--ease-out-cubic); }
.cr-fit__dot.is-done { background: var(--c-ink); }
.cr-fit__dot.is-current { background: var(--color-accent); transform: scale(1.35); }
.cr-fit__react { position: absolute; bottom: 8.5svh; left: 50%; z-index: 6; padding: .45rem .9rem; margin: 0; font: var(--t-label-14); font-size: .875rem; line-height: 1; white-space: nowrap; color: var(--color-text-inverse); pointer-events: none; background: var(--surface-inverse); border-radius: 999px; opacity: 0; transform: translateX(-50%); }
.cr-fit__cross { background-color: var(--color-accent); }
.cr-fit__cross:hover { background-color: var(--color-accent-hover); }
.cr-fit__icon { width: 4.6svh; height: 4.6svh; }
.cr-fit__cross .cr-fit__icon { color: var(--color-on-accent); }
.cr-fit__result { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 1.25rem; color: var(--c-ink); text-align: center; pointer-events: none; opacity: 0; --_tier: var(--c-gray); }
.cr-fit__result.is-mid { --_tier: var(--c-ink); }
.cr-fit__result.is-high { --_tier: var(--color-accent); }
.cr-fit__result-bg { position: absolute; inset: 0; z-index: -1; background: var(--c-white); border-radius: var(--radius-md); box-shadow: 0 0 30px color-mix(in srgb, var(--gray-9) 25%, transparent); }
.cr-fit__result-label { margin: 0; font: var(--t-label-12-mono); font-size: .75rem; line-height: 1; text-transform: uppercase; color: var(--c-gray); }
.cr-fit__result-number { position: relative; margin-top: 1.5svh; font: var(--t-display); font-size: 12svh; line-height: 1; letter-spacing: -.04em; color: var(--_tier); font-variant-numeric: tabular-nums; }
.cr-fit__result-number::after { content: "%"; font-size: .4em; letter-spacing: 0; }
.cr-fit__result-name { margin: 2svh 0 0; font: var(--t-heading-32); font-size: clamp(1.5rem, 4.4svh, 2.25rem); line-height: 1.05; letter-spacing: -.03em; color: var(--c-ink); }
.cr-fit__result-paragraph { max-width: 24rem; margin: 1.5svh 0 0; font: var(--t-copy-14); font-size: max(.875rem, 1.9svh); line-height: 1.5; color: var(--color-text-body); }
.cr-fit__result-actions { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; justify-content: center; margin-top: 3svh; }
.cr-fit__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.25rem; font: var(--t-label-14); font-size: .875rem; color: var(--c-ink); text-decoration: none; cursor: pointer; background: none; border: 1px solid var(--c-ink); border-radius: 999px; transition: background-color .3s var(--ease-out-expo), color .3s var(--ease-out-expo); }
.cr-fit__btn.-solid { color: var(--color-text-inverse); background: var(--c-ink); }
@media (any-hover: hover) { .cr-fit__btn:hover { color: var(--color-text-inverse); background: var(--surface-inverse-hover); } }
.cr-fit__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.cr-fit__result.is-on { pointer-events: auto; }

@media screen and (min-width: 768px) {
  .cr-wsm__content { width: 50.78vh; padding: 1.5rem; margin: 0 auto; overflow: hidden; background-color: var(--c-base-background); }
  .cr-wsm__wrapper { display: flex; justify-content: center; padding: 0; }
  .cr-wsm__overlay { background: color-mix(in srgb, var(--background-1) 50%, transparent); -webkit-backdrop-filter: blur(9.5px); backdrop-filter: blur(9.5px); }
  .cr-wsm__title { padding: 1rem; font-size: 7.6vh; }
  .cr-wsm__card { height: 65.1vh; margin-top: 4.17vh; }
  .cr-wsm__card-inner { padding: 3.13vh 2.08vh 8.33vh; transform: translateY(var(--_y, -5.47vh)) scale(var(--_scale, .85)); }
  .cr-wsm__card-index-current, .cr-wsm__card-index-total { font-size: 5.21vh; }
  .cr-wsm__card-headline { margin-top: 3.13vh; font-size: 3.6vh; }
  .cr-wsm__card-paragraph { margin-top: 2.08vh; font-size: 1.82vh; }
  .cr-wsm__card-item.is-next-1 { --_y: -2.08vh; }
  .cr-wsm__card-item.is-next-2 { --_y: -3.91vh; }
  .cr-wsm__nav { column-gap: 3.13vh; margin-top: -5.21vh; }
  .cr-wsm__round { width: 10.42vh; height: 10.42vh; }
  .cr-wsm__arrow { width: 3.13vh; height: 1.3vh; }
  .cr-wsm__close { width: 4.17vh; height: 4.17vh; margin-top: 3vh; }
  .cr-wsm__close-icon { width: 2.08vh; height: 2.08vh; }
  .cr-fit__statement { font-size: 3.5vh; }
  .cr-fit__hint { margin-top: 2vh; }
  .cr-fit__stamp { bottom: 16vh; width: 11vh; height: 11vh; margin-left: -5.5vh; }
  .cr-fit__dots { top: calc(3.13vh + 2.6vh - 3px); }
  .cr-fit__react { bottom: 8vh; }
  .cr-fit__icon { width: 4.2vh; height: 4.2vh; }
  .cr-fit__result-number { margin-top: 1.4vh; font-size: 11vh; }
  .cr-fit__result-name { font-size: clamp(1.5rem, 4vh, 2.25rem); }
  .cr-fit__result-paragraph { font-size: max(.875rem, 1.85vh); }
}
@media (prefers-reduced-motion: reduce) {
  .cr-ws__start-circle { animation: none; }
  .cr-ws__card-inner, .cr-wsm__card.is-ready, .cr-fit__dot, .cr-fit__btn { transition: none; --_inner-transition: none; }
}