/* ================= Case-study page (absolute layout from the 1440 x 11643 Figma frame) ================= */
.case-page { min-width: 1440px; }
.case { position: relative; width: 1440px; height: 11343px; margin: 0 auto; }
.case .x { position: absolute; margin: 0; }
.case .nw { white-space: nowrap; }
.case .nav--abs { position: absolute; left: 141px; top: 46px; margin: 0; }

.case .t-title { font-weight: 700; font-size: 56px; line-height: 68px; letter-spacing: -0.6px; color: var(--ink); }
.case .b1 { font-size: 18px; line-height: 28px; color: var(--ink); }
.case .med { font-weight: 500; }
.case .h5 { font-weight: 500; font-size: 24px; line-height: 30px; letter-spacing: -0.15px; white-space: nowrap; color: var(--ink); }
.case .h6 { font-weight: 500; font-size: 20px; line-height: 24px; white-space: nowrap; color: var(--ink); }
.case .bold24 { font-weight: 700; font-size: 24px; line-height: 30px; letter-spacing: -0.15px; white-space: nowrap; color: var(--ink); }
.case .bold18 { font-weight: 700; font-size: 18px; line-height: 28px; color: var(--ink); }
.case .neco45, .case .neco40, .case .neco25 { font-family: var(--font-serif); font-style: italic; letter-spacing: -0.2px; white-space: nowrap; color: var(--ink); }
.case .neco45 { font-size: 45px; line-height: 38px; }
.case .neco40 { font-size: 40px; line-height: 45px; color: var(--ink); }
.case .neco25 { font-size: 25px; line-height: 45px; color: var(--ink); }
.case .big { white-space: nowrap; font-style: italic; letter-spacing: -0.8px; color: var(--ink); }
.case .li { font-weight: 300; font-style: italic; }
.case .mi { font-weight: 500; font-style: italic; }
.case .md70 { font-style: normal; font-weight: 500; font-size: 90px; line-height: 76px; opacity: .7; color: #01539f; }
.case .rt, .case .rt-l { position: absolute; margin: 0; white-space: nowrap; letter-spacing: -0.8px; color: #0d3368; font-style: italic; font-weight: 300; }
.case .rt-l { color: #01539f; letter-spacing: -0.8px; }
.case .ctr { transform: translateX(-50%); text-align: center; }
.case .frame-line { position: absolute; border: 2px solid #c3c3c3; border-radius: 30px; }
.case .r40 { border-radius: 40px; }
.case .list { margin: 0; padding-left: 27px; }
.case .list li { margin: 0; }
.case .panel { position: absolute; }
.case .rot90 { position: absolute; left: -241.5px; top: 241.5px; height: 0; transform: rotate(90deg); }

/* cover reused from the works page */
.case .cover { width: 1360px; height: 768px; }

/* videos and state-cycling components */
.case .vid { position: absolute; display: block; object-fit: cover; background: transparent; max-width: none; }
.case .cycle { overflow: visible; }
.case .state { position: absolute; max-width: none; opacity: 0; pointer-events: none; transition: opacity var(--fade, .3s) linear; }
.case .state.is-on { opacity: 1; }

/* design-approach mini UI */
.case .tile { width: 105px; height: 105px; background: #0d3368; border: 2px solid #f5f5f5; border-radius: 20px; }
.case .tile__l { position: absolute; color: #f5f5f5; font-weight: 500; font-size: 16px; line-height: 16px; }
.case .sos-t { transform: translateX(-50%); color: #fff; font-weight: 500; font-size: 31px; line-height: 40px; white-space: nowrap; }

.case .sus { text-align: center; color: var(--ink); }
.case .sus__k { margin: 0; font-size: 14px; line-height: 21.6px; letter-spacing: 2.1px; text-transform: uppercase; }
.case .sus__h { margin: 16px 0 0; letter-spacing: 0.1px; white-space: nowrap; }
.case .sus__h span { font-size: 60px; line-height: 72px; }
.case .sus__h em { font-family: var(--font-serif); font-style: italic; font-size: 64px; line-height: 72px; }

.case .next img { display: block; width: 58px; height: 23px; max-width: none; }
.case .next:hover img { transform: translateX(4px); }
.case .next img { transition: transform .2s ease-out; }
.footer--case { margin-top: 0; }

/* Haptic squiggles — Figma motion: VIBR 1/2 rotate-shake, 5.002s timeline of a ~233ms vibration cycle, looped */
.case .vibr { position: absolute; max-width: none; pointer-events: none; transition: opacity .3s linear; }
.case .vibr--1 { --a: 22.573deg;  --b: 8.573deg;   --c: 14.573deg;  --d: 32.573deg;  transform: rotate(var(--a)); animation: vibr-shake .233s infinite; }
.case .vibr--2 { --a: -159.01deg; --b: -173.01deg; --c: -167.01deg; --d: -149.01deg; transform: rotate(var(--a)); animation: vibr-shake .233s infinite; }
@keyframes vibr-shake {
  0%      { transform: rotate(var(--a)); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  7.49%   { transform: rotate(var(--b)); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  18.74%  { transform: rotate(var(--a)); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  29.6%   { transform: rotate(var(--c)); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  66.53%  { transform: rotate(var(--d)); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  100%    { transform: rotate(var(--a)); }
}
/* squiggles belong to the default (phone) state only */
.case .cycle:has(> .state[data-state="v2"].is-on) .vibr { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .case .vibr { animation: none; } }

/* Frame 11 headline: Medium, upright (must beat .rt-l italic/300) */
.case .rt-l.md70 { font-style: normal; font-weight: 500; }

/* Haptic variant 2 caption + leader line (live text instead of a baked image) */
.case .cap { position: absolute; margin: 0; white-space: nowrap; font: 400 16px/22px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.18px; color: rgb(1,83,159); }
.case .capline { position: absolute; display: block; height: 1.8px; background: rgb(1,83,159); }

/* SUS score — Figma frames "Frame 1000002300" (bar) and "Frame 1000002303" (80%) */
.case .susbar { overflow: visible; }
.case .susbar__fill, .case .suspill__bg { position: absolute; left: 0; top: 0; display: block; background: #ee7f64; }
.case .susbar__fill { width: 849px; height: 195px; border-radius: 0 60px 60px 0; }
.case .suspill__bg { width: 278px; height: 195px; border-radius: 100px; }
/* Figma NOISE effect: monotone #f7f9f2, size .5, density .41 */
.case .susbar__fill::after, .case .suspill__bg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url(assets/t/noise.png) 0 0 / 128px 128px; pointer-events: none; }
/* Motion: width 19 → 849 over the first 35.886% of a 5.002s linear loop, then hold */
.case .susbar.is-live .susbar__fill { animation: sus-grow 5.002s linear infinite; }
@keyframes sus-grow { 0% { width: 19px; } 35.886% { width: 849px; } 100% { width: 849px; } }
.case .susbar:not(.is-live) .susbar__fill { width: 19px; }
.case .suspill__t { position: absolute; left: 55px; top: 54px; width: 168px; height: 88px; text-align: center; font: 500 80px/88px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.8px; color: rgb(133,248,233); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .case .susbar.is-live .susbar__fill { animation: none; width: 849px; } }

/* SUS bar caption — fades in with the same 5.002s timeline (opacity 0 → 1 by 35.886%, eased, then hold) */
.case .susbar__t { position: absolute; left: 28px; top: 146px; width: 717px; white-space: nowrap; font: 400 18px/28px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(132,248,233); opacity: 0; }
.case .susbar.is-live .susbar__t { animation: sus-fade 5.002s linear infinite; }
@keyframes sus-fade { 0% { opacity: 0; animation-timing-function: cubic-bezier(.5,0,.5,1); } 35.886% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .case .susbar__t { animation: none !important; opacity: 1; } }