/* UPSIDE: a separate case-study layout, built from the project-2/01.png reference. */
.case--upside .case__card { width: min(1080px, 100%); padding: 8px; border-radius: 22px; }
.case--upside .case__close { top: 12px; margin-right: 12px; }
.ups-case { --ups-blue: #164dff; --ups-dark: #042d7c; container-type: inline-size; overflow: hidden; border-radius: 16px; background: #fff; color: #0b0d12; line-height: 1.4; }
.ups-case *, .ups-case *::before, .ups-case *::after { box-sizing: border-box; }
.ups-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ups-mark { display: block; width: 1.4em; height: 0.79em; flex: none; overflow: hidden; }
.ups-brand { position: relative; display: inline-block; flex: none; width: 3.6em; max-width: 100%; font-size: var(--brand-size, 34px); line-height: 0; vertical-align: middle; }
.ups-brand__image { display: block; width: 100%; height: auto; object-fit: contain; }
/* Recolor only the lettering using the original alpha; the blue symbol stays unchanged. */
.ups-brand--light::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--ups-logo-image) center / 100% 100% no-repeat; mask: var(--ups-logo-image) center / 100% 100% no-repeat; clip-path: inset(0 7% 0 39.3%); pointer-events: none; }
.ups-app--blue .ups-mark, .ups-laptop__visual .ups-mark, .ups-poster--one > div .ups-mark { filter: brightness(0) invert(1); }
.ups-hero { position: relative; aspect-ratio: 2 / 1; overflow: hidden; }
.ups-hero__wash { position: absolute; inset: 0; background: linear-gradient(90deg, #f6f9fffa 0%, #f5f8ffe8 28%, #f5f8ff00 66%); }
.ups-hero__copy { position: relative; z-index: 1; width: 57%; padding: 3.5% 0 4% 5%; }
.ups-eyebrow { color: #304760; font-size: 0.9cqw; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 1.8cqw; }
.ups-hero h3 { --brand-size: 9.5cqw; font-size: inherit; line-height: 1; margin-bottom: 2.2cqw; }
.ups-headline { font-size: 3.4cqw; font-weight: 600; line-height: 1.12; letter-spacing: -0.055em; }
.ups-headline > span { color: var(--ups-blue); }
.ups-intro { max-width: 32cqw; margin-top: 1.8cqw; font-size: 1.2cqw; line-height: 1.45; color: #59616d; }
.ups-rule { display: block; margin-top: 1.7cqw; width: 3cqw; height: 0.35cqw; background: var(--ups-blue); }
.ups-system { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.4%; padding: 1.2% 3% 1.5%; }
.ups-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border-radius: 8px; }
.ups-color { padding: 2.5cqw 2cqw 1.8cqw; background: var(--color); color: #fff; }
.ups-color h4 { font-size: 1.45cqw; font-weight: 600; letter-spacing: -0.03em; }
.ups-color > p { margin-top: 0.6cqw; font-size: 1.3cqw; }
.ups-color > span { display: block; width: 2.6cqw; height: 1px; margin: 1.8cqw 0 1cqw; background: currentColor; opacity: 0.7; }
.ups-color small { font-size: 1.05cqw; line-height: 1.35; }
.ups-color--light { color: #17191e; }
.ups-variations { min-width: 0; padding-top: 0.5cqw; }
.ups-variations h4 { margin-bottom: 1.4cqw; font-size: 1.4cqw; font-weight: 600; letter-spacing: -0.03em; }
.ups-variations > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.7cqw; }
.ups-app { display: grid; place-items: center; aspect-ratio: 1; border-radius: 2cqw; font-size: 4.5cqw; box-shadow: inset 0 0 0 1px #0001, 0 2px 6px #0001; }
.ups-app--white { color: var(--ups-blue); background: #fff; }
.ups-app--blue { color: #fff; background: var(--ups-blue); }
.ups-app--black { color: var(--ups-blue); background: #0c0c0d; }
.ups-devices { display: grid; grid-template-columns: 1fr 0.9fr 1.8fr; gap: 8px; height: 37cqw; }
.ups-badge, .ups-mobile, .ups-desktop { position: relative; overflow: hidden; min-width: 0; }
.ups-mobile { display: flex; justify-content: center; align-items: center; background: radial-gradient(ellipse at 20% 20%, #444a51, #15171b 70%); }
.ups-phone { position: relative; flex: none; width: auto; max-width: 82%; height: 91%; aspect-ratio: 9 / 19.5; padding: 3.3cqw 1cqw 1.8cqw; border: 0.35cqw solid #8d8d8c; border-radius: 2.7cqw; background: #08090d; color: #fff; box-shadow: 7px 10px 10px #0007, inset 0 0 0 2px #151515; overflow: hidden; }
.ups-phone::before { content: ""; position: absolute; right: -25%; bottom: -20%; width: 110%; height: 80%; border-radius: 50%; background: linear-gradient(125deg, #083cff55, #07090e00); pointer-events: none; }
.ups-phone__island { position: absolute; width: 35%; height: 1.1cqw; top: 0.6cqw; left: 33%; border-radius: 1cqw; background: #222; }
.ups-phone__nav { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: 1.3cqw; }
.ups-phone__nav .ups-brand { --brand-size: 2cqw; }
.ups-phone__title { margin-top: 1.4cqw; font-size: 1.65cqw; letter-spacing: -0.04em; line-height: 1.12; }
.ups-phone__description { margin-top: 0.9cqw; font-size: 0.75cqw; line-height: 1.5; color: #bfc5d3; }
.ups-demo-button { display: inline-block; margin-top: 1.4cqw; padding: 0.7cqw 1cqw; border-radius: 0.35cqw; background: var(--ups-blue); color: #fff; font-size: 0.85cqw; }
.ups-phone .ups-demo-button { margin-top: 1.1cqw; padding: 0.6cqw 0.7cqw; font-size: 0.7cqw; }
.ups-phone__services { position: relative; display: flex; flex-direction: column; gap: 0.85cqw; margin-top: 1.5cqw; }
.ups-phone__services > div { display: flex; align-items: center; gap: 0.6cqw; font-size: 0.69cqw; }
.ups-icon { display: block; width: 3.8cqw; height: 3.8cqw; color: var(--ups-blue); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ups-phone__services .ups-icon { width: 1.35cqw; height: 1.35cqw; color: #fff; flex: none; }
.ups-device-label { position: absolute; left: 0; right: 0; bottom: 0.7cqw; text-align: center; color: #999da9; font-size: 0.7cqw; letter-spacing: 0.06em; text-transform: uppercase; }
.ups-desktop { display: flex; align-items: center; justify-content: center; background: linear-gradient(120deg, #e5e6e7, #f3f4f4 40%, #b7bbbc); }
.ups-laptop { width: 90%; transform: perspective(800px) rotateY(-7deg) rotateZ(-1deg); }
.ups-laptop__screen { position: relative; padding: 1.6cqw; border: 0.7cqw solid #151515; border-radius: 1.25cqw 1.25cqw 0.5cqw 0.5cqw; background: #fff; box-shadow: 0 7px 12px #0003; }
.ups-laptop__nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6cqw; font-size: 0.53cqw; }
.ups-laptop__nav .ups-brand { --brand-size: 1.7cqw; }
.ups-nav-contact { padding: 0.35cqw 0.8cqw; border-radius: 0.25cqw; background: var(--ups-blue); color: #fff; }
.ups-laptop__content { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1cqw; margin-top: 2cqw; }
.ups-laptop__content > div > p { font-size: 2.05cqw; line-height: 1.04; font-weight: 600; letter-spacing: -0.065em; }
.ups-laptop__content small { display: block; margin-top: 1cqw; font-size: 0.62cqw; line-height: 1.4; color: #666; }
.ups-laptop__content .ups-demo-button { font-size: 0.6cqw; padding: 0.5cqw 0.75cqw; margin-top: 1cqw; }
.ups-laptop__visual { position: relative; min-width: 0; overflow: hidden; border-radius: 0.5cqw; }
.ups-laptop__visual > span { position: absolute; right: 8%; bottom: 5%; width: 75%; color: #fff; opacity: 0.9; }
.ups-laptop__visual .ups-mark { width: 100%; height: auto; }
.ups-laptop__footer { display: flex; justify-content: space-between; padding-top: 1.6cqw; margin-top: 1.8cqw; border-top: 1px solid #ddd; font-size: 0.7cqw; font-weight: 600; }
.ups-laptop__base { width: 114%; height: 0.9cqw; margin-left: -7%; border-radius: 1px 1px 60% 60%; background: linear-gradient(#a6aaaf, #dfe1e5 40%, #6b7078); box-shadow: 0 8px 9px #0005; }
.ups-services { display: grid; grid-template-columns: 2.3fr 1fr; gap: 4cqw; padding: 3cqw 3cqw; }
.ups-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2cqw; }
.ups-service h5 { margin-top: 1.2cqw; font-size: 1.55cqw; line-height: 1.2; font-weight: 500; letter-spacing: -0.04em; }
.ups-service > p { margin-top: 1cqw; font-size: 0.98cqw; line-height: 1.4; color: #73777d; }
.ups-promise { padding-left: 3cqw; border-left: 1px solid #b9bec8; }
.ups-promise h4 { font-size: 2.4cqw; line-height: 1.1; letter-spacing: -0.05em; font-weight: 500; }
.ups-promise h4 > span { color: var(--ups-blue); font-weight: 600; }
.ups-campaigns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ups-billboard, .ups-shelter { position: relative; aspect-ratio: 1.5; overflow: hidden; }
.ups-billboard__print { position: absolute; top: 23%; left: 10%; width: 80%; height: 43%; color: #fff; overflow: hidden; }
.ups-billboard__print .ups-brand { --brand-size: 2.6cqw; }
.ups-billboard__print > p { position: relative; z-index: 1; margin-top: 1.3cqw; font-size: 2cqw; line-height: 1.08; letter-spacing: -0.04em; }
.ups-billboard__print > small { position: absolute; bottom: 0; left: 0; font-size: 0.75cqw; }
.ups-billboard__print > div { position: absolute; right: -3%; bottom: -16%; width: 52%; color: var(--ups-blue); }
.ups-billboard__print > div .ups-mark { width: 100%; height: auto; }
.ups-poster { position: absolute; top: 20%; height: 58%; overflow: hidden; padding: 0.7cqw; }
.ups-poster .ups-brand { --brand-size: 1.55cqw; }
.ups-poster > p { position: relative; z-index: 1; margin-top: 1.5cqw; font-size: 1.05cqw; line-height: 1.2; letter-spacing: -0.03em; }
.ups-poster > small { position: absolute; bottom: 0.5cqw; left: 0.7cqw; font-size: 0.55cqw; }
.ups-poster--one { left: 10%; width: 22%; color: #fff; }
.ups-poster--two { left: 39%; width: 22%; }
.ups-poster--three { left: 68%; width: 22%; color: #fff; }
.ups-poster--one > div, .ups-poster--three > div { position: absolute; bottom: 1.5cqw; left: 0; width: 100%; }
.ups-poster--one > div .ups-mark, .ups-poster--three > div .ups-mark { width: 100%; height: auto; }
.ups-poster--three > div { color: var(--ups-blue); }
.ups-poster--two > div { display: flex; flex-direction: column; gap: 1cqw; margin-top: 1.7cqw; }
.ups-poster--two > div > span { display: flex; align-items: center; gap: 0.4cqw; font-size: 0.6cqw; }
.ups-poster--two .ups-icon { width: 1.65cqw; height: 1.65cqw; flex: none; }
.ups-extras { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 8px; }
.ups-app-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; background: radial-gradient(ellipse at 100% 0, #2a6fff 0%, #073cbb 40%, #020e32 100%); color: #fff; overflow: hidden; }
.ups-app-icon { width: 50%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 3cqw; background: #fff; color: var(--ups-blue); font-size: 7cqw; transform: rotate(-12deg); box-shadow: 1cqw 2cqw 3cqw #0005, inset 0 0 0 1px #fff; }
.ups-app-preview > p { margin-top: 2cqw; font-size: 1.6cqw; }
.ups-app-preview > span { margin-top: 1cqw; font-size: 0.8cqw; opacity: 0.75; }
.ups-merch { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ups-merch__bottle, .ups-merch__notebook, .ups-merch__cap { position: absolute; transform: translate(-50%, -50%); }
.ups-merch__bottle { top: 50%; left: 17%; }
.ups-merch__notebook { top: 37%; left: 43%; }
.ups-merch__cap { top: 58%; left: 81%; transform: translate(-50%, -50%) rotate(-8deg); }
.ups-merch .ups-brand { --brand-size: 2cqw; }
.ups-merch__bottle .ups-brand { --brand-size: 1.8cqw; }
.ups-case-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 3cqw; }
.ups-case-footer .ups-brand { --brand-size: 2.7cqw; }
.ups-case-footer > p { font-size: 1cqw; }
.ups-case-footer > p > span { color: var(--ups-blue); }
.ups-case-footer > span { color: #73777d; font-size: 0.85cqw; }
@media (max-width: 640px) {
  .case--upside .case__card { padding: 5px; border-radius: 16px; }
  .ups-case { border-radius: 12px; }
  .ups-hero { aspect-ratio: auto; min-height: 0; padding-bottom: 50cqw; background: #f6f9ff; }
  .ups-hero > .ups-photo { top: auto; bottom: 0; width: 100%; height: 50cqw; object-fit: contain; }
  .ups-hero__copy { width: 100%; padding: 12% 6% 8%; }
  .ups-hero__wash { inset: auto 0 44cqw; height: 6cqw; background: linear-gradient(180deg, #f6f9ff, #f6f9ff00); }
  .ups-eyebrow { font-size: 2cqw; margin-bottom: 5cqw; }
  .ups-hero h3 { --brand-size: 14cqw; margin-bottom: 8cqw; }
  .ups-headline { font-size: 7cqw; }
  .ups-intro { max-width: 58cqw; font-size: 3cqw; margin-top: 5cqw; }
  .ups-rule { width: 7cqw; height: 0.7cqw; margin-top: 4cqw; }
  .ups-system { grid-template-columns: minmax(0, 1fr); gap: 5cqw; padding: 4cqw; }
  .ups-color { padding: 4cqw 3cqw; }
  .ups-color h4 { font-size: 3cqw; }
  .ups-color > p { font-size: 2.8cqw; margin-top: 1.5cqw; }
  .ups-color > span { margin: 3cqw 0 2cqw; width: 5cqw; }
  .ups-color small { font-size: 2.5cqw; }
  .ups-variations h4 { font-size: 3.5cqw; margin-bottom: 3cqw; }
  .ups-variations > div { gap: 4cqw; }
  .ups-app { font-size: 12cqw; border-radius: 5cqw; }
  .ups-devices { grid-template-columns: 1fr 1fr; height: auto; gap: 6px; }
  .ups-badge, .ups-mobile { height: 74cqw; }
  .ups-phone { padding: 6.6cqw 2cqw 3.6cqw; border-width: 0.7cqw; border-radius: 5cqw; }
  .ups-phone__island { height: 2cqw; top: 1.2cqw; border-radius: 2cqw; }
  .ups-phone__nav { font-size: 2.6cqw; }
  .ups-phone__nav .ups-brand { --brand-size: 4cqw; }
  .ups-phone__title { font-size: 3.3cqw; margin-top: 2.8cqw; }
  .ups-phone__description { font-size: 1.5cqw; margin-top: 1.8cqw; }
  .ups-phone .ups-demo-button { font-size: 1.4cqw; padding: 1.2cqw 1.4cqw; margin-top: 2.2cqw; }
  .ups-phone__services { margin-top: 3cqw; gap: 1.7cqw; }
  .ups-phone__services > div { font-size: 1.38cqw; gap: 1.2cqw; }
  .ups-phone__services .ups-icon { width: 2.7cqw; height: 2.7cqw; }
  .ups-device-label { font-size: 1.6cqw; bottom: 1.5cqw; }
  .ups-desktop { grid-column: 1 / -1; height: 68cqw; }
  .ups-laptop__screen { padding: 3cqw; border-width: 1.3cqw; border-radius: 2cqw; }
  .ups-laptop__nav { font-size: 1.3cqw; }
  .ups-laptop__nav .ups-brand { --brand-size: 4cqw; }
  .ups-nav-contact { padding: 1cqw 2cqw; }
  .ups-laptop__content { gap: 2cqw; margin-top: 4cqw; }
  .ups-laptop__content > div > p { font-size: 5cqw; }
  .ups-laptop__content small { font-size: 1.6cqw; margin-top: 2cqw; }
  .ups-laptop__content .ups-demo-button { font-size: 1.6cqw; padding: 1.2cqw 2cqw; margin-top: 3cqw; }
  .ups-laptop__footer { font-size: 1.8cqw; padding-top: 3cqw; margin-top: 4cqw; }
  .ups-laptop__base { height: 2cqw; }
  .ups-services { grid-template-columns: minmax(0, 1fr); gap: 6cqw; padding: 7cqw 5cqw; }
  .ups-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6cqw; }
  .ups-service .ups-icon { width: 8cqw; height: 8cqw; }
  .ups-service h5 { font-size: 4cqw; margin-top: 2cqw; }
  .ups-service > p { font-size: 2.7cqw; margin-top: 2cqw; }
  .ups-promise { padding: 5cqw 0 0; border-left: 0; border-top: 1px solid #ccd0d8; }
  .ups-promise h4 { font-size: 6cqw; }
  .ups-campaigns { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ups-billboard__print .ups-brand { --brand-size: 5.2cqw; }
  .ups-billboard__print > p { font-size: 4cqw; margin-top: 3cqw; }
  .ups-billboard__print > small { font-size: 1.5cqw; }
  .ups-poster { padding: 1.5cqw; }
  .ups-poster .ups-brand { --brand-size: 3.1cqw; }
  .ups-poster > p { font-size: 2.1cqw; margin-top: 3cqw; }
  .ups-poster > small { font-size: 1.1cqw; bottom: 1cqw; left: 1.5cqw; }
  .ups-poster--one > div, .ups-poster--three > div { bottom: 3cqw; }
  .ups-poster--two > div { margin-top: 4cqw; gap: 2.2cqw; }
  .ups-poster--two > div > span { font-size: 1.25cqw; gap: 1cqw; }
  .ups-poster--two .ups-icon { width: 3.3cqw; height: 3.3cqw; }
  .ups-extras { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }
  .ups-app-preview { min-height: 65cqw; }
  .ups-app-icon { width: 28%; font-size: 12cqw; border-radius: 5cqw; }
  .ups-app-preview > p { font-size: 3.5cqw; margin-top: 4cqw; }
  .ups-app-preview > span { font-size: 2.2cqw; margin-top: 2cqw; }
  .ups-merch .ups-brand { --brand-size: 3cqw; }
  .ups-merch__bottle .ups-brand { --brand-size: 2.7cqw; }
  .ups-case-footer { padding: 6cqw; gap: 4cqw; }
  .ups-case-footer .ups-brand { --brand-size: 6cqw; }
  .ups-case-footer > p { width: 100%; font-size: 2.7cqw; }
  .ups-case-footer > span { font-size: 2.2cqw; }
}